/* aevion.ai — receipt wall + modal, verifier demo */
const { useState: useStateP } = React;
const AevDSP = window.AevionDesignSystem_a984fb;

function ReceiptModal({ receipt, onClose }) {
  const { StatusGlow } = AevDSP;
  if (!receipt) { return null; }
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} role="dialog" aria-modal="true">
        <div className="modal-head">
          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
            <span className="aui-id">{receipt.id}</span>
            <h3 style={{ fontSize: 'var(--aev-text-xl)' }}>{receipt.type}</h3>
          </div>
          <button className="aui-btn aui-btn-ghost" onClick={onClose}>CLOSE</button>
        </div>
        <StatusGlow state={receipt.state} pulse={false}></StatusGlow>
        <dl className="modal-facts">
          <dt>receipt type</dt><dd>{receipt.type}</dd>
          <dt>sha-256</dt><dd>{receipt.hash}</dd>
          <dt>gate</dt><dd>{receipt.gate}</dd>
          <dt>run</dt><dd>{receipt.runId} · {receipt.timestamp}</dd>
          <dt>claim ceiling</dt><dd>{receipt.claimCeiling.replace('CLAIM CEILING · ', '')}</dd>
          <dt>public claim</dt><dd className="aui-c-red">permitted: false</dd>
          <dt>owner review</dt><dd className={receipt.state === 'pending' || receipt.state === 'sealed' ? 'aui-c-amber' : ''}>
            required: {receipt.state === 'pending' || receipt.state === 'sealed' ? 'true — queued' : 'true — cleared'}</dd>
        </dl>
        <span className="aui-meta">SYNTHETIC RECEIPT · DEMO MODE · REPLAY AVAILABLE IN COMMAND NEXUS</span>
      </div>
    </div>
  );
}

function ReceiptWall() {
  const { EvidenceReceiptCard } = AevDSP;
  const [open, setOpen] = useStateP(null);
  return (
    <section className="sec" id="receipts" data-ledger="RECEIPT_WALL" data-screen-label="Receipt wall">
      <div className="sec-head">
        <span className="aev-eyebrow">02 · EVIDENCE LEDGER</span>
        <h2>The receipt wall.</h2>
        <p>Every major action produces or references a receipt. Open one — the proof travels with the claim.</p>
      </div>
      <div className="rwall">
        {window.AEV_RECEIPTS.map(r => (
          <EvidenceReceiptCard key={r.id} receipt={r} selected={open != null && open.id === r.id} onOpen={setOpen}></EvidenceReceiptCard>
        ))}
      </div>
      <ReceiptModal receipt={open} onClose={() => setOpen(null)}></ReceiptModal>
    </section>
  );
}

function VerifierDemo() {
  const { StatusGlow } = AevDSP;
  const [value, setValue] = useStateP('');
  const [result, setResult] = useStateP(null);
  const [stageN, setStageN] = useStateP(-1);
  const AEV_VSTEPS = ['CHECK_HASH', 'CHECK_ANCHOR', 'CHECK_CHAIN'];

  function verify() {
    const v = value.trim().toLowerCase();
    if (!v || stageN >= 0) { return; }
    const known = window.AEV_KNOWN_HASHES[v];
    let verdict;
    if (known) {
      verdict = { state: 'verified', label: 'PASS', detail: known.id + ' · ' + known.type + ' · anchor intact' };
    } else if (Object.keys(window.AEV_KNOWN_HASHES).some(h => h.slice(0, 8) === v.slice(0, 8))) {
      verdict = { state: 'halted', label: 'TAMPERED', detail: 'prefix matches a known receipt — payload hash differs' };
    } else {
      verdict = { state: 'denied', label: 'FAIL', detail: 'no receipt with this hash in the ledger' };
    }
    setResult(null);
    setStageN(0);
    AEV_VSTEPS.forEach((_, i) => setTimeout(() => setStageN(i + 1), 300 * (i + 1)));
    setTimeout(() => {
      setStageN(-1);
      setResult(verdict);
      window.AevSound.blip(verdict.state === 'verified' ? 1080 : verdict.state === 'halted' ? 240 : 330, 0.16);
    }, 300 * AEV_VSTEPS.length + 260);
  }

  return (
    <section className="sec" id="verify" data-ledger="VERIFIER" data-screen-label="Verifier">
      <div className="verifier">
        <div className="sec-head" style={{ marginBottom: 0 }}>
          <span className="aev-eyebrow">03 · RECEIPT VERIFIER</span>
          <h2>Don't trust us. Verify us.</h2>
          <p>Drop a receipt hash. The verifier checks it against the ledger and answers in the only voice it has: PASS, FAIL, or TAMPERED.</p>
          <div className="demo-flags">
            <span className="aui-pill aui-c-amber">DEMO MODE</span>
            <span className="aui-pill aui-c-dim">NO LIVE SECRET ACCESS</span>
            <span className="aui-pill aui-c-dim">NO EXTERNAL ACTION</span>
          </div>
        </div>
        <div className="vconsole">
          <span className="aev-eyebrow">SHA-256 RECEIPT HASH</span>
          <input className="vinput" value={value} spellCheck="false"
            placeholder="paste a receipt hash…"
            onChange={e => { setValue(e.target.value); setResult(null); }}
            onKeyDown={e => { if (e.key === 'Enter') { verify(); } }} />
          <div className="vsamples">
            {window.AEV_VERIFY_SAMPLES.map(s => (
              <button className="vsample" key={s.label} onClick={() => { setValue(s.value); setResult(null); }}>
                {s.label}: {s.value.slice(0, 10)}…
              </button>
            ))}
          </div>
          <div style={{ display: 'flex', gap: '10px' }}>
            <button className="aui-btn aui-btn-primary" onClick={verify} disabled={!value.trim() || stageN >= 0}>VERIFY</button>
            <button className="aui-btn aui-btn-ghost" onClick={() => { setValue(''); setResult(null); }}>CLEAR</button>
          </div>
          <div className="vresult">
            {stageN >= 0 ? (
              <div className="vstages">
                {AEV_VSTEPS.map((s, i) => (
                  <span key={s} data-on={i === stageN} data-done={i < stageN}>{s}{i < stageN ? ' · OK' : i === stageN ? ' ···' : ''}</span>
                ))}
              </div>
            ) : result
              ? <StatusGlow state={result.state} label={result.label} pulse={false}></StatusGlow>
              : <span className="vresult-detail">awaiting hash — ledger holds {window.AEV_RECEIPTS.length} synthetic receipts</span>}
            {result && stageN < 0 ? <span className="vresult-detail">{result.detail}</span> : null}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ReceiptWall, VerifierDemo });