// ──────────────────────────── impostazioni.jsx ────────────────────────────
const { useState: useStateI } = React;

// ─── Valori di default ───
const _COMPANY_DEFAULT = {
  ragioneSociale: 'Bone & Ink S.r.l.',
  piva:           'IT 04421109820',
  cf:             '04421109820',
  via:            'Via dei Condotti 24',
  citta:          'Roma',
  cap:            '00187',
  provincia:      'RM',
  tel:            '+39 06 6789 1024',
  email:          'info@boneandink.it',
};

const _DOCNUM_DEFAULT = [
  { tipo: 'Scontrino',        prefisso: 'SC-',  partenza: 143 },
  { tipo: 'Fattura cliente',  prefisso: 'FAT-', partenza:  18 },
  { tipo: 'DDT cliente',      prefisso: 'DDT-', partenza:   7 },
  { tipo: 'Nota credito',     prefisso: 'NC-',  partenza:   3 },
  { tipo: 'Ordine cliente',   prefisso: 'OC-',  partenza:  25 },
  { tipo: 'Riservato',              prefisso: 'RS-',  partenza:  3 },
  { tipo: 'Fattura fornitore',      prefisso: 'FF-',  partenza:  3 },
  { tipo: 'Nota credito fornitore', prefisso: 'NCF-', partenza:  2 },
  { tipo: 'Ordine fornitore',       prefisso: 'OA-',  partenza: 21 },
];

const _IVA_DEFAULT = [
  { id: 1, desc: 'Ordinaria',     pct: 22 },
  { id: 2, desc: 'Ridotta',       pct: 10 },
  { id: 3, desc: 'Super ridotta', pct:  4 },
  { id: 4, desc: 'Esente',        pct:  0 },
];

// Dati fittizi per le preview di stampa
const _IMP_LINES = [
  { name: 'Giacca monopetto lana',     qty: 1, price: 890.00 },
  { name: 'Cintura pelle intrecciata', qty: 2, price: 120.00 },
  { name: 'Sciarpa seta stampata',     qty: 1, price:  95.00 },
];
const _IMP_CLIENT = {
  name: 'Mario Rossi', address: 'Via Roma 14',
  city: '20121 Milano', cf: 'RSSMRA80A01F205X',
};

// CSS class per input e label (prefisso _imp_ per evitare collisioni nel bundle)
const _impInCls = 'w-full h-11 px-3 rounded-md border border-line bg-surface text-[14px] text-ink focus:border-strong focus:outline-none transition-all duration-fast ease-standard';
const _impLbCls = 'block text-[12px] font-semibold uppercase tracking-[0.04em] text-muted mb-1.5';

// ─── Sub-tab navigation ───
const ImpTabs = ({ tab, onTab, withSession = true }) => {
  const TABS = [
    { id: 'azienda',     label: 'Dati azienda',         icon: 'Globe'   },
    { id: 'numerazione', label: 'Numerazione documenti', icon: 'Doc'     },
    { id: 'aliquote',    label: 'Aliquote IVA',          icon: 'Tag'     },
    { id: 'template',    label: 'Template stampa',       icon: 'Receipt' },
    ...(withSession ? [{ id: 'sessione', label: 'Sessione', icon: 'Lock' }] : []),
  ];
  return (
    <div className="flex items-center gap-1 px-7 hairline bg-paper">
      {TABS.map(t => {
        const Ico = I[t.icon];
        const active = tab === t.id;
        return (
          <button key={t.id} onClick={() => onTab(t.id)}
            className={`flex items-center gap-2 h-11 px-4 text-[14px] font-medium transition-all duration-fast ease-standard border-b-2 -mb-px
              ${active ? 'text-ink border-ink' : 'text-muted border-transparent hover:text-ink'}`}>
            <Ico size={16}/>
            {t.label}
          </button>
        );
      })}
    </div>
  );
};

// ─── Banner "Salvato" ───
const ImpSavedBanner = ({ show }) => show ? (
  <div className="flex items-center gap-2 px-4 h-11 rounded-md text-[13.5px] font-medium"
    style={{ background: 'var(--success-50)', color: 'var(--success-700)' }}>
    <I.Check size={14}/>
    Salvato
  </div>
) : null;

// ─── CTA Salva 64px ───
const ImpSaveBtn = ({ label, onClick }) => (
  <button onClick={onClick}
    className="h-16 px-8 rounded-md bg-[var(--accent-blue)] text-[var(--text-inverse)] font-semibold text-[17px] flex items-center gap-3 hover:bg-[var(--accent-blue-hover)] active:bg-[var(--accent-blue-active)] transition-all duration-fast ease-standard shadow-soft">
    <I.Check size={20}/>
    {label}
  </button>
);

