function Verify({ onNavigate }) {
  const { t } = useI18n();
  const [input, setInput] = React.useState('');
  const [state, setState] = React.useState('idle');
  const [result, setResult] = React.useState(null);
  const [hashingFile, setHashingFile] = React.useState(false);
  const fileInputRef = React.useRef(null);

  async function checkHash(hash) {
    if (!hash.trim()) return;
    setState('checking');
    try {
      const res = await fetch(`/api/verify?hash=${encodeURIComponent(hash.trim())}`);
      const body = await res.json();
      setResult(body);
      setState(body.match ? 'match' : 'nomatch');
    } catch (e) {
      setResult(null);
      setState('nomatch');
    }
  }

  function check() {
    return checkHash(input);
  }

  async function fillSample() {
    const res = await fetch('/api/ticker');
    const items = await res.json();
    if (items[0]) setInput(items[0].hash);
    setState('idle');
  }

  // Verifying with the original file needs no wallet — it's the same pure
  // content hash (keccak256) anyone can recompute, matched against event
  // hashes recorded when the file was originally added.
  async function checkFile(file) {
    if (!file) return;
    setHashingFile(true);
    try {
      const hash = await window.contentHash(file);
      setInput(hash);
      await checkHash(hash);
    } finally {
      setHashingFile(false);
    }
  }

  const matchedProject = result && result.match ? result.project : null;

  return (
    <div>
      <div className="container-narrow py-48">
        <div className="mb-48">
          <div className="eyebrow mb-8">{t('verify.eyebrow')}</div>
          <h1 className="h2 serif">{t('verify.title')}</h1>
          <p className="ink-2 mt-16" style={{ fontSize: 16, maxWidth: 560 }}>{t('verify.body')}</p>
        </div>

        <div className="card" style={{ padding: 32 }}>
          <div className="field">
            <label className="field-label">{t('verify.field')}</label>
            <textarea
              className="textarea mono-input"
              placeholder="0x…  (64 hex chars)"
              value={input}
              onChange={e => setInput(e.target.value)}
              style={{ minHeight: 72, fontSize: 13 }}
            />
          </div>
          <div className="row between mt-16">
            <button className="btn btn-ghost btn-sm" onClick={fillSample}>{t('verify.useSample')}</button>
            <button className="btn btn-primary" onClick={check} disabled={!input.trim()} style={{ opacity: input.trim() ? 1 : 0.4 }}>
              {t('verify.cta')}
            </button>
          </div>

          <div className="mt-16 divider-dashed" style={{ paddingTop: 16 }} />
          <div className="row between" style={{ alignItems: 'center' }}>
            <div>
              <div className="small">{t('verify.byFile')}</div>
              <div className="tiny ink-3 mt-4">{t('verify.byFile.hint')}</div>
            </div>
            <input ref={fileInputRef} type="file" style={{ display: 'none' }} onChange={(e) => checkFile(e.target.files[0])} />
            <button className="btn btn-secondary btn-sm" onClick={() => fileInputRef.current.click()} disabled={hashingFile}>
              {hashingFile ? t('common.loading') : t('verify.byFile.cta')}
            </button>
          </div>
        </div>

        {state === 'checking' && (
          <div className="card mt-24" style={{ padding: 32, textAlign:'center' }}>
            <div className="eyebrow mb-16">{t('verify.searching')}</div>
            <div className="hash-mono-lg" style={{ fontSize: 18 }}>
              <ScrambleHash target={input} duration={1200} />
            </div>
          </div>
        )}

        {state === 'match' && matchedProject && (
          <div className="verify-result match mt-24">
            <div className="row gap-12 mb-24">
              <div style={{ width: 40, height: 40, borderRadius: '50%', background:'var(--success)', color:'var(--on-primary)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--serif)', fontSize: 20 }}>✓</div>
              <div>
                <div className="serif" style={{ fontSize: 28, letterSpacing:'-0.01em' }}>{t('verify.match.title')}</div>
                <div className="small ink-2 mt-4">
                  {result.onChainVerified ? t('verify.match.sub') : t('verify.match.subUnconfirmed')}
                </div>
              </div>
            </div>

            <div className="col gap-16" style={{ paddingTop: 24, borderTop:'1px solid color-mix(in oklab, var(--success) 30%, transparent)' }}>
              <VerifyRow label={t('verify.row.project')}>
                <span className="serif" style={{ fontSize: 20 }}>{matchedProject.title}</span>
              </VerifyRow>
              <VerifyRow label={t('verify.row.sealed')}><span className="mono small">{fmtTimeUTC(matchedProject.sealedAt)}</span></VerifyRow>
              <VerifyRow label={t('verify.row.chain')}><ChainBadge chain={matchedProject.chain} /></VerifyRow>
              <VerifyRow label={t('verify.row.eventsSealed')}>
                {t('verify.row.eventsSealed.val', { n: matchedProject.stats.events, ai: matchedProject.stats.aiOps, hu: matchedProject.stats.humanEdits })}
              </VerifyRow>
              {result.matchedEvent && (
                <VerifyRow label={t('verify.row.matchedEvent')}>
                  <span className="small">{result.matchedEvent.label}</span>
                  {result.matchedEvent.hasSignature && <span className="badge badge-verified ink-4" style={{ marginLeft: 8 }}>{t('verify.row.signed')}</span>}
                </VerifyRow>
              )}
            </div>

            <div className="row gap-8 mt-24">
              <button className="btn btn-primary btn-sm" onClick={() => onNavigate('certificate:' + matchedProject.id)}>{t('verify.openCert')}</button>
              {matchedProject.txHash && (
                <a
                  className="btn btn-secondary btn-sm"
                  href={'#tx:' + matchedProject.txHash}
                  onClick={(e) => { e.preventDefault(); onNavigate('tx:' + matchedProject.txHash); }}
                >
                  {t('common.viewExplorer')}
                </a>
              )}
            </div>
          </div>
        )}

        {state === 'nomatch' && (
          <div className="verify-result nomatch mt-24">
            <div className="row gap-12">
              <div style={{ width: 40, height: 40, borderRadius: '50%', background:'var(--error)', color:'var(--on-primary)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--serif)', fontSize: 24 }}>·</div>
              <div>
                <div className="serif" style={{ fontSize: 24 }}>{t('verify.noMatch.title')}</div>
                <div className="small ink-2 mt-4">{t('verify.noMatch.sub')}</div>
              </div>
            </div>
          </div>
        )}

        {/* Explainer */}
        <div className="mt-48">
          <div className="eyebrow mb-16">{t('verify.explainer')}</div>
          <div className="numbered col gap-16">
            <div>
              <div className="h4">{t('verify.explain1.title')}</div>
              <div className="small ink-3 mt-4">{t('verify.explain1.body')}</div>
            </div>
            <div>
              <div className="h4">{t('verify.explain2.title')}</div>
              <div className="small ink-3 mt-4">{t('verify.explain2.body')}</div>
            </div>
            <div>
              <div className="h4">{t('verify.explain3.title')}</div>
              <div className="small ink-3 mt-4">{t('verify.explain3.body')}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function VerifyRow({ label, children }) {
  return (
    <div className="row between">
      <span className="tiny">{label}</span>
      <span>{children}</span>
    </div>
  );
}

window.Verify = Verify;