import { useState, useEffect } from 'react';

interface Appointment {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
  datetime: string;
  type: string;
  calendar: string;
  canceled: boolean;
}

export default function AppointmentCalendar() {
  const [appointments, setAppointments] = useState<Appointment[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);

  useEffect(() => {
    // Mock data for demo - in real app, fetch from MCP
    const mockAppointments: Appointment[] = [
      {
        id: 1,
        firstName: 'John',
        lastName: 'Doe',
        email: 'john@example.com',
        datetime: new Date().toISOString(),
        type: 'Consultation',
        calendar: 'Main Calendar',
        canceled: false,
      },
    ];
    setAppointments(mockAppointments);
    setLoading(false);
  }, [selectedDate]);

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 p-6">
      <div className="max-w-7xl mx-auto">
        <h1 className="text-3xl font-bold mb-8 text-blue-400">Appointment Calendar</h1>
        
        <div className="mb-6">
          <input
            type="date"
            value={selectedDate}
            onChange={(e) => setSelectedDate(e.target.value)}
            className="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        {loading ? (
          <div className="text-center py-12">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-400 mx-auto"></div>
          </div>
        ) : (
          <div className="bg-gray-800 rounded-lg shadow-xl overflow-hidden">
            <table className="w-full">
              <thead className="bg-gray-700">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Time</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Client</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Type</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Calendar</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-700">
                {appointments.map((apt) => (
                  <tr key={apt.id} className="hover:bg-gray-750">
                    <td className="px-6 py-4 whitespace-nowrap">
                      {new Date(apt.datetime).toLocaleTimeString()}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      {apt.firstName} {apt.lastName}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">{apt.type}</td>
                    <td className="px-6 py-4 whitespace-nowrap">{apt.calendar}</td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`px-2 py-1 rounded-full text-xs ${apt.canceled ? 'bg-red-900 text-red-200' : 'bg-green-900 text-green-200'}`}>
                        {apt.canceled ? 'Canceled' : 'Confirmed'}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}
