/* global React */
const { useState, useEffect } = React;

const API_BASE = "https://sodp-api.sean-j-ryan-research.workers.dev";

/**
 * Fetches /api/<key>, caching responses in localStorage so the page renders
 * instantly on repeat visits and survives a brief API outage.
 */
function useApi(key, fallback) {
  const cacheKey = `sodp:${key}`;
  const [data, setData] = useState(() => {
    try {
      const cached = localStorage.getItem(cacheKey);
      return cached ? JSON.parse(cached) : fallback;
    } catch { return fallback; }
  });
  const [loading, setLoading] = useState(() => {
    try { return !localStorage.getItem(cacheKey); } catch { return true; }
  });
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;
    fetch(`${API_BASE}/api/${key}`, { credentials: "omit" })
      .then(r => r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`)))
      .then(d => {
        if (cancelled) return;
        setData(d);
        setLoading(false);
        try { localStorage.setItem(cacheKey, JSON.stringify(d)); } catch {}
      })
      .catch(e => {
        if (cancelled) return;
        setError(e);
        setLoading(false);
      });
    return () => { cancelled = true; };
  }, [key]);

  return { data, loading, error };
}

function Brand() {
  return (
    <a href="index.html" className="brand" aria-label="Society of Digital Psychiatry home">
      <img src="images/Logo.png" alt="Society of Digital Psychiatry" />
    </a>
  );
}

const NEWS_DROPDOWN = [
  { to: "news.html", label: "All updates" },
  { to: "news.html?cat=Newsletter", label: "Newsletters" },
  { to: "news.html?cat=Publication", label: "Publications" },
  { to: "news.html?cat=Press", label: "Press" },
  { to: "news.html?cat=Event", label: "Events" },
];

const PROGRAMS_DROPDOWN = [
  { to: "digital-navigator-training.html", id: "dnt", label: "Digital Navigator Training" },
  { to: "ai-standards.html", id: "ai-standards", label: "AI Standards" },
];

const ABOUT_DROPDOWN = [
  { to: "about.html", id: "about", label: "About the SODP" },
  { to: "members.html", id: "members", label: "Members" },
  { to: "https://mental.jmir.org/", id: "jmir", label: "JMIR Mental Health", external: true },
];

function NavDropdown({ id, label, items, active }) {
  const [open, setOpen] = useState(false);
  const isActive = active === id || items.some(it => it.id && it.id === active);
  return (
    <div
      className={`nav-dd ${open ? "is-open" : ""}`}
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      <a
        href={items[0].to}
        className={`nav-dd-trigger ${isActive ? "active" : ""}`}
        aria-haspopup="true"
        aria-expanded={open}
        onClick={(e) => {
          // On touch devices the hover never fires; treat the first tap as toggle.
          if (window.matchMedia("(hover: none)").matches && !open) {
            e.preventDefault();
            setOpen(true);
          }
        }}
      >
        {label}
        <svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: 6 }} aria-hidden="true">
          <polyline points="6 9 12 15 18 9" />
        </svg>
      </a>
      <div className="nav-dd-menu" role="menu">
        {items.map((it, i) => (
          <a
            key={i}
            href={it.to}
            role="menuitem"
            target={it.external ? "_blank" : undefined}
            rel={it.external ? "noreferrer" : undefined}
          >
            {it.label}
          </a>
        ))}
      </div>
    </div>
  );
}

function Nav({ active }) {
  const [open, setOpen] = useState(false);
  const links = [
    { to: "index.html", id: "home", label: "Home" },
    { to: "webinars.html", id: "webinars", label: "Webinars" },
    { id: "programs", label: "Programs", dropdown: PROGRAMS_DROPDOWN },
    { id: "news", label: "News", dropdown: NEWS_DROPDOWN },
    { id: "about", label: "About", dropdown: ABOUT_DROPDOWN },
  ];
  return (
    <header className="nav">
      <div className="nav-inner">
        <Brand />
        <nav className="nav-links" aria-label="Primary">
          {links.map(l => (
            l.dropdown
              ? <NavDropdown key={l.id} id={l.id} label={l.label} items={l.dropdown} active={active} />
              : <a key={l.id} href={l.to} className={active === l.id ? "active" : ""}>{l.label}</a>
          ))}
          <a href="https://share.hsforms.com/10PV_ENANSJqqA-pAWE3hfgbpk19" target="_blank" rel="noreferrer" className="nav-cta">Apply to Join</a>
        </nav>
        <button
          className="nav-toggle"
          data-open={open}
          aria-label={open ? "Close menu" : "Open menu"}
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
        >
          <span /><span /><span />
        </button>
      </div>
      <div className="nav-mobile" data-open={open}>
        {links.map(l => (
          l.dropdown
            ? <div key={l.id} className="nav-mobile-group">
                <div className="nav-mobile-group-label">{l.label}</div>
                {l.dropdown.map((it, i) => (
                  <a
                    key={i}
                    href={it.to}
                    target={it.external ? "_blank" : undefined}
                    rel={it.external ? "noreferrer" : undefined}
                  >
                    {it.label}
                  </a>
                ))}
              </div>
            : <a key={l.id} href={l.to} className={active === l.id ? "active" : ""}>{l.label}</a>
        ))}
        <a href="https://share.hsforms.com/10PV_ENANSJqqA-pAWE3hfgbpk19" target="_blank" rel="noreferrer" className="cta">Apply to Join</a>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-brand">
            <span className="name">Society of Digital Psychiatry</span>
            <p>An international community linking clinicians, researchers, and technologists at the frontier of digital mental health.</p>
          </div>
          <div>
            <h4>Pages</h4>
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="webinars.html">Webinars</a></li>
              <li><a href="digital-navigator-training.html">Digital Navigator Training</a></li>
              <li><a href="ai-standards.html">AI Standards</a></li>
              <li><a href="news.html">News</a></li>
              <li><a href="members.html">Members</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="https://share.hsforms.com/10PV_ENANSJqqA-pAWE3hfgbpk19" target="_blank" rel="noreferrer">Apply to Join</a></li>
            </ul>
          </div>
          <div>
            <h4>Journal</h4>
            <ul>
              <li><a href="https://mental.jmir.org" target="_blank" rel="noreferrer">JMIR Mental Health</a></li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li><a href="mailto:jtorous@bidmc.harvard.edu">jtorous@bidmc.harvard.edu</a></li>
              <li><a href="mailto:kledley@bidmc.harvard.edu">kledley@bidmc.harvard.edu</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© {new Date().getFullYear()} Society of Digital Psychiatry</span>
          <span>sodpsych.com</span>
        </div>
      </div>
    </footer>
  );
}

function Tag({ children, kind = "violet" }) {
  return <span className={`tag tag-${kind}`}>{children}</span>;
}

Object.assign(window, { Nav, Footer, Brand, Tag, useApi, API_BASE });