// IVE Mobile — Claim detail (the hero surface: C1–C6)
const { IVE_C: CL, DOMAINS } = window;
const { useTh, Eye, Hair, StatusBadge, DomainTag, ScoreReadout, ScreenHeader, Pill } = window;
const { ScorePlaneLive, zoneName, WeightBars, DecayCurve } = window;

function Section({ eyebrow, children, first }) {
  const th = useTh();
  return (
    <div style={{ padding: '22px 22px', borderTop: first ? 'none' : `1px solid ${th.rule}` }}>
      {eyebrow && <div style={{ marginBottom: 14 }}><Eye>{eyebrow}</Eye></div>}
      {children}
    </div>
  );
}

function EvidenceItem({ row, counter }) {
  const th = useTh();
  const [title, source, cred, tag] = row;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, padding: '12px 0', borderBottom: `0.5px solid ${th.ruleSoft}`, alignItems: 'center' }}>
      <div style={{ minWidth: 0 }}>
        <div className="ive-serif" style={{ fontSize: 13.5, color: th.ink, fontWeight: 400, lineHeight: 1.3 }}>{title}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
          <span className="ive-mono" style={{ fontSize: 9.5, color: counter ? CL.disputed : CL.ochreDeep, letterSpacing: '0.04em' }}>↗ {source}</span>
          <span className="ive-mono" style={{ fontSize: 9, color: th.ink3, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{tag}</span>
        </div>
      </div>
      <div style={{ textAlign: 'right' }}>
        <div className="ive-mono" style={{ fontSize: 14, color: th.ink, fontVariantNumeric: 'tabular-nums' }}>{cred.toFixed(2)}</div>
        <div className="ive-mono" style={{ fontSize: 8, color: th.ink3, letterSpacing: '0.1em', textTransform: 'uppercase' }}>cred.</div>
      </div>
    </div>
  );
}

