import React, { useEffect, useState, useRef, useMemo } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom';

// store
import { useStoreValue } from '../../../store';

// components
import { Button } from 'primereact/button';
import { Toast } from 'primereact/toast';
import { Tag } from 'primereact/tag';
import { Skeleton } from 'primereact/skeleton';
import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
import { InputText } from 'primereact/inputtext';
import { InputNumber } from 'primereact/inputnumber';
import { InputSwitch } from 'primereact/inputswitch';
import { MultiSelect } from 'primereact/multiselect';
import { Dropdown } from 'primereact/dropdown';
import { Calendar } from 'primereact/calendar';
import { InputTextarea } from 'primereact/inputtextarea';
import BlockingOverlay from '../../../components/BlockingOverlay';

// api
import RendicontazioneService from '../service/rendicontazioneService';
import SchemaTemplatePicker from '../components/SchemaTemplatePicker';
import BandoService from '../../../service/bando-service';

// ---------- costanti ----------
const IVA_REGIMES = [
    { value: 'ORDINARIO', label: 'Ordinario' },
    { value: 'FORFETTARIO', label: 'Forfettario' },
    { value: 'ESENTE', label: 'Esente' }
];

const AMOUNT_BASIS_OPTIONS = [
    { value: 'imponibile_always', label: 'Solo imponibile (sempre)' },
    { value: 'imponibile_only_ordinario', label: 'Imponibile in ordinario, totale in forfettario' },
    { value: 'totale_always', label: 'Totale IVA inclusa (sempre)' }
];

const PERIOD_START_RULES = [
    { value: 'erogato_date', label: 'Data di erogazione del finanziamento' },
    { value: 'contract_signed_date', label: 'Data firma contratto' },
    { value: 'custom', label: 'Data personalizzata' }
];

const ULA_DOC_TYPES = [
    { value: 'LUL', label: 'Libro Unico del Lavoro (LUL)' },
    { value: 'GESTIONALE_PAGHE', label: 'Estratto gestionale paghe' },
    { value: 'DICHIARAZIONE_CDL', label: 'Dichiarazione Consulente del Lavoro' },
    { value: 'ALTRO', label: 'Altro documento di supporto' }
];

// ---------- helpers JSON <-> form ----------
const schemaJsonToForm = (j) => {
    if (!j || !j.sections) return null;
    const general = j.sections.find(s => s.type === 'static_fields') || {};
    const expenses = j.sections.find(s => s.type === 'category_grid') || {};
    const ula = j.sections.find(s => s.type === 'ula_block') || {};
    const docs = j.sections.find(s => s.type === 'document_checklist') || {};
    const gate = j.gate_rules || {};
    const ivaField = (general.fields || []).find(f => f.id === 'iva_regime');
    const ivaAllowed = ivaField && ivaField.options
        ? ivaField.options.map(o => typeof o === 'string' ? o : o.value)
        : ['ORDINARIO','FORFETTARIO','ESENTE'];
    const parseList = (list) => (list || []).map(x =>
        typeof x === 'string' ? { code: x, label: x } : { code: x.code || '', label: x.label || x.code || '' });
    return {
        amount_min: gate.amount_range?.min ?? 5000,
        amount_max: gate.amount_range?.max ?? 25000,
        period_start: gate.period_start ? new Date(gate.period_start) : null,
        period_end: gate.period_end ? new Date(gate.period_end) : null,
        amount_basis: gate.amount_basis || (gate.iva_ordinario_imponibile_only === false ? 'totale_always' : 'imponibile_only_ordinario'),
        period_start_rule: gate.period_start_rule ?? 'erogato_date',
        iva_regimes_allowed: ivaAllowed,
        iva_ordinario_imponibile_only: gate.iva_ordinario_imponibile_only ?? true,
        categories: (expenses.categories || []).map(c => ({
            code: c.code || '', label: c.label || '',
            description: c.description || '', cap_amount: c.cap_amount ?? null
        })),
        ula_enabled: ula.enabled ?? false,
        ula_threshold: ula.threshold ?? 1.0,
        ula_period_start_rule: ula.period_start_rule ?? 'erogato_date',
        ula_period_end: ula.period_end ? new Date(ula.period_end) : null,
        ula_supporting_doc_required: ula.supporting_doc_required ?? true,
        ula_supporting_doc_types: (ula.supporting_doc_types || []).map(t => typeof t === 'string' ? t : t.code),
        docs_required: parseList(docs.required_types),
        cap_pct_erogato: gate.cap_pct_erogato != null ? Math.round(gate.cap_pct_erogato * 100) : 50,
        cap_absolute: gate.cap_absolute ?? 12500,
        require_invoice_per_category: gate.require_at_least_one_invoice_per_nonzero_category ?? true,
        require_ula_above_threshold: gate.require_ula_above_threshold ?? true,
        require_all_documents_resolved: gate.require_all_documents_resolved ?? true,
        // v2 multi-tranche + custom_checks
        max_tranches: gate.max_tranches ?? 1,
        custom_checks: (j.custom_checks || []).map(cc => ({
            code: cc.code || '',
            label: cc.label || '',
            description: cc.description || '',
            requires_document: !!cc.requires_document,
            required: !!cc.required,
        }))
    };
};

