/* global React */
// "Studio" popup — opens on "cue:open-studio". A short tutorial for building
// a custom app on the Index with a coding agent, with a looping flow animation
// (install skill → describe app → generated result).

const StudioModal = (function () {
  const { useState, useEffect, useRef } = React;

  const CMD = "npx skills add qaecy/skills --skill cue-app-builder";
  const PROMPT =
    "Build a page that maps the 5 organisations mentioned most in my Cue project. Click one to see a side panel with everything the system knows about it — the documents it appears in, the page numbers, and related entities.";

  /* ---------- Looping flow animation ---------- */
  function StudioFlow() {
    const [phase, setPhase] = useState(0); // 0 install · 1 describe · 2 result
    const [typed, setTyped] = useState("");
    const [done, setDone] = useState(false);

    useEffect(() => {
      let timers = [];
      let cancelled = false;
      const wait = (ms, fn) => timers.push(setTimeout(fn, ms));

      function type(text, speed, after) {
        let i = 0;
        setTyped("");
        setDone(false);
        (function tick() {
          if (cancelled) return;
          i++;
          setTyped(text.slice(0, i));
          if (i < text.length) wait(speed, tick);
          else { setDone(true); wait(1400, after); }
        })();
      }

      function run(p) {
        if (cancelled) return;
        setPhase(p);
        if (p === 0) type(CMD, 36, () => run(1));
        else if (p === 1) type(PROMPT, 20, () => run(2));
        else wait(4600, () => run(0));
      }
      run(0);
      return () => { cancelled = true; timers.forEach(clearTimeout); };
    }, []);

    const label = phase === 0 ? "Terminal" : phase === 1 ? "Your coding IDE" : "orgs-map.tsx — Preview";

    return (
      <div className="sf">
        <div className="sf__bar">
          <span className="sf__dots"><i></i><i></i><i></i></span>
          <span className="sf__label">{label}</span>
          <span className="sf__phaseidx">
            {[0, 1, 2].map((n) => <b key={n} className={n === phase ? "on" : ""}></b>)}
          </span>
        </div>

        <div className="sf__screen">
          {/* Phase 0 — install */}
          {phase === 0 ? (
            <div className="sf__term">
              <div className="sf__cmd"><span className="sf__sigil">$</span> {typed}{!done ? <span className="sf__caret"></span> : null}</div>
              {done ? (
                <div className="sf__out">
                  <span>Resolving qaecy/skills…</span>
                  <span>Adding skill <b>cue-app-builder</b></span>
                  <span className="sf__ok"><span className="cue-icon">check_circle</span> Skill installed — agent ready</span>
                </div>
              ) : null}
            </div>
          ) : null}

          {/* Phase 1 — describe */}
          {phase === 1 ? (
            <div className="sf__ide">
              <div className="sf__msg sf__msg--user">{typed}{!done ? <span className="sf__caret sf__caret--dark"></span> : null}</div>
              {done ? (
                <div className="sf__msg sf__msg--agent">
                  <span className="cue-icon sf__spin">progress_activity</span> Reading your project, picking components, writing the app…
                </div>
              ) : null}
            </div>
          ) : null}

          {/* Phase 2 — result */}
          {phase === 2 ? (
            <div className="sf__app">
              <div className="sf__map">
                <span className="sf__pin" style={{ left: "22%", top: "38%" }}><span className="cue-icon">location_on</span></span>
                <span className="sf__pin" style={{ left: "44%", top: "62%" }}><span className="cue-icon">location_on</span></span>
                <span className="sf__pin sf__pin--hot" style={{ left: "58%", top: "30%" }}><span className="cue-icon">location_on</span></span>
                <span className="sf__pin" style={{ left: "70%", top: "70%" }}><span className="cue-icon">location_on</span></span>
                <span className="sf__pin" style={{ left: "34%", top: "20%" }}><span className="cue-icon">location_on</span></span>
              </div>
              <div className="sf__panel">
                <div className="sf__panel-head">
                  <span className="sf__panel-ico"><span className="cue-icon">apartment</span></span>
                  <div>
                    <div className="sf__panel-org">Amberg Group</div>
                    <div className="sf__panel-meta">Mentioned in 24 documents</div>
                  </div>
                </div>
                <div className="sf__panel-label">Appears in</div>
                <div className="sf__panel-chips">
                  <span>Spec 08 11 13 · p.12</span>
                  <span>RFI-241</span>
                  <span>A-301 rev C · p.3</span>
                </div>
                <div className="sf__panel-label">Related entities</div>
                <div className="sf__panel-chips">
                  <span>Level 3 corridor</span>
                  <span>Fire rating</span>
                </div>
              </div>
            </div>
          ) : null}
        </div>
      </div>
    );
  }

  /* ---------- Steps ---------- */
  function CopyCmd() {
    const [copied, setCopied] = useState(false);
    const copy = () => {
      try {
        navigator.clipboard.writeText(CMD).then(() => {
          setCopied(true); setTimeout(() => setCopied(false), 1600);
        });
      } catch (e) {}
    };
    return (
      <div className="studio-cmd">
        <code>{CMD}</code>
        <button className="studio-cmd__copy" onClick={copy} aria-label="Copy command">
          <span className="cue-icon">{copied ? "check" : "content_copy"}</span>
        </button>
      </div>
    );
  }

  function StudioModal() {
    const [open, setOpen] = useState(false);
    useEffect(() => {
      const onOpen = () => setOpen(true);
      window.addEventListener("cue:open-studio", onOpen);
      return () => window.removeEventListener("cue:open-studio", onOpen);
    }, []);
    useEffect(() => {
      if (!open) return;
      const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
      window.addEventListener("keydown", onKey);
      document.body.style.overflow = "hidden";
      return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
    }, [open]);
    if (!open) return null;
    return (
      <div className="wl-overlay" onClick={() => setOpen(false)}>
        <div className="wl-card studio-card" onClick={(e) => e.stopPropagation()}>
          <button className="wl-close" onClick={() => setOpen(false)} aria-label="Close">
            <span className="cue-icon">close</span>
          </button>
          <p className="eyebrow">Cue Studio</p>
          <h2 className="wl-title">Build your own app on the Index.</h2>
          <p className="wl-lead">
            Use ready-made apps, or just describe what you want to your coding agent and let it
            build a custom one on top of Cue — document viewers, maps and more, wired to your
            project out of the box.
          </p>

          <StudioFlow />

          <ol className="studio-steps">
            <li className="studio-step">
              <span className="studio-step__n">1</span>
              <div>
                <h3 className="studio-step__title">Install the app-builder skill</h3>
                <p className="studio-step__body">Gives your agent the tools to understand your project's structure and the UI components available to it.</p>
                <CopyCmd />
              </div>
            </li>
            <li className="studio-step">
              <span className="studio-step__n">2</span>
              <div>
                <h3 className="studio-step__title">Describe the app you want</h3>
                <p className="studio-step__body">Open your agentic coding IDE and say what you're after, in plain language:</p>
                <blockquote className="studio-quote">“{PROMPT}”</blockquote>
              </div>
            </li>
            <li className="studio-step">
              <span className="studio-step__n">3</span>
              <div>
                <h3 className="studio-step__title">Review &amp; adjust</h3>
                <p className="studio-step__body">Watch it build, then refine in plain language until it's exactly right.</p>
              </div>
            </li>
          </ol>

          <div className="studio-stack">
            <span className="studio-stack__label">Built on</span>
            <span className="studio-stack__pill">@qaecy/cue-sdk</span>
            <span className="studio-stack__pill">@qaecy/cue-ui</span>
            <span className="studio-stack__pill">Cue agent skills</span>
          </div>
        </div>
      </div>
    );
  }

  return StudioModal;
})();

window.StudioModal = StudioModal;