// IVE Mobile — Today feed (D1), domain filter (D2), Saved (D4)
const { IVE_C: F, DOMAINS, CLAIMS, FEED_TODAY, STATUS_LABEL } = window;
const { useTh, Eye, Hair, StatusBadge, DomainTag, ScoreReadout, ScreenHeader } = window;
const { MiniPlane } = window;
const { getClaim } = window;

// ── Claim card ───────────────────────────────────────────────────
function ClaimCard({ claim, onOpen }) {
  const th = useTh();
  return (
    <button onClick={() => onOpen(claim.id)} style={{
      all: 'unset', cursor: 'pointer', display: 'block', width: '100%', boxSizing: 'border-box',
      background: th.surface, border: `1px solid ${th.rule}`, padding: 18, textAlign: 'left',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
        <DomainTag domain={claim.domain} />
        <StatusBadge status={claim.status} size="sm" />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 60px', gap: 14, alignItems: 'start' }}>
        <div className="ive-serif" style={{ fontSize: 17, fontWeight: 300, lineHeight: 1.28, letterSpacing: '-0.01em', color: th.ink, textWrap: 'pretty' }}>
          {claim.claim}
        </div>
        <MiniPlane eb={claim.eb} sc={claim.sc} size={60} />
      </div>
      <div style={{ height: 1, background: th.ruleSoft, margin: '14px 0 12px' }} />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <ScoreReadout eb={claim.eb} sc={claim.sc} size={19} gap={16} />
        <div className="ive-mono" style={{ fontSize: 9, color: th.ink3, letterSpacing: '0.06em', textAlign: 'right' }}>
          {claim.sources} sources<br />verified {claim.verifiedAt}
        </div>
      </div>
    </button>
  );
}

// ── Today feed ───────────────────────────────────────────────────
function FeedScreen({ onOpen }) {
  const th = useTh();
  const [domain, setDomain] = React.useState('all');
  const items = FEED_TODAY.map(getClaim).filter((c) => domain === 'all' || c.domain === domain);
  const decaying = CLAIMS.find((c) => c.id === 'b7d240a1');
  const chips = ['all', ...Object.keys(DOMAINS)];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <ScreenHeader eyebrow={`The curve · ${new Date().toISOString().slice(0,10)}`} title="On the curve today" right={
        <span className="ive-mono" style={{ fontSize: 9, color: th.ink3, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{FEED_TODAY.length} fresh</span>
      } />
      <div style={{ flex: 1, overflow: 'auto', WebkitOverflowScrolling: 'touch' }}>
        {/* domain filter */}
        <div style={{ display: 'flex', gap: 8, overflowX: 'auto', padding: '14px 22px', borderBottom: `1px solid ${th.rule}` }}>
          {chips.map((c) => {
            const on = domain === c;
            return (
              <button key={c} onClick={() => setDomain(c)} style={{
                all: 'unset', cursor: 'pointer', flexShrink: 0, whiteSpace: 'nowrap',
                fontFamily: 'var(--ive-mono)', fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase',
                padding: '6px 11px', color: on ? (th.dark ? F.ink : F.paper) : th.ink2,
                background: on ? (th.dark ? F.ochre : F.ink) : 'transparent', border: `1px solid ${on ? (th.dark ? F.ochre : F.ink) : th.rule}`,
              }}>{c === 'all' ? 'All domains' : DOMAINS[c].label}</button>
            );
          })}
        </div>

        {/* decay alert */}
        {domain === 'all' && (
          <button onClick={() => onOpen(decaying.id)} style={{
            all: 'unset', cursor: 'pointer', display: 'block', width: '100%', boxSizing: 'border-box',
            padding: '14px 22px', background: 'rgba(111,125,58,0.10)', borderBottom: `1px solid ${th.rule}`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 8, height: 8, background: F.ochre, flexShrink: 0 }} />
              <div>
                <div className="ive-mono" style={{ fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: F.ochreDeep }}>Decay alert · approaching recheck</div>
                <div className="ive-serif" style={{ fontSize: 13.5, color: th.ink, fontWeight: 300, marginTop: 3, lineHeight: 1.3, textWrap: 'pretty' }}>
                  A journalistic claim you can see has decayed past 0.70 and is queued for re-verification.
                </div>
              </div>
            </div>
          </button>
        )}

        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: 18 }}>
          {items.map((c) => <ClaimCard key={c.id} claim={c} onOpen={onOpen} />)}
          {items.length === 0 && (
            <div className="ive-serif" style={{ fontSize: 14, color: th.ink3, fontWeight: 300, textAlign: 'center', padding: 40 }}>
              No fresh verifications in this domain today.
            </div>
          )}
        </div>
        <div style={{ height: 12 }} />
      </div>
    </div>
  );
}

// ── Saved ────────────────────────────────────────────────────────
function SavedScreen({ savedIds, onOpen, onToggleSave }) {
  const th = useTh();
  const items = savedIds.map(getClaim).filter(Boolean);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <ScreenHeader eyebrow="Followed claims" title="Saved" right={
        <span className="ive-mono" style={{ fontSize: 9, color: th.ink3, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{items.length} followed</span>
      } />
      <div style={{ flex: 1, overflow: 'auto', WebkitOverflowScrolling: 'touch' }}>
        {items.length === 0 ? (
          <div className="ive-serif" style={{ fontSize: 15, color: th.ink3, fontWeight: 300, textAlign: 'center', padding: '60px 40px', lineHeight: 1.5 }}>
            Follow a claim to be notified when its score changes or it crosses a decay threshold.
          </div>
        ) : (
          <div style={{ padding: 18 }}>
            <div style={{ background: th.surface, border: `1px solid ${th.rule}`, padding: '14px 16px', marginBottom: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ width: 8, height: 8, background: F.ochre, flexShrink: 0 }} />
              <div className="ive-serif" style={{ fontSize: 12.5, color: th.ink2, fontWeight: 300, lineHeight: 1.4 }}>
                You'll be notified on any score change or decay crossing for these claims.
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {items.map((c) => <ClaimCard key={c.id} claim={c} onOpen={onOpen} />)}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { ClaimCard, FeedScreen, SavedScreen });