import { useState, useEffect } from 'react';

interface AppointmentDetail {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  datetime: string;
  type: string;
  calendar: string;
  duration: string;
  price: string;
  notes: string;
  canceled: boolean;
  forms: any[];
}

export default function AppointmentDetail() {
  const [appointment, setAppointment] = useState<AppointmentDetail | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Mock data
    const mockAppointment: AppointmentDetail = {
      id: 1,
      firstName: 'John',
      lastName: 'Doe',
      email: 'john@example.com',
      phone: '555-1234',
      datetime: new Date().toISOString(),
      type: 'Consultation',
      calendar: 'Main Calendar',
      duration: '60 minutes',
      price: '$100.00',
      notes: 'First time client',
      canceled: false,
      forms: [],
    };
    setAppointment(mockAppointment);
    setLoading(false);
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-900 text-gray-100 flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-400"></div>
      </div>
    );
  }

  if (!appointment) return null;

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 p-6">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold mb-8 text-blue-400">Appointment Details</h1>
        
        <div className="bg-gray-800 rounded-lg shadow-xl p-8 space-y-6">
          <div className="grid grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-2">Client Name</label>
              <p className="text-lg">{appointment.firstName} {appointment.lastName}</p>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-2">Email</label>
              <p className="text-lg">{appointment.email}</p>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-2">Phone</label>
              <p className="text-lg">{appointment.phone}</p>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-2">Date & Time</label>
              <p className="text-lg">{new Date(appointment.datetime).toLocaleString()}</p>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-2">Type</label>
              <p className="text-lg">{appointment.type}</p>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-2">Duration</label>
              <p className="text-lg">{appointment.duration}</p>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-2">Price</label>
              <p className="text-lg">{appointment.price}</p>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-2">Status</label>
              <span className={`px-3 py-1 rounded-full text-sm ${appointment.canceled ? 'bg-red-900 text-red-200' : 'bg-green-900 text-green-200'}`}>
                {appointment.canceled ? 'Canceled' : 'Confirmed'}
              </span>
            </div>
          </div>
          
          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">Notes</label>
            <p className="text-lg bg-gray-700 p-4 rounded">{appointment.notes || 'No notes'}</p>
          </div>

          <div className="flex gap-4 pt-6">
            <button className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg font-medium">
              Edit
            </button>
            <button className="bg-yellow-600 hover:bg-yellow-700 px-6 py-2 rounded-lg font-medium">
              Reschedule
            </button>
            <button className="bg-red-600 hover:bg-red-700 px-6 py-2 rounded-lg font-medium">
              Cancel
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
