// Shared subpage renderers for IAIGA. One file, mounted by thin HTML shells.
const { useState } = React;

function PageShell({ active, children }) {
  const { Footer, Header } = window;
  const [count, setCount] = useState(window.IAIGA_DATA.signatureCount);
  React.useEffect(() => {
    const sb = window._sb;
    if (!sb) return;
    sb.from("signatures").select("*", { count: "exact", head: true }).eq("verified", true)
      .then(({ count: n }) => { if (n) setCount(window.IAIGA_DATA.signatureCount + n); });
  }, []);
  return (
    <div className="site">
      <Header count={count} active={active} />
      <main>{children}</main>
      <Footer />
    </div>
  );
}

function PageHero({ title, lead }) {
  const { Eyebrow } = window.IAIGADesignSystem_db07e0;
  return (
    <section className="page-hero">
      <div className="page-hero__bg" aria-hidden="true"></div>
      <div className="page-hero__inner">
        <Eyebrow onDark>International AI Governance Alliance</Eyebrow>
        <h1 className="page-hero__title">{title}</h1>
        {lead ? <p className="page-hero__lead">{lead}</p> : null}
      </div>
    </section>
  );
}

function SignCTA({ title, body }) {
  const { Button } = window.IAIGADesignSystem_db07e0;
  const { Icon } = window;
  return (
    <section className="cta-strip">
      <div className="cta-strip__inner">
        <h2>{title}</h2>
        {body ? <p>{body}</p> : null}
        <Button variant="gold" size="lg" as="a" href="/?sign=1" iconRight={<Icon.ArrowRight/>}>Sign the petition</Button>
      </div>
    </section>
  );
}

/* ---------------- About ---------------- */
function AboutPage() {
  const c = window.IAIGA_CONTENT.about;
  return (
    <PageShell active="about">
      <PageHero title={c.title} lead={c.lead} />
      <section className="page-body">
        <div className="page-body__inner prose">
          <p>{c.intro}</p>
          <div className="goal-grid">
            {c.goals.map((g, i) => (
              <div className="goal-card" key={i}>
                <span className="goal-card__num">GOAL {i + 1}</span>
                <h3 className="goal-card__title">{g.title}</h3>
                <p>{g.body}</p>
              </div>
            ))}
          </div>
          <p dangerouslySetInnerHTML={{ __html: c.initiative }} />
          <h2>{c.join.title}</h2>
          <p>{c.join.body}</p>
          <h2>{c.support.title}</h2>
          <p dangerouslySetInnerHTML={{ __html: c.support.body }} />
        </div>
      </section>
      <SignCTA title="Add your name" body="Every signature brings a binding global treaty closer." />
    </PageShell>
  );
}

/* ---------------- FAQ ---------------- */
function FaqItem({ item, open, onToggle }) {
  const { Icon } = window;
  return (
    <div className={"faq-item" + (open ? " is-open" : "")}>
      <button className="faq-q" aria-expanded={open} onClick={onToggle}>
        <span className="faq-q__icon" aria-hidden="true"><Icon.ArrowRight /></span>
        <span>{item.q}</span>
      </button>
      <div className="faq-a">
        <div className="faq-a__inner">
          {item.a.map((block, i) => {
            if (typeof block === "string") return <p key={i}>{block}</p>;
            if (block.html) return <p key={i} dangerouslySetInnerHTML={{ __html: block.html }} />;
            if (block.quote) return <blockquote key={i}>{block.quote}<cite>— {block.cite}</cite></blockquote>;
            if (block.list) return <ul key={i}>{block.list.map((li, j) => <li key={j}>{li}</li>)}</ul>;
            return null;
          })}
        </div>
      </div>
    </div>
  );
}

function FaqPage() {
  const c = window.IAIGA_CONTENT.faq;
  const [tab, setTab] = useState("public");
  const [open, setOpen] = useState({ public: 0, policy: 0 });
  const list = c[tab];
  const toggle = (i) => setOpen((o) => ({ ...o, [tab]: o[tab] === i ? -1 : i }));
  return (
    <PageShell active="faq">
      <PageHero title="Frequently asked questions" lead="Answers for the general public and for policymakers. Open any question to read more." />
      <section className="page-body">
        <div className="page-body__inner">
          <div className="faq-tabs" role="tablist">
            <button className={"faq-tab" + (tab === "public" ? " is-active" : "")} onClick={() => setTab("public")} role="tab" aria-selected={tab === "public"}>For the public</button>
            <button className={"faq-tab" + (tab === "policy" ? " is-active" : "")} onClick={() => setTab("policy")} role="tab" aria-selected={tab === "policy"}>For policymakers</button>
          </div>
          <div className="faq-list">
            {list.map((item, i) => (
              <FaqItem key={tab + i} item={item} open={open[tab] === i} onToggle={() => toggle(i)} />
            ))}
          </div>
        </div>
      </section>
      <SignCTA title="Ready to act?" body="Join your fellow global citizens in calling for global AI governance." />
    </PageShell>
  );
}

