import React, { useState, useEffect } from 'react';
import { Calendar, Clock, User } from 'lucide-react';

export default function EmployeeSchedule() {
  const [shifts, setShifts] = useState<any[]>([]);
  const [employees, setEmployees] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    setLoading(true);
    try {
      const empResult = await window.mcp.callTool('clover_list_employees', {});
      setEmployees(empResult.employees || []);
      
      // Get shifts for first employee if available
      if (empResult.employees?.length > 0) {
        const shiftResult = await window.mcp.callTool('clover_list_employee_shifts', {
          employeeId: empResult.employees[0].id,
        });
        setShifts(shiftResult.elements || []);
      }
    } catch (error) {
      console.error('Failed to fetch schedule:', error);
    } finally {
      setLoading(false);
    }
  };

  const clockIn = async (employeeId: string) => {
    try {
      await window.mcp.callTool('clover_clock_in_employee', { employeeId });
      alert('Clocked in successfully');
      fetchData();
    } catch (error) {
      alert('Failed to clock in');
    }
  };

  return (
    <div className="p-6 bg-gray-50 min-h-screen">
      <h1 className="text-3xl font-bold text-gray-900 mb-6">Employee Schedule</h1>

      <div className="bg-white rounded-lg shadow p-6 mb-6">
        <h2 className="text-xl font-semibold mb-4">Active Employees</h2>
        {loading ? (
          <p className="text-gray-500">Loading...</p>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {employees.map((emp) => (
              <div key={emp.id} className="p-4 bg-gray-50 rounded-lg">
                <div className="flex items-center gap-3 mb-3">
                  <User className="w-6 h-6 text-blue-600" />
                  <div>
                    <p className="font-semibold">{emp.name}</p>
                    <p className="text-sm text-gray-600">{emp.role}</p>
                  </div>
                </div>
                <button
                  onClick={() => clockIn(emp.id)}
                  className="w-full px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
                >
                  Clock In
                </button>
              </div>
            ))}
          </div>
        )}
      </div>

      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-xl font-semibold mb-4">Recent Shifts</h2>
        {shifts.length > 0 ? (
          <div className="space-y-3">
            {shifts.map((shift) => (
              <div key={shift.id} className="p-4 bg-gray-50 rounded-lg flex justify-between">
                <div>
                  <p className="font-medium">Shift #{shift.id.slice(0, 8)}</p>
                  <p className="text-sm text-gray-600">
                    {new Date(shift.inTime).toLocaleString()}
                  </p>
                </div>
                {shift.outTime && (
                  <p className="text-sm text-gray-600">
                    Out: {new Date(shift.outTime).toLocaleString()}
                  </p>
                )}
              </div>
            ))}
          </div>
        ) : (
          <p className="text-gray-500">No shifts found</p>
        )}
      </div>
    </div>
  );
}
