// Activity tab — chronological log with filters. Click items with refs to jump to request.

function ActivityTab({ pal, go }) {
  const t = useTweaks();
  const jm = window.JOY_MOVE;
  const filler = t.demo !== 'clean';
  const [filter, setFilter] = React.useState('all');

  const all = filler ? jm.activity : [];
  const kinds = [
    ['all', 'Everything'],
    ['work', 'Work'],
    ['request', 'Requests'],
    ['message', 'Messages'],
    ['health', 'Health'],
    ['billing', 'Billing'],
  ];
  const kindMap = {
    work: ['work', 'done', 'launch'],
    request: ['request'],
    message: ['message'],
    health: ['health'],
    billing: ['billing'],
  };
  const shown = filter === 'all' ? all : all.filter(a => kindMap[filter]?.includes(a.kind));

  return (
    <Page pal={pal}
      kicker="Timeline"
      title="Activity"
      sub="Every change, reply, and health event on your site — in one log."
    >
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 24 }}>
        {kinds.map(([k, label]) => (
          <Pill key={k} pal={pal} active={filter === k} onClick={() => setFilter(k)}>{label}</Pill>
        ))}
      </div>

      <Card pal={pal}>
        {shown.length === 0 ? (
          <EmptyState pal={pal} icon="≡"
            title={filler ? "Nothing matches" : "No activity yet"}
            body={filler ? "Try another filter." : "Activity starts showing up here the moment work begins."}
          />
        ) : (
          <div style={{ padding: '8px 0' }}>
            {shown.map((a, i) => (
              <ActivityRow key={i} pal={pal} a={a} first={i === 0} go={go} />
            ))}
          </div>
        )}
      </Card>
    </Page>
  );
}

function ActivityRow({ pal, a, first, go }) {
  const iconFor = {
    health: { char: '◉', color: pal.success },
    work: { char: '◐', color: pal.accent },
    done: { char: '✓', color: pal.success },
    launch: { char: '▲', color: pal.accent },
    request: { char: '+', color: pal.muted },
    message: { char: '✉', color: pal.accent },
    billing: { char: '$', color: pal.muted },
  };
  const icon = iconFor[a.kind] || { char: '·', color: pal.muted };
  const clickable = !!a.ref;

  return (
    <div
      onClick={clickable ? () => go.request(a.ref) : undefined}
      style={{
        padding: '16px 24px', display: 'flex', alignItems: 'center', gap: 18,
        borderTop: first ? 'none' : `1px solid ${pal.border}`,
        cursor: clickable ? 'pointer' : 'default',
      }}
    >
      <div style={{
        width: 28, height: 28, borderRadius: '50%',
        background: pal.warm, color: icon.color,
        display: 'grid', placeItems: 'center',
        fontSize: 12, fontWeight: 700, flexShrink: 0,
        border: `1px solid ${pal.border}`,
      }}>{icon.char}</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 13, color: pal.textStrong, lineHeight: 1.5 }}>{a.what}</div>
        {a.ref && (
          <div style={{ fontSize: 11, color: pal.accent, fontFamily: "'JetBrains Mono', monospace", marginTop: 2 }}>→ {a.ref}</div>
        )}
      </div>
      <div style={{ fontSize: 11, color: pal.muted, flexShrink: 0, fontFamily: "'JetBrains Mono', monospace" }}>{a.when}</div>
    </div>
  );
}

window.ActivityTab = ActivityTab;