// ──────────────────────────── EOD — Chiusura giornaliera + Apertura cassa ───────

const { useState: useStateE } = React;
const { useState: useStateAC } = React;

// ─── Apertura cassa ───
const AperturaView = ({ session, onConferma, onClose, storeId = STORE.id }) => {
  const [fondo, setFondo] = useStateAC('250');
  const [gate, setGate] = useStateAC(false); // gate PIN: chi apre la cassa
  const fondoNum = parseFloat(String(fondo).replace(',', '.')) || 0;

  const doOpen = async (operator) => {
    if (window.__API__) {
      try { await window.__API__.post('/api/cash/open', { storeId, fondo: fondoNum, openedById: operator ? operator.id : undefined }); }
      catch (e) {}
    }
    onConferma(fondoNum);
  };

  return (
    <>
      {window.OperatorPinModal && (
        <OperatorPinModal open={gate} onClose={() => setGate(false)}
          title="Chi apre la cassa?" confirmToast={(op) => 'Cassa aperta da ' + op.name}
          onConfirm={doOpen}/>
      )}
      <Topbar
        eyebrow={STORE.name + ' · Apertura cassa'}
        title="Apertura cassa"
        right={<Btn variant="outline" size="md" onClick={onClose}>Torna alla dashboard</Btn>}
      />

      <div className="px-7 py-6 space-y-6 max-w-[860px]">
        <Card title="Dichiarazione fondo cassa">
          <div className="space-y-5">
            <p className="text-[14px] text-muted leading-relaxed">
              Inserisci il fondo cassa iniziale del turno. Il valore sarà usato per il conteggio nella chiusura giornaliera.
            </p>
            <div className="max-w-[320px]">
              <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">
                Fondo cassa
              </label>
              <div className="relative">
                <input
                  type="number"
                  min="0"
                  step="10"
                  value={fondo}
                  onChange={e => setFondo(e.target.value)}
                  className="w-full h-16 px-4 pr-12 rounded-md border border-line bg-surface num text-[24px] font-medium text-ink focus:border-strong transition-all duration-fast ease-standard"
                />
                <span className="absolute right-4 top-1/2 -translate-y-1/2 num text-[18px] text-muted">€</span>
              </div>
            </div>
          </div>
        </Card>

        <Card title="Riepilogo turno">
          <dl className="space-y-3 text-[14px]">
            <div className="flex justify-between">
              <dt className="text-muted">Operatore</dt>
              <dd className="text-ink font-medium">{session?.op?.name}</dd>
            </div>
            <div className="flex justify-between">
              <dt className="text-muted">Ruolo</dt>
              <dd className="text-ink">{session?.op?.role}</dd>
            </div>
            <div className="flex justify-between">
              <dt className="text-muted">Punto vendita</dt>
              <dd className="text-ink">{STORE.name}</dd>
            </div>
            <div className="flex justify-between">
              <dt className="text-muted">Inizio turno</dt>
              <dd className="num text-ink">{STORE.shiftStart}</dd>
            </div>
          </dl>
        </Card>

        <button
          onClick={() => setGate(true)}
          className="w-full h-16 rounded-md bg-[var(--accent-blue)] text-[var(--text-inverse)] font-semibold text-[17px] flex items-center justify-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}/> Conferma apertura cassa
        </button>
      </div>
    </>
  );
};

