// agent-task.jsx — "Creating a task with Agent".
// A looping ~20s storyboard for the Agent-task feature card: floating white
// cards on the card's soft gradient, cursor-driven, fast typing, minimal text.
//   1 Create task (name)  2 Instructions  3 Connect resources + recipient
//   4 Trigger (radios)    5 Running       6 Morning brief output + notify
// React hooks (useState/useEffect/useRef) and Icon are global (landing-mockups).
// Exposes window.AgentTaskFlow.

(function () {
  const M = window.Motion || {};
  const motion = M.motion;
  const ease = [0.16, 1, 0.3, 1];

  const NAME = "Daily Facilities Brief";
  const INSTR = "Check open requests, work orders, failed checklists, asset issues, contractor replies, and today's room bookings. Send me a morning facilities brief.";
  const WI = "assets/wisbid-icon.svg";
  const RESOURCES = [
    { label: "Requests", icon: WI },
    { label: "Work Orders", icon: WI },
    { label: "Checklists", icon: WI },
    { label: "Assets", icon: WI },
    { label: "Email", icon: "assets/icons/gmail.svg" },
    { label: "Calendar", icon: "assets/icons/google-calendar.webp" },
    { label: "Notification", icon: WI },
  ];
  const STATUS = ["Requests checked", "Work orders reviewed", "Checklists scanned", "Assets matched", "Calendar checked", "Brief prepared"];
  const CHIPS = ["2 SLA Risks", "1 Failed Checklist", "3 Recurring Issues", "1 High-Impact Booking"];
  const TRIGGERS = ["Manual Run", "Scheduled Run", "Event Driven"];

  const Caret = () => <i className="atk-caret" aria-hidden="true" />;

  const Cursor = ({ pos, clickKey }) => {
    if (!motion || !pos) return null;
    return (
      <motion.div
        className="atk-cursor"
        initial={false}
        animate={{ x: pos.x, y: pos.y, scale: pos.down ? 0.8 : 1 }}
        transition={{ x: { duration: 0.4, ease }, y: { duration: 0.4, ease }, scale: { duration: 0.12 } }}>
        <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
          <path d="M4 2l12 6.5-5 1.2-2.6 5.1z" fill="#0B1F3B" stroke="#fff" strokeWidth="1.2" strokeLinejoin="round" />
        </svg>
        {clickKey > 0 && <span className="atk-click-ring" key={clickKey} />}
      </motion.div>
    );
  };

  const AgentTaskFlow = ({ playing }) => {
    const [scene, setScene] = useState(0);
    const [slideOut, setSlideOut] = useState(false);
    const [nameLen, setNameLen] = useState(0);
    const [instrLen, setInstrLen] = useState(0);
    const [picked, setPicked] = useState([]);       // resource indices
    const [dropdown, setDropdown] = useState(false);
    const [recipient, setRecipient] = useState(false);
    const [perms, setPerms] = useState(false);
    const [trigger, setTrigger] = useState(-1);
    const [schedule, setSchedule] = useState(false);
    const [statusN, setStatusN] = useState(0);
    const [chipsN, setChipsN] = useState(0);
    const [notif, setNotif] = useState(false);
    const [tag, setTag] = useState(false);
    const [pos, setPos] = useState(null);
    const [clickKey, setClickKey] = useState(0);

    const camRef = useRef(null);
    const els = useRef({});
    const reg = (k) => (el) => { if (el) els.current[k] = el; };

    useEffect(() => {
      const reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
      // Paused (behind the play cover) or reduced motion: hold a static poster
      // of the finished brief — no animation runs.
      if (!playing || reduced) {
        setScene(5); setChipsN(CHIPS.length); setNotif(true); setTag(true); setPos(null);
        return;
      }
      const timers = [];
      const SP = 1.3; // global pacing multiplier — slow the storyboard down so it reads
      const at = (fn, ms) => timers.push(setTimeout(fn, ms * SP));

      const centerOf = (el, dx) => {
        const cam = camRef.current;
        if (!cam || !el) return null;
        const c = cam.getBoundingClientRect();
        const r = el.getBoundingClientRect();
        return { x: r.left - c.left + (dx == null ? r.width / 2 : dx), y: r.top - c.top + r.height / 2 };
      };
      const moveTo = (k, dx) => { const p = centerOf(els.current[k], dx); if (p) setPos({ x: p.x - 3, y: p.y - 2, down: false }); };
      const click = () => { setPos((p) => (p ? { ...p, down: true } : p)); setClickKey((k) => k + 1); };
      const up = () => setPos((p) => (p ? { ...p, down: false } : p));

      const run = () => {
        setScene(0); setSlideOut(false);
        setNameLen(0); setInstrLen(0); setPicked([]); setDropdown(false);
        setRecipient(false); setPerms(false); setTrigger(-1); setSchedule(false);
        setStatusN(0); setChipsN(0); setNotif(false); setTag(false);
        setPos({ x: 60, y: 210, down: false });

        let e = 360;

        // ----- Scene 1: name -----
        NAME.split("").forEach((_, i) => { at(() => setNameLen(i + 1), e); e += 48; });
        e += 260;
        at(() => moveTo("next"), e); e += 380;
        at(click, e); e += 120; at(up, e); e += 220;
        at(() => setSlideOut(true), e); e += 640;

        // ----- Scene 2: instructions -----
        at(() => { setScene(1); setSlideOut(false); setPos({ x: 60, y: 210, down: false }); }, e); e += 320;
        INSTR.split("").forEach((_, i) => { at(() => setInstrLen(i + 1), e); e += 9; });
        e += 360;
        at(() => moveTo("next"), e); e += 360;
        at(click, e); e += 120; at(up, e); e += 200;
        at(() => setSlideOut(true), e); e += 640;

        // ----- Scene 3: connect resources -----
        at(() => { setScene(2); setSlideOut(false); setPos({ x: 50, y: 70, down: false }); }, e); e += 360;
        RESOURCES.forEach((_, i) => {
          at(() => moveTo("chip" + i), e); e += 170;
          at(() => { click(); setPicked((p) => p.includes(i) ? p : p.concat(i)); }, e); e += 70;
          at(up, e); e += 24;
          if (i === RESOURCES.length - 1) { at(() => setDropdown(true), e); e += 360; }
        });
        at(() => moveTo("recipient"), e); e += 340;
        at(() => { click(); setRecipient(true); }, e); e += 110;
        at(up, e); e += 360;
        at(() => { setDropdown(false); setPerms(true); }, e); e += 400;
        at(() => moveTo("next"), e); e += 360;
        at(click, e); e += 120; at(up, e); e += 220;
        at(() => setSlideOut(true), e); e += 640;

        // ----- Scene 4: trigger -----
        at(() => { setScene(3); setSlideOut(false); setPos({ x: 60, y: 80, down: false }); }, e); e += 360;
        at(() => moveTo("radio1"), e); e += 380;
        at(() => { click(); setTrigger(1); }, e); e += 120;
        at(up, e); e += 120;
        at(() => setSchedule(true), e); e += 400;
        at(() => moveTo("create"), e); e += 380;
        at(click, e); e += 130; at(up, e); e += 220;
        at(() => setSlideOut(true), e); e += 640;

        // ----- Scene 5: running -----
        at(() => { setScene(4); setSlideOut(false); setPos(null); }, e); e += 380;
        STATUS.forEach((_, i) => { at(() => setStatusN(i + 1), e); e += 205; });
        e += 360;
        at(() => setSlideOut(true), e); e += 640;

        // ----- Scene 6: output -----
        at(() => { setScene(5); setSlideOut(false); }, e); e += 320;
        CHIPS.forEach((_, i) => { at(() => setChipsN(i + 1), e); e += 165; });
        e += 200;
        at(() => setNotif(true), e); e += 460;
        at(() => setTag(true), e); e += 2200; // hold on the resolved hero state
        at(run, e); // loop (softly behind the frosted cover; restarts cleanly on Play)
      };
      run();
      return () => timers.forEach(clearTimeout);
    }, [playing]);

    /* ---------- scenes ---------- */
    const scenes = [
      // 0 — Create task
      <div className="atk-card" key="s0">
        <div className="atk-head"><Icon name="sparkles" size={14} />Create Agent Task</div>
        <div className="atk-field">
          <span className="atk-label">Task name</span>
          <div className="atk-input">{NAME.slice(0, nameLen)}{nameLen < NAME.length || scene === 0 ? <Caret /> : null}</div>
        </div>
        <div className="atk-foot">
          <span className="atk-btn atk-btn-primary" ref={reg("next")}>Next<Icon name="arrow-right" size={13} /></span>
        </div>
      </div>,
      // 1 — Instructions
      <div className="atk-card" key="s1">
        <div className="atk-head"><Icon name="file" size={14} />Task Instructions</div>
        <div className="atk-textarea">{INSTR.slice(0, instrLen)}<Caret /></div>
        <div className="atk-foot">
          <span className="atk-btn atk-btn-primary" ref={reg("next")}>Next<Icon name="arrow-right" size={13} /></span>
        </div>
      </div>,
      // 2 — Connect resources
      <div className="atk-card" key="s2">
        <div className="atk-head"><Icon name="layers" size={14} />Connect Resources</div>
        <div className="atk-chips">
          {RESOURCES.map((r, i) => (
            <span key={r.label} ref={reg("chip" + i)} className={`atk-chip ${picked.includes(i) ? "is-on" : ""}`}>
              <img className="atk-chip-ic" src={r.icon} alt="" />
              {r.label}
              {picked.includes(i) && <span className="atk-chip-ck"><Icon name="check" size={9} /></span>}
            </span>
          ))}
        </div>
        {dropdown && (
          <div className="atk-dd">
            <div className="atk-dd-label">Send brief to</div>
            <div ref={reg("recipient")} className={`atk-dd-row ${recipient ? "is-on" : ""}`}>
              <span className="atk-dd-av">JL</span>Jamie Lim
              {recipient && <span className="atk-dd-check"><Icon name="check" size={11} /></span>}
            </div>
            <div className="atk-dd-ghost"><span /><span /></div>
            <div className="atk-dd-ghost"><span /><span /></div>
          </div>
        )}
        {perms && (
          <div className="atk-perms">
            <span className="atk-perm"><Icon name="lock" size={9} />Email · Draft only</span>
            <span className="atk-perm"><Icon name="lock" size={9} />Calendar · Read only</span>
            <span className="atk-perm"><Icon name="send" size={9} />Notify · Selected user</span>
          </div>
        )}
        <div className="atk-foot">
          <span className="atk-btn atk-btn-primary" ref={reg("next")}>Next<Icon name="arrow-right" size={13} /></span>
        </div>
      </div>,
      // 3 — Trigger
      <div className="atk-card" key="s3">
        <div className="atk-head"><Icon name="clock" size={14} />Choose Trigger</div>
        <div className="atk-radios">
          {TRIGGERS.map((l, i) => (
            <div key={l} ref={reg("radio" + i)} className={`atk-radio ${trigger === i ? "is-on" : ""}`}>
              <span className="atk-dot" />{l}
            </div>
          ))}
        </div>
        {schedule && (
          <div className="atk-schedule">
            <span className="atk-sched"><Icon name="clock" size={10} />Weekdays · 8:00 AM</span>
            <span className="atk-sched"><Icon name="globe" size={10} />Asia/Singapore</span>
          </div>
        )}
        <div className="atk-foot">
          <span className="atk-btn atk-btn-primary" ref={reg("create")}>Create Task</span>
        </div>
      </div>,
      // 4 — Running
      <div className="atk-card" key="s4">
        <div className="atk-head"><span className="atk-spin" />Daily Facilities Brief is running</div>
        <div className="atk-status">
          {STATUS.map((s, i) => (
            <div key={s} className={`atk-status-row ${i < statusN ? "is-done" : ""}`}>
              {i < statusN ? <span className="atk-status-check"><Icon name="check" size={10} /></span> : <span className="atk-status-dot" />}
              {s}
            </div>
          ))}
        </div>
      </div>,
      // 5 — Output
      <div className="atk-out" key="s5">
        <div className="atk-card atk-out-card">
          <div className="atk-out-head">
            <Icon name="building" size={14} />
            <div><b>Facilities Morning Brief</b><span>Building A · Today</span></div>
          </div>
          <div className="atk-out-chips">
            {CHIPS.slice(0, chipsN).map((c) => <span className="atk-out-chip" key={c}>{c}</span>)}
          </div>
        </div>
        {notif && (
          <div className={`atk-notif ${motion ? "" : "is-static"}`}>
            <span className="atk-notif-ic"><Icon name="send" size={13} /></span>
            <div><b>Sent to Jamie Lim</b><span>Your Facilities Morning Brief is ready.</span></div>
          </div>
        )}
        {tag && <div className="atk-tagline">Agent tasks that keep facilities teams ahead of the day.</div>}
      </div>,
    ];

    const wrapAnim = slideOut
      ? { x: "-130%", opacity: 1 }
      : { x: 0, opacity: 1 };

    return (
      <div className="atk-wrap">
        {motion ? (
          <div className="atk-stage">
            <motion.div className="atk-camera" ref={camRef}>
              <motion.div
                key={scene}
                className="atk-scene"
                initial={{ x: "62%", opacity: 0 }}
                animate={wrapAnim}
                transition={slideOut ? { duration: 0.56, ease: [0.4, 0, 0.2, 1] } : { duration: 0.5, ease }}>
                {scenes[scene]}
              </motion.div>
            </motion.div>
            <Cursor pos={pos} clickKey={clickKey} />
          </div>
        ) : (
          <div className="atk-stage"><div className="atk-camera">{scenes[5]}</div></div>
        )}
      </div>
    );
  };

  window.AgentTaskFlow = AgentTaskFlow;
})();