/* ════════════════════════════════════════════════════════════
   SignedLedger — courtroom-style index of every contract the
   user has signed. Closes the loop on the sign modal.
   ════════════════════════════════════════════════════════════ */

const { useState: sl_s, useEffect: sl_e } = React;

function SignedLedger() {
  const [items, setItems] = sl_s([]);
  const [focus, setFocus] = sl_s(null);
  const [review, setReview] = sl_s(null);
  const lang = window.__LANG || 'zh';

  const load = () => {
    const out = [];
    try {
      for (let i = 0; i < localStorage.length; i++) {
        const k = localStorage.key(i);
        if (!k || !k.startsWith('sig.')) continue;
        try {
          const v = JSON.parse(localStorage.getItem(k));
          const sym = k.slice(4);
          const rec = (window.MOCK_RECS || []).find(r => r.symbol === sym);
          if (rec) out.push({ sym, rec, t: v.t, img: v.img });
        } catch (e) {}
      }
    } catch (e) {}
    out.sort((a, b) => b.t - a.t);
    setItems(out);
  };

  sl_e(() => {
    load();
    const id = setInterval(load, 1500);
    const onStorage = () => load();
    window.addEventListener('storage', onStorage);
    return () => { clearInterval(id); window.removeEventListener('storage', onStorage); };
  }, []);

  if (items.length === 0) return null;

  // P&L since sign (same hash policy as ContractFollowup)
  const calcPnl = (sym) => {
    let h = 0; for (let i = 0; i < sym.length; i++) h = (h*31 + sym.charCodeAt(i)) % 1000;
    return ((h % 11) - 4) * 0.8;
  };

  return (
    <section className="sl-ledger" aria-label={lang==='zh'?'承诺书存档':'Signed contracts'}>
      <header className="sl-mast">
        <span className="sl-eyebrow">
          <span className="sl-spool"/>
          {lang==='zh'?'承诺存档 · CONTRACTS FILED':'CONTRACTS FILED'}
        </span>
        <span className="sl-count">{items.length} {lang==='zh'?'份':'on file'}</span>
      </header>

      <ul className="sl-list">
        {items.map((it) => {
          const pnl = calcPnl(it.sym);
          const days = Math.max(0, Math.floor((Date.now() - it.t) / 86400000));
          const breached = pnl <= -3.5;
          return (
            <li key={it.sym} className={'sl-row' + (breached ? ' breached' : '')}>
              <button className="sl-thumb" onClick={() => setFocus(it)} aria-label="view signature">
                {it.img
                  ? <img src={it.img} alt="signature" />
                  : <span className="sl-thumb-empty">×</span>}
              </button>
              <div className="sl-meta">
                <div className="sl-toprow">
                  <span className="sl-sym">{it.sym}</span>
                  <span className="sl-name">{it.rec.name}</span>
                </div>
                <div className="sl-subrow">
                  <span className="sl-when">
                    {new Date(it.t).toLocaleDateString(lang==='zh'?'zh-CN':'en-US')}
                    <span className="sl-days"> · {days}d</span>
                  </span>
                  <span className={'sl-pnl ' + (pnl >= 0 ? 'up' : 'dn')}>
                    {pnl >= 0 ? '+' : ''}{pnl.toFixed(2)}%
                  </span>
                </div>
                {breached && (
                  <div className="sl-warn">
                    <span className="sl-warn-flag">§III</span>
                    {lang==='zh'?'已触发承诺第三条 — 请回顾':'Clause §III triggered — please revisit'}
                  </div>
                )}
                {(days >= 30 || breached) && window.ContractReview && (
                  <button className="sl-review" onClick={() => { setReview(it); window.haptic?.light?.(); }}>
                    {lang==='zh'?'三十日回顾 →':'30-day review →'}
                  </button>
                )}
              </div>
              <span className={'sl-stamp ' + (breached ? 'red' : 'green')}>
                {breached ? 'IN BREACH' : 'IN FORCE'}
              </span>
            </li>
          );
        })}
      </ul>

      {window.ContractReview && <window.ContractReview open={!!review} item={review} onClose={() => setReview(null)} />}

      {focus && (
        <div className="sl-modal-bg" onClick={() => setFocus(null)}>
          <div className="sl-modal" onClick={(e) => e.stopPropagation()}>
            <div className="sl-modal-mast">
              <span className="sl-fn">FILE · {focus.sym}</span>
              <button className="sl-close" onClick={() => setFocus(null)}>×</button>
            </div>
            <div className="sl-modal-body">
              {focus.img
                ? <img src={focus.img} alt="signature" className="sl-modal-sig"/>
                : <div className="sl-modal-empty">{lang==='zh'?'(无签名图像)':'(no signature data)'}</div>}
              <div className="sl-modal-line">
                {lang==='zh'?'签署日期':'Signed on'} · <b>{new Date(focus.t).toLocaleString(lang==='zh'?'zh-CN':'en-US')}</b>
              </div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

window.SignedLedger = SignedLedger;