// ============================================================
// BOT FLOW — Diseño anterior (timeline + stage), 8s por gatito.
// Stacked slots para nunca quedar en blanco.
// ============================================================

function BotFlow() {
  const [step, setStep] = React.useState(0);
  const [playing, setPlaying] = React.useState(true);
  const total = BOT_FLOW.length;
  const timerRef = React.useRef(null);

  React.useEffect(() => {
    CHARACTERS.forEach(c => { const i = new Image(); i.src = c.img; });
  }, []);

  // 8 segundos por gatito
  React.useEffect(() => {
    if (!playing) return;
    clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => setStep(s => (s + 1) % total), 8000);
    return () => clearTimeout(timerRef.current);
  }, [step, playing, total]);

  const current = BOT_FLOW[step];
  const host = CHARACTERS.find(c => c.id === current.host);
  const prevStep = (step - 1 + total) % total;
  const firstHost = CHARACTERS.find(c => c.id === BOT_FLOW[0].host);

  return (
    <section id="flow" className="section botflow">
      <header className="bf-header">
        <h2>Cómo funciona un bot</h2>
      </header>

      <div className="bf-wrap">
        {/* TIMELINE */}
        <div className="bf-timeline" role="tablist">
          <div className="bf-line">
            <div
              className="bf-line-fill"
              style={{
                width: `${((step + 1) / total) * 100}%`,
                background: `linear-gradient(90deg, ${firstHost.color}, ${host.color})`,
              }}
            />
          </div>
          {BOT_FLOW.map((b, i) => {
            const h = CHARACTERS.find(c => c.id === b.host);
            const active = i === step;
            const done = i < step;
            return (
              <button
                key={b.id}
                type="button"
                className={"bf-node" + (active ? " active" : "") + (done ? " done" : "")}
                style={{ "--nc": h.color }}
                onClick={() => { setPlaying(false); setStep(i); }}
                aria-selected={active}
                role="tab"
              >
                <span className="bf-avatar">
                  <img src={h.img} alt={h.name} draggable="false" loading="eager" />
                </span>
                <span className="bf-step-num">0{i + 1}</span>
                <span className="bf-step-label">{b.label}</span>
              </button>
            );
          })}
          <div className="bf-packet" style={{ left: `calc(${((step + .5) / total) * 100}% - 14px)` }} aria-hidden="true">
            <span style={{ background: host.color, boxShadow: `0 0 18px ${host.color}` }} />
          </div>
        </div>

        {/* STAGE */}
        <div className="bf-stage" style={{ "--sc": host.color }}>
          <div className="bf-stage-bg" />
          <div className="bf-stage-rings">
            <span style={{ borderColor: host.color }} />
            <span style={{ borderColor: host.color }} />
            <span style={{ borderColor: host.color }} />
          </div>

          {/* CHARACTERS COLUMN — stacked slots */}
          <div className="bf-char-col">
            <div className="bf-char-stack">
              {BOT_FLOW.map((b, i) => {
                const h = CHARACTERS.find(c => c.id === b.host);
                let state = "hidden";
                if (i === step) state = "active";
                else if (i === prevStep) state = "leaving";
                return (
                  <div key={b.id} className={"bf-char-slot is-" + state} style={{ "--cc": h.color }}>
                    <img src={h.img} alt={h.name} draggable="false" loading="eager" />
                    <span className="bf-char-glow" style={{ background: `radial-gradient(circle, ${h.color}, transparent 60%)` }} />
                  </div>
                );
              })}
            </div>
            <div className="bf-char-meta">
              <small style={{ color: host.color }}>{host.tool}</small>
              <b>{host.name}</b>
              <em>{current.label}</em>
            </div>
          </div>

          {/* MESSAGE COLUMN */}
          <div className="bf-msg-col">
            <div className="bf-bubble-stack">
              {BOT_FLOW.map((b, i) => {
                const h = CHARACTERS.find(c => c.id === b.host);
                let state = "hidden";
                if (i === step) state = "active";
                else if (i === prevStep) state = "leaving";
                return (
                  <div key={b.id} className={"bf-bubble bot bf-bubble-slot is-" + state} style={{ borderColor: h.color }}>
                    <small style={{ color: h.color }}>{h.name} · paso {i + 1}/{total}</small>
                    <h4>{b.title}</h4>
                    <p>{b.line}</p>
                  </div>
                );
              })}
            </div>

            <div className="bf-ctrl">
              <button type="button" className="bf-btn" onClick={() => { setPlaying(false); setStep(s => (s - 1 + total) % total); }}>‹</button>
              <button type="button" className="bf-btn primary" onClick={() => setPlaying(p => !p)} style={{ background: host.color, borderColor: host.color }}>
                {playing ? "⏸ Pausar" : "▶ Reproducir"}
              </button>
              <button type="button" className="bf-btn" onClick={() => { setPlaying(false); setStep(s => (s + 1) % total); }}>›</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.BotFlow = BotFlow;