const EODView = ({ session, onClose, onEndSession, storeId = STORE.id }) => {
  const [contato, setContato] = useStateE('');
  const [confirming, setConfirming] = useStateE(false);
  const [gate, setGate] = useStateE(false); // gate PIN: chi chiude la cassa
  const [done, setDone] = useStateE(false);

  const fondo = session?.fondo || 0;
  const cb = TODAY.cashBreakdown;
  const atteso = fondo + cb.contanti;
  const contatoNum = parseFloat(String(contato).replace(',', '.')) || 0;
  const diff = contatoNum - atteso;
  const hasCounted = contato.trim() !== '';
  const diffPos = diff >= -0.005;

  const totalIncasso = cb.carta + cb.contanti + cb.bonifico + (cb.buoni || 0);
  const dateLabel = new Date().toLocaleDateString('it-IT', {
    weekday: 'long', year: 'numeric', month: 'long', day: 'numeric',
  });
  const storeName = STORES.find(s => s.id === storeId)?.name || STORE.name;

  // Rendiconto di chiusura stampabile/PDF (riusa window.__printDoc).
  const printRendiconto = () => {
    const r = (l, v, strong) => `<tr><td>${l}</td><td class="n"${strong ? ' style="font-weight:600"' : ''}>${v}</td></tr>`;
    const closedBy = (window.__SESSION__ && window.__SESSION__.op && window.__SESSION__.op.name) || '';
    const html =
      `<div class="row"><div><div class="brand">EASY2SELL</div><h1>Rendiconto di chiusura</h1></div>` +
      `<div class="muted" style="text-align:right">${storeName}<br>${dateLabel}</div></div>` +
      `<div class="meta">` +
        `<div><span class="l">Negozio</span>${storeName}</div>` +
        `<div><span class="l">Data</span>${dateLabel}</div>` +
        `<div><span class="l">Scontrini emessi</span>${TODAY.receipts}</div>` +
        `<div><span class="l">Resi elaborati</span>${TODAY.returns}</div>` +
      `</div>` +
      `<h3 style="margin:18px 0 4px">Riepilogo incassi</h3>` +
      `<table><tbody>` +
        r('Carta / POS', fmtEur(cb.carta)) +
        r('Contanti', fmtEur(cb.contanti)) +
        r('Bonifico', fmtEur(cb.bonifico)) +
        r('Buoni negozio', fmtEur(cb.buoni || 0)) +
        r('Totale incassato', fmtEur(totalIncasso), true) +
      `</tbody></table>` +
      `<h3 style="margin:18px 0 4px">Conteggio cassa</h3>` +
      `<table><tbody>` +
        r('Fondo iniziale', fmtEur(fondo)) +
        r('Contanti incassati', '+ ' + fmtEur(cb.contanti)) +
        r('Totale atteso in cassa', fmtEur(atteso), true) +
        (hasCounted ? r('Contato reale', fmtEur(contatoNum)) : '') +
        (hasCounted ? r('Differenza', (diff > 0.005 ? '+' : '') + fmtEur(diff), true) : '') +
      `</tbody></table>` +
      `<p class="muted" style="margin-top:26px">Chiusura registrata da: ${closedBy} · ${dateLabel}</p>`;
    if (window.__printDoc) window.__printDoc('Rendiconto chiusura · ' + storeName, html);
  };

  // Chiusura: registra CHI chiude (operatore verificato col PIN), poi mostra il report.
  const doClose = async (operator) => {
    if (window.__API__) {
      try { await window.__API__.post('/api/cash/close', { storeId, contatoReale: contatoNum, atteso, differenza: diff, breakdown: cb, receipts: TODAY.receipts, returns: TODAY.returns, closedById: operator ? operator.id : undefined }); }
      catch (e) {}
    }
    setConfirming(false); setDone(true);
  };

  // ─── Schermata riepilogo finale ───
  if (done) {
    return (
      <div className="fixed inset-0 z-overlay flex items-center justify-center p-6"
           style={{ background: 'rgba(0,0,0,0.60)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)' }}>
        <div className="bg-surface rounded-2xl shadow-modal w-full max-w-[520px] overflow-hidden">
          <div className="bg-[var(--success-50)] px-6 py-8 text-center">
            <div className="w-16 h-16 rounded-full mx-auto bg-[var(--success-500)] flex items-center justify-center">
              <I.Check size={32} className="text-[var(--text-inverse)]"/>
            </div>
            <h2 className="mt-4 text-[22px] font-semibold tracking-tight text-[var(--success-700)]">Giornata chiusa</h2>
            <p className="mt-1 text-[14px] text-[var(--success-700)] opacity-80">
              {STORE.name} · {dateLabel}
            </p>
          </div>
          <div className="p-6 space-y-3 text-[14px]">
            <div className="flex justify-between">
              <span className="text-muted">Scontrini emessi</span>
              <span className="num text-ink font-medium">{TODAY.receipts}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted">Resi elaborati</span>
              <span className="num text-ink font-medium">{TODAY.returns}</span>
            </div>
            <div className="border-t border-line my-1"></div>
            <div className="flex justify-between">
              <span className="text-muted">Incasso totale</span>
              <span className="num text-ink font-medium">{fmtEur(totalIncasso)}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted">Fondo iniziale dichiarato</span>
              <span className="num text-ink">{fmtEur(fondo)}</span>
            </div>
            {hasCounted && (
              <div className="flex justify-between">
                <span className="text-muted">Differenza conteggio cassa</span>
                <span className={`num font-semibold ${diffPos ? 'text-[var(--success-700)]' : 'text-[var(--danger-700)]'}`}>
                  {diff > 0.005 ? '+' : ''}{fmtEur(diff)}
                </span>
              </div>
            )}
          </div>
          <div className="px-6 pb-6 space-y-2.5">
            <button
              onClick={printRendiconto}
              className="w-full h-12 rounded-md border border-line text-ink font-medium text-[14px] flex items-center justify-center gap-2 hover:bg-[var(--bg-hover)] transition-all duration-fast ease-standard"
            >
              <I.Receipt size={18}/> Stampa rendiconto
            </button>
            <button
              onClick={onEndSession}
              className="w-full h-16 rounded-md bg-[var(--accent-blue)] text-[var(--text-inverse)] font-semibold text-[17px] flex items-center justify-center gap-3 hover:bg-[var(--accent-blue-hover)] active:bg-[var(--accent-blue-active)] transition-all duration-fast ease-standard"
            >
              <I.Lock size={20}/> Blocca e disconnetti
            </button>
          </div>
        </div>
      </div>
    );
  }

  // ─── Schermata EOD principale ───
  return (
    <>
      {window.OperatorPinModal && (
        <OperatorPinModal open={gate} onClose={() => setGate(false)}
          title="Chi chiude la cassa?" confirmToast={(op) => 'Giornata chiusa da ' + op.name}
          onConfirm={doClose}/>
      )}
      <Topbar
        eyebrow={STORE.name + ' · Chiusura giornata'}
        title="Chiusura giornaliera"
        right={<Btn variant="outline" size="md" onClick={onClose}>Torna alla dashboard</Btn>}
      />

      <div className="px-7 py-6 space-y-6 max-w-[860px]">

        {/* Riepilogo incassi per metodo */}
        <Card title="Riepilogo incassi">
          <dl className="space-y-1">
            {[
              { label: 'Carta / POS', value: cb.carta,        icon: 'Card'   },
              { label: 'Contanti',    value: cb.contanti,     icon: 'Wallet' },
              { label: 'Bonifico',    value: cb.bonifico,     icon: 'Doc'    },
              { label: 'Buoni negozio', value: cb.buoni || 0, icon: 'Gift'   },
            ].map(m => {
              const Ico = I[m.icon];
              return (
                <div key={m.label} className="flex items-center justify-between py-3 border-b border-line2 last:border-0">
                  <dt className="flex items-center gap-2.5 text-[14px] text-muted">
                    <Ico size={16} className="shrink-0"/> {m.label}
                  </dt>
                  <dd className="num text-[14px] font-medium text-ink">{fmtEur(m.value)}</dd>
                </div>
              );
            })}
            <div className="flex items-center justify-between pt-4">
              <span className="text-[15px] font-semibold text-ink">Totale incassato</span>
              <span className="num text-[15px] font-semibold text-ink">{fmtEur(totalIncasso)}</span>
            </div>
          </dl>
        </Card>

        {/* Conteggio cassa */}
        <Card title="Conteggio cassa">
          <div className="grid grid-cols-2 gap-6">
            <dl className="space-y-3 text-[14px]">
              <div className="flex justify-between">
                <dt className="text-muted">Fondo iniziale</dt>
                <dd className="num text-ink">{fmtEur(fondo)}</dd>
              </div>
              <div className="flex justify-between">
                <dt className="text-muted">Contanti incassati</dt>
                <dd className="num text-ink">+ {fmtEur(cb.contanti)}</dd>
              </div>
              <div className="border-t border-line pt-3">
                <div className="flex justify-between">
                  <dt className="text-[14px] font-medium text-ink">Totale atteso in cassa</dt>
                  <dd className="num text-[14px] font-semibold text-ink">{fmtEur(atteso)}</dd>
                </div>
              </div>
            </dl>

            <div>
              <label className="block text-[12px] uppercase tracking-[0.08em] text-muted font-medium mb-2">
                Contato reale (inserisci)
              </label>
              <div className="relative">
                <input
                  type="number"
                  value={contato}
                  onChange={(e) => setContato(e.target.value)}
                  placeholder="0,00"
                  step="0.01"
                  className="w-full h-16 px-4 pr-12 rounded-md border border-line bg-surface num text-[24px] font-medium text-ink focus:border-strong transition-all duration-fast ease-standard"
                />
                <span className="absolute right-4 top-1/2 -translate-y-1/2 num text-[18px] text-muted">€</span>
              </div>
              {hasCounted && (
                <div className={`mt-3 p-3 rounded-md flex items-center justify-between text-[14px] font-medium
                  ${diffPos ? 'bg-[var(--success-50)] text-[var(--success-700)]' : 'bg-[var(--danger-50)] text-[var(--danger-700)]'}`}>
                  <span>Differenza</span>
                  <span className="num text-[18px] font-semibold">
                    {diff > 0.005 ? '+' : ''}{fmtEur(diff)}
                  </span>
                </div>
              )}
            </div>
          </div>
        </Card>

        {/* Riepilogo operativo */}
        <Card title="Riepilogo operativo">
          <div className="grid grid-cols-3 gap-4">
            {[
              { label: 'Scontrini emessi', value: TODAY.receipts,          icon: 'Receipt', mono: false },
              { label: 'Resi elaborati',   value: TODAY.returns,            icon: 'Return',  mono: false },
              { label: 'Scontrino medio',  value: fmtEur(TODAY.avgTicket), icon: 'Cash',    mono: true  },
            ].map(s => {
              const Ico = I[s.icon];
              return (
                <div key={s.label} className="p-4 rounded-md bg-paper border border-line text-center">
                  <Ico size={20} className="text-muted mx-auto"/>
                  <div className={`mt-2 font-semibold text-ink ${s.mono ? 'num text-[20px]' : 'text-[28px]'}`}>{s.value}</div>
                  <div className="mt-1 text-[12px] text-muted">{s.label}</div>
                </div>
              );
            })}
          </div>
        </Card>

        {/* CTA 64px */}
        <div>
          <button
            disabled={!hasCounted}
            onClick={() => setConfirming(true)}
            className="w-full h-16 rounded-md bg-[var(--accent-blue)] text-[var(--text-inverse)] font-semibold text-[17px] flex items-center justify-center gap-3 hover:bg-[var(--accent-blue-hover)] active:bg-[var(--accent-blue-active)] disabled:opacity-40 disabled:cursor-not-allowed transition-all duration-fast ease-standard shadow-soft"
          >
            <I.EOD size={20}/> Conferma chiusura
          </button>
          {!hasCounted && (
            <p className="text-center text-[13px] text-muted mt-2">
              Inserisci il contato reale per abilitare la chiusura
            </p>
          )}
        </div>
      </div>

      {/* Modale di conferma */}
      {confirming && (
        <div className="fixed inset-0 z-overlay flex items-center justify-center p-6"
             style={{ background: 'rgba(0,0,0,0.45)', backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)' }}>
          <div className="bg-surface rounded-2xl shadow-modal w-full max-w-[480px]">
            <header className="px-6 py-5 hairline">
              <h2 className="text-[17px] font-semibold text-ink">Conferma chiusura giornata</h2>
            </header>
            <div className="px-6 py-5 text-[14px] text-muted leading-relaxed">
              Stai chiudendo la giornata di{' '}
              <strong className="text-ink">{dateLabel}</strong> per{' '}
              <strong className="text-ink">{STORE.name}</strong>.{' '}
              Questa azione non è reversibile.
            </div>
            <footer className="px-6 py-4 border-t border-line flex gap-3 justify-end">
              <Btn variant="outline" size="md" onClick={() => setConfirming(false)}>Annulla</Btn>
              <Btn variant="primary" size="md" leading={<I.Check size={16}/>}
                onClick={() => { setConfirming(false); setGate(true); }}>
                Sì, chiudi la giornata
              </Btn>
            </footer>
          </div>
        </div>
      )}
    </>
  );
};

Object.assign(window, { EODView, AperturaView });