// MostlyRender — the signature widget. The live render and the API call are the
// SAME object: edit a field on the left, the rendered image AND the code change.
const { useState, useEffect, useRef } = React;

const LANGS = [
  { id: "curl", label: "cURL" },
  { id: "node", label: "Node" },
  { id: "python", label: "Python" },
];

// one editable field — its label sits beside the literal API key (the wedge:
// the field name IS the modifications key).
function ParamField({ icon, label, apiKey, children }) {
  return (
    <label className="hw-field">
      <span className="hw-field__top">
        <span className="hw-field__label">{icon && <Icon d={icon} size={14} />}{label}</span>
        <code className="hw-field__key">{apiKey}</code>
      </span>
      {children}
    </label>
  );
}

function CopyButton({ text }) {
  const [done, setDone] = useState(false);
  return (
    <button className="code-copy" onClick={() => {
      navigator.clipboard?.writeText(text); setDone(true); setTimeout(() => setDone(false), 1400);
    }}>
      <Icon d={done ? "check" : "copy"} size={13} /> {done ? "Copied" : "Copy"}
    </button>
  );
}

function CodePanel({ data, lang, setLang }) {
  const code = codeSnippet(lang, data);
  return (
    <div className="code-panel">
      <div className="code-panel__head">
        <div className="code-tabs">
          {LANGS.map((l) => (
            <button key={l.id} className={"code-tab" + (lang === l.id ? " is-active" : "")} onClick={() => setLang(l.id)}>{l.label}</button>
          ))}
        </div>
        <CopyButton text={code} />
      </div>
      <pre className="code-body"><code dangerouslySetInnerHTML={{ __html: highlight(code, lang) }} /></pre>
    </div>
  );
}

function hashStr(s) { let h = 0; for (let i = 0; i < s.length; i++) { h = (h << 5) - h + s.charCodeAt(i); h |= 0; } return h; }

// "Run" → response. Authed (in-app) does a real createRender; on the marketing page
// (no session) it derives a representative response from the actual request body.
function ResponsePanel({ data, running, resp }) {
  if (!resp && !running) return null;
  return (
    <div className={"code-resp" + (running ? " is-running" : "")}>
      <div className="code-resp__head">
        <span className="code-resp__status">
          <span className="code-resp__dot" /> {running ? "POST /v1/renders…" : resp && resp.error ? "error" : "200 OK"}
        </span>
        <span className="code-resp__ms">{running ? "rendering" : resp && resp.ms ? resp.ms + " ms" : ""}</span>
      </div>
      {!running && resp && !resp.error && (
        <div className="code-resp__body">
          <div className="code-resp__thumb"><RenderCard data={data} w={132} /></div>
          <pre className="code-resp__json"><code dangerouslySetInnerHTML={{ __html: highlight(
            JSON.stringify({ id: resp.id, url: resp.url, output: resp.output || "png" }, null, 2), "json") }} /></pre>
        </div>
      )}
      {!running && resp && resp.error && (
        <div className="code-resp__body"><span style={{ color: "var(--warn)", fontSize: 12.5 }}>{resp.error}</span></div>
      )}
    </div>
  );
}

const HW_SUBJECTS = {
  launch: { template: "og_launch_card", title: "Renders that never hit a wall", subtitle: "Design once, render millions — billed by usage, never blocked.", badge: "Launch", theme: "dusk" },
  blog: { template: "blog_share", title: "How we cut render latency in half", subtitle: "An engineering deep-dive into our headless render farm.", badge: "Blog", theme: "aurora" },
  sale: { template: "price_drop", title: "Now 40% off — this week only", subtitle: "The render plan that scales with you, on sale.", badge: "Sale", theme: "ink" },
};

