/* global React, Nav, Footer, Tag */
const { useState, useMemo } = React;

const NEWS = [
  { id: "N-2025-03", date: "Mar 5, 2025",  cat: "Publication", title: "MindBench.ai launches as an LLM evaluation platform for mental health", desc: "A peer-reviewed framework for systematically evaluating large language models in mental health applications, developed with NAMI." },
  { id: "N-2025-02", date: "Feb 1, 2025",  cat: "Milestone",   title: "SODP surpasses 500 members across 50+ countries", desc: "The Society's membership now spans clinicians, researchers, students, and technologists across six continents." },
  { id: "N-2025-01", date: "Jan 20, 2025", cat: "Publication", title: "New paper: Education, navigators, and AI standards", desc: "A summary of the Society's three programmatic pillars and their first-year outcomes published in JMIR Mental Health." },
  { id: "N-2024-05", date: "Dec 12, 2024", cat: "Program",     title: "Digital Navigator curriculum reaches seven implementation sites", desc: "The four-module training is now active in the United States, Germany, Canada, Australia, and Colombia." },
  { id: "N-2024-04", date: "Nov 8, 2024",  cat: "Partnership", title: "JMIR Mental Health named SODP's official journal", desc: "The partnership creates a dedicated home for digital psychiatry research and supports open-access dissemination." },
  { id: "N-2024-03", date: "Oct 21, 2024", cat: "Publication", title: "Systematic review on LLM bias in mental health applications", desc: "Published findings on identifying and mitigating bias in language-model-based mental health interventions." },
  { id: "N-2024-02", date: "Sep 3, 2024",  cat: "Milestone",   title: "Society of Digital Psychiatry formally established", desc: "Founded by an international group of eleven co-leaders to address fragmentation in digital mental health." },
];

const CATS = ["All", "Publication", "Program", "Partnership", "Milestone"];

const TAG = {
  Publication: "blue",
  Program: "violet",
  Partnership: "amber",
  Milestone: "emerald",
};

/* ────────────────────────────────────────────────────────── */

function Header() {
  return (
    <section style={{ padding: "72px 0 40px", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22 }}>
          <span className="rule-thick" />
          <span className="eyebrow">News & dispatches</span>
        </div>
        <h1 className="t-display" style={{ maxWidth: 940 }}>
          Updates from the Society and the field of digital psychiatry.
        </h1>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────── */

function NewsList() {
  const [cat, setCat] = useState("All");
  const filtered = useMemo(() => cat === "All" ? NEWS : NEWS.filter(n => n.cat === cat), [cat]);

  // Category counts for filter chip badges
  const counts = useMemo(() => {
    const c = {};
    NEWS.forEach(n => { c[n.cat] = (c[n.cat] || 0) + 1; });
    return c;
  }, []);

  return (
    <section style={{ padding: "72px 0 96px" }}>
      <div className="wrap">
        <div className="section-head">
          <div className="head-l">
            <span className="num">/ 01</span>
            <span className="eyebrow">All updates · Filter by category</span>
          </div>
          <span className="caption mono" style={{ color: "var(--ink-4)", fontSize: 11, letterSpacing: "0.06em" }}>
            {filtered.length} of {NEWS.length}
          </span>
        </div>

        <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 24 }}>
          {CATS.map(tt => {
            const active = tt === cat;
            const n = tt === "All" ? NEWS.length : (counts[tt] || 0);
            return (
              <button key={tt} onClick={() => setCat(tt)} style={{
                padding: "7px 14px",
                borderRadius: 4,
                border: "1px solid " + (active ? "var(--ink)" : "var(--rule-2)"),
                background: active ? "var(--ink)" : "white",
                color: active ? "white" : "var(--ink-2)",
                fontFamily: "var(--type-mono)", fontSize: 11, letterSpacing: "0.04em",
                fontWeight: 500, cursor: "pointer", transition: "all .12s",
                display: "inline-flex", alignItems: "center", gap: 8,
              }}>
                <span>{tt}</span>
                <span style={{ opacity: 0.65, fontVariantNumeric: "tabular-nums" }}>{String(n).padStart(2, "0")}</span>
              </button>
            );
          })}
        </div>

        <div className="table-scroll">
          <table className="data-table">
            <thead>
              <tr>
                <th style={{ width: 130 }}>ID</th>
                <th style={{ width: 130 }}>Date</th>
                <th style={{ width: 140 }}>Category</th>
                <th>Headline</th>
                <th style={{ width: 56 }}></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(n => (
                <tr key={n.id} onClick={() => {}} style={{ cursor: "pointer" }}>
                  <td className="col-mono">{n.id}</td>
                  <td className="col-mono">{n.date}</td>
                  <td><Tag kind={TAG[n.cat] || "violet"}>{n.cat}</Tag></td>
                  <td>
                    <strong style={{ fontSize: 14.5, color: "var(--ink)" }}>{n.title}</strong>
                    <p className="body-sm" style={{ marginTop: 6, color: "var(--ink-3)" }}>{n.desc}</p>
                  </td>
                  <td style={{ textAlign: "right", color: "var(--indigo-500)", fontSize: 16 }}>→</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────── */

function NewsPage() {
  return (
    <>
      <Nav active="news" />
      <Header />
      <NewsList />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<NewsPage />);