// Achievements — derived live from the signal-event stream.
// Source: GET /api/v1/master-equation/me/events  (loaded fresh on view).
const Achievements = ({ openQuickLog }) => {
  const [events, setEvents] = React.useState(null);

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

  if (events === null) {
    return (
      <div data-screen-label="Achievements">
        <div className="k-eyebrow" style={{ color: 'var(--accent-clinical)' }}>Achievements</div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 40, margin: '8px 0 24px' }}>Tallying your practice…</h1>
      </div>
    );
  }

  // ── Derive streaks per axis (consecutive distinct days with ≥1 event). ──
  const tintFor = (c) => (window.AXIS_META[c] && window.AXIS_META[c].tint) || '#888';
  const byAxis = {};
  for (const ev of events) {
    const code = axisOfSignal(ev.signal_id);
    if (!code || code === '??') continue;
    const dayKey = (new Date(ev.recorded_at)).toISOString().slice(0, 10);
    (byAxis[code] = byAxis[code] || new Set()).add(dayKey);
  }
  const streaks = [].map(code => {
    const days = Array.from(byAxis[code] || []).sort().reverse();   // newest first
    let current = 0, cursor = new Date(); cursor.setHours(0,0,0,0);
    for (const d of days) {
      if (d === cursor.toISOString().slice(0,10)) { current++; cursor.setDate(cursor.getDate() - 1); }
      else break;
    }
    return { code, name: (window.AXIS_META[code] && window.AXIS_META[code].name) || code, tint: tintFor(code), current, total: (byAxis[code] || new Set()).size };
  });

  // ── Lifetime stats ──
  const total = events.length;
  const earliest = events.length ? new Date(events[events.length-1].recorded_at) : null;
  const daysSince = earliest ? Math.max(1, Math.ceil((Date.now() - earliest.getTime()) / 86400000)) : 0;
  const sources = {};
  events.forEach(e => sources[e.source || 'web'] = (sources[e.source || 'web'] || 0) + 1);
  const lifetime = [];

  return (
    <div data-screen-label="Achievements">
      <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)' }}>Achievements</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 40, margin: '8px 0 0', letterSpacing: '-0.02em' }}>The ledger of your practice.</h1>
          <div style={{ fontSize: 14, color: 'var(--fg-2)', marginTop: 6, maxWidth: 640 }}>Derived live from your signal events — no canned badges. Each streak is consecutive days with at least one observation in that axis.</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>

      <h2 className="k-h2" style={{ marginTop: 8, marginBottom: 14 }}>Active streaks</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 32 }}>
        {streaks.map(s => (
          <div key={s.code} className="k-card" style={{ padding: 18 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
              <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--bg-bone)', border: `1px solid ${s.tint}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 9, color: 'var(--fg-1)' }}>{s.code}</div>
              <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-1)' }}>{s.name}</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 40, lineHeight: 1, color: s.tint, letterSpacing: '-0.02em' }}>{s.current}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-3)', marginTop: 4 }}>current days</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, color: 'var(--fg-2)' }}>{s.total}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>total days</div>
              </div>
            </div>
          </div>
        ))}
      </div>

      <h2 className="k-h2" style={{ marginTop: 8, marginBottom: 14 }}>Lifetime</h2>
      <div className="k-card" style={{ padding: 22 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {lifetime.map((s, i) => (
            <div key={i}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 6 }}>{s.label}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 28, color: 'var(--fg-1)', letterSpacing: '-0.02em' }}>{s.value}</div>
            </div>
          ))}
        </div>
      </div>

      {events.length === 0 && (
        <div className="k-card" style={{ padding: 22, marginTop: 18, fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--fg-2)' }}>
          No signal events recorded yet. Log a meal, a focus block, a walk, or a meditation and your first achievement will appear here in seconds.
        </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 : '??';
}

window.Achievements = Achievements;