// components/admin/Classi.jsx
function Classi() {
    const [classi, setClassi] = React.useState([]);
    const [modale, setModale] = React.useState(null);

    async function carica() {
        setClassi(await api('/alunni/classi/lista') || []);
    }
    React.useEffect(() => { carica(); }, []);

    async function salva() {
        const { id, ...body } = modale;
        // Auto-genera nome se non inserito: es. "1A"
        if (!body.nome) body.nome = `${body.anno}${body.sezione}`;
        const r = id
            ? await api(`/alunni/classi/${id}`, 'PUT', body)
            : await api('/alunni/classi', 'POST', body);
        if (r?.errore) return toast(r.errore, 'err');
        toast('Salvato', 'ok');
        setModale(null);
        carica();
    }

    async function elimina(id) {
        if (!confirm('Eliminare questa classe?')) return;
        const r = await api(`/alunni/classi/${id}`, 'DELETE');
        if (r?.errore) return toast(r.errore, 'err');
        toast('Eliminata', 'ok');
        carica();
    }

    // Raggruppa per anno
    const perAnno = [1, 2, 3].map(a => ({
        anno: a,
        classi: classi.filter(c => c.anno === a || c.anno === String(a))
    }));

    const vuoto = () => ({ nome: '', anno: 1, sezione: 'A' });
    const set = k => e => setModale({ ...modale, [k]: e.target.value });

    return (
        <div>
            <div className="page-header">
                <h1 className="page-title">Classi e sezioni</h1>
                <div className="page-actions">
                    <button className="btn btn-primary" onClick={() => setModale(vuoto())}>+ Nuova classe</button>
                </div>
            </div>

            {perAnno.map(({ anno, classi }) => (
                <div className="card" key={anno} style={{ marginBottom: '1rem' }}>
                    <div style={{ fontWeight: 700, marginBottom: '.75rem', color: 'var(--ink2)', fontSize: '.85rem', textTransform: 'uppercase', letterSpacing: '.06em' }}>
                        {anno}° Anno
                    </div>
                    {classi.length === 0
                        ? <p style={{ color: 'var(--ink2)', fontSize: '.875rem' }}>Nessuna sezione configurata</p>
                        : (
                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '.5rem' }}>
                                {classi.map(c => (
                                    <div key={c.id} style={{
                                        display: 'flex', alignItems: 'center', gap: '.5rem',
                                        background: 'var(--bg)', border: '1px solid var(--border)',
                                        borderRadius: 8, padding: '.45rem .75rem'
                                    }}>
                                        <span style={{ fontWeight: 700, fontSize: '1.1rem' }}>{c.nome}</span>
                                        {c.sezione && <span className="badge badge-gray">{c.sezione}</span>}
                                        <button className="btn btn-ghost btn-sm" style={{ padding: '.2rem .4rem' }}
                                            onClick={() => setModale({ id: c.id, nome: c.nome, anno: c.anno, sezione: c.sezione || '' })}>✏️</button>
                                        <button className="btn btn-danger btn-sm" style={{ padding: '.2rem .4rem' }}
                                            onClick={() => elimina(c.id)}>🗑</button>
                                    </div>
                                ))}
                            </div>
                        )
                    }
                </div>
            ))}

            {modale && (
                <div className="modal-backdrop" onClick={() => setModale(null)}>
                    <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 360 }}>
                        <div className="modal-title">{modale.id ? 'Modifica classe' : 'Nuova classe'}</div>
                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '.5rem' }}>
                            <div className="field">
                                <label>Anno</label>
                                <select value={modale.anno} onChange={set('anno')}>
                                    <option value={1}>1° Media</option>
                                    <option value={2}>2° Media</option>
                                    <option value={3}>3° Media</option>
                                </select>
                            </div>
                            <div className="field">
                                <label>Sezione</label>
                                <input value={modale.sezione} onChange={e => setModale({ ...modale, sezione: e.target.value.toUpperCase() })}
                                    placeholder="A" maxLength={3} style={{ textTransform: 'uppercase' }} />
                            </div>
                        </div>
                        <div className="field">
                            <label>Nome visualizzato</label>
                            <input value={modale.nome}
                                onChange={set('nome')}
                                placeholder={`${modale.anno}${modale.sezione} — lascia vuoto per auto`} />
                            <span style={{ fontSize: '.75rem', color: 'var(--ink2)' }}>Se vuoto verrà usato "{modale.anno}{modale.sezione}"</span>
                        </div>
                        <div className="modal-footer">
                            <button className="btn btn-ghost" onClick={() => setModale(null)}>Annulla</button>
                            <button className="btn btn-primary" onClick={salva}>💾 Salva</button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}