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

const TC = {
  "Artificial Intelligence": "t-ai",
  "Implementation": "t-impl",
  "Research": "t-rsch",
  "Ethics": "t-eth",
  "Equity": "t-eq",
  "Education": "t-edu",
};
const TAG = {
  "Artificial Intelligence": "violet",
  "Implementation": "emerald",
  "Research": "blue",
  "Ethics": "amber",
  "Equity": "magenta",
  "Education": "ink",
};

const UPCOMING = {
  id: "S05/25", date: "May 22, 2025", time: "12:00 PM EDT", duration: "60 min", upcoming: true,
  topic: "Education",
  title: "Self-Determination Theory in Digital Navigator Training",
  speaker: "Margaret R. Emerson, DNP & Allison G. Dempsey, PhD", aff: "UNMC · University of Colorado Anschutz",
  desc: "How SDT informs the four-module Digital Navigator curriculum, with implementation lessons from US and international sites.",
};

const WEBINARS = [
  { id: "S04/25", date: "Apr 24, 2025", topic: "Artificial Intelligence", title: "AI in Psychiatry: Evaluation Standards for LLMs", speaker: "John Torous, MD", aff: "BIDMC · Harvard Medical School" },
  { id: "S03/25", date: "Mar 27, 2025", topic: "Implementation", title: "Digital Navigators in Practice: Implementation Across Six Sites", speaker: "Julian Schwarz, MD", aff: "Brandenburg Medical School" },
  { id: "S02/25", date: "Feb 20, 2025", topic: "Research", title: "Digital Phenotyping for Suicide Prevention", speaker: "Jason Bantjes, PhD", aff: "South African Medical Research Council" },
  { id: "S01/25", date: "Jan 23, 2025", topic: "Artificial Intelligence", title: "Building MindBench.ai: An Evaluation Platform for Mental Health AI", speaker: "Multiple Co-Leaders", aff: "SODP × NAMI" },
  { id: "S12/24", date: "Dec 5, 2024",  topic: "Ethics", title: "Equity, Bias, and AI in Mental Health Care", speaker: "Soumya Choudhary, PhD", aff: "Digital Psychiatry Research Group" },
  { id: "S11/24", date: "Nov 14, 2024", topic: "Implementation", title: "Implementing Digital Tools in Inpatient Psychiatry", speaker: "Michelle Patriquin, PhD", aff: "UTHealth Houston" },
  { id: "S10/24", date: "Oct 17, 2024", topic: "Equity", title: "Lived Experience and the Digital Divide", speaker: "Carla Gorban", aff: "University of Sydney" },
  { id: "S09/24", date: "Sep 19, 2024", topic: "Research", title: "JMIR Mental Health: A Decade of Digital Psychiatry Research", speaker: "Editorial Panel", aff: "JMIR Mental Health" },
];

const TOPICS = ["All", "Artificial Intelligence", "Implementation", "Research", "Ethics", "Equity", "Education"];

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

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">Webinars · Hosted on JMIR YouTube</span>
        </div>
        <h1 className="t-display" style={{ maxWidth: 920 }}>
          Monthly conversations on the science and practice of digital psychiatry.
        </h1>
        <p className="lede" style={{ marginTop: 22, maxWidth: 660 }}>
          Open to all members. Recordings posted to JMIR YouTube within 48 hours of each session.
        </p>
      </div>
    </section>
  );
}

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