function ClaimDetail({ claim, onBack, saved, onToggleSave }) {
  const th = useTh();
  const [probe, setProbe] = React.useState({ eb: claim.eb, sc: claim.sc });
  const probed = probe.eb !== claim.eb || probe.sc !== claim.sc;
  const d = DOMAINS[claim.domain];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <ScreenHeader onBack={onBack} right={
        <button onClick={onToggleSave} style={{ all: 'unset', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6, color: saved ? CL.ochre : th.ink2 }}>
          <svg width="13" height="16" viewBox="0 0 13 16"><path d="M1 1h11v14l-5.5-3.6L1 15V1z" fill={saved ? CL.ochre : 'none'} stroke={saved ? CL.ochre : th.ink2} strokeWidth="1.3" strokeLinejoin="round"/></svg>
          <span className="ive-mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase' }}>{saved ? 'Following' : 'Follow'}</span>
        </button>
      } />
      <div style={{ flex: 1, overflow: 'auto', WebkitOverflowScrolling: 'touch' }}>
        {/* Hero header */}
        <Section first>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
            <DomainTag domain={claim.domain} />
            <span className="ive-mono" style={{ fontSize: 9.5, color: th.ink3, letterSpacing: '0.06em' }}>claim · {claim.id}</span>
          </div>
          <div className="ive-serif" style={{ fontSize: 25, fontWeight: 300, lineHeight: 1.22, letterSpacing: '-0.015em', color: th.ink, textWrap: 'pretty' }}>
            {claim.claim}
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginTop: 22 }}>
            <ScoreReadout eb={claim.eb} sc={claim.sc} size={32} />
            <StatusBadge status={claim.status} />
          </div>
        </Section>

        {/* The instrument */}
        <Section eyebrow="The instrument · drag to scrub">
          <ScorePlaneLive claim={claim} probe={probe} onProbe={setProbe} size={300} />
          <div style={{ marginTop: 8, background: th.surface, border: `1px solid ${th.rule}`, padding: '12px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <Eye style={{ fontSize: 9 }}>{probed ? 'Probe' : 'Scored point'} · EB / SC</Eye>
              <div className="ive-mono" style={{ fontSize: 18, color: th.ink, marginTop: 3, fontVariantNumeric: 'tabular-nums' }}>
                {probe.eb.toFixed(2)} <span style={{ color: th.ink3 }}>/</span> {probe.sc.toFixed(2)}
              </div>
            </div>
            <div style={{ width: 1, alignSelf: 'stretch', background: th.rule }} />
            <div className="ive-serif" style={{ fontSize: 12, color: th.ink2, fontWeight: 300, lineHeight: 1.35, flex: 1, marginLeft: 14, textWrap: 'pretty' }}>
              {zoneName(probe.eb, probe.sc)}
            </div>
          </div>
          <div style={{ marginTop: 20, display: 'grid', gap: 20 }}>
            <WeightBars title="Evidence basis · decomposition" parts={claim.ebParts} />
            <WeightBars title="Social consensus · decomposition" parts={claim.scParts} />
          </div>
        </Section>

        {/* Reasoning */}
        <Section eyebrow="Reading">
          <div className="ive-serif" style={{ fontSize: 15, color: th.ink2, fontWeight: 300, lineHeight: 1.55, textWrap: 'pretty' }}>
            {claim.summary}
          </div>
        </Section>

        {/* Decay */}
        <Section eyebrow={`Temporal decay · half-life ${d.halfLife >= 36500 ? '∞ (does not decay)' : d.halfLife + ' days'}`}>
          <DecayCurve halfLife={d.halfLife} ageDays={claim.ageDays} decay={claim.decay} />
          <div style={{ display: 'flex', gap: 24, marginTop: 14 }}>
            <Stat label="Decay factor" value={claim.decay.toFixed(2)} />
            <Stat label="Last verified" value={claim.verifiedAt} mono />
            <Stat label="Age" value={`${claim.ageDays}d`} />
          </div>
        </Section>

        {/* Evidence */}
        <Section eyebrow={`Evidence · ${claim.sources} sources ranked`}>
          {claim.evidence.map((r, i) => <EvidenceItem key={i} row={r} />)}
        </Section>

        {/* Counter-arguments */}
        <Section eyebrow="Credible dissent · never hidden">
          {claim.counter.map((r, i) => <EvidenceItem key={i} row={r} counter />)}
        </Section>

        {/* Provenance */}
        <Section eyebrow="Provenance · audit trail">
          <div style={{ position: 'relative', paddingLeft: 16 }}>
            <div style={{ position: 'absolute', left: 3, top: 4, bottom: 4, width: 1, background: th.rule }} />
            {claim.provenance.map((p, i) => (
              <div key={i} style={{ position: 'relative', paddingBottom: i === claim.provenance.length - 1 ? 0 : 16 }}>
                <span style={{ position: 'absolute', left: -16, top: 4, width: 7, height: 7, background: i === claim.provenance.length - 1 ? CL.ochre : th.ink3 }} />
                <div className="ive-serif" style={{ fontSize: 13, color: th.ink, lineHeight: 1.3 }}>{p[0]}</div>
                <div className="ive-mono" style={{ fontSize: 9.5, color: th.ink3, letterSpacing: '0.05em', marginTop: 2 }}>{p[1]} · {p[2]}</div>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
            <Pill style={{ flex: 1 }}>Open an appeal</Pill>
            <Pill style={{ flex: 1 }} solid>Cite this claim</Pill>
          </div>
        </Section>
        <div style={{ height: 24 }} />
      </div>
    </div>
  );
}

function Stat({ label, value, mono }) {
  const th = useTh();
  return (
    <div>
      <Eye style={{ fontSize: 9 }}>{label}</Eye>
      <div className={mono ? 'ive-mono' : 'ive-mono'} style={{ fontSize: 15, color: th.ink, marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>{value}</div>
    </div>
  );
}

Object.assign(window, { ClaimDetail });