// Fin45 — Archive page
const DA = window.FIN_DATA;
const { FinMascot } = window;
const { useState: useStateA } = React;

function PageArchive() {
  const [filter, setFilter] = useStateA('all');
  const filters = [
    { id: 'all',      label: 'All editions',  count: DA.archive.length },
    { id: 'daily',    label: 'Daily',          count: DA.archive.filter(r => !r.badge).length },
    { id: 'lookback', label: 'Lookback',       count: DA.archive.filter(r => r.badge === 'LOOKBACK').length },
    { id: 'report',   label: 'Report card',    count: DA.archive.filter(r => r.badge === 'REPORT').length },
  ];
  const rows = DA.archive.filter(r => {
    if (filter === 'all') return true;
    if (filter === 'daily') return !r.badge;
    if (filter === 'lookback') return r.badge === 'LOOKBACK';
    if (filter === 'report') return r.badge === 'REPORT';
    return true;
  });

  // Group rows by month using the date string ("Fri May 16" → "May")
  const groups = {};
  for (const r of rows) {
    const m = r.date.match(/\b(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\b/);
    const month = m ? m[0] : 'Other';
    groups[month] = groups[month] || [];
    groups[month].push(r);
  }
  const order = ['May', 'Apr', 'Mar', 'Feb', 'Jan', 'Dec', 'Nov', 'Oct', 'Sep', 'Aug', 'Jul', 'Jun'];
  const orderedMonths = order.filter(m => groups[m]);

  return (
    <main className="page" style={{ paddingTop: 48, paddingBottom: 64 }}>
      <header style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, paddingBottom: 24, borderBottom: '3px double var(--text-primary)' }}>
        <div>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.18em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 12 }}>
            Archive · {DA.archive.length} editions · {365 - DA.archive.length} ahead
          </div>
          <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 500, fontSize: 56, letterSpacing: '-0.02em', margin: 0, lineHeight: 1 }}>
            Every day, since Day 1.
          </h1>
        </div>
        <FinMascot pose="reads" size={120} />
      </header>

      <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 18, color: 'var(--text-body)', maxWidth: '60ch', margin: '28px 0 0' }}>
        Lookback editions land every ten sessions. Monthly report cards close each calendar month. Everything else is just the daily Gap.
      </p>

      <div className="archive-filters">
        {filters.map(f => (
          <button key={f.id} className={'archive-chip' + (filter === f.id ? ' on' : '')} onClick={() => setFilter(f.id)}>
            {f.label} · {f.count}
          </button>
        ))}
      </div>

      {orderedMonths.length === 0 && (
        <div style={{ padding: '40px 0', textAlign: 'center', fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--text-muted)' }}>
          No editions match that filter yet.
        </div>
      )}

      {orderedMonths.map(month => (
        <div key={month}>
          <div className="archive-month">
            <span>{month} 2026</span>
            <span className="ct">{groups[month].length} {groups[month].length === 1 ? 'edition' : 'editions'}</span>
          </div>
          <ul className="archive-list">
            {groups[month].map((row, i) => (
              <li key={i} className="archive-row">
                <span className="arc-day">DAY {String(row.day).padStart(2, '0')}</span>
                <span className="arc-date">{row.date}</span>
                <span className={'arc-pnl ' + row.dir}>{row.pnl}</span>
                <a className="arc-title" href={row.badge === 'REPORT' ? '#/report-card' : (row.badge === 'LOOKBACK' ? '#/lookback' : '#/today')}>
                  {row.title}
                </a>
                <span>
                  {row.badge ? <span className={'arc-badge ' + (row.badge === 'REPORT' ? 'report' : '')}>{row.badge}</span> : null}
                </span>
              </li>
            ))}
          </ul>
        </div>
      ))}

      <div style={{ padding: '40px 0 8px', textAlign: 'center', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--text-faint)', letterSpacing: '0.06em' }}>
        {365 - DA.archive.length} editions left in the experiment.
      </div>
    </main>
  );
}

window.PageArchive = PageArchive;