/* global React, ReactDOM, DashboardMock, ProblemSection, FeaturesSection, PipelineSection, TrustSection, ApprovalSection, PricingTeaser, CtaBand, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSelect */

const { useState, useEffect } = React;

/* ============================================================
   Hero - three variants: live mock, static screenshot, pipeline
============================================================ */
function HeroLiveMock({ density }) {
  return (
    <div className="hero-frame">
      <div className="hero-frame-bar">
        <div className="hero-frame-bar-dots"><span></span><span></span><span></span></div>
        <span className="hero-frame-bar-url">localhost:43110/dashboard · agent-studio</span>
        <span className="dot dot--green" title="daemon connected"></span>
      </div>
      <DashboardMock density={density} />
    </div>
  );
}

function HeroPipelineDiagram() {
  return (
    <div className="hero-frame">
      <div className="hero-frame-bar">
        <div className="hero-frame-bar-dots"><span></span><span></span><span></span></div>
        <span className="hero-frame-bar-url">studio pipeline · task-2af469</span>
      </div>
      <div className="hero-pipeline">
        <div className="hero-pipeline-title">Studio pipeline · task-2af469</div>
        <div className="pipeline-flow">
          {[
            { name: "Orchestrator", role: "decides route",    color: "var(--acp-lavender)", evidence: "approved 13:41:08" },
            { name: "Planner",      role: "writes plan",      color: "var(--acp-cyan)",      evidence: "plan v1 · 4 steps" },
            { name: "Workers",      role: "1–5 in worktrees", color: "var(--acp-orange)",   evidence: "3 active · 1 done" },
            { name: "Worker review", role: "checks patches",  color: "var(--acp-yellow)",   evidence: "queued" },
            { name: "Final review", role: "evaluates",        color: "var(--acp-peach)",    evidence: "queued" },
            { name: "Reporter",     role: "files report",     color: "var(--acp-green)",    evidence: "queued" },
          ].map((s, i) => (
            <div key={i} className="pipeline-node">
              <div className="pipeline-node-head">
                <span className="pipeline-icon" style={{ background: s.color }}></span>
                <div>
                  <div className="pipeline-name">{s.name}</div>
                  <div className="pipeline-role">{s.role}</div>
                </div>
              </div>
              <div className="pipeline-evidence">{s.evidence}</div>
            </div>
          ))}
        </div>

        <div className="pipeline-detail">
          <div>
            <div className="pipeline-detail-head">
              <span className="t-label">Workers · stage 3</span>
              <span className="chip chip--running">Running</span>
            </div>
            <dl className="kv">
              <dt>task-2af469.w1</dt><dd>feat-blue-btn-w1 · +24 -3</dd>
              <dt>task-2af469.w2</dt><dd>feat-blue-btn-w2 · +18 -2</dd>
              <dt>task-2af469.w3</dt><dd>feat-blue-btn-w3 · +9 -1</dd>
            </dl>
          </div>
          <div>
            <div className="pipeline-detail-head">
              <span className="t-label">Trace</span>
              <span className="chip chip--idle">tool calls</span>
            </div>
            <pre className="pipeline-log">
{`13:42:01  read_file   src/Header.tsx
13:42:04  apply       Header.tsx  `}<span className="log-ok">+4 -1</span>{`
13:42:09  shell       pnpm typecheck
13:42:21  test        `}<span className="log-ok">24 passed</span>{`
13:42:31  gate        `}<span className="log-warn">approval</span>
            </pre>
          </div>
        </div>
      </div>
    </div>
  );
}

function HeroStatic() {
  // A composed "static screenshot" view - same look, no animation.
  return (
    <div className="hero-frame">
      <div className="hero-frame-bar">
        <div className="hero-frame-bar-dots"><span></span><span></span><span></span></div>
        <span className="hero-frame-bar-url">localhost:43110/dashboard · agent-studio</span>
      </div>
      <DashboardMock density="standard" />
    </div>
  );
}