// ══════════════════════════════════════════════════════════════════════
//  Panel 1 — Dati Azienda
// ══════════════════════════════════════════════════════════════════════
const DatiAziendaPanel = ({ data, onChange }) => {
  const [d, setD] = useStateI({ ...data });
  const [saved, setSaved] = useStateI(false);
  const [logo, setLogo] = useStateI(data.logo || null);
  const logoRef = React.useRef(null);
  const set = (k, v) => setD(prev => ({ ...prev, [k]: v }));

  const handleLogoFile = (file) => {
    if (!file) return;
    if (file.size > 2 * 1024 * 1024) { if (window.__toast) window.__toast('Il logo supera i 2 MB', 'error'); return; }
    const reader = new FileReader();
    reader.onload = (ev) => {
      const url = ev.target.result;
      setLogo(url);
      setD(prev => ({ ...prev, logo: url }));
      if (window.__toast) window.__toast('Logo caricato', 'success');
    };
    reader.readAsDataURL(file);
  };

  const handleSave = () => {
    onChange(d);
    window.__BI_COMPANY__ = d;
    if (window.__API__) window.__API__.post('/api/settings/company', { data: d }).then(()=>{ if (window.__toast) window.__toast('Dati azienda salvati', 'success'); }).catch(()=>{});
    setSaved(true);
    setTimeout(() => setSaved(false), 2500);
  };

  return (
    <div className="px-7 py-6 space-y-5 max-w-[900px]">
      <Card title="Dati azienda">
        <div className="grid grid-cols-2 gap-5">
          <div className="col-span-2">
            <label className={_impLbCls}>Ragione sociale</label>
            <input value={d.ragioneSociale} onChange={e => set('ragioneSociale', e.target.value)} className={_impInCls}/>
          </div>
          <div>
            <label className={_impLbCls}>P.IVA</label>
            <input value={d.piva} onChange={e => set('piva', e.target.value)} className={_impInCls}/>
          </div>
          <div>
            <label className={_impLbCls}>Codice fiscale</label>
            <input value={d.cf} onChange={e => set('cf', e.target.value)} className={_impInCls}/>
          </div>
          <div className="col-span-2">
            <label className={_impLbCls}>Via / Indirizzo</label>
            <input value={d.via} onChange={e => set('via', e.target.value)} className={_impInCls}/>
          </div>
          <div className="col-span-2 grid grid-cols-[1fr_110px_80px] gap-3">
            <div>
              <label className={_impLbCls}>Città</label>
              <input value={d.citta} onChange={e => set('citta', e.target.value)} className={_impInCls}/>
            </div>
            <div>
              <label className={_impLbCls}>CAP</label>
              <input value={d.cap} onChange={e => set('cap', e.target.value)} className={_impInCls}/>
            </div>
            <div>
              <label className={_impLbCls}>Prov.</label>
              <input value={d.provincia} onChange={e => set('provincia', e.target.value)} className={_impInCls}/>
            </div>
          </div>
          <div>
            <label className={_impLbCls}>Telefono</label>
            <input type="tel" value={d.tel} onChange={e => set('tel', e.target.value)} className={_impInCls}/>
          </div>
          <div>
            <label className={_impLbCls}>Email</label>
            <input type="email" value={d.email} onChange={e => set('email', e.target.value)} className={_impInCls}/>
          </div>
        </div>
      </Card>

      <Card title="Logo aziendale">
        <div className="flex items-center gap-6">
          <div className="w-20 h-20 rounded-xl bg-sunken flex flex-col items-center justify-center shrink-0 gap-1 overflow-hidden"
            style={{ border: '2px dashed var(--border-default)' }}>
            {logo ? (
              <img src={logo} alt="Logo" className="w-full h-full object-contain"/>
            ) : (
              <>
                <I.Globe size={22} className="text-muted"/>
                <div className="text-[10px] text-muted">Logo</div>
              </>
            )}
          </div>
          <div>
            <div className="text-[14px] font-medium text-ink mb-1">Carica il logo aziendale</div>
            <div className="text-[13px] text-muted mb-3">
              Apparirà sui template di stampa dei documenti. PNG o SVG, max 2 MB.
            </div>
            <input ref={logoRef} type="file" accept="image/png,image/svg+xml,image/jpeg,image/webp" className="sr-only"
              onChange={e => handleLogoFile(e.target.files[0])}/>
            <Btn variant="outline" size="md" leading={<I.ArrowU size={14}/>}
              onClick={() => logoRef.current && logoRef.current.click()}>
              Carica logo
            </Btn>
            <div className="text-[11px] text-muted mt-2">PNG, SVG, JPG o WebP · max 2 MB.</div>
          </div>
        </div>
      </Card>

      <div className="flex items-center gap-3">
        <ImpSaveBtn label="Salva dati azienda" onClick={handleSave}/>
        <ImpSavedBanner show={saved}/>
      </div>
    </div>
  );
};

