// ──────────────────────────── POS modals ────────────────────────────
// Customer picker, row-discount, coupon, gift-card, acconto, completion.

// — Modal shell
const PosModal = ({ open, onClose, title, children, width = 'max-w-[560px]', footer }) => {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-overlay flex items-center justify-center p-4 sm:p-6"
         style={{ background: 'rgba(0,0,0,0.40)', backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)' }}>
      <div className={`bg-surface rounded-2xl shadow-modal z-modal w-full ${width} max-h-[90vh] flex flex-col`}>
        <header className="flex items-center justify-between px-5 py-4 hairline">
          <h2 className="text-[16px] font-semibold tracking-tight text-ink">{title}</h2>
          <button onClick={onClose} className="w-9 h-9 rounded-md hover:bg-[var(--bg-hover)] flex items-center justify-center text-muted"><I.X size={18}/></button>
        </header>
        <div className="flex-1 overflow-auto p-5">{children}</div>
        {footer && <div className="px-5 py-4 border-t border-line bg-paper rounded-b-[16px]">{footer}</div>}
      </div>
    </div>
  );
};

// — Customer picker
const CustomerModal = ({ open, onClose, onPick }) => {
  const [q, setQ] = React.useState('');
  const results = CUSTOMERS.filter(c =>
    !q || c.name.toLowerCase().includes(q.toLowerCase()) || c.email.toLowerCase().includes(q.toLowerCase()) || c.phone.includes(q)
  );
  const createNew = async () => {
    const name = q.trim();
    if (!name) { if (window.__toast) window.__toast('Digita il nome del nuovo cliente nel campo di ricerca', 'info'); return; }
    const pick = (id) => { onPick({ id, name, email: '', phone: '', tier: 'Standard', points: 0, lastVisit: 'oggi' }); onClose(); };
    if (window.__API__) {
      try {
        // usa l'ID REALE assegnato dal server (così la vendita si lega al cliente vero)
        const res = await window.__API__.mutate('/api/customers', { customer: { name } });
        if (!res || res.ok === false) return; // il client ha già mostrato l'errore
        pick(res.id || ('CL-' + Date.now()));
        if (window.__toast) window.__toast('Cliente creato', 'success');
      } catch (e) {
        // offline / errore: il client ha già mostrato un toast; NON fingere "creato"
      }
    } else {
      pick('CL-' + Date.now()); // solo ambiente di sviluppo UI senza backend
    }
  };
  return (
    <PosModal open={open} onClose={onClose} title="Associa cliente" width="max-w-[640px]"
      footer={<div className="flex justify-between items-center">
        <Btn variant="ghost" size="md" leading={<I.Plus size={16}/>} onClick={createNew}>Nuovo cliente</Btn>
        <Btn variant="outline" size="md" onClick={onClose}>Annulla</Btn>
      </div>}>
      <div className="relative mb-4">
        <I.Search size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted"/>
        <input autoFocus value={q} onChange={(e)=>setQ(e.target.value)}
          placeholder="Cerca per nome, email o telefono…"
          className="w-full h-12 pl-11 pr-4 rounded-md border border-line bg-surface text-[14.5px] focus:border-strong transition-all duration-fast ease-standard"/>
      </div>
      <ul className="space-y-1.5">
        {results.map(c => (
          <li key={c.id}>
            <button onClick={() => { onPick(c); onClose(); }}
              className="w-full flex items-center gap-4 px-4 py-3 rounded-md border border-line hover:border-strong hover:bg-paper text-left transition-all duration-fast ease-standard">
              <Initials name={c.name} size={40}/>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <span className="text-[14.5px] font-medium text-ink">{c.name}</span>
                  <TierPill tier={c.tier}/>
                </div>
                <div className="text-[12px] text-muted">{c.email} · <span className="num">{c.phone}</span></div>
              </div>
              <div className="text-right">
                <div className="num text-[13px] text-ink">{c.points.toLocaleString('it-IT')} pt</div>
                <div className="text-[11px] text-muted">ult. {c.lastVisit}</div>
              </div>
            </button>
          </li>
        ))}
      </ul>
    </PosModal>
  );
};

// — Row discount modal
const RowDiscountModal = ({ open, onClose, onApply, current }) => {
  const [type, setType] = React.useState(current?.type || 'percent');
  const [value, setValue] = React.useState(current?.value?.toString() || '');
  const [reason, setReason] = React.useState(current?.reason || '');
  React.useEffect(() => {
    if (open) {
      setType(current?.type || 'percent');
      setValue(current?.value?.toString() || '');
      setReason(current?.reason || '');
    }
  }, [open, current]);

  const PRESETS = [10, 15, 20, 30, 50];

  return (
    <PosModal open={open} onClose={onClose} title="Sconto di riga" width="max-w-[480px]"
      footer={<div className="flex justify-between items-center gap-2">
        {current && <Btn variant="danger" size="md" onClick={() => { onApply(null); onClose(); }}>Rimuovi sconto</Btn>}
        <div className="flex gap-2 ml-auto">
          <Btn variant="outline" size="md" onClick={onClose}>Annulla</Btn>
          <Btn variant="primary" size="md" onClick={() => { onApply({ type, value: parseFloat(value)||0, reason }); onClose(); }}>Applica</Btn>
        </div>
      </div>}>
      <div className="space-y-5">
        <div>
          <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">Tipo</label>
          <div className="grid grid-cols-2 gap-2">
            <button onClick={()=>setType('percent')} className={`h-12 rounded-md border text-[14px] font-medium ${type==='percent' ? 'bg-[var(--bg-selected)] text-[var(--accent-blue)] shadow-[inset_0_0_0_1px_var(--accent-blue)]' : 'border-line bg-surface text-ink'}`}>Percentuale</button>
            <button onClick={()=>setType('amount')} className={`h-12 rounded-md border text-[14px] font-medium ${type==='amount' ? 'bg-[var(--bg-selected)] text-[var(--accent-blue)] shadow-[inset_0_0_0_1px_var(--accent-blue)]' : 'border-line bg-surface text-ink'}`}>Importo €</button>
          </div>
        </div>
        <div>
          <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">Valore</label>
          <div className="flex gap-2 mb-2">
            {PRESETS.map(p => (
              <button key={p} onClick={()=>setValue(p.toString())}
                className="flex-1 h-10 rounded-md border border-line hover:border-strong num text-[13.5px] font-medium text-ink">
                {type==='percent' ? `${p}%` : `€${p}`}
              </button>
            ))}
          </div>
          <div className="relative">
            <input autoFocus type="number" value={value} onChange={(e)=>setValue(e.target.value)}
              placeholder="0"
              className="w-full h-14 px-4 pr-14 rounded-md border border-line bg-surface num text-[22px] font-medium text-ink focus:border-strong"/>
            <span className="absolute right-4 top-1/2 -translate-y-1/2 num text-[18px] text-muted">{type==='percent' ? '%' : '€'}</span>
          </div>
        </div>
        <div>
          <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">Motivo (opzionale)</label>
          <select value={reason} onChange={(e)=>setReason(e.target.value)}
            className="w-full h-11 px-3 rounded-md border border-line bg-surface text-[14px] text-ink focus:border-strong">
            <option value="">— seleziona —</option>
            <option>Saldi</option>
            <option>Cliente VIP</option>
            <option>Sconto fedeltà</option>
            <option>Promozione stagionale</option>
            <option>Difetto minore</option>
            <option>Autorizzazione manager</option>
          </select>
        </div>
      </div>
    </PosModal>
  );
};

// — Coupon modal
const CouponModal = ({ open, onClose, onApply }) => {
  const [code, setCode] = React.useState('');
  const [err, setErr] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  // Validazione LATO SERVER: il valore dello sconto arriva dal backend, non dal client.
  const submit = async () => {
    const c = code.trim().toUpperCase();
    if (!c || busy) return;
    setBusy(true); setErr('');
    try {
      const r = window.__API__ ? await window.__API__.post('/api/coupons/validate', { code: c }) : null;
      if (r && r.ok && r.coupon) {
        onApply({ code: r.coupon.code, type: r.coupon.type, value: r.coupon.value, label: r.coupon.label });
        setCode(''); onClose();
      } else { setErr('Codice non valido o scaduto'); }
    } catch (e) { setErr('Codice non valido o scaduto'); }
    finally { setBusy(false); }
  };
  return (
    <PosModal open={open} onClose={onClose} title="Coupon / codice promo" width="max-w-[480px]"
      footer={<div className="flex justify-end gap-2">
        <Btn variant="outline" size="md" onClick={onClose}>Annulla</Btn>
        <Btn variant="primary" size="md" onClick={submit} disabled={busy}>{busy ? 'Verifico…' : 'Applica codice'}</Btn>
      </div>}>
      <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">Codice</label>
      <input autoFocus value={code} onChange={(e)=>{setCode(e.target.value); setErr('');}}
        onKeyDown={(e)=>{ if (e.key === 'Enter') submit(); }}
        placeholder="es. PRIMAVERA20"
        className="w-full h-14 px-4 rounded-md border border-line bg-surface num text-[18px] tracking-[0.1em] uppercase font-medium text-ink focus:border-strong"/>
      {err && <div className="mt-2 text-[12.5px] text-neg">{err}</div>}
      <div className="mt-4 text-[12px] text-muted">Il codice viene verificato sul server.</div>
    </PosModal>
  );
};