const formToSchemaJson = (f, base = null) => {
    const orig = base || {};
    const fmtDate = (d) => d ? (typeof d === 'string' ? d : d.toISOString().slice(0, 10)) : null;
    return {
        version: orig.version || '1.0',
        template_id: orig.template_id || 'CUSTOM',
        template_label: orig.template_label || 'Schema personalizzato',
        sections: [
            {
                type: 'static_fields', id: 'general', label: 'Dati generali',
                fields: [{
                    id: 'iva_regime', type: 'select', label: 'Regime IVA', required: true,
                    options: IVA_REGIMES.filter(o => f.iva_regimes_allowed.includes(o.value))
                }]
            },
            {
                type: 'category_grid', id: 'expenses', label: 'Spese ammissibili per categoria',
                categories: f.categories,
                invoice_schema: { required_fields: ['invoice_number','invoice_date','payment_date','supplier_name','supplier_vat','description','taxable','vat','total','pdf'] }
            },
            {
                type: 'ula_block', id: 'ula', label: 'Calcolo ULA',
                enabled: f.ula_enabled, threshold: f.ula_threshold,
                period_start_rule: f.ula_period_start_rule,
                period_end: fmtDate(f.ula_period_end),
                supporting_doc_required: f.ula_supporting_doc_required,
                supporting_doc_types: ULA_DOC_TYPES
                    .filter(t => f.ula_supporting_doc_types.includes(t.value))
                    .map(t => ({ code: t.value, label: t.label }))
            },
            {
                type: 'document_checklist', id: 'docs', label: 'Documenti richiesti',
                required_types: f.docs_required
            }
        ],
        gate_rules: {
            amount_range: { min: f.amount_min, max: f.amount_max },
            cap_pct_erogato: f.cap_pct_erogato / 100,
            cap_absolute: f.cap_absolute,
            iva_ordinario_imponibile_only: f.iva_ordinario_imponibile_only,
            period_start_rule: f.period_start_rule,
            period_start: fmtDate(f.period_start),
            period_end: fmtDate(f.period_end),
            amount_basis: f.amount_basis,
            require_at_least_one_invoice_per_nonzero_category: f.require_invoice_per_category,
            require_ula_above_threshold: f.require_ula_above_threshold,
            require_all_documents_resolved: f.require_all_documents_resolved,
            max_tranches: f.max_tranches || 1
        },
        custom_checks: (f.custom_checks || []).map(cc => ({
            code: cc.code,
            label: cc.label,
            description: cc.description,
            requires_document: !!cc.requires_document,
            required: !!cc.required,
        })),
        schema_version: 2
    };
};