// ══════════════════════════════════════════════════════════════════════
//  Panel 2 — Numerazione Documenti
// ══════════════════════════════════════════════════════════════════════
const NumerazionePanel = ({ rows, onChange }) => {
  const [data, setData] = useStateI(rows.map(r => ({ ...r })));
  const [saved, setSaved] = useStateI(false);
  const year = new Date().getFullYear();

  const update = (idx, field, val) =>
    setData(prev => prev.map((r, i) => i !== idx ? r : { ...r, [field]: val }));

  const preview = (row) =>
    `${row.prefisso}${year}-${String(row.partenza).padStart(4, '0')}`;

  const handleSave = () => {
    onChange(data);
    window.__BI_DOCNUM__ = data;
    if (window.__API__) window.__API__.post('/api/settings/document-numbering', { data }).then(()=>{ if (window.__toast) window.__toast('Numerazione documenti salvata', 'success'); }).catch(()=>{});
    setSaved(true);
    setTimeout(() => setSaved(false), 2500);
  };

  return (
    <div className="px-7 py-6 space-y-5 max-w-[900px]">
      <Card title="Numerazione documenti" padded={false}>
        <div className="grid grid-cols-[1fr_130px_110px_190px] gap-3 px-5 h-11 items-center text-[11px] uppercase tracking-[0.08em] text-muted font-medium hairline">
          <div>Tipo documento</div>
          <div>Prefisso</div>
          <div className="text-right">N° partenza</div>
          <div>Prossimo numero</div>
        </div>
        <div className="divide-y divide-line2">
          {data.map((row, idx) => (
            <div key={idx} className="row-h grid grid-cols-[1fr_130px_110px_190px] gap-3 px-5 items-center">
              <div className="text-[14px] font-medium text-ink">{row.tipo}</div>
              <input value={row.prefisso}
                onChange={e => update(idx, 'prefisso', e.target.value)}
                className="h-9 px-3 w-full rounded-md border border-line bg-surface text-[13.5px] font-mono text-ink focus:border-strong focus:outline-none transition-all duration-fast ease-standard"/>
              <div className="flex justify-end">
                <input type="number" min="1" value={row.partenza}
                  onChange={e => update(idx, 'partenza', Math.max(1, parseInt(e.target.value) || 1))}
                  className="h-9 px-3 w-24 rounded-md border border-line bg-surface text-[13.5px] num text-ink text-right focus:border-strong focus:outline-none transition-all duration-fast ease-standard"/>
              </div>
              <div className="num text-[13px] font-medium text-muted tracking-tight">{preview(row)}</div>
            </div>
          ))}
        </div>
      </Card>

      <div className="flex items-center gap-3">
        <ImpSaveBtn label="Salva numerazione" onClick={handleSave}/>
        <ImpSavedBanner show={saved}/>
      </div>
    </div>
  );
};