// ─── Gift Card visual preview ───
const GiftCardPreview = ({ amount, code, recipient, design = 'ink' }) => {
  const designs = {
    ink:    { bg: 'linear-gradient(135deg, var(--text-primary) 0%, var(--gray-800) 100%)',                    text: 'var(--bg-canvas)', accent: 'var(--accent-blue)' },
    paper:  { bg: 'linear-gradient(135deg, var(--bg-canvas) 0%, var(--bg-sunken) 100%)',                    text: 'var(--text-primary)', accent: 'var(--text-primary)' },
    accent: { bg: 'linear-gradient(135deg, var(--accent-blue) 0%, color-mix(in oklab, var(--accent-blue), var(--text-primary) 30%) 100%)', text: 'var(--bg-canvas)', accent: 'var(--bg-canvas)' },
  };
  const d = designs[design];
  return (
    <div
      className="relative rounded-xl overflow-hidden shadow-md"
      style={{
        aspectRatio: '1.585 / 1',
        background: d.bg,
        color: d.text,
        fontFamily: 'Geist, ui-sans-serif, system-ui, sans-serif',
      }}
    >
      {/* hairline pattern */}
      <div className="absolute inset-0 opacity-15"
        style={{ backgroundImage: 'repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 14px)' }}></div>

      <div className="relative z-10 h-full p-6 flex flex-col justify-between">
        {/* top */}
        <div className="flex items-start justify-between">
          <div>
            <div className="text-[10px] uppercase tracking-[0.18em] opacity-75">Maison Ardent</div>
            <div className="mt-1 text-[14px] tracking-[0.05em] opacity-90">Gift Card</div>
          </div>
          <div className="w-9 h-9 rounded-sm border border-current/30 flex items-center justify-center opacity-90">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.5">
              <rect x="3" y="9" width="18" height="12" rx="1.2"/><path d="M3 13h18M12 9v12M8 9a2.5 2.5 0 1 1 4-2c0 .8-.5 2-4 2Zm8 0a2.5 2.5 0 1 0-4-2c0 .8.5 2 4 2Z"/>
            </svg>
          </div>
        </div>

        {/* middle: amount */}
        <div>
          <div className="text-[10px] uppercase tracking-[0.18em] opacity-70">Saldo</div>
          <div className="mt-0.5 num text-[44px] font-semibold leading-none tracking-tight">{fmtEur(amount || 0)}</div>
        </div>

        {/* bottom: code + recipient */}
        <div className="flex items-end justify-between gap-4">
          <div className="min-w-0">
            <div className="text-[10px] uppercase tracking-[0.18em] opacity-70">Codice</div>
            <div className="num text-[16px] tracking-[0.18em] mt-0.5">{code}</div>
          </div>
          {recipient && (
            <div className="text-right min-w-0">
              <div className="text-[10px] uppercase tracking-[0.18em] opacity-70">Per</div>
              <div className="text-[13px] truncate max-w-[180px] mt-0.5">{recipient}</div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// — Gift card emission modal
const genGiftCode = () => {
  const seg = () => Math.random().toString(36).slice(2, 6).toUpperCase();
  return `${seg()} ${seg()} ${seg()} ${seg()}`;
};

const GiftCardModal = ({ open, onClose, onIssue }) => {
  const PRESETS = [50, 100, 200, 500, 1000];
  const [amount, setAmount] = React.useState(100);
  const [custom, setCustom] = React.useState('');
  const [recipient, setRecipient] = React.useState('');
  const [design, setDesign] = React.useState('ink');
  const [code, setCode] = React.useState(genGiftCode());

  React.useEffect(() => { if (open) { setCode(genGiftCode()); setAmount(100); setCustom(''); setRecipient(''); setDesign('ink'); } }, [open]);

  const finalAmount = parseFloat(custom) || amount || 0;

  return (
    <PosModal open={open} onClose={onClose} title="Emetti gift card" width="max-w-[820px]"
      footer={<div className="flex items-center justify-between">
        <div>
          <span className="text-[12px] uppercase tracking-[0.08em] text-muted">Importo</span>
          <span className="ml-2 num text-[20px] font-semibold text-ink">{fmtEur(finalAmount)}</span>
        </div>
        <div className="flex gap-2">
          <Btn variant="outline" size="lg" onClick={onClose}>Annulla</Btn>
          <Btn variant="primary" size="lg" disabled={finalAmount <= 0}
            onClick={() => { onIssue({ amount: finalAmount, code, recipient, design }); onClose(); }}
            leading={<I.Check size={18}/>}>
            Aggiungi al carrello
          </Btn>
        </div>
      </div>}>
      <div className="grid grid-cols-[1fr_320px] gap-6">
        {/* Form */}
        <div className="space-y-5">
          <div>
            <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">Importo</label>
            <div className="grid grid-cols-5 gap-2 mb-2">
              {PRESETS.map(p => (
                <button key={p} onClick={()=>{setAmount(p); setCustom('');}}
                  className={`h-12 rounded-md border num text-[14px] font-medium transition-all duration-fast ease-standard
                    ${(!custom && amount === p) ? 'bg-[var(--bg-selected)] text-[var(--accent-blue)] shadow-[inset_0_0_0_1px_var(--accent-blue)]' : 'border-line bg-surface text-ink hover:border-strong'}`}>
                  € {p}
                </button>
              ))}
            </div>
            <div className="relative">
              <input type="number" value={custom} onChange={(e)=>setCustom(e.target.value)}
                placeholder="Importo personalizzato"
                className="w-full h-12 px-4 pr-12 rounded-md border border-line bg-surface num text-[17px] font-medium text-ink focus:border-strong"/>
              <span className="absolute right-4 top-1/2 -translate-y-1/2 num text-[15px] text-muted">€</span>
            </div>
          </div>

          <div>
            <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">Destinatario (opzionale)</label>
            <input value={recipient} onChange={(e)=>setRecipient(e.target.value)}
              placeholder="es. Per la mamma"
              className="w-full h-11 px-3 rounded-md border border-line bg-surface text-[14px] focus:border-strong"/>
          </div>

          <div>
            <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">Design</label>
            <div className="grid grid-cols-3 gap-2">
              {[
                { id: 'ink',    label: 'Ink' },
                { id: 'paper',  label: 'Paper' },
                { id: 'accent', label: 'Accento' },
              ].map(d => (
                <button key={d.id} onClick={()=>setDesign(d.id)}
                  className={`h-11 rounded-md border text-[13px] font-medium transition-all duration-fast ease-standard
                    ${design === d.id ? 'bg-[var(--bg-selected)] text-[var(--accent-blue)] shadow-[inset_0_0_0_1px_var(--accent-blue)]' : 'border-line bg-surface text-ink hover:border-strong'}`}>
                  {d.label}
                </button>
              ))}
            </div>
          </div>

          <div>
            <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">Codice gift card</label>
            <div className="flex items-center gap-2">
              <input value={code} readOnly
                className="flex-1 h-11 px-3 rounded-md border border-line bg-paper num text-[15px] tracking-[0.18em] text-ink"/>
              <button onClick={()=>setCode(genGiftCode())}
                className="h-11 px-3 rounded-md border border-line bg-surface hover:border-strong text-[13px] text-ink inline-flex items-center gap-1.5">
                <I.Refresh size={14}/> Rigenera
              </button>
            </div>
            <div className="mt-1.5 text-[11.5px] text-muted">Il codice viene generato automaticamente · valido 24 mesi dall'emissione.</div>
          </div>
        </div>

        {/* Preview */}
        <div>
          <div className="text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">Anteprima carta</div>
          <GiftCardPreview amount={finalAmount} code={code} recipient={recipient} design={design}/>
          <div className="mt-3 text-[12px] text-muted leading-relaxed">
            La gift card viene stampata in cassa e attivata al momento del pagamento.
          </div>
        </div>
      </div>
    </PosModal>
  );
};

// ─── Acconto modal ───
const AccontoModal = ({ open, onClose, totals, onConfirm }) => {
  // Either: collect advance on the CURRENT cart (treated as order)
  // or: select existing open order (Hans Müller's OR 2026-0021)
  const OPEN_ORDERS = DOCUMENTS.filter(d => d.type === 'Ordine' && d.status === 'In lavorazione');
  const [target, setTarget] = React.useState('current'); // 'current' | order.id
  const [amount, setAmount] = React.useState('');
  const [method, setMethod] = React.useState('Carta');

  React.useEffect(() => {
    if (open) {
      const t = totals && totals.netBalance > 0 ? 'current' : (OPEN_ORDERS[0]?.id || 'current');
      setTarget(t);
      setAmount('');
      setMethod('Carta');
    }
  }, [open]);

  let orderTotal = 0, paid = 0;
  if (target === 'current') {
    orderTotal = totals?.netBalance || 0;
    paid = 0;
  } else {
    const o = OPEN_ORDERS.find(x => x.id === target);
    orderTotal = o?.total || 0;
    paid = o?.advance || 0;
  }
  const amt = parseFloat(amount) || 0;
  const remaining = Math.max(0, orderTotal - paid - amt);
  const overPaid = (paid + amt) > orderTotal;

  return (
    <PosModal open={open} onClose={onClose} title="Registra acconto su ordine" width="max-w-[640px]"
      footer={<div className="flex items-center justify-between">
        <div className="text-[12.5px] text-muted">L'ordine resterà aperto fino al saldo del residuo.</div>
        <div className="flex gap-2">
          <Btn variant="outline" size="md" onClick={onClose}>Annulla</Btn>
          <Btn variant="primary" size="md" disabled={amt <= 0 || overPaid}
            onClick={()=>{ onConfirm({ target, amount: amt, method, remaining }); onClose(); }}
            trailing={<I.Check size={18}/>}>
            Conferma acconto
          </Btn>
        </div>
      </div>}>
      <div className="space-y-5">
        <div>
          <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">Ordine</label>
          <div className="space-y-1.5">
            {totals && totals.netBalance > 0 && (
              <button onClick={()=>setTarget('current')}
                className={`w-full text-left p-3.5 rounded-md border-2 transition-all duration-fast ease-standard flex items-center gap-3
                  ${target === 'current' ? 'bg-[var(--bg-selected)] shadow-[inset_0_0_0_1px_var(--accent-blue)]' : 'border-line bg-surface hover:border-strong'}`}>
                <I.Cash size={18} className="text-muted"/>
                <div className="flex-1 min-w-0">
                  <div className="text-[14px] font-medium text-ink">Carrello corrente</div>
                  <div className="text-[12px] text-muted">trasformalo in ordine con acconto · {totals.count} pezzi</div>
                </div>
                <div className="num text-[15px] font-semibold text-ink">{fmtEur(totals.netBalance)}</div>
              </button>
            )}
            {OPEN_ORDERS.map(o => (
              <button key={o.id} onClick={()=>setTarget(o.id)}
                className={`w-full text-left p-3.5 rounded-md border-2 transition-all duration-fast ease-standard flex items-center gap-3
                  ${target === o.id ? 'bg-[var(--bg-selected)] shadow-[inset_0_0_0_1px_var(--accent-blue)]' : 'border-line bg-surface hover:border-strong'}`}>
                <I.Box size={18} className="text-muted"/>
                <div className="flex-1 min-w-0">
                  <div className="text-[14px] font-medium text-ink">{o.id} · {o.customer}</div>
                  <div className="text-[12px] text-muted">aperto il {o.date} · {o.lines.length} righe · acconto già versato {fmtEur(o.advance || 0)}</div>
                </div>
                <div className="num text-[15px] font-semibold text-ink">{fmtEur(o.total)}</div>
              </button>
            ))}
          </div>
        </div>

        <div className="grid grid-cols-2 gap-5">
          <div>
            <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">Importo acconto</label>
            <div className="grid grid-cols-3 gap-2 mb-2">
              {[200, 500, 1000].map(p => (
                <button key={p} onClick={()=>setAmount(p.toString())}
                  className="h-10 rounded-md border border-line hover:border-strong num text-[13px] font-medium text-ink">
                  € {p}
                </button>
              ))}
            </div>
            <div className="grid grid-cols-2 gap-2 mb-2">
              <button onClick={()=>setAmount((orderTotal * 0.3).toFixed(2))}
                className="h-10 rounded-md border border-line hover:border-strong text-[12.5px] font-medium text-ink">30% del totale</button>
              <button onClick={()=>setAmount((orderTotal * 0.5).toFixed(2))}
                className="h-10 rounded-md border border-line hover:border-strong text-[12.5px] font-medium text-ink">50% del totale</button>
            </div>
            <div className="relative">
              <input autoFocus type="number" value={amount} onChange={(e)=>setAmount(e.target.value)}
                placeholder="0,00"
                className="w-full h-14 px-4 pr-10 rounded-md border border-line bg-surface num text-[22px] font-medium text-ink focus:border-strong"/>
              <span className="absolute right-4 top-1/2 -translate-y-1/2 num text-[18px] text-muted">€</span>
            </div>
            {overPaid && <div className="mt-2 text-[12px] text-neg">L'acconto supera il totale dell'ordine.</div>}
          </div>

          <div>
            <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">Modalità incasso</label>
            <div className="grid grid-cols-2 gap-2">
              {((window.LISTS && window.LISTS.metodi_pagamento && window.LISTS.metodi_pagamento.length)
                ? window.LISTS.metodi_pagamento
                : ['Carta', 'Contanti', 'Bonifico', 'Buoni']
              ).map(name => {
                const ICON_FOR = { Carta: 'Card', Contanti: 'Wallet', Bonifico: 'Doc', Buoni: 'Gift', Assegno: 'Receipt' };
                const m = { id: name, icon: ICON_FOR[name] || 'Wallet' };
                const Ico = I[m.icon];
                const active = method === m.id;
                return (
                  <button key={m.id} onClick={()=>setMethod(m.id)}
                    className={`h-14 rounded-md border text-[13px] font-medium flex items-center gap-2 px-3 transition-all duration-fast ease-standard
                      ${active ? 'bg-[var(--bg-selected)] text-[var(--accent-blue)] shadow-[inset_0_0_0_1px_var(--accent-blue)]' : 'border-line bg-surface text-ink hover:border-strong'}`}>
                    <Ico size={16}/>
                    {m.id}
                  </button>
                );
              })}
            </div>
          </div>
        </div>

        {/* Recap */}
        <div className="p-4 rounded-md bg-paper border border-line space-y-2 text-[13.5px]">
          <div className="flex justify-between"><span className="text-muted">Totale ordine</span><span className="num text-ink">{fmtEur(orderTotal)}</span></div>
          {paid > 0 && <div className="flex justify-between"><span className="text-muted">Acconto già versato</span><span className="num text-pos">−{fmtEur(paid)}</span></div>}
          <div className="flex justify-between"><span className="text-muted">Acconto in incasso</span><span className="num text-pos">−{fmtEur(amt)}</span></div>
          <div className="border-t border-line my-1.5"></div>
          <div className="flex justify-between items-baseline">
            <span className="text-[14px] font-medium text-ink">Residuo da saldare</span>
            <span className={`num text-[22px] font-semibold ${remaining === 0 ? 'text-pos' : 'text-ink'}`}>{fmtEur(remaining)}</span>
          </div>
        </div>
      </div>
    </PosModal>
  );
};

// ─── Return source modal: pick original document + lines to refund ───
const ReturnSourceModal = ({ open, onClose, onConfirm, onNoDoc, currentSource }) => {
  const { useState: useStateR, useEffect: useEffectR, useMemo: useMemoR } = React;
  const [q, setQ] = useStateR('');
  const [scanning, setScanning] = useStateR(false);
  const [picked, setPicked] = useStateR(null);
  const [selection, setSelection] = useStateR({}); // sku -> qty

  // Returnable docs: receipts + invoices, NOT notes/orders/DDT
  const eligible = useMemoR(
    () => DOCUMENTS.filter(d => d.type === 'Scontrino' || d.type === 'Fattura'),
    []
  );

  useEffectR(() => {
    if (!open) return;
    setQ('');
    setScanning(false);
    if (currentSource) {
      setPicked(currentSource);
      const sel = {};
      currentSource.lines.forEach(l => sel[l.sku] = 0);
      setSelection(sel);
    } else {
      setPicked(null);
      setSelection({});
    }
  }, [open, currentSource]);

  const filtered = eligible.filter(d =>
    !q || d.id.toLowerCase().includes(q.toLowerCase()) ||
    (d.customer || '').toLowerCase().includes(q.toLowerCase())
  );

  const pickDoc = (doc) => {
    setPicked(doc);
    const sel = {};
    doc.lines.forEach(l => sel[l.sku] = 0);
    setSelection(sel);
  };

  const simulateScan = () => {
    setScanning(true);
    setTimeout(() => {
      // pick the most recent scontrino (deterministic, not random)
      const recent = eligible.find(d => d.type === 'Scontrino') || eligible[0];
      if (recent) pickDoc(recent);
      setScanning(false);
    }, 700);
  };

  const setLineQty = (sku, q, max) => {
    const v = Math.max(0, Math.min(max, q));
    setSelection(s => ({ ...s, [sku]: v }));
  };

  const totalRefund = picked
    ? picked.lines.reduce((s, l) => s + l.price * (selection[l.sku] || 0), 0)
    : 0;
  const itemCount = Object.values(selection).reduce((a, b) => a + b, 0);

  const footer = picked ? (
    <div className="flex items-center justify-between flex-wrap gap-3">
      <div className="flex items-baseline gap-3">
        <div>
          <span className="text-[11px] uppercase tracking-[0.08em] text-muted font-medium">Da aggiungere al carrello</span>
          <span className="ml-2 num text-[22px] font-semibold text-neg">
            {itemCount > 0 ? `−${fmtEur(totalRefund)}` : '—'}
          </span>
        </div>
        {itemCount > 0 && (
          <span className="num text-[12px] text-muted">· {itemCount} pezzi</span>
        )}
      </div>
      <div className="flex gap-2">
        <Btn variant="ghost" size="md" onClick={() => { setPicked(null); setSelection({}); }}>
          Cambia documento
        </Btn>
        <Btn variant="outline" size="md" onClick={onClose}>Annulla</Btn>
        <Btn variant="primary" size="md"
          disabled={itemCount === 0}
          onClick={() => { onConfirm(picked, selection); onClose(); }}
          leading={<I.Return size={16}/>}>
          Aggiungi reso al carrello
        </Btn>
      </div>
    </div>
  ) : (
    <div className="flex items-center justify-between">
      <Btn variant="ghost" size="md" leading={<I.Return size={16}/>} onClick={() => { onNoDoc?.(); onClose(); }}>
        Procedi senza documento
      </Btn>
      <Btn variant="outline" size="md" onClick={onClose}>Annulla</Btn>
    </div>
  );

  return (
    <PosModal open={open} onClose={onClose} title="Reso · Documento di origine" width="max-w-[860px]" footer={footer}>
      {!picked ? (
        <div className="space-y-5">
          {/* Search + scan tile */}
          <div className="grid grid-cols-[1fr_220px] gap-3">
            <div className="relative">
              <I.Search size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted"/>
              <input
                autoFocus
                value={q}
                onChange={(e)=>setQ(e.target.value)}
                placeholder="Cerca per numero scontrino, fattura o nome cliente…"
                className="w-full h-14 pl-11 pr-4 rounded-md border border-line bg-surface text-[15px] focus:border-strong transition-all duration-fast ease-standard"
              />
            </div>
            <button
              onClick={simulateScan}
              disabled={scanning}
              className={`h-14 rounded-md border-2 border-dashed text-[13.5px] font-medium flex items-center justify-center gap-2 transition-all duration-fast ease-standard
                ${scanning ? 'shadow-[inset_0_0_0_1px_var(--accent-blue)] bg-[var(--bg-selected)] text-[var(--accent-blue)]' : 'border-line bg-paper text-ink hover:border-strong'}`}
            >
              <I.QR size={20}/>
              {scanning ? 'Scansione in corso…' : 'Scansiona QR scontrino'}
            </button>
          </div>

          {/* Recent eligible docs */}
          <div>
            <div className="flex items-center justify-between mb-2.5">
              <div className="text-[12px] uppercase tracking-[0.08em] text-muted font-medium">
                Scontrini e fatture recenti
              </div>
              <div className="text-[11.5px] text-muted num">{filtered.length} di {eligible.length}</div>
            </div>
            {filtered.length === 0 ? (
              <div className="p-8 text-center text-muted text-[14px] border border-dashed border-line rounded-md">
                Nessun documento trovato per "{q}"
              </div>
            ) : (
              <ul className="space-y-1.5 max-h-[420px] overflow-auto pr-1">
                {filtered.map(d => (
                  <li key={d.id}>
                    <button onClick={() => pickDoc(d)}
                      className="w-full text-left flex items-center gap-4 px-4 py-3 rounded-md border border-line hover:border-strong hover:bg-paper transition-all duration-fast ease-standard">
                      <div className={`w-11 h-11 rounded-sm flex items-center justify-center shrink-0
                        ${d.type === 'Fattura' ? 'bg-[var(--bg-selected)] text-[var(--accent-blue)]' : 'bg-paper text-ink border border-line'}`}>
                        <I.Receipt size={18}/>
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2">
                          <span className="num text-[14.5px] font-medium text-ink">{d.id}</span>
                          {d.taxfree && <Pill tone="info">Tax-free</Pill>}
                        </div>
                        <div className="text-[12px] text-muted mt-0.5">
                          {d.date} · {d.time} · {d.customer || 'Cliente non registrato'} · {d.payment}
                        </div>
                      </div>
                      <div className="text-right shrink-0">
                        <div className="num text-[14.5px] font-medium text-ink">{fmtEur(d.total)}</div>
                        <div className="text-[11.5px] text-muted">{d.lines.length} {d.lines.length === 1 ? 'riga' : 'righe'}</div>
                      </div>
                    </button>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </div>
      ) : (
        <div>
          {/* Source doc card */}
          <div className="p-3.5 rounded-md bg-paper border border-line flex items-center gap-3 mb-4">
            <div className="w-11 h-11 rounded-sm bg-[var(--bg-selected)] text-[var(--accent-blue)] flex items-center justify-center shrink-0">
              <I.Receipt size={18}/>
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <span className="num text-[14.5px] font-semibold text-ink">{picked.id}</span>
                <Pill tone="neutral">{picked.type}</Pill>
                {picked.taxfree && <Pill tone="info">Tax-free</Pill>}
              </div>
              <div className="text-[12px] text-muted mt-0.5">
                {picked.date} · {picked.time} · {picked.customer || 'Cliente non registrato'} · pagato con {picked.payment}
              </div>
            </div>
            <div className="text-right shrink-0">
              <div className="text-[11px] uppercase tracking-[0.08em] text-muted">Totale orig.</div>
              <div className="num text-[15px] font-medium text-ink">{fmtEur(picked.total)}</div>
            </div>
          </div>

          {/* Lines selection */}
          <div className="flex items-center justify-between mb-2.5">
            <div className="text-[12px] uppercase tracking-[0.08em] text-muted font-medium">
              Seleziona righe e quantità da rendere
            </div>
            <button
              onClick={() => {
                const allFull = picked.lines.every(l => (selection[l.sku] || 0) === l.qty);
                const next = {};
                picked.lines.forEach(l => { next[l.sku] = allFull ? 0 : l.qty; });
                setSelection(next);
              }}
              className="text-[12.5px] text-ink hover:underline font-medium"
            >
              {picked.lines.every(l => (selection[l.sku] || 0) === l.qty) ? 'Deseleziona tutto' : 'Seleziona tutto'}
            </button>
          </div>
          <ul className="space-y-1.5">
            {picked.lines.map(l => {
              const selQty = selection[l.sku] || 0;
              const max = l.qty;
              const active = selQty > 0;
              return (
                <li key={l.sku}
                  className={`p-3 rounded-md border transition-all duration-fast ease-standard ${active ? 'bg-[var(--bg-selected)] shadow-[inset_0_0_0_1px_var(--accent-blue)]' : 'border-line bg-surface'}`}>
                  <div className="flex items-center gap-3 flex-wrap">
                    <ProductThumb size={40} />
                    <div className="flex-1 min-w-[180px]">
                      <div className="text-[14px] font-medium text-ink">{l.name}</div>
                      <div className="text-[12px] text-muted mt-0.5">
                        <span className="num">{l.sku}</span>
                        <span> · </span>
                        <span>qty orig. <span className="num text-ink">{l.qty}</span></span>
                        <span> · </span>
                        <span className="num">{fmtEur(l.price)} cad.</span>
                      </div>
                    </div>
                    <div className="flex items-center border border-line rounded-sm overflow-hidden bg-surface">
                      <button
                        onClick={()=>setLineQty(l.sku, selQty - 1, max)}
                        disabled={selQty === 0}
                        className="w-11 h-11 flex items-center justify-center hover:bg-[var(--bg-hover)] text-ink disabled:opacity-30">
                        <I.Minus size={14}/>
                      </button>
                      <div className="w-12 text-center num text-[15px] font-medium text-ink">{selQty}<span className="text-muted">/{max}</span></div>
                      <button
                        onClick={()=>setLineQty(l.sku, selQty + 1, max)}
                        disabled={selQty === max}
                        className="w-11 h-11 flex items-center justify-center hover:bg-[var(--bg-hover)] text-ink disabled:opacity-30">
                        <I.Plus size={14}/>
                      </button>
                    </div>
                    <div className="num text-[15px] font-medium text-neg w-[100px] text-right">
                      {selQty > 0 ? `−${fmtEur(l.price * selQty)}` : '—'}
                    </div>
                  </div>
                </li>
              );
            })}
          </ul>

          <div className="mt-4 text-[11.5px] text-muted leading-relaxed">
            I prezzi sono bloccati a quelli del documento originale. Eventuali sconti applicati al momento della vendita sono già inclusi.
          </div>
        </div>
      )}
    </PosModal>
  );
};

// ─── Checkout modal — gestisce tre esiti: da incassare / pari / saldo cliente ───
const CheckoutModal = ({ open, onClose, totals, customer, onComplete }) => {
  const { netBalance, saleSubtotal, returnSubtotal, saleTotal, rowDiscounts, couponDiscount, tax } = totals;
  const outcomeType = Math.abs(netBalance) < 0.01 ? 'even' : netBalance > 0 ? 'pay' : 'refund';
  const absRefund = Math.abs(netBalance);

  const [method, setMethod] = React.useState('Carta');
  const [refundChoice, setRefundChoice] = React.useState(null); // 'buono' | 'rimborso'
  const [cash, setCash] = React.useState('');
  const [taxFree, setTaxFree] = React.useState(false);
  const [giftCode, setGiftCode] = React.useState('');
  const [giftInfo, setGiftInfo] = React.useState(null); // { balance, status } | { error } | null

  React.useEffect(() => {
    if (open) { setMethod('Carta'); setRefundChoice(null); setCash(''); setTaxFree(false); setGiftCode(''); setGiftInfo(null); }
  }, [open]);

  // Consulta il saldo della gift card inserita
  const checkGift = async () => {
    const code = giftCode.trim();
    if (!code || !window.__API__) return;
    const r = await window.__API__.get('/api/giftcards/' + encodeURIComponent(code));
    if (r && r.ok) setGiftInfo({ balance: r.giftCard.balance, status: r.giftCard.status });
    else setGiftInfo({ error: true });
  };

  const cashNum = parseFloat(cash) || 0;
  const change = method === 'Contanti' && outcomeType === 'pay' ? Math.max(0, cashNum - netBalance) : 0;
  const giftOk = !!giftInfo && giftInfo.balance != null && giftInfo.status === 'attiva' && giftInfo.balance >= netBalance;
  const canConfirm = outcomeType === 'pay'
    ? (method === 'Contanti' ? cashNum >= netBalance : method === 'Buono' ? giftOk : true)
    : outcomeType === 'even' ? true
    : refundChoice !== null;

  const isEligible = outcomeType === 'pay' && customer &&
    (customer.phone?.startsWith('+81') || customer.phone?.startsWith('+1') || customer.phone?.startsWith('+49'));

  const QUICK_CASH = [50, 100, 200, 500, 1000];
  const sellMethods = [
    { id: 'Carta',    icon: 'Card',   sub: 'POS contactless' },
    { id: 'Contanti', icon: 'Wallet', sub: 'inserisci importo' },
    { id: 'Bonifico', icon: 'Doc',    sub: 'pagamento differito' },
    { id: 'Buono',    icon: 'Gift',   sub: 'gift card / credito' },
  ];
  const rimborsoMethods = [
    { id: 'Carta',    icon: 'Card',   sub: 'rimborso su carta originale' },
    { id: 'Contanti', icon: 'Wallet', sub: 'rimborso in cassa' },
    { id: 'Bonifico', icon: 'Doc',    sub: 'rimborso differito' },
  ];

  const ctaLabel = outcomeType === 'even' ? 'Conferma operazione'
    : outcomeType === 'refund' && refundChoice === 'buono' ? 'Conferma & emetti buono'
    : outcomeType === 'refund' && refundChoice === 'rimborso' ? 'Conferma rimborso'
    : outcomeType === 'refund' ? 'Scegli una modalità ↑'
    : 'Conferma & stampa scontrino';

  return (
    <PosModal open={open} onClose={onClose} title="Checkout" width="max-w-[860px]"
      footer={<div className="flex items-center justify-between flex-wrap gap-3">
        <div className="flex items-center gap-3">
          {outcomeType === 'pay' && <>
            <span className="text-[12px] uppercase tracking-[0.08em] text-muted">Da incassare</span>
            <span className="num text-[26px] font-semibold text-ink">{fmtEur(netBalance)}</span>
          </>}
          {outcomeType === 'even' && (
            <span className="text-[14px] font-medium text-muted">Pari · nulla da pagare</span>
          )}
          {outcomeType === 'refund' && <>
            <span className="text-[12px] uppercase tracking-[0.08em] text-[var(--danger-700)]">Saldo a favore cliente</span>
            <span className="num text-[26px] font-semibold text-neg">{fmtEur(absRefund)}</span>
          </>}
        </div>
        <div className="flex gap-2">
          <Btn variant="outline" size="lg" onClick={onClose}>Annulla</Btn>
          <Btn variant="primary" size="lg" disabled={!canConfirm}
            onClick={() => onComplete({ method, cash: cashNum, change, taxFree, refundChoice, outcomeType, giftCardCode: method === 'Buono' ? giftCode.trim() : undefined })}
            trailing={<I.Check size={18}/>}>
            {ctaLabel}
          </Btn>
        </div>
      </div>}>

      {/* ── PARI ── */}
      {outcomeType === 'even' && (
        <div className="py-8 text-center">
          <div className="w-16 h-16 rounded-full mx-auto bg-line2 text-muted flex items-center justify-center">
            <I.Check size={28}/>
          </div>
          <h3 className="mt-4 text-[20px] font-semibold text-ink">Operazione pareggiata</h3>
          <p className="mt-1 text-[14px] text-muted max-w-[360px] mx-auto">
            La vendita e il reso si compensano esattamente · nessun pagamento necessario
          </p>
          <div className="mt-6 p-4 rounded-md bg-paper border border-line space-y-2 text-[13.5px] text-left max-w-[320px] mx-auto">
            {saleSubtotal > 0 && <div className="flex justify-between"><span className="text-muted">Vendita</span><span className="num text-ink">{fmtEur(saleTotal)}</span></div>}
            {returnSubtotal > 0 && <div className="flex justify-between"><span className="text-muted">Resi</span><span className="num text-neg">−{fmtEur(returnSubtotal)}</span></div>}
            <div className="border-t border-line pt-2 flex justify-between font-medium">
              <span className="text-ink">Saldo</span>
              <span className="num text-muted">€ 0,00</span>
            </div>
          </div>
        </div>
      )}

      {/* ── DA INCASSARE ── */}
      {outcomeType === 'pay' && (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">
              Metodo di pagamento
            </label>
            <div className="grid grid-cols-2 gap-2">
              {sellMethods.map(m => {
                const Ico = I[m.icon];
                const active = method === m.id;
                return (
                  <button key={m.id} onClick={()=>setMethod(m.id)}
                    className={`text-left p-4 rounded-md border transition-all duration-fast ease-standard
                      ${active ? 'bg-[var(--bg-selected)] text-[var(--accent-blue)] shadow-[inset_0_0_0_1px_var(--accent-blue)]' : 'border-line bg-surface text-ink hover:border-strong'}`}>
                    <Ico size={22}/>
                    <div className="mt-3 text-[15px] font-medium">{m.id}</div>
                    <div className={`text-[11.5px] mt-0.5 ${active ? 'text-[var(--text-inverse)] opacity-70' : 'text-muted'}`}>{m.sub}</div>
                  </button>
                );
              })}
            </div>
            {isEligible && (
              <label className={`mt-4 flex items-start gap-3 p-3.5 rounded-md border cursor-pointer transition-all duration-fast ease-standard
                ${taxFree ? 'shadow-[inset_0_0_0_1px_var(--accent-blue)] bg-[var(--bg-selected)]' : 'border-line bg-surface hover:border-strong'}`}>
                <input type="checkbox" checked={taxFree} onChange={(e)=>setTaxFree(e.target.checked)} className="mt-0.5 w-4 h-4 accent-[var(--accent-blue)]"/>
                <div>
                  <div className="text-[13.5px] font-medium text-ink flex items-center gap-2">
                    <I.Globe size={14}/> Emetti cheque Tax-free <Pill tone="info">Global Blue</Pill>
                  </div>
                  <div className="text-[12px] text-muted mt-0.5">Cliente eleggibile · rimborso IVA stimato {fmtEur(tax * 0.85)}</div>
                </div>
              </label>
            )}
          </div>
          <div>
            <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">
              {method === 'Contanti' ? 'Importo ricevuto' : method === 'Buono' ? 'Paga con gift card' : 'Riepilogo'}
            </label>
            {method === 'Buono' ? (
              <div className="space-y-3">
                <div className="flex gap-2">
                  <input value={giftCode} onChange={(e)=>{ setGiftCode(e.target.value); setGiftInfo(null); }}
                    onKeyDown={(e)=>{ if (e.key === 'Enter') checkGift(); }}
                    placeholder="Codice gift card"
                    className="flex-1 h-12 px-4 rounded-md border border-line bg-surface num text-[15px] tracking-wide text-ink focus:border-strong"/>
                  <Btn variant="outline" size="md" onClick={checkGift}>Verifica</Btn>
                </div>
                {giftInfo && giftInfo.error && (
                  <div className="p-3 rounded-md bg-[var(--danger-50)] text-[var(--danger-700)] text-[13.5px]">Gift card non trovata.</div>
                )}
                {giftInfo && giftInfo.balance != null && (
                  <div className="p-4 rounded-md bg-paper border border-line space-y-1.5">
                    <div className="flex justify-between text-[13.5px]"><span className="text-muted">Saldo disponibile</span><span className="num text-ink">{fmtEur(giftInfo.balance)}</span></div>
                    <div className="flex justify-between text-[13.5px]"><span className="text-muted">Da pagare</span><span className="num text-ink">{fmtEur(netBalance)}</span></div>
                    {!giftOk && (
                      <div className="text-[12.5px] text-[var(--danger-700)] pt-1">
                        {giftInfo.status !== 'attiva' ? 'Gift card non attiva.' : 'Saldo insufficiente per coprire l’importo.'}
                      </div>
                    )}
                    {giftOk && (
                      <div className="border-t border-line pt-2 flex justify-between items-baseline">
                        <span className="text-[13.5px] font-medium text-ink">Saldo dopo l’acquisto</span>
                        <span className="num text-[16px] font-semibold text-ink">{fmtEur(giftInfo.balance - netBalance)}</span>
                      </div>
                    )}
                  </div>
                )}
              </div>
            ) : method === 'Contanti' ? (
              <>
                <div className="relative">
                  <input autoFocus type="number" value={cash} onChange={(e)=>setCash(e.target.value)}
                    placeholder="0,00"
                    className="w-full h-16 px-4 pr-12 rounded-md border border-line bg-surface num text-[28px] font-medium text-ink focus:border-strong"/>
                  <span className="absolute right-4 top-1/2 -translate-y-1/2 num text-[20px] text-muted">€</span>
                </div>
                <div className="grid grid-cols-5 gap-2 mt-3">
                  {QUICK_CASH.map(v => (
                    <button key={v} onClick={()=>setCash(v.toString())}
                      className="h-11 rounded-md border border-line bg-surface num text-[14px] font-medium text-ink hover:border-strong">
                      {v} €
                    </button>
                  ))}
                </div>
                <div className="mt-4 p-4 rounded-md bg-paper border border-line">
                  <div className="flex justify-between text-[13.5px] mb-1.5"><span className="text-muted">Totale dovuto</span><span className="num text-ink">{fmtEur(netBalance)}</span></div>
                  <div className="flex justify-between text-[13.5px] mb-2.5"><span className="text-muted">Contanti ricevuti</span><span className="num text-ink">{fmtEur(cashNum)}</span></div>
                  <div className="border-t border-line pt-2.5 flex justify-between items-baseline">
                    <span className="text-[13.5px] font-medium text-ink">Resto da dare</span>
                    <span className={`num text-[22px] font-semibold ${change > 0 ? 'text-pos' : 'text-ink'}`}>{fmtEur(change)}</span>
                  </div>
                </div>
              </>
            ) : (
              <div className="p-4 rounded-md bg-paper border border-line space-y-2.5">
                {saleSubtotal > 0 && <div className="flex justify-between text-[13.5px]"><span className="text-muted">Vendita</span><span className="num text-ink">{fmtEur(saleSubtotal)}</span></div>}
                {(rowDiscounts + couponDiscount) > 0 && <div className="flex justify-between text-[13.5px]"><span className="text-muted">Sconti</span><span className="num text-neg">−{fmtEur(rowDiscounts + couponDiscount)}</span></div>}
                {returnSubtotal > 0 && <div className="flex justify-between text-[13.5px]"><span className="text-muted">Resi</span><span className="num text-neg">−{fmtEur(returnSubtotal)}</span></div>}
                <div className="flex justify-between text-[13.5px]"><span className="text-muted">IVA inclusa (22%)</span><span className="num text-ink">{fmtEur(Math.abs(tax))}</span></div>
                <div className="border-t border-line pt-3 flex justify-between items-baseline">
                  <span className="text-[14.5px] font-medium text-ink">Da incassare</span>
                  <span className="num text-[24px] font-semibold text-ink">{fmtEur(netBalance)}</span>
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      {/* ── SALDO A FAVORE CLIENTE ── */}
      {outcomeType === 'refund' && (
        <div className="space-y-5">
          {/* Banner riepilogo */}
          <div className="p-4 rounded-md bg-[var(--danger-50)]">
            <div className="flex items-baseline justify-between">
              <span className="text-[14px] font-semibold text-[var(--danger-700)]">Saldo a favore del cliente</span>
              <span className="num text-[28px] font-semibold text-neg">{fmtEur(absRefund)}</span>
            </div>
            {saleSubtotal > 0 && (
              <div className="mt-2 flex items-center gap-4 text-[12px] text-[var(--danger-700)] opacity-75">
                <span>Vendita: <span className="num font-medium">{fmtEur(saleTotal)}</span></span>
                <span>·</span>
                <span>Resi: <span className="num font-medium">{fmtEur(returnSubtotal)}</span></span>
              </div>
            )}
          </div>

          {/* Scelta obbligatoria: buono o rimborso */}
          <div>
            <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-3">
              Come restituire il saldo al cliente
            </label>
            <div className="grid grid-cols-2 gap-3">
              <button onClick={() => setRefundChoice('buono')}
                className={`text-left p-5 rounded-md border-2 transition-all duration-fast ease-standard
                  ${refundChoice === 'buono' ? 'bg-[var(--bg-selected)] shadow-[inset_0_0_0_1px_var(--accent-blue)]' : 'border-line bg-surface hover:border-strong'}`}>
                <I.Gift size={26} className={refundChoice === 'buono' ? 'text-[var(--accent-blue)]' : 'text-muted'}/>
                <div className="mt-3 text-[16px] font-semibold text-ink">Buono negozio</div>
                <div className="mt-1 text-[13px] text-muted leading-snug">
                  Emetti buono da <span className="num font-medium">{fmtEur(absRefund)}</span>, spendibile nei negozi Bone & Ink
                </div>
              </button>
              <button onClick={() => { setRefundChoice('rimborso'); }}
                className={`text-left p-5 rounded-md border-2 transition-all duration-fast ease-standard
                  ${refundChoice === 'rimborso' ? 'bg-[var(--bg-selected)] shadow-[inset_0_0_0_1px_var(--accent-blue)]' : 'border-line bg-surface hover:border-strong'}`}>
                <I.Return size={26} className={refundChoice === 'rimborso' ? 'text-[var(--accent-blue)]' : 'text-muted'}/>
                <div className="mt-3 text-[16px] font-semibold text-ink">Rimborso diretto</div>
                <div className="mt-1 text-[13px] text-muted leading-snug">
                  Restituisci <span className="num font-medium">{fmtEur(absRefund)}</span> al cliente subito
                </div>
              </button>
            </div>
          </div>

          {/* Metodo rimborso (solo se rimborso diretto) */}
          {refundChoice === 'rimborso' && (
            <div>
              <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">
                Modalità rimborso
              </label>
              <div className="grid grid-cols-3 gap-2">
                {rimborsoMethods.map(m => {
                  const Ico = I[m.icon];
                  const active = method === m.id;
                  return (
                    <button key={m.id} onClick={() => setMethod(m.id)}
                      className={`text-left p-4 rounded-md border transition-all duration-fast ease-standard
                        ${active ? 'bg-[var(--bg-selected)] text-[var(--accent-blue)] shadow-[inset_0_0_0_1px_var(--accent-blue)]' : 'border-line bg-surface text-ink hover:border-strong'}`}>
                      <Ico size={20}/>
                      <div className="mt-2 text-[14px] font-medium">{m.id}</div>
                      <div className={`text-[11.5px] mt-0.5 ${active ? 'text-[var(--text-inverse)] opacity-70' : 'text-muted'}`}>{m.sub}</div>
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          {/* Info buono */}
          {refundChoice === 'buono' && (
            <div className="p-4 rounded-md bg-paper border border-line flex items-center gap-3 text-[13.5px]">
              <I.Gift size={18} className="text-muted shrink-0"/>
              <span className="text-muted">Codice buono generato automaticamente e stampato in cassa · valido 24 mesi dall'emissione</span>
            </div>
          )}
        </div>
      )}
    </PosModal>
  );
};

// ─── Completion screen ───
const CompletedView = ({ payload, onNew }) => {
  const { kind, outcomeType, refundChoice, netBalance, saleTotal, returnSubtotal, change, taxFree, method, docNum } = payload;
  const isAcconto = kind === 'acconto';
  const hasMixedBreakdown = (kind === 'mixed' || kind === 'return-only') && outcomeType !== 'even';

  let icon, title, subtitle, iconTone;

  if (isAcconto) {
    icon = <I.Check size={32}/>;
    title = 'Acconto registrato';
    subtitle = <>Acconto di <span className="num text-ink">{fmtEur(payload.amount)}</span> registrato · residuo <span className="num text-ink">{fmtEur(payload.remaining)}</span></>;
    iconTone = 'bg-[var(--success-50)] text-[var(--success-700)]';
  } else if (outcomeType === 'even') {
    icon = <I.Check size={32}/>;
    title = 'Operazione completata';
    subtitle = 'Vendita e reso si compensano · nulla da pagare';
    iconTone = 'bg-line2 text-muted';
  } else if (outcomeType === 'refund' && refundChoice === 'buono') {
    icon = <I.Gift size={32}/>;
    title = 'Operazione completata · Buono emesso';
    subtitle = <>Buono negozio da <span className="num text-ink">{fmtEur(Math.abs(netBalance || 0))}</span> stampato in cassa</>;
    iconTone = 'bg-[var(--info-50)] text-[var(--info-700)]';
  } else if (outcomeType === 'refund' && refundChoice === 'rimborso') {
    icon = <I.Return size={32}/>;
    title = 'Reso completato · Rimborso emesso';
    subtitle = <>Rimborso di <span className="num text-ink">{fmtEur(Math.abs(netBalance || 0))}</span> · {method}</>;
    iconTone = 'bg-[var(--danger-50)] text-[var(--danger-700)]';
  } else {
    icon = <I.Check size={32}/>;
    title = 'Vendita completata';
    subtitle = <>{docNum ? <>Scontrino n° <span className="num text-ink">{docNum}</span> · </> : null}{method}</>;
    iconTone = 'bg-[var(--success-50)] text-[var(--success-700)]';
  }

  return (
    <div className="fixed inset-0 z-overlay flex items-center justify-center p-6"
         style={{ background: 'rgba(0,0,0,0.40)', backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)' }}>
      <div className="bg-surface rounded-2xl shadow-modal z-modal w-full max-w-[480px] text-center p-8">
        <div className={`w-16 h-16 rounded-full mx-auto flex items-center justify-center ${iconTone}`}>
          {icon}
        </div>
        <h2 className="mt-5 text-[22px] font-semibold tracking-tight text-ink">{title}</h2>
        <p className="text-[14px] text-muted mt-1">{subtitle}</p>

        {/* Breakdown vendita + reso per transazioni miste */}
        {hasMixedBreakdown && (
          <div className="mt-5 p-4 rounded-md bg-paper border border-line space-y-2.5 text-left">
            {saleTotal > 0 && (
              <div className="flex justify-between text-[13.5px]">
                <span className="text-muted">Vendita (netto)</span>
                <span className="num text-ink">{fmtEur(saleTotal)}</span>
              </div>
            )}
            {returnSubtotal > 0 && (
              <div className="flex justify-between text-[13.5px]">
                <span className="text-muted">Resi</span>
                <span className="num text-neg">−{fmtEur(returnSubtotal)}</span>
              </div>
            )}
            <div className="border-t border-line pt-2.5 flex justify-between items-baseline">
              <span className="text-[14px] font-medium text-ink">
                {outcomeType === 'refund' ? 'Saldo a favore cliente' : 'Incassato'}
              </span>
              <span className={`num text-[22px] font-semibold ${outcomeType === 'refund' ? 'text-neg' : 'text-pos'}`}>
                {outcomeType === 'refund' ? `−${fmtEur(Math.abs(netBalance))}` : fmtEur(netBalance)}
              </span>
            </div>
          </div>
        )}

        {/* Buono emesso */}
        {refundChoice === 'buono' && (
          <div className="mt-4 p-3 rounded-md bg-[var(--info-50)] flex items-center gap-2 justify-center text-[13px] text-[var(--info-700)]">
            <I.Gift size={16}/> Buono negozio emesso e in stampa
          </div>
        )}

        {/* Resto da dare */}
        {change > 0 && (
          <div className="mt-5 p-4 rounded-md bg-paper border border-line">
            <div className="text-[12px] uppercase tracking-[0.08em] text-muted font-medium">Resto da dare</div>
            <div className="num text-[36px] font-semibold text-pos mt-1">{fmtEur(change)}</div>
          </div>
        )}

        {/* Tax-free */}
        {taxFree && (
          <div className="mt-4 p-3 rounded-md bg-[var(--info-50)] flex items-center gap-2 justify-center text-[13px] text-[var(--info-700)]">
            <I.Globe size={16}/> Cheque tax-free emesso e in stampa
          </div>
        )}

        <div className="mt-6 grid grid-cols-2 gap-2">
          <Btn variant="outline" size="lg" leading={<I.Receipt size={16}/>}
            onClick={()=>{ if (window.__toast) window.__toast('Apertura stampa…', 'info'); if (window.__print) window.__print(); }}>Ristampa</Btn>
          <Btn variant="ink" size="lg" onClick={onNew} leading={<I.Plus size={16}/>}>Nuova operazione</Btn>
        </div>
      </div>
    </div>
  );
};

// ─── Nota vendita modal ───
const NotaModal = ({ open, onClose, value, onSave }) => {
  const [text, setText] = React.useState(value || '');
  React.useEffect(() => { if (open) setText(value || ''); }, [open, value]);
  return (
    <PosModal open={open} onClose={onClose} title="Nota vendita" width="max-w-[480px]"
      footer={<div className="flex justify-end gap-2">
        <Btn variant="outline" size="md" onClick={onClose}>Annulla</Btn>
        <Btn variant="primary" size="md" onClick={() => { onSave(text); onClose(); }} leading={<I.Check size={16}/>}>Salva nota</Btn>
      </div>}>
      <textarea
        autoFocus
        value={text}
        onChange={e => setText(e.target.value)}
        placeholder="Aggiungi una nota per questo scontrino…"
        rows={4}
        className="w-full px-3 py-2.5 rounded-md border border-line bg-surface text-[14px] text-ink focus:border-strong resize-none"
      />
      <div className="mt-2 text-[12px] text-muted">La nota verrà stampata in calce allo scontrino.</div>
    </PosModal>
  );
};

// Gate PIN operatore RIUSABILE: scegli la persona e conferma col suo PIN (anche da
// tastiera). Verifica lato server senza cambiare la sessione. Usato per il venditore
// in cassa e per l'apertura/chiusura cassa (registra CHI compie l'operazione).
const OperatorPinModal = ({ open, onClose, onConfirm, title, confirmToast }) => {
  const ops = (typeof OPERATORS !== 'undefined' ? OPERATORS : (window.OPERATORS || [])).filter(o => o.active !== false);
  const [view, setView] = React.useState('select');
  const [picked, setPicked] = React.useState(null);
  const [pin, setPin] = React.useState('');
  const [err, setErr] = React.useState(false);
  const PIN_LEN = 4;

  React.useEffect(() => { if (open) { setView('select'); setPicked(null); setPin(''); setErr(false); } }, [open]);

  const verify = async (code) => {
    let ok = true;
    if (window.__API__) { const r = await window.__API__.post('/api/operators/verify-pin', { operatorId: picked.id, pin: code }).catch(() => ({ ok: false })); ok = !!(r && r.ok); }
    if (ok) {
      if (window.__toast && confirmToast) window.__toast(confirmToast(picked), 'success');
      onConfirm(picked); onClose();
    } else { setErr(true); setPin(''); setTimeout(() => setErr(false), 450); }
  };
  const pressKey = (k) => setPin(prev => {
    if (prev.length >= PIN_LEN) return prev;
    const next = prev + k;
    if (next.length === PIN_LEN) setTimeout(() => verify(next), 120);
    return next;
  });

  React.useEffect(() => {
    if (!open || view !== 'pin') return;
    const onKey = (e) => {
      if (e.key >= '0' && e.key <= '9') { e.preventDefault(); pressKey(e.key); }
      else if (e.key === 'Backspace') { e.preventDefault(); setPin(p => p.slice(0, -1)); }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, view, picked]);

  return (
    <PosModal open={open} onClose={onClose} title={view === 'select' ? (title || 'Scegli l’operatore') : 'Inserisci il PIN'} width="max-w-[460px]">
      {view === 'select' ? (
        <div className="grid grid-cols-2 gap-2.5">
          {ops.map(o => (
            <button key={o.id} onClick={() => { setPicked(o); setPin(''); setView('pin'); }}
              className="focus-ring flex items-center gap-3 p-3 rounded-lg bg-surface shadow-sm hover:shadow-md text-left transition-shadow">
              <span className="w-9 h-9 rounded-md bg-[var(--accent-blue)] text-[var(--text-inverse)] text-[12px] font-semibold flex items-center justify-center shrink-0">{o.initials}</span>
              <span className="min-w-0"><span className="block text-[13.5px] font-medium text-ink truncate">{o.name}</span><span className="block text-[11.5px] text-muted">{o.role}</span></span>
            </button>
          ))}
        </div>
      ) : (
        <div className="text-center">
          <div className="text-[14px] font-medium text-ink">{picked && picked.name}</div>
          <div className={`flex justify-center gap-2.5 my-5 ${err ? 'animate-apple-shake' : ''}`}>
            {Array.from({ length: PIN_LEN }).map((_, i) => (
              <div key={i} className={`w-3.5 h-3.5 rounded-full transition-all duration-fast ${i < pin.length ? 'bg-[var(--accent-blue)]' : 'bg-[var(--border-default)] scale-90'}`}/>
            ))}
          </div>
          <div className="grid grid-cols-3 gap-2 max-w-[280px] mx-auto">
            {['1','2','3','4','5','6','7','8','9'].map(k => (
              <button key={k} onClick={() => pressKey(k)} className="focus-ring h-14 rounded-md bg-surface shadow-sm hover:shadow-md num text-[20px] text-ink">{k}</button>
            ))}
            <button onClick={() => setView('select')} className="focus-ring h-14 rounded-md text-[12.5px] text-muted hover:text-ink">Indietro</button>
            <button onClick={() => pressKey('0')} className="focus-ring h-14 rounded-md bg-surface shadow-sm hover:shadow-md num text-[20px] text-ink">0</button>
            <button onClick={() => setPin(p => p.slice(0, -1))} className="focus-ring h-14 rounded-md text-[20px] text-muted hover:text-ink">⌫</button>
          </div>
          <div className="text-[11.5px] text-muted mt-3">Puoi digitare il PIN anche con la tastiera</div>
        </div>
      )}
    </PosModal>
  );
};

// Selettore VENDITORE in cassa: mostra SOLO chi è timbrato dentro (in turno) e lo
// si sceglie con un tap, SENZA PIN (già verificato alla timbratura). I dati sono
// live (fetch /api/timbrature/in-turno), non da bootstrap.
const SellerModal = ({ open, onClose, onSelect, storeId }) => {
  const [ops, setOps] = React.useState(null); // null = caricamento
  const sid = storeId || (window.STORE && window.STORE.id);

  const load = React.useCallback(async () => {
    setOps(null);
    let list = [];
    if (window.__API__ && window.__API__.get) {
      const r = await window.__API__.get('/api/timbrature/in-turno' + (sid ? ('?storeId=' + encodeURIComponent(sid)) : ''));
      if (r && r.ok) list = r.operatori || [];
    }
    setOps(list);
  }, [sid]);
  React.useEffect(() => { if (open) load(); }, [open, load]);

  const pick = (o) => { onSelect({ id: o.id, name: o.name, initials: o.initials }); if (window.__toast) window.__toast('Venditore: ' + o.name, 'success'); onClose(); };

  return (
    <PosModal open={open} onClose={onClose} title="Scegli il venditore" width="max-w-[460px]">
      {ops === null ? (
        <div className="py-8 text-center text-[13px] text-muted">Caricamento…</div>
      ) : ops.length === 0 ? (
        <div className="py-6 text-center">
          <div className="w-12 h-12 rounded-xl bg-paper text-muted flex items-center justify-center mx-auto mb-3"><I.Clock size={22}/></div>
          <div className="text-[14px] font-medium text-ink">Nessun operatore in turno</div>
          <div className="text-[12.5px] text-muted mt-1 mb-4">Timbra l’entrata dal pannello Timbrature per comparire qui.</div>
          <div className="flex justify-center gap-2">
            <button onClick={load} className="focus-ring px-3.5 py-2 rounded-lg text-[13px] text-ink bg-paper hover:bg-[var(--bg-hover)]">Aggiorna</button>
            <button onClick={() => { onClose(); if (window.__nav) window.__nav('timbrature'); }} className="focus-ring px-3.5 py-2 rounded-lg text-[13px] text-[var(--text-inverse)]" style={{ background: 'var(--accent-blue)' }}>Vai a Timbrature</button>
          </div>
        </div>
      ) : (
        <>
          <div className="grid grid-cols-2 gap-2.5">
            {ops.map(o => (
              <button key={o.id} onClick={() => pick(o)}
                className="focus-ring flex items-center gap-3 p-3 rounded-lg bg-surface shadow-sm hover:shadow-md text-left transition-shadow">
                <span className="w-9 h-9 rounded-md bg-[var(--accent-blue)] text-[var(--text-inverse)] text-[12px] font-semibold flex items-center justify-center shrink-0">{o.initials}</span>
                <span className="min-w-0"><span className="block text-[13.5px] font-medium text-ink truncate">{o.name}</span><span className="block text-[11.5px] text-muted">in turno · {(o.openedAt || '').slice(-5)}</span></span>
              </button>
            ))}
          </div>
          <div className="mt-3 flex justify-end"><button onClick={load} className="focus-ring text-[12.5px] text-muted hover:text-ink">Aggiorna elenco</button></div>
        </>
      )}
    </PosModal>
  );
};

// Scontrini SOSPESI: lista (dal server) + riprendi. Niente più finzione.
const HeldSalesModal = ({ open, onClose, onResume, storeId }) => {
  const [held, setHeld] = React.useState(null);
  const load = React.useCallback(async () => {
    setHeld(null);
    let list = [];
    if (window.__API__ && window.__API__.get) {
      const r = await window.__API__.get('/api/held-sales?storeId=' + encodeURIComponent(storeId || ''));
      if (r && r.ok) list = r.held || [];
    }
    setHeld(list);
  }, [storeId]);
  React.useEffect(() => { if (open) load(); }, [open, load]);

  const discard = async (h) => {
    try { await fetch('/api/held-sales/' + encodeURIComponent(h.id), { method: 'DELETE', credentials: 'same-origin' }); } catch (e) {}
    load();
  };

  return (
    <PosModal open={open} onClose={onClose} title="Scontrini in sospeso" width="max-w-[520px]">
      {held === null ? (
        <div className="py-8 text-center text-muted text-[13px]">Caricamento…</div>
      ) : held.length === 0 ? (
        <div className="py-10 flex flex-col items-center text-center gap-2 text-muted">
          <span className="w-12 h-12 rounded-2xl bg-paper flex items-center justify-center"><I.Pause size={20}/></span>
          <span className="text-[13px]">Nessuno scontrino in sospeso</span>
        </div>
      ) : (
        <div className="space-y-2">
          {held.map(h => (
            <div key={h.id} className="flex items-center gap-3 p-3 rounded-lg bg-surface shadow-sm">
              <div className="flex-1 min-w-0">
                <div className="text-[13.5px] font-medium text-ink truncate">{h.customerName || 'Cliente non associato'}</div>
                <div className="text-[11.5px] text-muted num">{h.items} art. · {h.createdAt}{h.operatorName ? ' · ' + h.operatorName : ''}</div>
              </div>
              <div className="num text-[14px] font-semibold text-ink shrink-0">{fmtEur(h.total)}</div>
              <button onClick={() => onResume(h)} className="focus-ring text-[12.5px] font-medium text-[var(--accent-blue)] hover:bg-[var(--bg-hover)] rounded-lg px-2.5 py-1.5 shrink-0">Riprendi</button>
              <button onClick={() => discard(h)} title="Elimina" className="focus-ring text-[12.5px] text-[var(--danger-700)] hover:bg-[var(--danger-50)] rounded-lg px-2 py-1.5 shrink-0">Elimina</button>
            </div>
          ))}
        </div>
      )}
    </PosModal>
  );
};

Object.assign(window, {
  SellerModal, OperatorPinModal, HeldSalesModal,
  PosModal, Modal: PosModal,
  CustomerModal, RowDiscountModal, CouponModal,
  GiftCardPreview, GiftCardModal, AccontoModal,
  ReturnSourceModal,
  CheckoutModal, CompletedView,
  NotaModal,
});