// Shared UI components

function Header({ currentPage, setPage, theme, toggleTheme }) {
  const pages = [
    { key: "home", label: "홈" },
    { key: "stories", label: "스토리" },
    { key: "reviews", label: "리뷰" },
    { key: "sales", label: "판매" },
    { key: "timeline", label: "연대기" },
    { key: "versions", label: "버전" },
    { key: "screenshots", label: "스크린샷" },
  ];
  return (
    <header className="site-header">
      <div className="header-inner">
        <div className="brand" onClick={() => setPage("home")}>
          <div className="brand-mark">TD</div>
          <div>
            <div>투데잇 아카이브</div>
            <div className="brand-sub" style={{fontSize:11,marginTop:-2,fontWeight:400}}>Todait Archive Wiki · 2016 – 2026</div>
          </div>
        </div>
        <nav className="nav">
          {pages.map(p => (
            <button
              key={p.key}
              className={"nav-item" + (currentPage === p.key ? " active" : "")}
              onClick={() => setPage(p.key)}
            >
              {p.label}
            </button>
          ))}
        </nav>
        <button className="icon-btn" onClick={toggleTheme} aria-label="테마 전환">
          {theme === "dark" ? "☀" : "☾"}
        </button>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="footer-inner">
        <div><strong>투데잇 아카이브 위키</strong> · 2026-04-24 생성</div>
        <div>데이터 출처: ASC API · 코드 MIT · 콘텐츠 CC-BY-NC 4.0</div>
        <div className="footer-links">
          <a href="#">GitHub ↗</a>
          <a href="#">방법론</a>
          <a href="#">아카이브에 대하여</a>
        </div>
        <div style={{color:"var(--fg-subtle)", fontSize:12, marginTop:8, fontFamily:"var(--font-mono)"}}>
          이 사이트는 투데잇 사용자들이 남긴 2,200개의 목소리를 보존하기 위해 만들어졌습니다.
        </div>
      </div>
    </footer>
  );
}

function formatKR(n) {
  if (n >= 1_0000_0000) return (n / 1_0000_0000).toFixed(1) + "억";
  if (n >= 1_0000)      return Math.round(n / 1_0000).toLocaleString("ko-KR") + "만";
  return n.toLocaleString("ko-KR");
}

function CountUp({ end, duration = 1400, format = "exact", suffix = "" }) {
  const [n, setN] = React.useState(typeof end === "number" ? 0 : end);
  React.useEffect(() => {
    if (typeof end !== "number") { setN(end); return; }
    let rafId = null;
    let start = null;
    const tick = (t) => {
      if (start == null) start = t;
      const elapsed = t - start;
      const p = Math.min(1, elapsed / duration);
      const eased = 1 - Math.pow(1 - p, 4);
      setN(end * eased);
      if (p < 1) rafId = requestAnimationFrame(tick);
    };
    rafId = requestAnimationFrame(tick);
    return () => { if (rafId) cancelAnimationFrame(rafId); };
  }, [end, duration]);

  if (typeof end !== "number") return <span>{end}</span>;
  let display;
  if (format === "rating") display = n.toFixed(2);
  else if (format === "percent") display = n.toFixed(1) + "%";
  else display = Math.round(n).toLocaleString("ko-KR");
  return <span>{display}{suffix}</span>;
}

function KpiCard({ value, label, annotation, format, size = "md" }) {
  return (
    <div className="kpi-card">
      <div className={"kpi-value" + (size === "sm" ? " kpi-value-sm" : "")}>
        <CountUp end={value} format={format} />
      </div>
      <div className="kpi-label">{label}</div>
      {annotation && (
        <div className="kpi-annotation">
          <span>↑</span>
          <span>{annotation}</span>
        </div>
      )}
    </div>
  );
}

function Narrative({ children, className = "" }) {
  return <div className={"narrative " + className}>{children}</div>;
}

Object.assign(window, { Header, Footer, KpiCard, CountUp, Narrative, formatKR });