import { useState, useEffect } from 'react';

interface ClientDetail {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  notes: string;
  appointments: { id: number; date: string; type: string; status: string }[];
}

export default function ClientDetail() {
  const [client, setClient] = useState<ClientDetail | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const mockClient: ClientDetail = {
      id: 1,
      firstName: 'John',
      lastName: 'Doe',
      email: 'john@example.com',
      phone: '555-1234',
      notes: 'VIP client, prefers morning appointments',
      appointments: [
        { id: 1, date: '2024-01-15', type: 'Consultation', status: 'Completed' },
        { id: 2, date: '2024-02-20', type: 'Follow-up', status: 'Confirmed' },
      ],
    };
    setClient(mockClient);
    setLoading(false);
  }, []);

  if (loading || !client) {
    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>
    );
  }

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 p-6">
      <div className="max-w-5xl mx-auto">
        <h1 className="text-3xl font-bold mb-8 text-blue-400">Client Profile</h1>
        
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-1 bg-gray-800 rounded-lg p-6">
            <h2 className="text-xl font-semibold mb-4">Contact Information</h2>
            <div className="space-y-4">
              <div>
                <label className="text-sm text-gray-400">Name</label>
                <p className="text-lg">{client.firstName} {client.lastName}</p>
              </div>
              <div>
                <label className="text-sm text-gray-400">Email</label>
                <p className="text-lg">{client.email}</p>
              </div>
              <div>
                <label className="text-sm text-gray-400">Phone</label>
                <p className="text-lg">{client.phone}</p>
              </div>
              <div>
                <label className="text-sm text-gray-400">Notes</label>
                <p className="text-sm bg-gray-700 p-3 rounded mt-1">{client.notes}</p>
              </div>
            </div>
            <button className="w-full mt-6 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg font-medium">
              Edit Profile
            </button>
          </div>

          <div className="lg:col-span-2 bg-gray-800 rounded-lg p-6">
            <h2 className="text-xl font-semibold mb-4">Appointment History</h2>
            <div className="space-y-3">
              {client.appointments.map((apt) => (
                <div key={apt.id} className="bg-gray-700 rounded-lg p-4 flex justify-between items-center">
                  <div>
                    <p className="font-medium">{apt.type}</p>
                    <p className="text-sm text-gray-400">{apt.date}</p>
                  </div>
                  <span className={`px-3 py-1 rounded-full text-xs ${apt.status === 'Completed' ? 'bg-green-900 text-green-200' : 'bg-blue-900 text-blue-200'}`}>
                    {apt.status}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