function UpcomingPlusRecent() {
  // Featured: upcoming + 5 most recent = 6-cell grid (3-up)
  const items = [UPCOMING, ...WEBINARS.slice(0, 5)];
  return (
    <section style={{ padding: "72px 0", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div className="section-head">
          <div className="head-l">
            <span className="num">/ 01</span>
            <span className="eyebrow">Next session + recent</span>
          </div>
          <span className="caption mono" style={{ color: "var(--ink-4)", fontSize: 11, letterSpacing: "0.06em" }}>
            6 of {WEBINARS.length + 1}
          </span>
        </div>
        <div className="webinar-grid">
          {items.map((w, i) => (
            <a
              key={w.id}
              href={w.upcoming ? "#register" : "https://www.youtube.com/@JMIRPublications"}
              target={w.upcoming ? undefined : "_blank"}
              rel={w.upcoming ? undefined : "noreferrer"}
              className={`webinar-poster ${TC[w.topic] || ""} ${w.upcoming ? "dark" : ""}`}
            >
              <span className="topic-stripe" />
              <div className="meta-top">
                <span>{w.upcoming ? "Upcoming · " + w.date : w.date}</span>
                <span className="id">{w.id}</span>
              </div>
              <Tag kind={TAG[w.topic] || "violet"}>{w.topic}</Tag>
              <div className="title">{w.title}</div>
              <div className="speaker">
                <strong>{w.speaker}</strong><br />{w.aff}
              </div>
              <div className="footer">
                <span>{w.upcoming ? "Register →" : "Watch on JMIR →"}</span>
                <span style={{ opacity: 0.6 }}>{w.upcoming ? "LIVE · " + w.time : "VIDEO · 60m"}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

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

function Archive() {
  const [topic, setTopic] = useState("All");
  const filtered = useMemo(() => topic === "All" ? WEBINARS : WEBINARS.filter(w => w.topic === topic), [topic]);
  // Topic frequency, all-time
  const counts = useMemo(() => {
    const c = {};
    WEBINARS.forEach(w => { c[w.topic] = (c[w.topic] || 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">/ 02</span>
            <span className="eyebrow">Archive · Filter by topic</span>
          </div>
          <span className="caption mono" style={{ color: "var(--ink-4)", fontSize: 11, letterSpacing: "0.06em" }}>
            {filtered.length} of {WEBINARS.length}
          </span>
        </div>

        {/* Topic filter — also doubles as a small frequency display */}
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 24 }}>
          {TOPICS.map(tt => {
            const active = tt === topic;
            const n = tt === "All" ? WEBINARS.length : (counts[tt] || 0);
            return (
              <button key={tt} onClick={() => setTopic(tt)} disabled={tt !== "All" && !counts[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,
                opacity: tt !== "All" && !counts[tt] ? 0.4 : 1,
              }}>
                <span>{tt}</span>
                <span style={{ opacity: 0.65, fontVariantNumeric: "tabular-nums" }}>{String(n).padStart(2, "0")}</span>
              </button>
            );
          })}
        </div>

        {/* Tabular archive */}
        <div className="table-scroll">
          <table className="data-table">
            <thead>
              <tr>
                <th style={{ width: 80 }}>ID</th>
                <th style={{ width: 130 }}>Date</th>
                <th style={{ width: 160 }}>Topic</th>
                <th>Title</th>
                <th style={{ width: 220 }}>Speaker</th>
                <th style={{ width: 56 }}></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(w => (
                <tr key={w.id} onClick={() => window.open("https://www.youtube.com/@JMIRPublications", "_blank")} style={{ cursor: "pointer" }}>
                  <td className="col-mono">{w.id}</td>
                  <td className="col-mono">{w.date}</td>
                  <td><Tag kind={TAG[w.topic] || "violet"}>{w.topic}</Tag></td>
                  <td><strong style={{ fontSize: 14.5, color: "var(--ink)" }}>{w.title}</strong></td>
                  <td>
                    <div style={{ fontSize: 13.5, color: "var(--ink-2)" }}>{w.speaker}</div>
                    <div className="col-mono" style={{ marginTop: 2, fontSize: 11 }}>{w.aff}</div>
                  </td>
                  <td style={{ textAlign: "right", color: "var(--indigo-500)", fontSize: 14 }}>▶</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

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

function WebinarsPage() {
  return (
    <>
      <Nav active="webinars" />
      <Header />
      <UpcomingPlusRecent />
      <Archive />
      <Footer />
    </>
  );
}

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