function Configurazione() {
    const [cfg, setCfg] = React.useState(null);
    const [classi, setClassi] = React.useState([]);
    const [prom, setProm] = React.useState({}); // classe_id → nuova_classe_id
    const [nuovoAnno, setNuovoAnno] = React.useState('');
    const [saving, setSaving] = React.useState(false);

    async function carica() {
        const [c, cl] = await Promise.all([api('/config'), api('/alunni/classi/lista')]);
        setCfg(c);
        setClassi(cl || []);

        // Anno successivo suggerito
        if (c?.anno_scolastico) {
            const fine = parseInt(c.anno_scolastico.split('-')[1]);
            setNuovoAnno(`${fine}-${fine + 1}`);
        }

        // Suggerimento promozioni automatiche
        const p = {};
        cl.forEach(cur => {
            if (cur.anno === 3) {
                p[cur.id] = 'DISATTIVA';
            } else {
                const next = cl.find(x => x.anno === cur.anno + 1 && x.sezione === cur.sezione);
                if (next) p[cur.id] = next.id;
            }
        });
        setProm(p);
    }

    React.useEffect(() => { carica(); }, []);

    async function salvaConfig() {
        setSaving(true);
        await api('/config', 'PUT', { quota_annua: cfg.quota_annua });
        toast('Configurazione salvata', 'ok');
        setSaving(false);
    }

    async function chiudiAnno() {
        if (!confirm(`Chiudere l'anno ${cfg.anno_scolastico} e aprire ${nuovoAnno}?\nGli alunni verranno promossi o disattivati secondo lo schema indicato.`)) return;
        
        const promozioni = [];
        const disattiva = [];

        Object.entries(prom).forEach(([classe_id, target]) => {
            if (target === 'DISATTIVA') {
                disattiva.push(parseInt(classe_id));
            } else if (target) {
                promozioni.push({ classe_id: parseInt(classe_id), nuova_classe_id: parseInt(target) });
            }
        });

        const r = await api('/config/chiudi-anno', 'POST', { promozioni, disattiva, nuovo_anno: nuovoAnno });
        if (r?.errore) return toast(r.errore, 'err');
        toast(`Anno ${nuovoAnno} aperto`, 'ok');
        carica();
    }

    async function scaricaBackup() {
        window.location.href = '/config/backup';
        toast('Download backup avviato', 'ok');
    }

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

    const annoAperto = cfg.anno_aperto === '1';

    return (
        <div>
            <div className="page-header">
                <h1 className="page-title">Configurazione</h1>
            </div>

            {/* ── Quota annua ── */}
            <div className="card" style={{ marginBottom: '1rem' }}>
                <div style={{ fontWeight: 700, fontSize: '1rem', marginBottom: '1rem' }}>💰 Quota associativa annua</div>
                <div className="field" style={{ maxWidth: 200 }}>
                    <label>Importo (€)</label>
                    <input
                        type="number" min="0" step="0.50"
                        value={cfg.quota_annua}
                        onChange={e => setCfg({ ...cfg, quota_annua: e.target.value })}
                    />
                </div>
                <button className="btn btn-primary" onClick={salvaConfig} disabled={saving}>
                    {saving ? '…' : '💾 Salva'}
                </button>
            </div>

            {/* ── Anno scolastico ── */}
            <div className="card" style={{ marginBottom: '1rem' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem', flexWrap: 'wrap' }}>
                    <div style={{ fontWeight: 700, fontSize: '1rem' }}>📅 Anno scolastico</div>
                    <span className={`badge ${annoAperto ? 'badge-green' : 'badge-red'}`}>
                        {annoAperto ? '🟢 Aperto' : '🔴 Chiuso'}
                    </span>
                    <span style={{ fontWeight: 600, fontSize: '1.1rem', color: 'var(--accent)' }}>{cfg.anno_scolastico}</span>
                </div>

                <div style={{ borderTop: '1px solid var(--border)', paddingTop: '1rem', marginTop: '.5rem' }}>
                    <div style={{ fontWeight: 600, marginBottom: '.75rem' }}>Chiudi anno e promuovi classi</div>

                    <div className="field" style={{ maxWidth: 200 }}>
                        <label>Nuovo anno scolastico</label>
                        <input
                            type="text" placeholder="es. 2025-2026"
                            value={nuovoAnno}
                            onChange={e => setNuovoAnno(e.target.value)}
                        />
                    </div>

                    {classi.length > 0 && (
                        <div style={{ marginBottom: '1rem' }}>
                            <label style={{ marginBottom: '.5rem' }}>Schema promozioni (configurato in automatico)</label>
                            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px,1fr))', gap: '.5rem' }}>
                                {classi.map(c => (
                                    <div key={c.id} style={{ display: 'flex', alignItems: 'center', gap: '.5rem', background: 'var(--bg)', borderRadius: 8, padding: '.5rem .75rem' }}>
                                        <span style={{ fontWeight: 600, minWidth: 60 }}>{c.nome}</span>
                                        <span style={{ color: 'var(--ink2)', fontSize: '.85rem' }}>→</span>
                                        <select
                                            value={prom[c.id] || ''}
                                            onChange={e => setProm({ ...prom, [c.id]: e.target.value })}
                                            style={{ 
                                                flex: 1, margin: 0, 
                                                color: prom[c.id] === 'DISATTIVA' ? 'var(--red)' : 'inherit',
                                                fontWeight: prom[c.id] === 'DISATTIVA' ? 600 : 400
                                            }}
                                        >
                                            <option value="">— nessun cambio —</option>
                                            <option value="DISATTIVA" style={{ color: 'var(--red)', fontWeight: 600 }}>❌ DISATTIVA (Fine ciclo)</option>
                                            {classi.filter(x => x.id !== c.id).map(x => (
                                                <option key={x.id} value={x.id}>{x.nome}</option>
                                            ))}
                                        </select>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

                    <button className="btn btn-danger" onClick={chiudiAnno}>
                        ⚠️ Chiudi anno {cfg.anno_scolastico} e apri {nuovoAnno}
                    </button>
                    <p style={{ fontSize: '.78rem', color: 'var(--ink2)', marginTop: '.5rem' }}>
                        Questa operazione sposta gli alunni nelle nuove classi e disattiva chi ha terminato il ciclo. I prestiti storici rimangono.
                    </p>
                </div>
            </div>

            {/* ── Backup ── */}
            <div className="card">
                <div style={{ fontWeight: 700, fontSize: '1rem', marginBottom: '.75rem' }}>💾 Backup database</div>
                <p style={{ fontSize: '.875rem', color: 'var(--ink2)', marginBottom: '1rem' }}>
                    Scarica una copia del database SQLite. Conservala in un posto sicuro o su Aruba Cloud.
                </p>
                <button className="btn btn-primary" onClick={scaricaBackup}>
                    ⬇ Scarica backup ({new Date().toLocaleDateString('it')})
                </button>
            </div>
        </div>
    );
}