/* ---------------- Learn more ---------------- */
function LearnMorePage() {
  const c = window.IAIGA_CONTENT.learnMore;
  const { Icon } = window;
  const [query, setQuery] = useState("");
  const [active, setActive] = useState("All");
  const [opened, setOpened] = useState({});
  const toggleGroup = (key) => setOpened((m) => ({ ...m, [key]: !m[key] }));

  const cats = c.categories;
  const chips = ["All", ...cats.map((cat) => cat.title)];
  const q = query.trim().toLowerCase();

  // Build filtered category structure.
  const filtered = cats
    .filter((cat) => active === "All" || cat.title === active)
    .map((cat) => ({
      ...cat,
      groups: cat.groups
        .map((g) => ({
          ...g,
          items: g.items.filter(
            (it) => !q || (it.name + " " + (it.date || "") + " " + (it.quote || "") + " " + (it.desc || "")).toLowerCase().includes(q)
          ),
        }))
        .filter((g) => g.items.length > 0),
    }))
    .filter((cat) => cat.groups.length > 0);

  const shown = filtered.reduce(
    (n, cat) => n + cat.groups.reduce((m, g) => m + g.items.length, 0),
    0
  );
  const total = cats.reduce(
    (n, cat) => n + cat.groups.reduce((m, g) => m + g.items.length, 0),
    0
  );

  return (
    <PageShell active="learn">
      <PageHero title={c.title} lead={c.lead} />

      <div className="lm-toolbar">
        <div className="lm-toolbar__inner">
          <div className="lm-search">
            <span className="lm-search__icon" aria-hidden="true"><Icon.Search /></span>
            <input
              className="lm-search__input"
              type="search"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Search treaties, reports, organizations…"
              aria-label="Search resources"
            />
            {query ? (
              <button className="lm-search__clear" onClick={() => setQuery("")} aria-label="Clear search">×</button>
            ) : null}
          </div>
          <div className="lm-chips" role="tablist" aria-label="Filter by category">
            {chips.map((label) => (
              <button
                key={label}
                className={"lm-chip" + (active === label ? " is-active" : "")}
                onClick={() => setActive(label)}
                role="tab"
                aria-selected={active === label}
              >
                {label === "All" ? "All" : label.split(/[,&]/)[0].trim()}
              </button>
            ))}
          </div>
          <span className="lm-count">{shown === total ? total : shown + " of " + total} resources</span>
        </div>
      </div>

      <section className="page-body page-body--wide">
        <div className="page-body__inner">
          <p className="page-note">{c.note}</p>
          {filtered.length === 0 ? (
            <p className="lm-empty">No resources match your search. <button className="lm-empty__reset" onClick={() => { setQuery(""); setActive("All"); }}>Reset filters</button></p>
          ) : (
            filtered.map((cat, ci) => (
              <div className="lm-cat" key={ci}>
                <div className="lm-cat__head">
                  <h2 className="lm-cat__title">{cat.title}</h2>
                  <p className="lm-cat__desc">{cat.desc}</p>
                </div>
                {cat.groups.map((g, gi) => {
                  const collapsible = true;
                  const key = ci + "-" + gi;
                  const isOpen = q ? true : !!opened[key];
                  return (
                  <div className="lm-group" key={gi}>
                    {collapsible ? (
                      <button className={"lm-grouphead" + (isOpen ? " is-open" : "")} onClick={() => toggleGroup(key)} aria-expanded={isOpen}>
                        <span className="lm-grouphead__chev" aria-hidden="true"><Icon.ArrowRight /></span>
                        <span className="lm-subhead lm-subhead--btn">{g.label}</span>
                        <span className="lm-grouphead__count">{g.items.length}</span>
                      </button>
                    ) : (
                      <p className="lm-subhead">{g.label}</p>
                    )}
                    {isOpen ? (
                    <div className="lm-grid">
                      {g.items.map((it, ii) => (
                        it.url ? (
                          <a className="lm-card" key={ii} href={it.url} target="_blank" rel="noopener noreferrer">
                            <span className="lm-card__name">{it.name}</span>
                            {it.desc ? <span className="lm-card__desc">{it.desc}</span> : null}
                            {it.quote ? <span className="lm-card__quote">“{it.quote}”</span> : null}
                            <span className="lm-card__meta">
                              {it.date ? <span className="lm-card__date">{it.date}</span> : <span className="lm-card__date">Visit</span>}
                              <span className="lm-card__ext" aria-hidden="true"><Icon.ArrowRight /></span>
                            </span>
                          </a>
                        ) : (
                          <span className="lm-card lm-card--inert" key={ii}>
                            <span className="lm-card__name">{it.name}</span>
                            {it.desc ? <span className="lm-card__desc">{it.desc}</span> : null}
                            {it.quote ? <span className="lm-card__quote">“{it.quote}”</span> : null}
                            {it.date ? <span className="lm-card__meta"><span className="lm-card__date">{it.date}</span></span> : null}
                          </span>
                        )
                      ))}
                    </div>
                    ) : null}
                  </div>
                  );
                })}
              </div>
            ))
          )}
        </div>
      </section>
      <SignCTA title="Add your name" body="Understanding the problem is the first step. Signing is the next." />
    </PageShell>
  );
}

/* ---------------- Legal (Privacy / Terms) ---------------- */
function LegalPage({ which }) {
  const c = window.IAIGA_CONTENT[which];
  return (
    <PageShell active={null}>
      <PageHero title={c.title} />
      <section className="page-body">
        <div className="page-body__inner prose">
          <p className="legal-meta">{c.meta}</p>
          {c.sections.map((s, i) => (
            <div key={i}>
              <h2>{s.h}</h2>
              {(s.p || []).map((p, j) => <p key={j}>{p}</p>)}
              {s.list ? <ul>{s.list.map((li, j) => <li key={j}>{li}</li>)}</ul> : null}
            </div>
          ))}
        </div>
      </section>
    </PageShell>
  );
}

Object.assign(window, { PageShell, AboutPage, FaqPage, LearnMorePage, LegalPage });