/* global React, Nav, Footer, Tag */

const { useState } = React;

const SURVEY_URL = "https://blog.jmir.org/the-society-of-digital-psychiatry-ai-psychosis-survey-results";
const MINDBENCH_DOI = "https://doi.org/10.1038/s44277-025-00049-6";

const TAKEAWAYS = [
  {
    id: "K-01",
    label: "Widespread Use",
    text: "One in three mental health professionals (33.3%) has already encountered patients using AI for mental health purposes.",
  },
  {
    id: "K-02",
    label: "Rejection of AI Psychosis Label",
    text: "Most experts reject the idea of “AI Psychosis” as its own diagnostic category, but take the underlying clinical concerns seriously.",
  },
  {
    id: "K-03",
    label: "Call for Action over Debate",
    text: "The field is shifting away from theoretical debate about AI-associated risks towards practical infrastructure for addressing them, specifically focusing on safety standards, clinical integration, and Digital Navigator training.",
  },
];

// Verbatim source copy. AI Literature Reviews / AI Tools were collapsed on the
// source page — body left null until the verbatim text is supplied (no invented copy).
const RESEARCH = [
  {
    id: "R-01",
    name: "MindBench.ai",
    body: "MindBench.ai is a comprehensive online platform designed as a partnership with the National Alliance on Mental Illness (NAMI) to provide assessment tools that systematically evaluate LLMs and LLM-based tools with objective and transparent criteria from a healthcare standpoint, assessing both profile and performance characteristics.",
    link: { label: "Learn more", url: MINDBENCH_DOI },
  },
  {
    id: "R-02",
    name: "AI Literature Reviews",
    body: "We have done a large amount of work completing thorough literature reviews and analyses across domains. These range from user-focused tools like chatbots to more historic and technical systems involving machine learning. We feel that much existing research has been siloed and advanced without appropriate pause to review the spread of what currently exists, and work hard to fill this ever widening gap.",
  },
  {
    id: "R-03",
    name: "AI Tools",
    body: "We focus heavily on bias, stigma, and social impact through our research. Understanding the different preferences that artificially intelligent tools surface is a critical research area in AI alignment. Our work focuses on everything from simple output bias assessment all the way to more cutting edge interpretability research to ensure that we are learning about the biases that emerge at all levels of AI systems.",
  },
];

const PUBLICATIONS = [
  {
    year: "2025",
    items: [
      "Dwyer B, Flathers M, Sano A, Dempsey A, Cipriani A, Gazi AH, et al. Mindbench.ai: an actionable platform to evaluate the profile and performance of large language models in a mental healthcare context. NPP—Digit Psychiatry Neurosci. 2025;3(1):28.",
      "Flathers M, Dwyer B, Rozenblit E, Torous J. Contextualizing Clinical Benchmarks: A Tripartite Approach to Evaluating LLM-Based Tools in Mental Health Settings. J Psychiatr Pract. 2025;31(6):294–301.",
      "Shumate JN, Rozenblit E, Flathers M, Larrauri CA, Hau C, Xia W, et al. Governing AI in mental health: 50-state legislative review. JMIR Ment Health. 2025;12:e80739.",
      "Flathers M, Xia W, Hau C, Nelson BW, Cheong J, Burns J, Torous J. Interpreting psychiatric digital phenotyping data with large language models: a preliminary analysis. BMJ Ment Health. 2025;28(1):e301817.",
      "Torous J, Greenberg W. Large Language Models and Artificial Intelligence in Psychiatry Medical Education: Augmenting But Not Replacing Best Practices. Acad Psychiatry. 2025;49(1):22–24.",
    ],
  },
  {
    year: "2024",
    items: [
      "Blease C, Worthen A, Torous J. Psychiatrists' experiences and opinions of generative artificial intelligence in mental healthcare: An online mixed methods survey. Psychiatry Res. 2024;333:115724.",
      "Chen K, Lane E, Burns J, Macrynikola N, Chang S, Torous J. The Digital Navigator: Standardizing Human Technology Support in App-Integrated Clinical Care. Telemed E-Health. 2024;30(7):e1963–e1970.",
      "Flathers M, Smith G, Wagner E, Fisher CE, Torous J. AI depictions of psychiatric diagnoses: a preliminary study of generative image outputs in Midjourney V.6 and DALL-E 3. BMJ Ment Health. 2024;27(1):e301298.",
      "Lee C, Mohebbi M, O'Callaghan E, Winsberg M. Large Language Models Versus Expert Clinicians in Crisis Prediction Among Telemental Health Patients: Comparative Study. JMIR Ment Health. 2024;11:e58129.",
      "Kim J, Leonte KG, Chen ML, et al. Large language models outperform mental and medical health care professionals in identifying obsessive-compulsive disorder. npj Digit Med. 2024;7:193.",
      "Torous J, Blease C. Generative artificial intelligence in mental health care: potential benefits and current challenges. World Psychiatry. 2024;23(1):1–2.",
    ],
  },
  {
    year: "2020",
    items: [
      "Wisniewski H, Torous J. Digital navigators to implement smartphone and digital tools in care. Acta Psychiatr Scand. 2020;141(4):350–355.",
    ],
  },
];

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