// ══════════════════════════════════════════════════════════════════════
//  Panel 3 — Aliquote IVA
// ══════════════════════════════════════════════════════════════════════
const AliquotePanel = ({ aliquote, onChange }) => {
  const [data, setData] = useStateI(aliquote.map(a => ({ ...a })));
  const [saved, setSaved] = useStateI(false);
  const [nextId, setNextId] = useStateI(aliquote.length + 1);

  const addRow = () => {
    setData(prev => [...prev, { id: nextId, desc: '', pct: 0 }]);
    setNextId(n => n + 1);
  };
  const update = (id, field, val) =>
    setData(prev => prev.map(a => a.id !== id ? a : { ...a, [field]: val }));
  const remove = (id) => setData(prev => prev.filter(a => a.id !== id));

  const handleSave = () => {
    onChange(data);
    window.__BI_ALIQUOTE__ = data;
    if (window.__API__) window.__API__.post('/api/settings/vat-rates', { data }).then(()=>{ if (window.__toast) window.__toast('Aliquote IVA salvate', 'success'); }).catch(()=>{});
    setSaved(true);
    setTimeout(() => setSaved(false), 2500);
  };

  return (
    <div className="px-7 py-6 space-y-5 max-w-[560px]">
      <Card title="Aliquote IVA" padded={false}
        action={
          <Btn variant="outline" size="sm" leading={<I.Plus size={13}/>} onClick={addRow}>
            Aggiungi
          </Btn>
        }>
        <div className="grid grid-cols-[1fr_160px_44px] gap-3 px-5 h-11 items-center text-[11px] uppercase tracking-[0.08em] text-muted font-medium hairline">
          <div>Descrizione</div>
          <div>Aliquota</div>
          <div/>
        </div>
        <div className="divide-y divide-line2">
          {data.map(row => (
            <div key={row.id} className="row-h grid grid-cols-[1fr_160px_44px] gap-3 px-5 items-center">
              <input value={row.desc} onChange={e => update(row.id, 'desc', e.target.value)}
                placeholder="es. Ordinaria"
                className="h-9 px-3 w-full rounded-md border border-line bg-surface text-[14px] text-ink focus:border-strong focus:outline-none transition-all duration-fast ease-standard"/>
              <div className="flex items-center gap-2">
                <input type="number" min="0" max="100" step="0.5" value={row.pct}
                  onChange={e => update(row.id, 'pct', Math.min(100, Math.max(0, parseFloat(e.target.value) || 0)))}
                  className="h-9 px-3 w-20 rounded-md border border-line bg-surface text-[14px] num text-ink text-right focus:border-strong focus:outline-none transition-all duration-fast ease-standard"/>
                <span className="text-[14px] text-muted shrink-0">%</span>
              </div>
              <button onClick={() => remove(row.id)}
                className="w-9 h-9 rounded-md flex items-center justify-center text-muted hover:bg-[var(--danger-50)] hover:text-[var(--danger-700)] transition-colors duration-fast ease-standard focus-ring">
                <I.Trash size={14}/>
              </button>
            </div>
          ))}
          {data.length === 0 && (
            <div className="py-10 text-center text-muted text-[13.5px]">
              Nessuna aliquota. Clicca "Aggiungi" per crearne una.
            </div>
          )}
        </div>
      </Card>

      <div className="flex items-center gap-3">
        <ImpSaveBtn label="Salva aliquote" onClick={handleSave}/>
        <ImpSavedBanner show={saved}/>
      </div>
    </div>
  );
};

// ──────────────────────────── Preview di stampa ────────────────────────────

const ImpScontrPreview = ({ cd, showLogo, footer }) => {
  const tot = _IMP_LINES.reduce((s, l) => s + l.qty * l.price, 0);
  const iva = tot - tot / 1.22;
  return (
    <div className="p-6 text-[12px] text-ink"
      style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace', letterSpacing: '-0.01em' }}>
      <div className="text-center pb-3 border-b border-dashed border-line">
        {showLogo && (
          <div className="w-10 h-10 mx-auto mb-2.5 rounded-md bg-[var(--accent-blue)] flex items-center justify-center">
            <I.Globe size={16} className="text-[var(--text-inverse)]"/>
          </div>
        )}
        <div className="text-[13px] font-semibold tracking-wider uppercase">{cd.ragioneSociale}</div>
        <div className="text-[11px] text-muted mt-0.5">{cd.via} · {cd.citta} ({cd.provincia})</div>
        <div className="text-[11px] text-muted">P.IVA {cd.piva} · {cd.tel}</div>
      </div>
      <div className="text-center py-2.5 border-b border-dashed border-line">
        <div className="text-[12.5px] font-semibold uppercase tracking-wider">Documento commerciale di vendita</div>
        <div className="text-[11px] text-muted mt-0.5">
          n. SC-{new Date().getFullYear()}-0143 · {new Date().toLocaleDateString('it-IT')} · 11:24
        </div>
      </div>
      <div className="py-3 border-b border-dashed border-line space-y-1.5">
        {_IMP_LINES.map((l, i) => (
          <div key={i}>
            <div className="text-[12px]">{l.name}</div>
            <div className="flex justify-between text-[11px] text-muted">
              <span>{l.qty} × {fmtEur(l.price)}</span>
              <span className="text-ink">{fmtEur(l.qty * l.price)}</span>
            </div>
          </div>
        ))}
      </div>
      <div className="py-3 border-b border-dashed border-line space-y-1 text-[12px]">
        <div className="flex justify-between"><span className="text-muted">Subtotale</span><span>{fmtEur(tot)}</span></div>
        <div className="flex justify-between"><span className="text-muted">di cui IVA 22%</span><span>{fmtEur(iva)}</span></div>
        <div className="flex justify-between font-semibold text-[14px] pt-1">
          <span>TOTALE</span><span>{fmtEur(tot)}</span>
        </div>
        <div className="flex justify-between text-muted text-[11px] mt-0.5">
          <span>Carta di credito</span><span>{fmtEur(tot)}</span>
        </div>
      </div>
      {footer && (
        <div className="pt-3 text-center text-[11px] text-muted leading-snug">{footer}</div>
      )}
    </div>
  );
};