/* ============================================================
   Hero section
============================================================ */
function HeroSection({ heroVariant, density }) {
  return (
    <section className="hero">
      <div className="hero-top">
        <div>
          <div className="hero-eyebrow">
            <span className="chip chip--cyan">Alpha</span>
            <span>Agentic engineering control plane</span>
          </div>
          <h1 className="t-display-xl">
            Supervise your coding agents like you'd supervise <em>engineers</em>.
          </h1>
        </div>
        <div>
          <p className="hero-sub">
            Agent Studio is a local-first dashboard for coding agents. Start tasks from your repo, watch
            every run as it happens, approve risky steps, and ship work you can actually review. Ships with
            the Studio Engine - bring your own on Pro.
          </p>
          <div className="hero-actions">
            <a className="btn btn--primary btn--lg" href="#cta">Request access →</a>
          </div>
          <div className="hero-meta-row">
            <span><span className="dot dot--green"></span>Local-first · runs on your machine</span>
            <span>macOS only</span>
            <span>Free forever for solo</span>
          </div>
        </div>
      </div>

      {heroVariant === "live" && <HeroLiveMock density={density} />}
      {heroVariant === "pipeline" && <HeroPipelineDiagram />}
      {heroVariant === "static" && <HeroStatic />}
    </section>
  );
}

/* ============================================================
   Tweaks panel - accent, hero variant, density
============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "live",
  "accent": "#54d8cf",
  "density": "standard"
}/*EDITMODE-END*/;

const ACCENT_MAP = {
  cyan:     { primary: "#54d8cf", dark: "#2aa9a2" },
  yellow:   { primary: "#f2cf55", dark: "#c79b19" },
  lavender: { primary: "#b9b8ec", dark: "#8c88d8" },
  green:    { primary: "#49c76f", dark: "#248a42" },
};

const ACCENT_HEX_TO_NAME = {
  "#54d8cf": "cyan",
  "#f2cf55": "yellow",
  "#b9b8ec": "lavender",
  "#49c76f": "green",
};

function StudioTweaks({ onTweakChange }) {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply accent (stored as hex) → CSS custom props on :root
  useEffect(() => {
    const name = ACCENT_HEX_TO_NAME[tweaks.accent] || tweaks.accent || "cyan";
    const a = ACCENT_MAP[name] || ACCENT_MAP.cyan;
    document.documentElement.style.setProperty("--acp-primary", a.primary);
    document.documentElement.style.setProperty("--acp-primary-dark", a.dark);
  }, [tweaks.accent]);

  // push hero variant / density up to App
  useEffect(() => {
    onTweakChange && onTweakChange(tweaks);
  }, [tweaks, onTweakChange]);

  return (
    <TweaksPanel>
      <TweakSection label="Hero">
        <TweakRadio
          label="Hero visual"
          value={tweaks.heroVariant}
          onChange={(v) => setTweak("heroVariant", v)}
          options={["live", "pipeline", "static"]}
        />
        <TweakRadio
          label="Density"
          value={tweaks.density}
          onChange={(v) => setTweak("density", v)}
          options={["dense", "standard", "comfy"]}
        />
      </TweakSection>
      <TweakSection label="Brand">
        <TweakColor
          label="Accent"
          value={tweaks.accent}
          onChange={(v) => setTweak("accent", v)}
          options={["#54d8cf", "#f2cf55", "#b9b8ec", "#49c76f"]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* ============================================================
   Root
============================================================ */
function App() {
  const [tweaks, setTweaksState] = useState(TWEAK_DEFAULTS);
  return (
    <>
      <HeroSection heroVariant={tweaks.heroVariant} density={tweaks.density} />
      <ProblemSection />
      <FeaturesSection />
      <PipelineSection />
      <TrustSection />
      <ApprovalSection />
      <PricingTeaser />
      <div id="cta"><CtaBand /></div>
      <StudioTweaks onTweakChange={setTweaksState} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("landing-root")).render(<App />);