// Sarpah — main router. Picks the right template per route.

const { useEffect, useState } = React;
const SS = window.Sarpah;
const SP1 = window.SarpahPages;
const SP2 = window.SarpahPages2;

/* ============================================================
   Tweaks (editing-time controls)
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#B8531A",
  "density": "comfortable",
  "showSearch": true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  document.documentElement.setAttribute("data-theme", t.theme || "light");
  if (t.accent) {
    document.documentElement.style.setProperty("--accent", t.accent);
    // Derive hover/ink for accent
    const ink = mixHex(t.accent, "#000000", 0.45);
    const soft = mixHex(t.accent, "#FFFFFF", 0.55);
    document.documentElement.style.setProperty("--accent-ink", ink);
    document.documentElement.style.setProperty("--accent-soft", soft);
  }
  if (t.density === "compact") document.documentElement.style.setProperty("--t-base", "14.5px");
  else document.documentElement.style.setProperty("--t-base", "15.5px");
}
function mixHex(a, b, t) {
  const pa = hexToRgb(a), pb = hexToRgb(b);
  if (!pa || !pb) return a;
  const r = Math.round(pa.r * (1-t) + pb.r * t);
  const g = Math.round(pa.g * (1-t) + pb.g * t);
  const bl = Math.round(pa.b * (1-t) + pb.b * t);
  return "#" + [r,g,bl].map(x => x.toString(16).padStart(2, "0")).join("");
}
function hexToRgb(h) {
  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h);
  if (!m) return null;
  return { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) };
}

function TweakUI({ tweaks, setTweak }) {
  // Starter components are loaded as globals from tweaks-panel.jsx
  if (typeof TweaksPanel === "undefined") return null;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakRadio label="Mode"
        options={[{value:"light", label:"Light"},{value:"dark", label:"Dark"}]}
        value={tweaks.theme} onChange={v => setTweak("theme", v)} />
      <TweakSection label="Accent" />
      <TweakColor label="Color" value={tweaks.accent} onChange={v => setTweak("accent", v)} />
      <div style={{padding:"6px 12px 8px", display:"flex", gap: 6, flexWrap:"wrap"}}>
        {[
          ["Terracotta", "#B8531A"],
          ["Navy", "#0E2B4E"],
          ["Forest", "#1F4D3A"],
          ["Burgundy", "#8B2929"],
          ["Gold", "#A07A2C"],
        ].map(([name, hex]) => (
          <button key={hex} onClick={() => setTweak("accent", hex)}
            style={{display:"flex", alignItems:"center", gap:6, fontSize:10, padding:"3px 7px", border:"1px solid rgba(0,0,0,0.12)", borderRadius:3, background:"rgba(255,255,255,0.5)", cursor:"pointer", fontFamily:"var(--mono)", letterSpacing:"0.06em"}}>
            <span style={{width:10, height:10, background:hex, borderRadius:2}}/>
            {name}
          </button>
        ))}
      </div>
      <TweakSection label="Density" />
      <TweakRadio label="Type"
        options={[{value:"comfortable", label:"Comfortable"},{value:"compact", label:"Compact"}]}
        value={tweaks.density} onChange={v => setTweak("density", v)} />
    </TweaksPanel>
  );
}

/* ============================================================
   Router
   ============================================================ */

function NotFound({ path }) {
  return (
    <div className="container" style={{padding: "120px 24px", textAlign: "center"}}>
      <div className="ribbon" style={{justifyContent: "center"}}>404</div>
      <h1 className="display" style={{fontSize: "var(--t-5xl)", margin: "16px auto", maxWidth: "20ch"}}>This page is not in Sarpah’s manifest.</h1>
      <p style={{color: "var(--ink-3)", fontFamily: "var(--mono)", fontSize: 12}}>{path}</p>
      <a href="#/" className="btn" style={{marginTop: 24}}>Back to Sarpah ↗</a>
    </div>
  );
}

function pickTemplate(route) {
  if (!route) return null;
  if (route.slug === "/") return <SP1.Home />;
  if (route.slug === "/buyer-process") return <SP2.AudiencePage route={route} eyebrow="For institutional buyers" ctaSlug="/talk/buyer" ctaLabel="Open a buyer enquiry" />;
  if (route.slug === "/originators")    return <SP2.AudiencePage route={route} eyebrow="For upstream originators" ctaSlug="/talk/mandate" ctaLabel="Open a mandate enquiry" />;
  if (route.slug === "/sub-agents")     return <SP2.AudiencePage route={route} eyebrow="Mandated sub-agents" ctaSlug="/talk/sub-agent" ctaLabel="Apply as sub-agent" />;
  if (route.section === "forms")        return <SP2.FormPage route={route} />;
  if (route.section === "products" && route.order === 0 && !route.generated) return <SP2.ProductsIndex route={route} />;
  if (route.generated === "food-index") return <SP2.FoodIndex route={route} />;
  if (route.slug === "/compliance")     return <SP2.ComplianceIndex route={route} />;
  if (route.slug === "/origination")    return <SP2.CorridorsIndex route={route} />;
  // Default: markdown page
  return <SP1.MarkdownPage route={route} />;
}

function App() {
  const path = SS.useRoute();
  const [searchOpen, setSearchOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  // Use the starter's useTweaks (handles persistence via __edit_mode_set_keys)
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks on change
  useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  // Close mobile nav on route change
  useEffect(() => { setMobileOpen(false); }, [path]);

  // Cmd-K search
  useEffect(() => {
    const handler = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setSearchOpen(s => !s);
      } else if (e.key === "/" && !searchOpen && document.activeElement === document.body && e.target.tagName !== "INPUT" && e.target.tagName !== "TEXTAREA") {
        e.preventDefault();
        setSearchOpen(true);
      }
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [searchOpen]);

  const route = SS.findRoute(path);
  const view = route ? pickTemplate(route) : <NotFound path={path} />;

  // Update doc title
  useEffect(() => {
    const t = route ? `${route.title} · Sarpah` : "Sarpah · Mandated Origination Agent";
    document.title = t;
  }, [route]);

  return (
    <>
      <SS.TopNav onSearch={() => setSearchOpen(true)} onMobileOpen={() => setMobileOpen(true)} />
      <SS.MobileNav open={mobileOpen} onClose={() => setMobileOpen(false)} />
      <main id="main">
        {view}
      </main>
      <SS.Footer />
      <SS.SearchModal open={searchOpen} onClose={() => setSearchOpen(false)} />
      <TweakUI tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
document.documentElement.classList.add("loaded");