const ImpFatturaPreview = ({ cd, showLogo, footer }) => {
  const tot       = _IMP_LINES.reduce((s, l) => s + l.qty * l.price, 0);
  const imponibile = tot / 1.22;
  const iva        = tot - imponibile;
  const scadenza   = new Date(Date.now() + 30 * 864e5).toLocaleDateString('it-IT');
  return (
    <div className="p-6 text-[12px] text-ink">
      <div className="flex items-start justify-between mb-5 pb-4 border-b border-line">
        <div>
          {showLogo && (
            <div className="w-10 h-10 mb-2.5 rounded-md bg-[var(--accent-blue)] flex items-center justify-center">
              <I.Globe size={16} className="text-[var(--text-inverse)]"/>
            </div>
          )}
          <div className="font-semibold text-[15px]">{cd.ragioneSociale}</div>
          <div className="text-muted mt-0.5">{cd.via}</div>
          <div className="text-muted">{cd.cap} {cd.citta} ({cd.provincia})</div>
          <div className="text-muted mt-1">P.IVA {cd.piva}</div>
          <div className="text-muted">C.F. {cd.cf} · {cd.tel}</div>
        </div>
        <div className="text-right">
          <div className="text-[20px] font-bold text-ink tracking-tight">FATTURA</div>
          <div className="num text-muted mt-1">N. FAT-{new Date().getFullYear()}-0018</div>
          <div className="text-muted">Data: {new Date().toLocaleDateString('it-IT')}</div>
          <div className="text-muted mt-0.5">Scadenza: {scadenza}</div>
        </div>
      </div>
      <div className="mb-4 p-3 rounded-md bg-sunken">
        <div className="text-[10px] uppercase tracking-[0.06em] text-muted font-semibold mb-1">Destinatario</div>
        <div className="font-medium text-ink">{_IMP_CLIENT.name}</div>
        <div className="text-muted">{_IMP_CLIENT.address} · {_IMP_CLIENT.city}</div>
        <div className="text-muted">C.F. {_IMP_CLIENT.cf}</div>
      </div>
      <table className="w-full mb-4 text-[11.5px]">
        <thead>
          <tr className="text-muted text-[10px] uppercase tracking-[0.06em] hairline">
            <th className="py-2 text-left font-medium">Descrizione</th>
            <th className="py-2 text-right font-medium">Qty</th>
            <th className="py-2 text-right font-medium">Prezzo</th>
            <th className="py-2 text-right font-medium">Totale</th>
          </tr>
        </thead>
        <tbody>
          {_IMP_LINES.map((l, i) => (
            <tr key={i} className="border-b border-line2">
              <td className="py-2">{l.name}</td>
              <td className="py-2 num text-right">{l.qty}</td>
              <td className="py-2 num text-right">{fmtEur(l.price)}</td>
              <td className="py-2 num font-medium text-right">{fmtEur(l.qty * l.price)}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="flex justify-end mb-4">
        <div className="w-52 space-y-1 text-[12px]">
          <div className="flex justify-between">
            <span className="text-muted">Imponibile</span>
            <span className="num">{fmtEur(imponibile)}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-muted">IVA 22%</span>
            <span className="num">{fmtEur(iva)}</span>
          </div>
          <div className="flex justify-between font-semibold text-[15px] pt-1 border-t border-line">
            <span>Totale</span>
            <span className="num">{fmtEur(tot)}</span>
          </div>
        </div>
      </div>
      {footer && (
        <div className="pt-3 border-t border-line text-[11px] text-muted leading-snug">{footer}</div>
      )}
    </div>
  );
};

const ImpDdtPreview = ({ cd, showLogo, footer }) => {
  const totPezzi = _IMP_LINES.reduce((s, l) => s + l.qty, 0);
  return (
    <div className="p-6 text-[12px] text-ink">
      <div className="flex items-start justify-between mb-5 pb-4 border-b border-line">
        <div>
          {showLogo && (
            <div className="w-10 h-10 mb-2.5 rounded-md bg-[var(--accent-blue)] flex items-center justify-center">
              <I.Globe size={16} className="text-[var(--text-inverse)]"/>
            </div>
          )}
          <div className="font-semibold text-[15px]">{cd.ragioneSociale}</div>
          <div className="text-muted">{cd.via} · {cd.cap} {cd.citta}</div>
          <div className="text-muted">P.IVA {cd.piva}</div>
        </div>
        <div className="text-right">
          <div className="text-[18px] font-bold text-ink tracking-tight">D.D.T.</div>
          <div className="text-[10px] uppercase tracking-[0.06em] text-muted">Documento di trasporto</div>
          <div className="num text-muted mt-1">N. DDT-{new Date().getFullYear()}-0007</div>
          <div className="text-muted">Data: {new Date().toLocaleDateString('it-IT')}</div>
        </div>
      </div>
      <div className="grid grid-cols-2 gap-3 mb-4">
        <div className="p-3 rounded-md bg-sunken">
          <div className="text-[10px] uppercase tracking-[0.06em] text-muted font-semibold mb-1">Mittente</div>
          <div className="font-medium text-ink">{cd.ragioneSociale}</div>
          <div className="text-muted">{cd.via} · {cd.citta}</div>
        </div>
        <div className="p-3 rounded-md bg-sunken">
          <div className="text-[10px] uppercase tracking-[0.06em] text-muted font-semibold mb-1">Destinatario</div>
          <div className="font-medium text-ink">{_IMP_CLIENT.name}</div>
          <div className="text-muted">{_IMP_CLIENT.address} · {_IMP_CLIENT.city}</div>
        </div>
      </div>
      <table className="w-full mb-4 text-[11.5px]">
        <thead>
          <tr className="text-muted text-[10px] uppercase tracking-[0.06em] hairline">
            <th className="py-2 text-left font-medium">Descrizione merce</th>
            <th className="py-2 text-right font-medium">Colli</th>
            <th className="py-2 text-right font-medium">Quantità</th>
          </tr>
        </thead>
        <tbody>
          {_IMP_LINES.map((l, i) => (
            <tr key={i} className="border-b border-line2">
              <td className="py-2">{l.name}</td>
              <td className="py-2 num text-right">1</td>
              <td className="py-2 num text-right">{l.qty}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="flex justify-between text-[12px] text-muted mb-5">
        <span>Causale: Vendita</span>
        <span className="num">Colli: 3 · Pezzi: {totPezzi}</span>
      </div>
      <div className="grid grid-cols-2 gap-4 pt-3 border-t border-line">
        <div>
          <div className="text-[10px] uppercase tracking-[0.06em] text-muted mb-5">Firma mittente</div>
          <div className="h-6 border-b border-line"/>
        </div>
        <div>
          <div className="text-[10px] uppercase tracking-[0.06em] text-muted mb-5">Firma destinatario</div>
          <div className="h-6 border-b border-line"/>
        </div>
      </div>
      {footer && (
        <div className="mt-3 text-[11px] text-muted leading-snug">{footer}</div>
      )}
    </div>
  );
};

// ══════════════════════════════════════════════════════════════════════
//  Panel 4 — Template Stampa
// ══════════════════════════════════════════════════════════════════════
const TemplateStampaPanel = ({ companyData }) => {
  const [selected, setSelected] = useStateI('Scontrino');
  const [showLogo, setShowLogo] = useStateI(true);
  const [footer, setFooter]     = useStateI('Grazie per aver scelto Bone & Ink.');

  const TEMPLATES = [
    { id: 'Scontrino', label: 'Scontrino',       icon: 'Receipt' },
    { id: 'Fattura',   label: 'Fattura cliente', icon: 'Doc'     },
    { id: 'DDT',       label: 'DDT',             icon: 'Truck'   },
  ];

  return (
    <div className="px-7 py-6 max-w-[1200px]">
      <div className="grid grid-cols-[280px_1fr] gap-6">

        {/* Colonna sinistra: selezione + controlli */}
        <div className="space-y-4">
          <Card title="Modelli disponibili" padded={false}>
            {TEMPLATES.map(t => {
              const Ico = I[t.icon];
              const active = selected === t.id;
              return (
                <button key={t.id} onClick={() => setSelected(t.id)}
                  className={`w-full flex items-center gap-3 px-4 py-3.5 text-left border-b border-line2 last:border-0 transition-all duration-fast ease-standard
                    ${active ? 'bg-[var(--bg-selected)]' : 'hover:bg-paper'}`}>
                  <span className={`w-8 h-8 rounded-md flex items-center justify-center shrink-0 transition-colors duration-fast ease-standard
                    ${active ? 'bg-[var(--accent-blue)] text-[var(--text-inverse)]' : 'bg-sunken text-muted'}`}>
                    <Ico size={14}/>
                  </span>
                  <span className="text-[14px] font-medium text-ink flex-1">{t.label}</span>
                  {active && <I.Check size={14} className="text-[var(--accent-blue)] shrink-0"/>}
                </button>
              );
            })}
          </Card>

          <Card title="Opzioni anteprima">
            <div className="space-y-5">
              <div className="flex items-center justify-between">
                <span className="text-[13.5px] font-medium text-ink">Mostra logo</span>
                <DocToggle value={showLogo} onChange={setShowLogo}/>
              </div>
              <div>
                <label className={_impLbCls}>Piè di pagina personalizzato</label>
                <textarea value={footer} onChange={e => setFooter(e.target.value)}
                  rows={3}
                  className="w-full px-3 py-2 rounded-md border border-line bg-surface text-[13.5px] text-ink focus:border-strong focus:outline-none resize-none transition-all duration-fast ease-standard"/>
              </div>
            </div>
          </Card>

          <div className="p-4 rounded-xl text-[12.5px]"
            style={{ background: 'var(--info-50)', color: 'var(--info-700)' }}>
            <strong>Nota:</strong> Questa è un'anteprima visiva. La generazione e stampa reali
            saranno gestite dal modulo server-side.
          </div>
        </div>

        {/* Colonna destra: anteprima documento */}
        <div>
          <div className="text-[11px] uppercase tracking-[0.08em] text-muted font-medium mb-3">
            Anteprima · {selected}
          </div>
          <div className="bg-paper rounded-xl p-5 shadow-soft">
            <div className="bg-surface rounded-lg shadow-soft max-w-[500px] mx-auto overflow-hidden">
              {selected === 'Scontrino' && (
                <ImpScontrPreview  cd={companyData} showLogo={showLogo} footer={footer}/>
              )}
              {selected === 'Fattura' && (
                <ImpFatturaPreview cd={companyData} showLogo={showLogo} footer={footer}/>
              )}
              {selected === 'DDT' && (
                <ImpDdtPreview     cd={companyData} showLogo={showLogo} footer={footer}/>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ══════════════════════════════════════════════════════════════════════
//  ImpostazioniView — root
// ══════════════════════════════════════════════════════════════════════
// ─── Sessione: logout con comportamento per tipo di accesso ─────────────────
// Persona privilegiata → conferma semplice. Account NEGOZIO → conferma + se la
// cassa è ancora aperta, blocca e invita a chiuderla prima.
const SessionePanel = () => {
  const session = window.__SESSION__ || {};
  const op = session.op || {};
  const isStore = op.kind === 'store';
  const cassaAperta = session.fondo != null;
  const [confirm, setConfirm] = useStateI(null); // null | 'ask' | 'cassa'

  const doLogout = async () => { if (window.__API__) await window.__API__.logout(); window.location.reload(); };
  const onExit = () => { if (isStore && cassaAperta) setConfirm('cassa'); else setConfirm('ask'); };

  return (
    <div className="px-7 py-6 max-w-[720px] space-y-6">
      <Card title="Sessione">
        <div className="flex items-center justify-between gap-4 flex-wrap">
          <div className="min-w-0">
            <div className="text-[14px] font-medium text-ink">{op.name || '—'}</div>
            <div className="text-[12.5px] text-muted">
              {isStore ? 'Postazione negozio' : (op.role || 'Utente')}
              {isStore && (cassaAperta ? ' · cassa aperta' : ' · cassa chiusa')}
            </div>
          </div>
          <Btn variant="danger" size="md" leading={<I.Lock size={16}/>} onClick={onExit}>Esci</Btn>
        </div>
        {isStore && (
          <div className="mt-4 text-[12.5px] text-muted">
            Uscendo dalla postazione tornerai alla schermata di accesso del negozio.
            {cassaAperta ? ' Prima però devi chiudere la cassa.' : ''}
          </div>
        )}
      </Card>

      {confirm && (
        <div className="fixed inset-0 z-overlay flex items-center justify-center p-6"
          style={{ background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)' }}
          onClick={() => setConfirm(null)}>
          <div className="bg-surface rounded-2xl shadow-modal w-full max-w-[440px] p-6" onClick={e => e.stopPropagation()}>
            {confirm === 'cassa' ? (
              <>
                <div className="flex items-center gap-2.5 mb-1">
                  <span className="w-9 h-9 rounded-md bg-[var(--warning-50)] text-[var(--warning-700)] flex items-center justify-center"><I.Wallet size={18}/></span>
                  <div className="text-[17px] font-semibold text-ink">Cassa ancora aperta</div>
                </div>
                <div className="text-[13.5px] text-muted mb-5 mt-1">Devi effettuare la <b>chiusura giornaliera</b> prima di uscire dalla postazione.</div>
                <div className="flex justify-end gap-2">
                  <Btn variant="outline" size="md" onClick={() => setConfirm(null)}>Annulla</Btn>
                  <Btn variant="primary" size="md" leading={<I.EOD size={16}/>} onClick={() => { setConfirm(null); if (window.__nav) window.__nav('eod'); }}>Vai alla chiusura</Btn>
                </div>
              </>
            ) : (
              <>
                <div className="text-[17px] font-semibold text-ink mb-1">{isStore ? 'Uscire dalla postazione?' : 'Vuoi uscire?'}</div>
                <div className="text-[13.5px] text-muted mb-5">{isStore ? 'Tornerai alla schermata di accesso del negozio.' : 'Verrai disconnesso e tornerai al login.'}</div>
                <div className="flex justify-end gap-2">
                  <Btn variant="outline" size="md" onClick={() => setConfirm(null)}>Annulla</Btn>
                  <Btn variant="danger" size="md" leading={<I.Lock size={16}/>} onClick={doLogout}>Esci</Btn>
                </div>
              </>
            )}
          </div>
        </div>
      )}
    </div>
  );
};

// Contenuto delle Impostazioni AZIENDALI (senza Topbar), riusabile come tab dentro
// il pannello account (rotella). `withSession` mostra anche il tab Sessione/logout.
const ImpostazioniContent = ({ withSession = true }) => {
  const [tab, setTab] = useStateI('azienda');

  // Stato persistito in variabili di sessione (window.__BI_*) per sopravvivere
  // alla navigazione. La lazy initializer viene rieseguita ad ogni remount.
  const [companyData, setCompanyData] = useStateI(
    () => window.__BI_COMPANY__ ? { ...window.__BI_COMPANY__ } : { ..._COMPANY_DEFAULT }
  );
  const [docNum, setDocNum] = useStateI(
    () => window.__BI_DOCNUM__ ? window.__BI_DOCNUM__.map(r => ({ ...r })) : _DOCNUM_DEFAULT.map(r => ({ ...r }))
  );
  const [aliquote, setAliquote] = useStateI(
    () => window.__BI_ALIQUOTE__ ? window.__BI_ALIQUOTE__.map(a => ({ ...a })) : _IVA_DEFAULT.map(a => ({ ...a }))
  );

  const handleCompanyChange = (d) => { setCompanyData(d); window.__BI_COMPANY__ = d; };
  const handleDocNumChange  = (d) => { setDocNum(d);      window.__BI_DOCNUM__  = d; };
  const handleAliquoteChange = (d) => { setAliquote(d);   window.__BI_ALIQUOTE__ = d; };

  return (
    <>
      <ImpTabs tab={tab} onTab={setTab} withSession={withSession}/>

      {tab === 'azienda'     && (
        <DatiAziendaPanel data={companyData} onChange={handleCompanyChange}/>
      )}
      {tab === 'numerazione' && (
        <NumerazionePanel rows={docNum} onChange={handleDocNumChange}/>
      )}
      {tab === 'aliquote'    && (
        <AliquotePanel aliquote={aliquote} onChange={handleAliquoteChange}/>
      )}
      {tab === 'template'    && (
        <TemplateStampaPanel companyData={companyData}/>
      )}
      {withSession && tab === 'sessione' && <SessionePanel/>}
    </>
  );
};

// Vista standalone (non più nel menu, ma resta esportata per compatibilità).
const ImpostazioniView = () => (
  <>
    <Topbar eyebrow={`Impostazioni · ${STORE.name}`} title="Impostazioni"/>
    <ImpostazioniContent/>
  </>
);

Object.assign(window, { ImpostazioniView, ImpostazioniContent });