// audit-trail.jsx — Framer Motion modular product story for "Source & audit".
// No cursor, no full-screen replica — composed UI fragments that crossfade,
// squash, and slide like After Effects keyframes. Loops infinitely.
//
//   Scene 1 — Work order source (selected row card)
//   Scene 2 — Context (Job details + Response & repair, fields highlighted)
//   Scene 3 — Work log timeline (entries appear in order)
//   Scene 4 — Audit chips (interpretation overlay)
//   Scene 5 — Reviewable badge (final composed state)
//
// Exports window.AuditTrail.

(function () {
  const M = window.Motion || {};
  const motion = M.motion;
  const AnimatePresence = M.AnimatePresence;
  const ease = [0.16, 1, 0.3, 1];
  const useAuditT = () => {
    const i18n = (typeof window !== "undefined" && window.Wisbid && window.Wisbid.i18n) || null;
    const [, force] = useState(0);
    useEffect(() => {
      if (!i18n) return;
      return i18n.subscribe(() => force((v) => v + 1));
    }, [i18n]);
    return (k, fb) => i18n ? i18n.t(k, fb) : fb;
  };

  /* ---------- data ---------- */
  const SOURCE = {
    id: "WO-2026-BBBA2C",
    tag: "REACTIVE",
    title: "Plumbing Leak issue · Level 4 Mechanical Plant",
    site: "QA Operations Tower · L4 Mech Plant",
    assignee: "QA Tech Native",
    sla: "On Track",
    status: "IN PROGRESS",
    priority: "MEDIUM",
  };

  const CONTEXT = [
    { k: "Trade",    v: "General Maintenance" },
    { k: "Source",   v: "Reactive repair" },
    { k: "Asset",    v: "RTU-04 DLP HVAC Unit" },
    { k: "Request",  v: "REQ-2026-68D2A4" },
    { k: "Assignee", v: "QA Technician Native" },
    { k: "Phase",    v: "In Progress" },
  ];

  const TIMELINE = [
    { kind: "req",  icon: "inbox",  title: "New Request · General Fault",  time: "10:33 AM",
      sub: "REQ-2026-68D2A4 · QA RTU FLOW RESIDENT",
      body: "Condensation dripping. Dispatcher to create proof-backed work.",
      chip: { label: "Prompted by",  value: "Dispatcher",                tone: "navy" } },
    { kind: "sla",  icon: "clock",  title: "SLA",                          time: "10:33 AM",
      body: "Response clock started in QA Operations Tower.",
      chip: { label: "Referenced",   value: "Request · Asset · SLA",      tone: "navy" } },
    { kind: "sys",  icon: "wrench", title: "System Update",                time: "10:42 AM",
      body: "Repair window started · execution began via reactive repair.",
      chip: { label: "Recommended",  value: "Create proof-backed work",   tone: "navy" } },
    { kind: "note", icon: "file",   title: "Internal Note",                time: "1:27 PM",
      sub: "ADDED BY DISPATCHER",
      body: "QA action matrix.",
      chip: { label: "Action taken", value: "Draft work created",         tone: "navy" } },
    { kind: "note", icon: "file",   title: "Internal Note",                time: "1:29 PM",
      sub: "ADDED BY FACILITY MGR",
      body: "QA approval-behaviour.",
      chip: { label: "Approved by",  value: "Facility Manager",           tone: "ok"   } },
  ];

  /* ---------- enter transitions per scene (squash / fade / slide) ---------- */
  const ENTER = {
    0: { initial: { opacity: 0, scale: 0.94, y: 16 },                animate: { opacity: 1, scale: 1, y: 0 } },
    1: { initial: { opacity: 0, scaleY: 0.88, scaleX: 1.05 },        animate: { opacity: 1, scaleY: 1, scaleX: 1 } },
    2: { initial: { opacity: 0, y: 28 },                             animate: { opacity: 1, y: 0 } },
  };

  /* ---------- fragments ---------- */
  const SourceFragment = () => {
    const t = useAuditT();
    return (
    <div className="at-frag">
      <div className="at-frag-eyebrow">{t("audit.source.eyebrow", "WORK ORDER · SOURCE")}</div>
      <div className="at-row-card">
        <div className="at-row-card-top">
          <span className="at-row-card-id">{SOURCE.id}</span>
          <span className="at-row-card-tag">{t("audit.source.tag", SOURCE.tag)}</span>
          <span className={`at-pill st-prog`} style={{ marginLeft: "auto" }}>{t("audit.source.status", SOURCE.status)}</span>
        </div>
        <div className="at-row-card-title">{t("audit.source.title", SOURCE.title)}</div>
        <div className="at-row-card-site">{t("audit.source.site", SOURCE.site)}</div>
        <div className="at-row-card-meta">
          <div className="at-row-card-as">
            <span className="at-av">QT</span>{SOURCE.assignee}
          </div>
          <div className="at-row-card-sla">
            <span className="dot" />{t("audit.source.sla", "SLA")} · {t("audit.source.slaState", SOURCE.sla)}
          </div>
          <div className="at-row-card-pri">
            {t("audit.source.priority", "Priority")} · <b>{t("audit.source.priorityState", SOURCE.priority)}</b>
          </div>
        </div>
      </div>
    </div>
  );};

  const ContextFragment = ({ active }) => {
    const t = useAuditT();
    const context = CONTEXT.map((f) => ({
      ...f,
      k: t(`audit.context.${f.k}.k`, f.k),
      v: t(`audit.context.${f.k}.v`, f.v),
    }));
    return (
    <div className="at-frag">
      <div className="at-frag-eyebrow">{t("audit.context.eyebrow", "CONTEXT · JOB DETAILS")}</div>
      <div className="at-ctx-grid">
        {context.map((f, i) => {
          const Tile = motion ? motion.div : "div";
          return (
            <Tile
              key={f.k}
              className={`at-ctx-tile ${i === active ? "is-active" : ""}`}
              initial={motion ? { opacity: 0, y: 10 } : undefined}
              animate={motion ? { opacity: 1, y: 0 } : undefined}
              transition={{ delay: 0.05 + i * 0.08, duration: 0.45, ease }}
            >
              <div className="k">{f.k}</div>
              <div className="v">{f.v}</div>
            </Tile>
          );
        })}
      </div>
      <div className="at-resp">
        <div className="at-resp-row">
          <span className="lbl">{t("audit.response", "Response")}</span><span className="el">{t("audit.elapsed", "0m elapsed")}</span>
        </div>
        <div className="at-resp-bar"><span /></div>
        <div className="at-resp-row">
          <span className="lbl">{t("audit.repair", "Repair")}</span><span className="el">{t("audit.elapsed", "0m elapsed")}</span>
        </div>
        <div className="at-resp-bar"><span /></div>
      </div>
    </div>
  );};

  const LogFragment = ({ shown, chips }) => {
    const t = useAuditT();
    const timeline = TIMELINE.map((e, i) => ({
      ...e,
      title: t(`audit.timeline.${i}.title`, e.title),
      sub: e.sub ? t(`audit.timeline.${i}.sub`, e.sub) : e.sub,
      body: t(`audit.timeline.${i}.body`, e.body),
      chip: {
        ...e.chip,
        label: t(`audit.timeline.${i}.chipLabel`, e.chip.label),
        value: t(`audit.timeline.${i}.chipValue`, e.chip.value),
      },
    }));
    return (
    <div className="at-frag at-frag-log">
      <div className="at-frag-eyebrow">{t("audit.log.eyebrow", "WORK LOG · AUDIT TRAIL")}</div>
      <div className="at-tl">
        {timeline.map((e, i) => {
          if (i >= shown) return null;
          const Row = motion ? motion.div : "div";
          return (
            <Row
              key={i}
              className="at-tl-item"
              initial={motion ? { opacity: 0, y: 14, scale: 0.97 } : undefined}
              animate={motion ? { opacity: 1, y: 0, scale: 1 } : undefined}
              transition={{ duration: 0.5, ease }}
            >
              <span className={`at-tl-ico ic-${e.kind}`}><Icon name={e.icon} size={13} /></span>
              <div className="at-tl-body">
                <div className="at-tl-top">
                  <b>{e.title}</b><span className="at-tl-time">{e.time}</span>
                </div>
                {e.sub && <div className="at-tl-meta">{e.sub}</div>}
                <div className="at-tl-text">{e.body}</div>
              </div>
              {chips && motion && (
                <motion.span
                  className={`at-chip chip-${e.chip.tone}`}
                  initial={{ opacity: 0, x: 12 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.08 + i * 0.10, duration: 0.4, ease }}
                >
                  <span className="at-chip-k">{e.chip.label}</span>
                  <span className="at-chip-v">{e.chip.value}</span>
                </motion.span>
              )}
            </Row>
          );
        })}
      </div>
    </div>
  );};

  /* ---------- main ---------- */
  const AuditTrail = () => {
    const t = useAuditT();
    const [scene, setScene] = useState(0);
    const [active, setActive] = useState(-1); // context-tile highlight index
    const [shown, setShown] = useState(0);
    const [chips, setChips] = useState(false);
    const [review, setReview] = useState(false);

    useEffect(() => {
      const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
      if (reduced) { setScene(2); setShown(TIMELINE.length); setChips(true); setReview(true); return; }
      const timers = [];
      const at = (fn, ms) => timers.push(setTimeout(fn, ms));

      const run = () => {
        // reset
        setScene(0); setActive(-1); setShown(0); setChips(false); setReview(false);
        let e = 0;

        // Scene 1 — source row card (hold)
        e += 1800;

        // Scene 2 — context, then highlight each field
        at(() => setScene(1), e);
        e += 700;
        for (let i = 0; i < CONTEXT.length; i++) {
          at(() => setActive(i), e);
          e += 340;
        }
        at(() => setActive(-1), e);
        e += 380;

        // Scene 3 — work log timeline, entries appear one by one
        at(() => setScene(2), e);
        e += 480;
        for (let i = 1; i <= TIMELINE.length; i++) {
          at(() => setShown(i), e);
          e += 540;
        }
        e += 250;

        // Scene 4 — audit chips overlay
        at(() => setChips(true), e);
        e += 1500;

        // Scene 5 — reviewable badge holds
        at(() => setReview(true), e);
        e += 2400;

        at(run, e);
      };
      run();
      return () => timers.forEach(clearTimeout);
    }, []);

    return (
      <div className="at-wrap">
        <div className="at-card">
          <div className="at-chrome">
            <span className="d" /><span className="d" /><span className="d" />
            <span className="at-url">app.wisbid.com · {t("audit.url", "audit")}</span>
          </div>

          <div className="at-stage">
            {motion ? (
              <motion.div
                key={`scene-${scene}`}
                className="at-scene"
                initial={ENTER[scene].initial}
                animate={ENTER[scene].animate}
                transition={{ duration: 0.6, ease }}
              >
                {scene === 0 && <SourceFragment />}
                {scene === 1 && <ContextFragment active={active} />}
                {scene === 2 && <LogFragment shown={shown} chips={chips} />}
              </motion.div>
            ) : (
              <div className="at-scene"><LogFragment shown={TIMELINE.length} chips={true} /></div>
            )}
          </div>

          {motion && (
            <AnimatePresence>
              {review && (
                <motion.div
                  className="at-badge-foot"
                  key="rev"
                  initial={{ opacity: 0, y: 12 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.45, ease }}
                >
                  <span className="at-badge-check"><Icon name="check" size={12} /></span>
                  {t("audit.completeBadge", "Audit trail complete · 5 decisions logged · reviewable anytime")}
                </motion.div>
              )}
            </AnimatePresence>
          )}
        </div>
      </div>
    );
  };

  window.AuditTrail = AuditTrail;
})();