/* global React */
// "Connect your AI" popup — opens on "cue:open-connect". Shows six short
// screen recordings of Cue running inside Claude via the MCP connector,
// each with a one-line description. Works for any AI agent that supports MCP UI.

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

  const clips = [
    { src: "assets/videos/1-overview.mp4", title: "Ask across the whole project", body: "Cue answers questions grounded in every connected document, right inside the chat." },
    { src: "assets/videos/2-list-people.mp4", title: "Pull structured lists", body: "Ask for the people on a project and get a clean, sourced list back." },
    { src: "assets/videos/3-bim-explore.mp4", title: "Explore the BIM model", body: "Query the building model in natural language — no specialist viewer needed." },
    { src: "assets/videos/4-design-author.mp4", title: "Trace design authorship", body: "See who authored what, and follow a decision back through the documents." },
    { src: "assets/videos/5-contracts.mp4", title: "Interrogate contracts", body: "Surface clauses, obligations and terms from across the contract set." },
    { src: "assets/videos/6-contracts-locations.mp4", title: "Connect contracts to place", body: "Tie contractual detail to the spatial model — what applies, and where." },
  ];

  function Clip({ c, onExpand }) {
    const vref = useRef(null);
    const onEnter = () => { const v = vref.current; if (v) { const p = v.play(); if (p && p.catch) p.catch(() => {}); } };
    const onLeave = () => { const v = vref.current; if (v) { v.pause(); } };
    return (
      <figure className="connect-clip" onMouseEnter={onEnter} onMouseLeave={onLeave} onClick={onExpand}>
        <div className="connect-clip__media">
          <video ref={vref} src={c.src} muted loop playsInline preload="metadata"></video>
          <span className="connect-clip__play"><span className="cue-icon">play_arrow</span></span>
          <span className="connect-clip__expand"><span className="cue-icon">open_in_full</span></span>
        </div>
        <figcaption>
          <h3 className="connect-clip__title">{c.title}</h3>
          <p className="connect-clip__body">{c.body}</p>
        </figcaption>
      </figure>
    );
  }

  /* Expanded lightbox — one clip large, with native controls + arrows. */
  function Lightbox({ index, onClose, onNav }) {
    const c = clips[index];
    useEffect(() => {
      const onKey = (e) => {
        if (e.key === "ArrowRight") onNav(1);
        else if (e.key === "ArrowLeft") onNav(-1);
      };
      window.addEventListener("keydown", onKey);
      return () => window.removeEventListener("keydown", onKey);
    }, [index]);
    return (
      <div className="connect-lb" onClick={onClose}>
        <button className="connect-lb__nav connect-lb__nav--prev" onClick={(e) => { e.stopPropagation(); onNav(-1); }} aria-label="Previous">
          <span className="cue-icon">chevron_left</span>
        </button>
        <div className="connect-lb__inner" onClick={(e) => e.stopPropagation()}>
          <video key={c.src} src={c.src} controls autoPlay muted loop playsInline></video>
          <div className="connect-lb__cap">
            <h3 className="connect-lb__title">{c.title}</h3>
            <p className="connect-lb__body">{c.body}</p>
          </div>
        </div>
        <button className="connect-lb__nav connect-lb__nav--next" onClick={(e) => { e.stopPropagation(); onNav(1); }} aria-label="Next">
          <span className="cue-icon">chevron_right</span>
        </button>
        <button className="connect-lb__close" onClick={onClose} aria-label="Close">
          <span className="cue-icon">close</span>
        </button>
      </div>
    );
  }

  function ConnectModal() {
    const [open, setOpen] = useState(false);
    const [expanded, setExpanded] = useState(null); // clip index or null
    useEffect(() => {
      const onOpen = () => setOpen(true);
      window.addEventListener("cue:open-connect", onOpen);
      return () => window.removeEventListener("cue:open-connect", onOpen);
    }, []);
    useEffect(() => {
      if (!open) return;
      const onKey = (e) => {
        if (e.key !== "Escape") return;
        // Esc closes the lightbox first, then the modal.
        setExpanded((cur) => { if (cur !== null) return null; setOpen(false); return null; });
      };
      window.addEventListener("keydown", onKey);
      document.body.style.overflow = "hidden";
      return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
    }, [open]);
    if (!open) return null;
    const nav = (d) => setExpanded((i) => (i + d + clips.length) % clips.length);
    return (
      <div className="wl-overlay" onClick={() => setOpen(false)}>
        <div className="wl-card connect-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">Connect your AI</p>
          <h2 className="wl-title">Cue, inside the AI you already use.</h2>
          <p className="wl-lead">
            These are real recordings of Cue running inside Claude through our connector. It works
            with any AI agent that supports MCP UI — your documents, answered in the tools your
            team already works in.
          </p>

          <div className="connect-grid">
            {clips.map((c, i) => <Clip key={i} c={c} onExpand={() => setExpanded(i)} />)}
          </div>
        </div>

        {expanded !== null ? <Lightbox index={expanded} onClose={() => setExpanded(null)} onNav={nav} /> : null}
      </div>
    );
  }

  return ConnectModal;
})();

window.ConnectModal = ConnectModal;