// History — chronological timeline of signal events the user has logged.
// Source: GET /api/v1/master-equation/me/events  (falls back to
// /api/v1/health-sync/status if events are not yet exposed).
const History = ({ openQuickLog }) => {
  const [filter,  setFilter]  = React.useState('all');
  const [events,  setEvents]  = React.useState(null);   // null = loading
  const [error,   setError]   = React.useState(null);

  React.useEffect(() => {
    let dead = false;
    (async () => {
      try {
        const r = await fetch(window.CHVault.apiRoot + '/api/v1/master-equation/me/events?limit=200', {
          credentials: 'include',
          headers: { 'Accept': 'application/json' },
        });
        if (r.status === 404) { if (!dead) setEvents([]); return; }
        if (!r.ok) throw new Error('events-' + r.status);
        const j = await r.json();
        if (dead) return;
        setEvents(Array.isArray(j) ? j : (j.events || []));
      } catch (e) {
        if (dead) return;
        setError(e.message || String(e));
        setEvents([]);
      }
    })();
    return () => { dead = true; };
  }, []);

  const AXES = [];
  const tintFor = (code) => (window.AXIS_META && window.AXIS_META[code] && window.AXIS_META[code].tint) || 'var(--accent-clinical)';

  const filtered = events ? (filter === 'all' ? events : events.filter(e => axisOfSignal(e.signal_id) === filter)) : [];

  // Group by day label.
  const grouped = filtered.reduce((acc, e) => {
    const day = dayLabel(e.recorded_at || e.timestamp_iso || e.created_at);
    (acc[day] = acc[day] || []).push(e);
    return acc;
  }, {});

  return (
    <div data-screen-label="History">
      <div style={{ marginBottom: 24, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
        <div>
          <div className="k-eyebrow" style={{ color: 'var(--accent-clinical)' }}>History</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 40, margin: '8px 0 0', letterSpacing: '-0.02em' }}>Every axis-lift, settled to chain.</h1>
          <div style={{ fontSize: 14, color: 'var(--fg-2)', marginTop: 6, maxWidth: 640 }}>An append-only timeline of signal events your devices and actions produced — readable, filterable by axis, and the exact record researchers reference in any opt-in cohort.</div>
        </div>
        <button onClick={() => (openQuickLog || window.openQuickLog) && (openQuickLog || window.openQuickLog)(null)} style={{ padding: '10px 18px', borderRadius: 10, background: 'var(--accent-clinical)', color: 'white', border: 'none', fontWeight: 600, fontSize: 13.5, cursor: 'pointer' }}>+ Quick log</button>
      </div>

      <div style={{ display: 'flex', gap: 6, marginBottom: 18, flexWrap: 'wrap' }}>
        {AXES.map(a => (
          <button key={a} onClick={() => setFilter(a)} style={{ padding: '6px 14px', borderRadius: 999, background: filter === a ? 'var(--fg-1)' : 'var(--bg-parchment)', color: filter === a ? 'var(--bg-parchment)' : 'var(--fg-2)', border: '1px solid var(--border-1)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', cursor: 'pointer', fontWeight: 600 }}>{a}</button>
        ))}
      </div>

      <div className="k-card" style={{ padding: 22 }}>
        {events === null && (
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', padding: 24, textAlign: 'center' }}>Loading your signal-event log…</div>
        )}
        {events && events.length === 0 && (
          <div style={{ padding: 24, textAlign: 'center' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 16, color: 'var(--fg-2)', marginBottom: 8 }}>No signal events recorded yet.</div>
            <div style={{ fontSize: 13, color: 'var(--fg-3)', maxWidth: 480, margin: '0 auto' }}>
              The first event will appear here the moment you log a meal, complete a focus block, sync your wearable, or post any action that your iOS, Android, or web client sends to <code style={{ fontFamily: 'var(--font-mono)' }}>POST /api/v1/master-equation/signal</code>.
            </div>
          </div>
        )}
        {Object.entries(grouped).map(([day, items], gi) => (
          <div key={day} style={{ marginBottom: gi < Object.keys(grouped).length - 1 ? 26 : 0 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-3)', paddingBottom: 10, borderBottom: '1px solid var(--border-1)', marginBottom: 4 }}>{day}</div>
            {items.map((e, i) => {
              const code = axisOfSignal(e.signal_id);
              const tint = tintFor(code);
              return (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '70px 36px 1fr auto', alignItems: 'flex-start', gap: 14, padding: '14px 0', borderBottom: i < items.length - 1 ? '1px solid var(--border-1)' : 'none' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', paddingTop: 2 }}>{timeLabel(e.recorded_at || e.timestamp_iso || e.created_at)}</div>
                  <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--bg-bone)', border: `1px solid ${tint}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 10, letterSpacing: '0.05em', color: 'var(--fg-1)', boxShadow: `0 0 10px ${tint}30` }}>{code}</div>
                  <div>
                    <div style={{ fontSize: 13.5, fontWeight: 500, color: 'var(--fg-1)', fontFamily: 'var(--font-mono)' }}>{e.signal_id}</div>
                    <div style={{ fontSize: 12, color: 'var(--fg-2)', marginTop: 3 }}>{e.mode} · {Number(e.value).toLocaleString(undefined, { maximumFractionDigits: 2 })}{e.action_id ? ` · ${e.action_id}` : ''}{e.source ? ` · ${e.source}` : ''}</div>
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, color: tint }}>{Number(e.value).toLocaleString(undefined, { maximumFractionDigits: 2 })}</div>
                </div>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
};

function axisOfSignal(signal_id) {
  if (!signal_id) return '??';
  const prefix = String(signal_id).split('_')[0].toUpperCase();
  return ['PO','NM','ER','SC','RS','ES','TA','PV'].includes(prefix) ? prefix : '??';
}
function dayLabel(iso) {
  if (!iso) return 'Earlier';
  const d = new Date(iso);
  const today = new Date(); today.setHours(0,0,0,0);
  const yesterday = new Date(today); yesterday.setDate(yesterday.getDate() - 1);
  const startOfDay = new Date(d); startOfDay.setHours(0,0,0,0);
  if (startOfDay.getTime() === today.getTime()) return 'Today';
  if (startOfDay.getTime() === yesterday.getTime()) return 'Yesterday';
  const days = Math.round((today - startOfDay) / 86400000);
  if (days < 7) return `${days} days ago`;
  return d.toLocaleDateString();
}
function timeLabel(iso) {
  if (!iso) return '';
  try { return new Date(iso).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }); }
  catch { return ''; }
}

window.History = History;