// layout: "split" (render+form left, code right) · "code-left" · "stacked"
function HeroWidget({ layout = "split", subject = "launch" }) {
  const subj = HW_SUBJECTS[subject] || HW_SUBJECTS.launch;
  const [data, setData] = useState({
    author: "Ada Render", role: "Engineering", brand: "MostlyRender", ...subj,
  });
  const [mode, setMode] = useState("simple"); // simple | json
  const [lang, setLang] = useState("curl");
  const [running, setRunning] = useState(false);
  const [resp, setResp] = useState(null);
  const set = (k) => (e) => setData((d) => ({ ...d, [k]: e.target ? e.target.value : e }));
  const run = async () => {
    setRunning(true); setResp(null);
    const t0 = (window.performance && performance.now()) || Date.now();
    try {
      if (window.MRApi && MRApi.ready && MRApi.currentUser && MRApi.currentUser()) {
        const r = await MRApi.createRender({ templateId: data.template, modifications: buildModifications(data), output: "png" });
        setResp({ ...r, ms: Math.round(((window.performance && performance.now()) || Date.now()) - t0) });
      } else {
        await new Promise((res) => setTimeout(res, 850));
        const id = "rnd_" + Math.abs(hashStr(JSON.stringify(buildModifications(data)))).toString(36).slice(0, 6);
        setResp({ id, url: "https://img.mostlyrender.com/r/" + id + ".png", output: "png" });
      }
    } catch (e) { setResp({ error: errMsg(e) }); }
    setRunning(false);
  };

  const { Button, Badge } = MR_F;

  const editor = (
    <div className="hw-edit">
      <div className="hw-edit__head">
        <span className="hw-pane-label"><Icon d="image" size={14} /> Template input</span>
        <div className="hw-modeswap">
          <button className={mode === "simple" ? "is-active" : ""} onClick={() => setMode("simple")}>Simple</button>
          <button className={mode === "json" ? "is-active" : ""} onClick={() => setMode("json")}>JSON</button>
        </div>
      </div>

      {mode === "simple" ? (
        <div className="hw-fields">
          <ParamField icon="type" label="Title" apiKey="title">
            <input className="forge-input" value={data.title} onChange={set("title")} />
          </ParamField>
          <ParamField label="Subtitle" apiKey="subtitle">
            <input className="forge-input" value={data.subtitle} onChange={set("subtitle")} />
          </ParamField>
          <div className="hw-fields__row">
            <ParamField label="Badge" apiKey="badge">
              <input className="forge-input" value={data.badge} onChange={set("badge")} />
            </ParamField>
            <ParamField label="Author" apiKey="author.name">
              <input className="forge-input" value={data.author} onChange={set("author")} />
            </ParamField>
          </div>
          <ParamField label="Theme" apiKey="theme">
            <div className="hw-themes">
              {Object.entries(RENDER_THEMES).map(([k, t]) => (
                <button key={k} className={"hw-theme" + (data.theme === k ? " is-active" : "")} onClick={() => set("theme")(k)} title={t.name}>
                  <span className="hw-theme__sw" style={{ background: t.bg }} />
                  {t.name}
                </button>
              ))}
            </div>
          </ParamField>
        </div>
      ) : (
        <div className="hw-json">
          <pre><code dangerouslySetInnerHTML={{ __html: highlight(JSON.stringify(payloadObject(data), null, 2), "json") }} /></pre>
          <p className="hw-json__note">Edit in Simple mode — this mirrors the exact request body, key for key.</p>
        </div>
      )}
    </div>
  );

  const preview = (
    <div className="hw-preview">
      <div className="hw-preview__head">
        <span className="hw-pane-label"><Icon d="refresh" size={14} /> Live render</span>
        <Badge tone="good" dot>1200×630</Badge>
      </div>
      <div className="hw-preview__stage">
        <RenderCard data={data} w="100%" />
      </div>
      <div className="hw-preview__foot">
        <code>GET /r/og_launch_card-9f3a.png</code>
        <span className="hw-preview__live">updates as you type</span>
      </div>
    </div>
  );

  const codeSide = (
    <div className="hw-code">
      <CodePanel data={data} lang={lang} setLang={setLang} />
      <div className="hw-run">
        <Button variant="primary" size="sm" iconLeft={<Icon d="play" size={14} />} onClick={run} disabled={running}>
          {running ? "Rendering…" : resp ? "Run again" : "Run this call"}
        </Button>
        <span className="hw-run__hint">sign up free · first render in seconds</span>
      </div>
      <ResponsePanel data={data} running={running} resp={resp} />
    </div>
  );

  return (
    <div className={"hw " + "hw--" + layout}>
      <div className="hw__bar">
        <span className="mk-dot" style={{ background: "#ff5f57" }} />
        <span className="mk-dot" style={{ background: "#febc2e" }} />
        <span className="mk-dot" style={{ background: "#28c840" }} />
        <span className="hw__method">POST</span>
        <span className="hw__url">api.mostlyrender.com/v1/renders</span>
        <span className="hw__seal"><Icon d="lock" size={11} /> live demo</span>
      </div>
      <div className="hw__grid">
        <div className="hw__left">
          {preview}
          {editor}
        </div>
        <div className="hw__right">
          {codeSide}
        </div>
      </div>
    </div>
  );
}

window.HeroWidget = HeroWidget;