// Live-feel Korsys-side preview — auto-plays a scripted markdown WO entry
// then a status transition. Mirrors hopper-live.jsx's component shape so
// app.jsx can mount it into #korsys-live alongside the Hopper widget.
const { useState: useStateK, useEffect: useEffectK } = React;

const K_SCRIPT = [
  {
    role: 'sys',
    text: 'New work order',
    delay: 600,
  },
  {
    role: 'user',
    typing: 700,
    text: 'title: Pump leaking · Building A mech room\npriority: high\nasset: AHU-3\nnotes: vibration > 6 mil/s on bearing 2',
    delay: 1800,
  },
  {
    role: 'sys',
    typing: 700,
    text: 'KOR-WO-0142 created · status: new',
    badge: 'created',
    delay: 1600,
  },
  {
    role: 'user',
    text: 'assign: M. Diaz',
    delay: 1100,
  },
  {
    role: 'sys',
    typing: 600,
    text: 'KOR-WO-0142 · status: assigned · M. Diaz',
    badge: 'assigned',
    delay: 1500,
  },
  {
    role: 'user',
    text: 'mark in progress',
    delay: 900,
  },
  {
    role: 'sys',
    typing: 500,
    text: 'KOR-WO-0142 · status: in_progress · audit logged',
    badge: 'in_progress',
    delay: 1700,
  },
];

function Korsys() {
  const [step, setStep] = useStateK(0);
  const [showTyping, setShowTyping] = useStateK(false);

  useEffectK(() => {
    if (step >= K_SCRIPT.length) {
      const t = setTimeout(() => setStep(0), 5500);
      return () => clearTimeout(t);
    }
    const item = K_SCRIPT[step];
    let typingTimer, advanceTimer;
    if (item.typing) {
      setShowTyping(true);
      typingTimer = setTimeout(() => setShowTyping(false), item.typing);
    }
    advanceTimer = setTimeout(() => setStep(s => s + 1), item.delay);
    return () => {
      clearTimeout(typingTimer);
      clearTimeout(advanceTimer);
    };
  }, [step]);

  const visible = K_SCRIPT.slice(0, step);
  const next = K_SCRIPT[step];
  const typingNow = next && showTyping;

  return (
    <div className="kchat">
      <div className="kchat-thread">
        {visible.map((it, i) => (
          <div key={i} className={`kbub ${it.role}`}>
            {it.role === 'sys' && it.badge && (
              <span className={`kbadge ${it.badge}`}>{it.badge.replace('_',' ')}</span>
            )}
            <pre className="kbub-text">{it.text}</pre>
          </div>
        ))}
        {typingNow && (
          <div className={`kbub ${next.role} typing`}>
            <span className="kdot"></span><span className="kdot"></span><span className="kdot"></span>
          </div>
        )}
      </div>
    </div>
  );
}

window.Korsys = Korsys;