// Timeline page — chronological view

function TimelineEventCard({ event, isActive, setActive }) {
  const kindColors = {
    origin:     "#A8A499",
    launch:     "var(--accent)",
    release:    "var(--accent)",
    milestone:  "var(--accent-amber-500)",
    peak:       "var(--accent-amber-500)",
    "last-release": "var(--accent-coral-500)",
    silence:    "#A67DB8",
    "last-review": "var(--accent-coral-500)",
    decision:   "var(--accent-amber-500)",
    archive:    "var(--accent)",
  };
  const kindLabel = {
    origin: "전사", launch: "출시", release: "릴리즈", milestone: "마일스톤",
    peak: "정점", "last-release": "마지막 빌드", silence: "침묵",
    "last-review": "마지막 리뷰", decision: "결정", archive: "아카이브",
  };
  const color = kindColors[event.kind] || "var(--accent)";
  const isSilence = event.kind === "silence";
  return (
    <div className={"timeline-item" + (isActive ? " active" : "")}
      onMouseEnter={() => setActive(event.date)}
    >
      <div className="timeline-rail-dot" style={{background: color, borderColor: color}}>
        {event.kind === "peak" && <span>★</span>}
        {event.kind === "archive" && <span>▣</span>}
      </div>
      <div className="timeline-card" style={{"--event-color": color}}>
        <div className="timeline-date-row">
          <span className="mono" style={{color, fontWeight:700, fontSize:13}}>{event.date}</span>
          <span className="timeline-kind" style={{background:`color-mix(in srgb, ${color} 15%, transparent)`, color}}>
            {kindLabel[event.kind]}
          </span>
        </div>
        <h3 className={"timeline-title" + (isSilence ? " silence" : "")}>{event.title}</h3>
        <p className="timeline-body">{event.body}</p>
        {event.stat && (
          <div className="timeline-stat">
            <div className="mono" style={{fontSize:20, fontWeight:700, color}}>{event.stat}</div>
          </div>
        )}
      </div>
    </div>
  );
}

function YearMarker({ year, count, isActive, onClick }) {
  return (
    <button className={"year-pill" + (isActive ? " active" : "")} onClick={onClick}>
      <span className="mono" style={{fontSize:13, fontWeight:700}}>{year}</span>
      <span style={{fontSize:10, opacity:0.7}}>{count}개 사건</span>
    </button>
  );
}

function TimelinePage() {
  const events = window.TIMELINE_DATA;
  const [active, setActive] = React.useState(null);
  const [filterYear, setFilterYear] = React.useState(null);

  const years = Array.from(new Set(events.map(e => e.year))).sort();
  const byYear = {};
  events.forEach(e => { byYear[e.year] = (byYear[e.year] || 0) + 1; });

  const filtered = filterYear ? events.filter(e => e.year === filterYear) : events;

  return (
    <div className="page">
      <section className="reviews-hero">
        <div style={{fontSize:12, letterSpacing:"0.18em", fontWeight:600, textTransform:"uppercase", color:"var(--fg-muted)", marginBottom:16}}>
          Timeline · 연대기
        </div>
        <h1>10년을 <em style={{fontStyle:"normal", color:"var(--accent)"}}>14개</em>의 순간으로</h1>
        <p className="reviews-hero-sub">2015년 안드로이드 시절부터 2026년 아카이빙까지</p>
      </section>

      {/* year pills */}
      <section style={{marginTop:40}}>
        <div className="year-strip">
          <button className={"year-pill" + (filterYear === null ? " active" : "")} onClick={() => setFilterYear(null)}>
            <span className="mono" style={{fontSize:13, fontWeight:700}}>전체</span>
            <span style={{fontSize:10, opacity:0.7}}>{events.length}개 사건</span>
          </button>
          {years.map(y => (
            <YearMarker key={y} year={y} count={byYear[y]} isActive={filterYear === y} onClick={() => setFilterYear(y === filterYear ? null : y)} />
          ))}
        </div>
      </section>

      {/* timeline */}
      <section className="section" style={{marginTop:48}}>
        <div className="timeline-wrap">
          <div className="timeline-rail"></div>
          {filtered.map((e, i) => (
            <TimelineEventCard key={e.date + i} event={e} isActive={active === e.date} setActive={setActive} />
          ))}
        </div>
      </section>

      <section className="epilogue" style={{marginTop:96}}>
        <div className="epilogue-quote">"끝을 스스로 기록한다는 것."</div>
        <div style={{color:"var(--fg-muted)", fontSize:14, maxWidth:"48ch", margin:"0 auto"}}>
          앱이 사라지지 않았다. 다만 멈췄고, 그 멈춤을 지금 기록한다.
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { TimelinePage });