const BandoRendicontazioneSchemaEdit = () => {
    const { id } = useParams();
    const navigate = useNavigate();
    const isAsyncRequest = useStoreValue('isAsyncRequest');
    const callId = parseInt(id);

    const [bando, setBando] = useState(null);
    const [bandoLoading, setBandoLoading] = useState(true);
    const [schemaRecord, setSchemaRecord] = useState(null);
    const [schemaLoading, setSchemaLoading] = useState(true);
    const [form, setForm] = useState(null);
    const [dirty, setDirty] = useState(false);
    const toast = useRef(null);

    // ---------- load ----------
    const loadBando = () => {
        setBandoLoading(true);
        BandoService.getBando(callId,
            (r) => { setBando(r?.data || null); setBandoLoading(false); },
            () => setBandoLoading(false));
    };

    const loadSchema = () => {
        setSchemaLoading(true);
        RendicontazioneService.getSchemaByCallId(callId,
            (resp) => {
                const rec = resp?.data || null;
                setSchemaRecord(rec);
                setForm(rec ? schemaJsonToForm(rec.schema_json) : null);
                setDirty(false);
                setSchemaLoading(false);
            },
            (err) => {
                if (err?.status === 404) { setSchemaRecord(null); setForm(null); }
                else toast.current?.show({ severity: 'error', summary: __('Errore caricamento schema','gepafin'), detail: err?.detail });
                setSchemaLoading(false);
            });
    };

    useEffect(() => {
        if (!isNaN(callId)) { loadBando(); loadSchema(); }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [callId]);

    // ---------- updates ----------
    const update = (patch) => { setForm(p => ({ ...p, ...patch })); setDirty(true); };
    const updateCategory = (idx, patch) => {
        setForm(p => ({ ...p, categories: p.categories.map((c,i) => i===idx ? {...c, ...patch} : c) }));
        setDirty(true);
    };
    const addCategory = () => {
        setForm(p => ({ ...p, categories: [...p.categories, { code:'', label:'', description:'', cap_amount:null }] }));
        setDirty(true);
    };
    const removeCategory = (idx) => {
        setForm(p => ({ ...p, categories: p.categories.filter((_,i) => i!==idx) }));
        setDirty(true);
    };
    const updateDoc = (idx, patch) => {
        setForm(p => ({ ...p, docs_required: p.docs_required.map((d,i) => i===idx ? {...d,...patch} : d) }));
        setDirty(true);
    };
    const addDoc = () => {
        setForm(p => ({ ...p, docs_required: [...p.docs_required, { code:'', label:'' }] }));
        setDirty(true);
    };
    const removeDoc = (idx) => {
        setForm(p => ({ ...p, docs_required: p.docs_required.filter((_,i) => i!==idx) }));
        setDirty(true);
    };

    // v2 custom_checks
    const updateCheck = (idx, patch) => {
        setForm(p => ({ ...p, custom_checks: p.custom_checks.map((c,i) => i===idx ? {...c, ...patch} : c) }));
        setDirty(true);
    };
    const addCheck = () => {
        setForm(p => ({ ...p, custom_checks: [...(p.custom_checks || []), { code:'', label:'', description:'', requires_document:false, required:false }] }));
        setDirty(true);
    };
    const removeCheck = (idx) => {
        setForm(p => ({ ...p, custom_checks: p.custom_checks.filter((_,i) => i!==idx) }));
        setDirty(true);
    };

    // ---------- actions ----------
    const handleInitializeRestart = (e) => {
        confirmPopup({
            target: e.currentTarget,
            message: __('Inizializzo lo schema con il template RE-START? Sarà modificabile finché non verrà pubblicato.','gepafin'),
            icon: 'pi pi-info-circle',
            acceptLabel: __('Inizializza','gepafin'), rejectLabel: __('Annulla','gepafin'),
            accept: () => RendicontazioneService.initializeRestartTemplate(callId,
                () => { toast.current?.show({severity:'success', summary: __('Schema inizializzato','gepafin')}); loadSchema(); },
                (err) => toast.current?.show({severity:'error', summary:__('Inizializzazione fallita','gepafin'), detail: err?.detail}))
        });
    };

    const handleSave = () => {
        const newJson = formToSchemaJson(form, schemaRecord?.schema_json);
        RendicontazioneService.updateSchema(callId, newJson,
            (resp) => {
                toast.current?.show({severity:'success', summary: __('Schema salvato','gepafin')});
                setSchemaRecord(resp?.data);
                setForm(schemaJsonToForm(resp?.data?.schema_json));
                setDirty(false);
            },
            (err) => toast.current?.show({severity:'error', summary:__('Salvataggio fallito','gepafin'), detail: err?.detail}));
    };

    const handlePublish = (e) => {
        confirmPopup({
            target: e.currentTarget,
            message: __('Dopo la pubblicazione lo schema non sarà più modificabile e diventerà visibile ai beneficiari. Confermi?','gepafin'),
            icon: 'pi pi-exclamation-triangle',
            acceptLabel: __('Pubblica','gepafin'), rejectLabel: __('Annulla','gepafin'),
            acceptClassName: 'p-button-success',
            accept: () => RendicontazioneService.publishSchema(callId,
                (resp) => { toast.current?.show({severity:'success', summary:__('Schema pubblicato','gepafin')}); setSchemaRecord(resp?.data); },
                (err) => toast.current?.show({severity:'error', summary:__('Pubblicazione fallita','gepafin'), detail: err?.detail}))
        });
    };

    // ---------- render ----------
    const isPublished = schemaRecord?.status === 'PUBLISHED';
    const readOnly = isPublished;
    const hasSchema = !!schemaRecord;

    const statusTag = useMemo(() => {
        if (!hasSchema) return <Tag severity="info" value={__('Non creato','gepafin')} />;
        if (isPublished) return <Tag severity="success" value={__('Pubblicato','gepafin')} />;
        return <Tag severity="warning" value={__('Bozza','gepafin')} />;
    }, [hasSchema, isPublished]);

    return (
        <div className="appPage">
            <Toast ref={toast} />
            <ConfirmPopup />
            <BlockingOverlay isBlocked={isAsyncRequest} />

            {/* HEADER — flex column, border-left */}
            <div className="appPage__pageHeader">
                <h1>{__('Schema rendicontazione','gepafin')}</h1>
                <p>
                    {bandoLoading
                        ? <Skeleton width="20rem" height="1.2rem" />
                        : <>
                            <span className="companyName">{(bando && bando.name) || `Bando #${callId}`}</span>
                            <span style={{ marginLeft: '1rem' }}>{statusTag}</span>
                        </>}
                </p>
            </div>

            <div className="appPage__spacer"></div>

            {/* ACTIONS — torna indietro + salva/pubblica */}
            <div className="appPageSection">
                <div className="appPageSection__actions">
                    <Button type="button" outlined icon="pi pi-arrow-left"
                        label={__('Indietro','gepafin')} onClick={() => navigate('/rendicontazione')} />
                    {hasSchema && !isPublished && (
                        <>
                            <Button type="button" icon="pi pi-save" iconPos="right"
                                label={__('Salva bozza','gepafin')} onClick={handleSave} disabled={!dirty} />
                            <Button type="button" icon="pi pi-check-circle" iconPos="right" severity="success"
                                label={__('Pubblica','gepafin')} onClick={handlePublish} disabled={dirty} />
                        </>
                    )}
                </div>
            </div>

            <div className="appPage__spacer"></div>

            {/* CONTENT */}
            {schemaLoading && (
                <div className="appPageSection">
                    <Skeleton width="100%" height="12rem" />
                </div>
            )}

            {!schemaLoading && !hasSchema && (
                <div className="appPageSection">
                    <SchemaTemplatePicker
                        callId={callId}
                        onInitialized={(data) => {
                            setSchemaRecord(data);
                            setForm(schemaJsonToForm(data.schema_json));
                            setDirty(false);
                            toast.current?.show({
                                severity: 'success',
                                summary: __('Schema inizializzato', 'gepafin'),
                                detail: __('Puoi ora configurare le sezioni e salvare come bozza.', 'gepafin')
                            });
                        }}
                        onError={(err) => toast.current?.show({
                            severity: 'error',
                            summary: __('Inizializzazione fallita', 'gepafin'),
                            detail: err?.detail || err?.message
                        })}
                    />
                </div>
            )}

            {!schemaLoading && hasSchema && form && (
                <form className="appForm p-fluid" onSubmit={(e) => e.preventDefault()}>

                    {/* 1 - IMPORTI E PERIODO */}
                    <div className="appPageSection">
                        <h2>{__('1. Importi ammissibili e periodo','gepafin')}</h2>
                        <div className="appForm__cols">
                            <div className="appForm__field">
                                <label>{__('Importo minimo erogato','gepafin')}</label>
                                <InputNumber value={form.amount_min} onValueChange={(e) => update({amount_min: e.value})}
                                    mode="currency" currency="EUR" locale="it-IT" disabled={readOnly} />
                            </div>
                            <div className="appForm__field">
                                <label>{__('Importo massimo erogato','gepafin')}</label>
                                <InputNumber value={form.amount_max} onValueChange={(e) => update({amount_max: e.value})}
                                    mode="currency" currency="EUR" locale="it-IT" disabled={readOnly} />
                            </div>
                        </div>
                        <div className="appForm__cols">
                            <div className="appForm__field">
                                <label>{__('Inizio periodo — regola','gepafin')}</label>
                                <Dropdown value={form.period_start_rule}
                                    onChange={(e) => update({period_start_rule: e.value})}
                                    options={PERIOD_START_RULES} disabled={readOnly} />
                            </div>
                            <div className="appForm__field">
                                <label>{__('Inizio periodo — data (se fissa)','gepafin')}</label>
                                <Calendar value={form.period_start} onChange={(e) => update({period_start: e.value})}
                                    dateFormat="dd/mm/yy" showIcon disabled={readOnly} />
                                <small className="text-color-secondary">{__("Usata dalla verifica date fatture. Compila se la regola non è 'data erogazione'.",'gepafin')}</small>
                            </div>
                            <div className="appForm__field">
                                <label>{__('Fine periodo','gepafin')}</label>
                                <Calendar value={form.period_end} onChange={(e) => update({period_end: e.value})}
                                    dateFormat="dd/mm/yy" showIcon disabled={readOnly} />
                            </div>
                        </div>

                        <div className="appForm__field" style={{maxWidth: '600px'}}>
                            <label>{__('Base di calcolo ammissibile','gepafin')}</label>
                            <Dropdown value={form.amount_basis}
                                onChange={(e) => update({amount_basis: e.value})}
                                options={AMOUNT_BASIS_OPTIONS} disabled={readOnly} />
                            <small className="text-color-secondary">
                                {__("Determina su quale importo delle fatture si calcola la remissione. La norma del bando può prevedere regimi diversi.", 'gepafin')}
                            </small>
                        </div>
                    </div>

                    <div className="appPage__spacer"></div>

                    {/* 2 - IVA */}
                    <div className="appPageSection">
                        <h2>{__('2. Regime IVA','gepafin')}</h2>
                        <div className="appForm__field">
                            <label>{__('Regimi IVA consentiti','gepafin')}</label>
                            <MultiSelect value={form.iva_regimes_allowed} options={IVA_REGIMES}
                                onChange={(e) => update({iva_regimes_allowed: e.value})}
                                disabled={readOnly} display="chip" placeholder={__('Seleziona regimi','gepafin')} />
                        </div>
                        <div className="appForm__field">
                            <div className="appForm__row">
                                <InputSwitch checked={form.iva_ordinario_imponibile_only}
                                    onChange={(e) => update({iva_ordinario_imponibile_only: e.value})} disabled={readOnly} />
                                <label style={{ cursor: 'pointer' }}
                                    onClick={() => !readOnly && update({iva_ordinario_imponibile_only: !form.iva_ordinario_imponibile_only})}>
                                    {__('Regime ordinario: solo imponibile rendicontabile','gepafin')}
                                </label>
                            </div>
                            <small>{__('Se attivo, in regime ordinario l\'IVA non viene considerata rendicontabile — vale solo la base imponibile della fattura.','gepafin')}</small>
                        </div>
                    </div>

                    <div className="appPage__spacer"></div>

                    {/* 3 - CATEGORIE */}
                    <div className="appPageSection">
                        <h2>{__('3. Categorie di spesa ammissibili','gepafin')} <span style={{fontWeight:400, color:'var(--text-color-secondary)', fontSize:'0.9em'}}>({form.categories.length})</span></h2>

                        <div className="fieldsRepeater">
                            {form.categories.map((c, i) => (
                                <div key={i} className="fieldsRepeater__panel" style={{ padding:'1rem', border:'1px solid var(--surface-border)', borderRadius:'6px', background:'var(--surface-50)' }}>
                                    <div className="fieldsRepeater__heading" style={{ marginBottom:'0.5rem' }}>
                                        <strong style={{ color:'var(--primary-color)' }}>{c.code || `#${i+1}`} — {c.label || __('(senza nome)','gepafin')}</strong>
                                        {!readOnly && (
                                            <Button type="button" icon="pi pi-trash" severity="danger" outlined
                                                size="small" onClick={() => removeCategory(i)}
                                                tooltip={__('Rimuovi categoria','gepafin')} tooltipOptions={{position:'top'}} />
                                        )}
                                    </div>
                                    <div className="appForm__cols">
                                        <div className="appForm__field">
                                            <label>{__('Codice','gepafin')}</label>
                                            <InputText value={c.code} onChange={(e) => updateCategory(i,{code:e.target.value})}
                                                placeholder="B1" disabled={readOnly} />
                                        </div>
                                        <div className="appForm__field">
                                            <label>{__('Cap importo (opzionale)','gepafin')}</label>
                                            <InputNumber value={c.cap_amount}
                                                onValueChange={(e) => updateCategory(i,{cap_amount:e.value})}
                                                mode="currency" currency="EUR" locale="it-IT" disabled={readOnly} placeholder="—" />
                                        </div>
                                    </div>
                                    <div className="appForm__field">
                                        <label>{__('Nome categoria','gepafin')}</label>
                                        <InputText value={c.label}
                                            onChange={(e) => updateCategory(i,{label:e.target.value})} disabled={readOnly} />
                                    </div>
                                    <div className="appForm__field">
                                        <label>{__('Descrizione','gepafin')}</label>
                                        <InputTextarea value={c.description}
                                            onChange={(e) => updateCategory(i,{description:e.target.value})}
                                            rows={2} disabled={readOnly} autoResize />
                                    </div>
                                </div>
                            ))}
                        </div>

                        {!readOnly && (
                            <div style={{ marginTop: '1rem' }}>
                                <Button type="button" icon="pi pi-plus" iconPos="right" outlined
                                    label={__('Aggiungi categoria','gepafin')} onClick={addCategory} />
                            </div>
                        )}
                    </div>

                    <div className="appPage__spacer"></div>

                    {/* 4 - ULA */}
                    <div className="appPageSection">
                        <h2>{__('4. Calcolo ULA (incremento occupazione)','gepafin')}</h2>
                        <div className="appForm__field">
                            <div className="appForm__row">
                                <InputSwitch checked={form.ula_enabled}
                                    onChange={(e) => update({ula_enabled: e.value})} disabled={readOnly} />
                                <label style={{ cursor: 'pointer' }}
                                    onClick={() => !readOnly && update({ula_enabled: !form.ula_enabled})}>
                                    {__('Calcolo ULA richiesto per questo bando','gepafin')}
                                </label>
                            </div>
                        </div>
                        {form.ula_enabled && (
                            <>
                                <div className="appForm__cols">
                                    <div className="appForm__field">
                                        <label>{__('Soglia minima di incremento','gepafin')}</label>
                                        <InputNumber value={form.ula_threshold}
                                            onValueChange={(e) => update({ula_threshold: e.value})}
                                            mode="decimal" minFractionDigits={1} maxFractionDigits={2} min={0} disabled={readOnly} />
                                    </div>
                                    <div className="appForm__field">
                                        <label>{__('Periodo fine ULA','gepafin')}</label>
                                        <Calendar value={form.ula_period_end}
                                            onChange={(e) => update({ula_period_end: e.value})}
                                            dateFormat="dd/mm/yy" showIcon disabled={readOnly} />
                                    </div>
                                </div>
                                <div className="appForm__field">
                                    <div className="appForm__row">
                                        <InputSwitch checked={form.ula_supporting_doc_required}
                                            onChange={(e) => update({ula_supporting_doc_required: e.value})} disabled={readOnly} />
                                        <label style={{ cursor: 'pointer' }}
                                            onClick={() => !readOnly && update({ula_supporting_doc_required: !form.ula_supporting_doc_required})}>
                                            {__('Allegato di supporto obbligatorio','gepafin')}
                                        </label>
                                    </div>
                                </div>
                                {form.ula_supporting_doc_required && (
                                    <div className="appForm__field">
                                        <label>{__('Tipi di documento ammessi','gepafin')}</label>
                                        <MultiSelect value={form.ula_supporting_doc_types} options={ULA_DOC_TYPES}
                                            onChange={(e) => update({ula_supporting_doc_types: e.value})}
                                            disabled={readOnly} display="chip" placeholder={__('Seleziona tipi','gepafin')} />
                                    </div>
                                )}
                            </>
                        )}
                    </div>

                    <div className="appPage__spacer"></div>

                    {/* 5 - DOCUMENTI */}
                    <div className="appPageSection">
                        <h2>{__('5. Documenti richiesti','gepafin')} <span style={{fontWeight:400, color:'var(--text-color-secondary)', fontSize:'0.9em'}}>({form.docs_required.length})</span></h2>
                        <p style={{ color:'var(--text-color-secondary)', marginTop: 0 }}>
                            {__('I documenti già in regola nel repository della Company saranno riutilizzati automaticamente. Solo quelli scaduti o mancanti richiederanno caricamento.','gepafin')}
                        </p>
                        <div className="fieldsRepeater">
                            {form.docs_required.map((d, i) => (
                                <div key={i} className="fieldsRepeater__panel" style={{ padding:'0.75rem 1rem', border:'1px solid var(--surface-border)', borderRadius:'6px', background:'var(--surface-50)' }}>
                                    <div className="appForm__cols">
                                        <div className="appForm__field">
                                            <label>{__('Codice','gepafin')}</label>
                                            <InputText value={d.code} onChange={(e) => updateDoc(i,{code:e.target.value})}
                                                placeholder="DURC" disabled={readOnly} />
                                        </div>
                                        <div className="appForm__field">
                                            <label>{__('Etichetta visibile al beneficiario','gepafin')}</label>
                                            <InputText value={d.label} onChange={(e) => updateDoc(i,{label:e.target.value})} disabled={readOnly} />
                                        </div>
                                    </div>
                                    {!readOnly && (
                                        <div style={{ textAlign: 'right', marginTop:'0.5rem' }}>
                                            <Button type="button" icon="pi pi-trash" severity="danger" outlined size="small"
                                                onClick={() => removeDoc(i)} label={__('Rimuovi','gepafin')} />
                                        </div>
                                    )}
                                </div>
                            ))}
                        </div>
                        {!readOnly && (
                            <div style={{ marginTop: '1rem' }}>
                                <Button type="button" icon="pi pi-plus" iconPos="right" outlined
                                    label={__('Aggiungi documento','gepafin')} onClick={addDoc} />
                            </div>
                        )}
                    </div>

                    <div className="appPage__spacer"></div>

                    {/* 6 - REGOLE */}
                    <div className="appPageSection">
                        <h2>{__('6. Regole di validazione (gate pre-submit)','gepafin')}</h2>
                        <div className="appForm__cols">
                            <div className="appForm__field">
                                <label>{__('Cap remissione (% erogato)','gepafin')}</label>
                                <InputNumber value={form.cap_pct_erogato}
                                    onValueChange={(e) => update({cap_pct_erogato: e.value})}
                                    suffix=" %" min={0} max={100} disabled={readOnly} />
                            </div>
                            <div className="appForm__field">
                                <label>{__('Cap remissione assoluto','gepafin')}</label>
                                <InputNumber value={form.cap_absolute}
                                    onValueChange={(e) => update({cap_absolute: e.value})}
                                    mode="currency" currency="EUR" locale="it-IT" disabled={readOnly} />
                            </div>
                        </div>
                        <div className="appForm__field">
                            <div className="appForm__row">
                                <InputSwitch checked={form.require_invoice_per_category}
                                    onChange={(e) => update({require_invoice_per_category: e.value})} disabled={readOnly} />
                                <label style={{ cursor: 'pointer' }}
                                    onClick={() => !readOnly && update({require_invoice_per_category: !form.require_invoice_per_category})}>
                                    {__('Richiedi almeno una fattura per ogni categoria con importo > 0','gepafin')}
                                </label>
                            </div>
                        </div>
                        <div className="appForm__field">
                            <div className="appForm__row">
                                <InputSwitch checked={form.require_ula_above_threshold}
                                    onChange={(e) => update({require_ula_above_threshold: e.value})} disabled={readOnly} />
                                <label style={{ cursor: 'pointer' }}
                                    onClick={() => !readOnly && update({require_ula_above_threshold: !form.require_ula_above_threshold})}>
                                    {__('Richiedi ULA sopra soglia per validare','gepafin')}
                                </label>
                            </div>
                        </div>
                        <div className="appForm__field">
                            <div className="appForm__row">
                                <InputSwitch checked={form.require_all_documents_resolved}
                                    onChange={(e) => update({require_all_documents_resolved: e.value})} disabled={readOnly} />
                                <label style={{ cursor: 'pointer' }}
                                    onClick={() => !readOnly && update({require_all_documents_resolved: !form.require_all_documents_resolved})}>
                                    {__('Richiedi che tutti i documenti siano in regola','gepafin')}
                                </label>
                            </div>
                        </div>
                    </div>

                    <div className="appPage__spacer"></div>

                    {/* 7 - TRANCHES + CUSTOM CHECKS (v2) */}
                    <div className="appPageSection">
                        <h2>{__('7. Tranches di rendicontazione','gepafin')}</h2>
                        <p style={{ color:'var(--text-color-secondary)', marginTop: 0 }}>
                            {__('Numero massimo di tranche che il beneficiario puo aprire per questo bando. Il default 1 mantiene il comportamento classico a rendicontazione unica. Aumenta il numero per permettere rendicontazioni multi-fase (es. stati di avanzamento).','gepafin')}
                        </p>
                        <div className="appForm__field" style={{maxWidth:'300px'}}>
                            <label>{__('Tranches massime','gepafin')}</label>
                            <InputNumber value={form.max_tranches}
                                onValueChange={(e) => update({max_tranches: e.value})}
                                min={1} max={20} showButtons disabled={readOnly} />
                        </div>
                    </div>

                    <div className="appPage__spacer"></div>

                    <div className="appPageSection">
                        <h2>{__('8. Controlli aggiuntivi (dichiarazioni beneficiario)','gepafin')} <span style={{fontWeight:400, color:'var(--text-color-secondary)', fontSize:'0.9em'}}>({(form.custom_checks || []).length})</span></h2>
                        <p style={{ color:'var(--text-color-secondary)', marginTop: 0 }}>
                            {__('Dichiarazioni aggiuntive richieste al beneficiario, oltre ai documenti standard. Ogni controllo puo richiedere o meno un documento allegato e puo essere obbligatorio o opzionale. Esempi: dichiarazione antiriciclaggio (senza doc, obbligatoria), polizza fidejussoria (con doc, opzionale).','gepafin')}
                        </p>
                        <div className="fieldsRepeater">
                            {(form.custom_checks || []).map((c, i) => (
                                <div key={i} className="fieldsRepeater__panel" style={{ padding:'1rem', border:'1px solid var(--surface-border)', borderRadius:'6px', background:'var(--surface-50)' }}>
                                    <div className="fieldsRepeater__heading" style={{ marginBottom:'0.5rem' }}>
                                        <strong style={{ color:'var(--primary-color)' }}>{c.code || `check #${i+1}`} — {c.label || __('(senza etichetta)','gepafin')}</strong>
                                        {!readOnly && (
                                            <Button type="button" icon="pi pi-trash" severity="danger" outlined
                                                size="small" onClick={() => removeCheck(i)}
                                                tooltip={__('Rimuovi controllo','gepafin')} tooltipOptions={{position:'top'}} />
                                        )}
                                    </div>
                                    <div className="appForm__cols">
                                        <div className="appForm__field">
                                            <label>{__('Codice (snake_case)','gepafin')}</label>
                                            <InputText value={c.code}
                                                onChange={(e) => updateCheck(i,{code:e.target.value.toLowerCase().replace(/[^a-z0-9_]/g,'_')})}
                                                placeholder="antiriciclaggio" disabled={readOnly} />
                                        </div>
                                        <div className="appForm__field">
                                            <label>{__('Etichetta visibile','gepafin')}</label>
                                            <InputText value={c.label}
                                                onChange={(e) => updateCheck(i,{label:e.target.value})}
                                                placeholder={__('Dichiarazione antiriciclaggio','gepafin')} disabled={readOnly} />
                                        </div>
                                    </div>
                                    <div className="appForm__field">
                                        <label>{__('Descrizione (testo mostrato al beneficiario)','gepafin')}</label>
                                        <InputTextarea value={c.description}
                                            onChange={(e) => updateCheck(i,{description:e.target.value})}
                                            rows={3} autoResize disabled={readOnly}
                                            placeholder={__('Dichiaro che il beneficiario rispetta...','gepafin')} />
                                    </div>
                                    <div className="appForm__cols">
                                        <div className="appForm__field">
                                            <div className="appForm__row">
                                                <InputSwitch checked={c.requires_document}
                                                    onChange={(e) => updateCheck(i,{requires_document:e.value})} disabled={readOnly} />
                                                <label style={{ cursor: 'pointer' }}
                                                    onClick={() => !readOnly && updateCheck(i,{requires_document: !c.requires_document})}>
                                                    {__('Richiede documento allegato','gepafin')}
                                                </label>
                                            </div>
                                            <small className="text-color-secondary">
                                                {__("Se attivo, il beneficiario puo allegare un PDF (max 15MB).",'gepafin')}
                                            </small>
                                        </div>
                                        <div className="appForm__field">
                                            <div className="appForm__row">
                                                <InputSwitch checked={c.required}
                                                    onChange={(e) => updateCheck(i,{required:e.value})} disabled={readOnly} />
                                                <label style={{ cursor: 'pointer' }}
                                                    onClick={() => !readOnly && updateCheck(i,{required: !c.required})}>
                                                    {__('Obbligatorio','gepafin')}
                                                </label>
                                            </div>
                                            <small className="text-color-secondary">
                                                {__("Se attivo, il beneficiario deve dichiararlo prima di poter inviare la pratica.",'gepafin')}
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                        {!readOnly && (
                            <div style={{ marginTop: '1rem' }}>
                                <Button type="button" icon="pi pi-plus" iconPos="right" outlined
                                    label={__('Aggiungi controllo aggiuntivo','gepafin')} onClick={addCheck} />
                            </div>
                        )}
                    </div>

                    <div className="appPage__spacer"></div>

                    {/* ACTIONS BOTTOM (copia degli action top per comodità) */}
                    {!isPublished && (
                        <div className="appPageSection">
                            <div className="appPageSection__actions">
                                <Button type="button" icon="pi pi-save" iconPos="right"
                                    label={__('Salva bozza','gepafin')} onClick={handleSave} disabled={!dirty} />
                                <Button type="button" icon="pi pi-check-circle" iconPos="right" severity="success"
                                    label={__('Pubblica','gepafin')} onClick={handlePublish} disabled={dirty} />
                            </div>
                        </div>
                    )}

                </form>
            )}
        </div>
    );
};

export default BandoRendicontazioneSchemaEdit;
