/* ============================================================
   IBC Labs — Shared Components
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* Navigation helper — app.jsx sets window.IBC.navigate */
function go(path) { if (window.IBC.navigate) window.IBC.navigate(path); }

function Link({ to, className, children, style, onClick }) {
  return (
    <a
      href={"#/" + to}
      className={className}
      style={style}
      onClick={(e) => {
        e.preventDefault();
        if (onClick) onClick(e);
        go(to);
      }}
    >
      {children}
    </a>
  );
}

/* Inline arrow glyph */
function Arrow({ dir }) {
  return <span className="arrow" aria-hidden="true">{dir === "down" ? "↓" : "→"}</span>;
}

/* Status badge */
function Badge({ status }) {
  const cls = {
    Published: "badge badge--published",
    Active: "badge badge--active",
    Forthcoming: "badge badge--forthcoming",
  }[status] || "badge";
  return <span className={cls}>{status}</span>;
}

/* Signature navy hairline */
function Rule({ thin }) {
  return <hr className={"rule" + (thin ? " rule--thin" : "")} />;
}

/* ---------- Navbar ---------- */
const NAV_LINKS = [
  ["research", "Research"],
  ["methodologies", "Methodologies"],
  ["concepts", "Concepts"],
  ["problem", "Problem"],
  ["notes", "Notes"],
  ["contact", "Contact"],
];

function Navbar({ route }) {
  const [open, setOpen] = useState(false);
  const top = (route || "home").split("/")[0];
  useEffect(() => { setOpen(false); }, [route]);

  return (
    <header className="nav">
      <div className="nav__inner container">
        <Link to="home" className="nav__brand">
          <span className="nav__mark">IBC</span>
          <span className="nav__brandname">Labs</span>
        </Link>

        <nav className="nav__links">
          {NAV_LINKS.map(([to, label]) => (
            <Link
              key={to}
              to={to}
              className={"nav__link" + (top === to ? " is-active" : "")}
            >
              {label}
            </Link>
          ))}
        </nav>

        <button
          className="nav__burger"
          aria-label="Menu"
          aria-expanded={open}
          onClick={() => setOpen((v) => !v)}
        >
          <span /><span /><span />
        </button>
      </div>

      {open && (
        <div className="nav__overlay" onClick={() => setOpen(false)}>
          <nav className="nav__overlay-links" onClick={(e) => e.stopPropagation()}>
            <Link to="home" className={"nav__overlay-link" + (top === "home" ? " is-active" : "")}>Home</Link>
            {NAV_LINKS.map(([to, label]) => (
              <Link key={to} to={to} className={"nav__overlay-link" + (top === to ? " is-active" : "")}>{label}</Link>
            ))}
            <Link to="about" className={"nav__overlay-link" + (top === "about" ? " is-active" : "")}>About</Link>
          </nav>
        </div>
      )}
    </header>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  const org = window.IBC.org;
  return (
    <footer className="footer">
      <div className="container footer__inner">
        <div className="footer__brand">
          <div className="footer__mark">IBC Labs</div>
          <div className="label">{org.tagline}</div>
        </div>
        <nav className="footer__nav">
          <div className="footer__col">
            <div className="label footer__coltitle">Research</div>
            <Link to="research" className="footer__link">Publications</Link>
            <Link to="methodologies" className="footer__link">Methodologies</Link>
            <Link to="concepts" className="footer__link">Concepts</Link>
          </div>
          <div className="footer__col">
            <div className="label footer__coltitle">Lab</div>
            <Link to="about" className="footer__link">About</Link>
            <Link to="problem" className="footer__link">The Problem</Link>
            <Link to="notes" className="footer__link">Notes</Link>
          </div>
          <div className="footer__col">
            <div className="label footer__coltitle">Contact</div>
            <Link to="contact" className="footer__link">Inquiries</Link>
            <a href={"mailto:" + org.email} className="footer__link">{org.email}</a>
          </div>
        </nav>
      </div>
      <div className="container footer__base">
        <span className="label">IBC Labs · Independent Research</span>
        <span className="label">© 2026 · Layout v1.0</span>
      </div>
    </footer>
  );
}

/* ---------- Page header (signature rule under heading) ---------- */
function PageHeader({ eyebrow, title, lead }) {
  return (
    <div className="pagehead">
      {eyebrow && <div className="eyebrow">{eyebrow}</div>}
      <h1 className="display pagehead__title">{title}</h1>
      <Rule />
      {lead && <p className="lead pagehead__lead">{lead}</p>}
    </div>
  );
}

/* ---------- Back link ---------- */
function BackLink({ to, children }) {
  return (
    <Link to={to} className="backlink">
      <span aria-hidden="true">←</span> {children}
    </Link>
  );
}

/* ---------- Paper row (research index) ---------- */
function PaperRow({ paper }) {
  return (
    <article className="paperrow">
      <div className="paperrow__main">
        <Link to={"research/" + paper.id} className="paperrow__titlelink">
          <h3 className="subheading paperrow__title">{paper.title}</h3>
        </Link>
        <div className="paperrow__meta">
          <span>{paper.authors.join(", ")}</span>
          <span className="paperrow__dot">·</span>
          <Badge status={paper.status} />
          <span className="paperrow__dot">·</span>
          <span className="mono">{paper.year}</span>
        </div>
        <p className="paperrow__abstract">{paper.abstract}</p>
        <div className="paperrow__actions">
          <Link to={"research/" + paper.id} className="tlink">View Paper <Arrow /></Link>
          <span className="tlink tlink--muted" onClick={(e) => e.preventDefault()}>Download PDF <Arrow dir="down" /></span>
        </div>
      </div>
    </article>
  );
}

/* ---------- Area card (home) ---------- */
function AreaCard({ area }) {
  return (
    <Link to={"research/" + area.paper} className="card areacard">
      <div className="areacard__code mono">{area.code}</div>
      <h3 className="subheading areacard__name">{area.name}</h3>
      <p className="areacard__blurb muted">{area.blurb}</p>
      <span className="tlink areacard__cta">Read paper <Arrow /></span>
    </Link>
  );
}

/* ---------- Note card ---------- */
function NoteCard({ note }) {
  return (
    <article className="card notecard">
      <div className="notecard__meta">
        <span className="mono">{note.date}</span>
        <span className="paperrow__dot">·</span>
        <span>{note.author}</span>
        <span className="pill">{note.tag}</span>
      </div>
      <h3 className="subheading notecard__title">{note.title}</h3>
      <p className="notecard__excerpt muted">{note.excerpt}</p>
      <span className="tlink" onClick={(e) => e.preventDefault()}>Read note <Arrow /></span>
    </article>
  );
}

Object.assign(window, {
  Link, Arrow, Badge, Rule, Navbar, Footer, PageHeader, BackLink,
  PaperRow, AreaCard, NoteCard, go,
});