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

interface Client {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  notes: string;
  createdDate: string;
  totalAppointments: number;
  upcomingAppointments: number;
  lastAppointment: string;
}

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

  useEffect(() => {
    setClient({
      id: 123,
      firstName: 'John',
      lastName: 'Doe',
      email: 'john.doe@example.com',
      phone: '(555) 123-4567',
      notes: 'Prefers morning appointments. VIP client.',
      createdDate: '2023-06-15',
      totalAppointments: 12,
      upcomingAppointments: 2,
      lastAppointment: '2024-02-01T10:00:00'
    });
    setLoading(false);
  }, []);

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

  return (
    <div className="client-detail">
      <header>
        <h1>👤 {client.firstName} {client.lastName}</h1>
        <div className="actions">
          <button onClick={() => setEditing(!editing)}>{editing ? '✓ Save' : '✏️ Edit'}</button>
          <button className="danger">🗑️ Delete</button>
        </div>
      </header>

      <div className="detail-grid">
        <section className="card">
          <h2>Contact Information</h2>
          <div className="info-list">
            <div className="info-item"><span>Email:</span><span>{client.email}</span></div>
            <div className="info-item"><span>Phone:</span><span>{client.phone}</span></div>
            <div className="info-item"><span>Client Since:</span><span>{new Date(client.createdDate).toLocaleDateString()}</span></div>
          </div>
        </section>

        <section className="card">
          <h2>Appointment Stats</h2>
          <div className="info-list">
            <div className="info-item"><span>Total:</span><span>{client.totalAppointments}</span></div>
            <div className="info-item"><span>Upcoming:</span><span>{client.upcomingAppointments}</span></div>
            <div className="info-item"><span>Last:</span><span>{new Date(client.lastAppointment).toLocaleDateString()}</span></div>
          </div>
        </section>

        <section className="card full-width">
          <h2>Notes</h2>
          {editing ? <textarea defaultValue={client.notes} rows={4} /> : <p>{client.notes}</p>}
        </section>
      </div>
    </div>
  );
}
