import { useState, useEffect } from 'react';

interface Client {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  totalAppointments: number;
}

export default function ClientDirectory() {
  const [clients, setClients] = useState<Client[]>([]);
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const mockClients: Client[] = [
      { id: 1, firstName: 'John', lastName: 'Doe', email: 'john@example.com', phone: '555-1234', totalAppointments: 5 },
      { id: 2, firstName: 'Jane', lastName: 'Smith', email: 'jane@example.com', phone: '555-5678', totalAppointments: 3 },
    ];
    setClients(mockClients);
    setLoading(false);
  }, []);

  const filteredClients = clients.filter(client =>
    `${client.firstName} ${client.lastName} ${client.email}`.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-3xl font-bold text-blue-400">Client Directory</h1>
          <button className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg font-medium">
            + New Client
          </button>
        </div>
        
        <div className="mb-6">
          <input
            type="text"
            placeholder="Search clients..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 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="grid gap-4">
            {filteredClients.map((client) => (
              <div key={client.id} className="bg-gray-800 rounded-lg p-6 hover:bg-gray-750 cursor-pointer transition">
                <div className="flex justify-between items-start">
                  <div>
                    <h3 className="text-xl font-semibold mb-2">{client.firstName} {client.lastName}</h3>
                    <p className="text-gray-400 mb-1">{client.email}</p>
                    <p className="text-gray-400">{client.phone}</p>
                  </div>
                  <div className="text-right">
                    <p className="text-sm text-gray-400">Total Appointments</p>
                    <p className="text-2xl font-bold text-blue-400">{client.totalAppointments}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