function Figure({ src, alt, caption, maxWidth }) {
  return (
    <div
      className="map-wrap"
      style={{ padding: 0, overflow: "hidden", maxWidth: maxWidth || "100%", margin: maxWidth ? "0 auto" : undefined }}
    >
      <img src={src} alt={alt} style={{ width: "100%", display: "block" }} />
      {caption && (
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
          padding: "14px 20px", borderTop: "1px solid var(--rule)", background: "white",
          fontFamily: "var(--type-mono)", fontSize: 11, letterSpacing: "0.04em", color: "var(--ink-3)",
        }}>
          <span>{caption}</span>
          <span style={{ color: "var(--ink-4)" }}>Society of Digital Psychiatry</span>
        </div>
      )}
    </div>
  );
}

function Header() {
  return (
    <section style={{ padding: "72px 0 48px", 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">AI Standards</span>
        </div>
        <h1 className="t-display" style={{ maxWidth: 1000 }}>
          Artificial Intelligence Standards
        </h1>
        <p className="lede" style={{ marginTop: 22, maxWidth: 720 }}>
          Artificial Intelligence is ever-changing and evolving, so it is important to know the current standards and research around AI.
        </p>
      </div>
    </section>
  );
}

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

function Survey() {
  return (
    <section style={{ padding: "80px 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">Survey Results</span>
          </div>
        </div>

        <h2 className="t-h1" style={{ maxWidth: 880 }}>
          The Society of Digital Psychiatry AI Use and Mental Health Survey Results
        </h2>

        <span className="eyebrow eyebrow-ink" style={{ display: "block", marginTop: 36, marginBottom: 18 }}>
          Key Takeaways
        </span>
        <div
          style={{
            display: "grid",
            gap: 16,
            gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
          }}
        >
          {TAKEAWAYS.map(t => (
            <div
              key={t.id}
              style={{
                border: "1px solid var(--rule)",
                borderRadius: 4,
                padding: 24,
                background: "var(--bg-soft)",
              }}
            >
              <span className="eyebrow" style={{ color: "var(--indigo-500)" }}>{t.label}</span>
              <p className="body-sm" style={{ marginTop: 12, color: "var(--ink)" }}>{t.text}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 28 }}>
          <a href={SURVEY_URL} target="_blank" rel="noreferrer" className="link">Learn more →</a>
        </div>
      </div>
    </section>
  );
}

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

function ResearchAccordion() {
  const [openId, setOpenId] = useState("R-01");
  return (
    <div style={{ border: "1px solid var(--rule)", borderRadius: 4, overflow: "hidden" }}>
      {RESEARCH.map((r, idx) => {
        const open = openId === r.id;
        return (
          <div key={r.id} style={{ borderTop: idx === 0 ? "none" : "1px solid var(--rule)" }}>
            <button
              type="button"
              onClick={() => setOpenId(open ? null : r.id)}
              aria-expanded={open}
              style={{
                width: "100%",
                display: "flex",
                alignItems: "center",
                gap: 18,
                padding: "20px 24px",
                background: open ? "var(--bg-soft)" : "white",
                border: "none",
                cursor: "pointer",
                textAlign: "left",
                font: "inherit",
              }}
            >
              <strong style={{ flex: 1, fontSize: 16, color: "var(--ink)" }}>{r.name}</strong>
              <svg
                viewBox="0 0 24 24"
                width="16"
                height="16"
                fill="none"
                stroke="currentColor"
                strokeWidth="2.4"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
                style={{
                  color: "var(--ink-3)",
                  flex: "0 0 auto",
                  transform: open ? "rotate(180deg)" : "rotate(0deg)",
                  transition: "transform 0.18s ease",
                }}
              >
                <polyline points="6 9 12 15 18 9" />
              </svg>
            </button>
            {open && (
              <div style={{ padding: "4px 24px 28px", maxWidth: 880 }}>
                {r.body ? (
                  <p className="body" style={{ color: "var(--ink-3)" }}>{r.body}</p>
                ) : (
                  <p className="body-sm" style={{ color: "var(--ink-4)", fontStyle: "italic" }}>
                    Source text pending.
                  </p>
                )}
                {r.link && (
                  <p className="body-sm" style={{ marginTop: 16 }}>
                    {r.link.label}:{" "}
                    <a href={r.link.url} target="_blank" rel="noreferrer" className="link">{r.link.url}</a>
                  </p>
                )}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function Research() {
  return (
    <section style={{ padding: "80px 0", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div className="section-head">
          <div className="head-l">
            <span className="num">/ 02</span>
            <span className="eyebrow">AI Research Interests / Projects</span>
          </div>
        </div>

        <h2 className="t-h1" style={{ maxWidth: 880 }}>
          AI Research Interests/Projects: Division of Digital Psychiatry
        </h2>
        <p className="body" style={{ color: "var(--ink-3)", maxWidth: 880, marginTop: 20 }}>
          Artificial Intelligence and mental health have been intertwined since the very first AI tools ever created. As such, the different domains of ongoing research in MH-AI are both widespread and varied. Our work focuses on a few main areas that we have identified as critical foundations to build out in an effort to facilitate future discoveries.
        </p>

        <div className="grid-split" style={{ gap: 40, alignItems: "start", marginTop: 44 }}>
          <Figure
            src="images/AI%20Standards/ai%20schematics.png"
            alt="MindBench.ai schematic: LLMs and LLM-Based Tools feed into MindBench.ai (informed by Clinical Expertise and Lived Experience), which produces a Profile Assessment (Technical Background, Conversational Dynamics) and a Performance Assessment (Benchmarks, Reasoning Analysis)."
            caption="MindBench.ai — inputs, assessments & outputs"
          />
          <ResearchAccordion />
        </div>
      </div>
    </section>
  );
}

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

function Publications() {
  return (
    <section style={{ padding: "80px 0", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div className="section-head">
          <div className="head-l">
            <span className="num">/ 03</span>
            <span className="eyebrow">Relevant Publications</span>
          </div>
        </div>
        <div style={{ border: "1px solid var(--rule)", borderRadius: 4, overflow: "hidden" }}>
          {PUBLICATIONS.map((grp, gi) => (
            <div key={grp.year} style={{ borderTop: gi === 0 ? "none" : "1px solid var(--rule)" }}>
              <div style={{ background: "var(--bg-soft)", padding: "12px 24px", borderBottom: "1px solid var(--rule)" }}>
                <span className="eyebrow eyebrow-ink">{grp.year}</span>
              </div>
              <ol style={{ margin: 0, padding: "20px 24px 20px 44px" }}>
                {grp.items.map((cite, i) => (
                  <li key={i} className="body-sm" style={{ color: "var(--ink-3)", marginTop: i === 0 ? 0 : 12 }}>{cite}</li>
                ))}
              </ol>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

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

function AIStandardsPage() {
  return (
    <>
      <Nav active="ai-standards" />
      <Header />
      <Survey />
      <Research />
      <Publications />
      <Footer />
    </>
  );
}

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