import React, { useState, useEffect } from 'react';
import './styles.css';

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(() => {
    setClients(Array.from({ length: 30 }, (_, i) => ({
      id: i + 1,
      firstName: ['John', 'Jane', 'Bob', 'Alice', 'Charlie', 'Diana'][i % 6],
      lastName: ['Doe', 'Smith', 'Johnson', 'Williams', 'Brown', 'Davis'][i % 6],
      email: `client${i}@example.com`,
      phone: `(555) ${String(i).padStart(3, '0')}-4567`,
      totalAppointments: Math.floor(Math.random() * 20) + 1
    })));
    setLoading(false);
  }, []);

  const filtered = clients.filter(c => 
    c.firstName.toLowerCase().includes(search.toLowerCase()) ||
    c.lastName.toLowerCase().includes(search.toLowerCase()) ||
    c.email.toLowerCase().includes(search.toLowerCase())
  );

  if (loading) return <div className="loading"><div className="spinner"></div></div>;

  return (
    <div className="client-directory">
      <header>
        <h1>👥 Client Directory</h1>
        <button>➕ Add Client</button>
      </header>
      <input type="text" placeholder="Search clients..." value={search} onChange={(e) => setSearch(e.target.value)} className="search" />
      <div className="clients-grid">
        {filtered.map(client => (
          <div key={client.id} className="client-card">
            <div className="client-avatar">{client.firstName[0]}{client.lastName[0]}</div>
            <h3>{client.firstName} {client.lastName}</h3>
            <p>{client.email}</p>
            <p>{client.phone}</p>
            <span className="appointments-badge">{client.totalAppointments} appointments</span>
            <button className="view-btn">View Details →</button>
          </div>
        ))}
      </div>
    </div>
  );
}
