anotherboobsdirectory/packages/frontend/src/components/CelebrityList.jsx

import React, { useState, useEffect, useMemo } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { getCelebrities, deleteCelebrity } from '../services/api';
import './CelebrityList.css';

const EditIcon = () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>;
const DeleteIcon = () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>;
const MoreIcon = () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>;

function CelebrityList() {
  const [celebrities, setCelebrities] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm);
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);
  
  const navigate = useNavigate();

  // Effetto per "debouncare" il termine di ricerca
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedSearchTerm(searchTerm);
    }, 300); // Attende 300ms dopo l'ultima digitazione prima di aggiornare

    return () => {
      clearTimeout(handler);
    };
  }, [searchTerm]);

  // Effetto per caricare i dati quando il termine di ricerca (debounced) cambia
  useEffect(() => {
    fetchCelebrities();
  }, [debouncedSearchTerm]);

  const fetchCelebrities = async () => {
    try {
      setLoading(true);
      const data = await getCelebrities(debouncedSearchTerm);
      setCelebrities(data);
      setError(null);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async (id, name) => {
    if (window.confirm(`Sei sicuro di voler eliminare ${name}?`)) {
      try {
        await deleteCelebrity(id);
        setCelebrities(prev => prev.filter((c) => c.id !== id));
      } catch (err) {
        alert(`Errore: ${err.message}`);
      }
    }
  };
  
  // La paginazione ora opera sulla lista (già filtrata) ricevuta dal backend
  const paginatedCelebrities = useMemo(() => {
    const startIndex = (currentPage - 1) * itemsPerPage;
    return celebrities.slice(startIndex, startIndex + itemsPerPage);
  }, [celebrities, currentPage, itemsPerPage]);

  const totalPages = Math.ceil(celebrities.length / itemsPerPage);

  const renderPagination = () => (
    <div className="pagination-controls">
      <span>
        Pagina {currentPage} di {totalPages} ({celebrities.length} risultati)
      </span>
      <div className="grid">
        <button onClick={() => setCurrentPage(p => Math.max(1, p - 1))} disabled={currentPage === 1}>
          Precedente
        </button>
        <button onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))} disabled={currentPage === totalPages}>
          Successiva
        </button>
      </div>
      <select value={itemsPerPage} onChange={e => { setItemsPerPage(Number(e.target.value)); setCurrentPage(1); }}>
        <option value="5">5 per pagina</option>
        <option value="10">10 per pagina</option>
        <option value="20">20 per pagina</option>
      </select>
    </div>
  );
  
  const renderEmptyState = () => (
      <div className="empty-state">
          <h3>Nessun Profilo Trovato</h3>
          <p>{searchTerm ? "Prova a modificare i termini della ricerca." : "Inizia aggiungendo una nuova celebrità."}</p>
          <Link to="/celebrity/new" role="button" className="primary">+ Aggiungi una celebrità</Link>
      </div>
  );

  return (
    <div className="celebrity-list-container">
      <header className="list-header">
        <h1>Catalogo Celebrità</h1>
        <Link to="/celebrity/new" role="button">
          + Aggiungi Profilo
        </Link>
      </header>

      <div className="list-controls">
        <input
          type="search"
          placeholder="Cerca per nome o alias..."
          value={searchTerm}
          onChange={(e) => { setSearchTerm(e.target.value); setCurrentPage(1); }}
        />
      </div>
      
      {loading && <article aria-busy="true">Ricerca in corso...</article>}
      {error && <p className="error-message">Errore: {error}</p>}
      
      {!loading && !error && (
        <>
          {paginatedCelebrities.length === 0 ? renderEmptyState() : (
            <>
              <div className="table-responsive">
                <table>
                  <thead>
                    <tr>
                      <th scope="col" style={{ width: '50px' }}></th>
                      <th scope="col">Nome</th>
                      <th scope="col">Misure (S-V-F)</th>
                      <th scope="col">Taglia Reggiseno</th>
                      <th scope="col">Naturale?</th>
                      <th scope="col" style={{ width: '80px', textAlign: 'center' }}>Azioni</th>
                    </tr>
                  </thead>
                  <tbody>
                    {paginatedCelebrities.map((celeb) => (
                      <tr key={celeb.id}>
                        <td>
                          <img src={celeb.profile_image ? `/api/uploads/${celeb.profile_image.file_path}` : `https://i.pravatar.cc/50?u=${celeb.id}`} alt={celeb.name} className="avatar-image" />
                        </td>
                        <td>
                          <Link to={`/celebrity/${celeb.id}`} className="celeb-link">
                            <strong>{celeb.name}</strong>
                          </Link>
                        </td>
                        <td>
                          {celeb.bust_cm || '?'}-{celeb.waist_cm || '?'}-{celeb.hips_cm || '?'} cm
                        </td>
                        <td>
                          {celeb.bra_band_size && celeb.bra_cup_size
                            ? `${celeb.bra_band_size}${celeb.bra_cup_size} (${celeb.bra_size_system || 'N/A'})`
                            : 'N/A'}
                        </td>
                        <td>
                          {celeb.boobs_are_natural === null ? '?' : celeb.boobs_are_natural ? 'Sì' : 'No'}
                        </td>
                        <td className="actions-cell">
                          <details role="list" dir="rtl">
                            <summary aria-haspopup="listbox" role="button" className="outline actions-button"><MoreIcon/></summary>
                            <ul role="listbox">
                              <li><a href="#" onClick={(e) => { e.preventDefault(); navigate(`/celebrity/${celeb.id}`); }}><EditIcon/> Modifica</a></li>
                              <li><a href="#" onClick={(e) => { e.preventDefault(); handleDelete(celeb.id, celeb.name); }} className="danger"><DeleteIcon/> Elimina</a></li>
                            </ul>
                          </details>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              {totalPages > 1 && renderPagination()}
            </>
          )}
        </>
      )}
    </div>
  );
}

export default CelebrityList;