// LiveDemo — interactive "ask an agent" experience.
// Pick a question, see the matched agent type out a response live.

const QUESTIONS = [
  {
    q: "Je voudrais réserver un cours pour samedi matin.",
    agent: 'Sofia', initials: 'S', color: '#f59e0b',
    role: 'Accueil & réservation',
    a: "Bonjour ! Il reste deux places samedi à 10h et trois à 11h30. Vous préférez quel créneau ? Je bloque la place pendant 15 minutes le temps que vous confirmiez 🌊",
    actions: ['Bloquer 10h', 'Voir 11h30', 'Voir dimanche'],
  },
  {
    q: "Combien coûte un site vitrine pour mon cabinet ?",
    agent: 'Léo', initials: 'L', color: '#c4622a',
    role: 'Vente & qualification',
    a: "Pour un cabinet santé, nos sites sur-mesure partent entre 4 800 € et 9 500 € selon le nombre de pages et les fonctionnalités. Je vous propose un échange de 30 min pour affiner le besoin ?",
    actions: ['Réserver 30 min', 'Voir des exemples', 'Recevoir un devis type'],
  },
  {
    q: "Mon agent ne répond pas correctement aux demandes en italien.",
    agent: 'Hugo', initials: 'H', color: '#3b6cf5',
    role: 'Support technique',
    a: "Je viens d'analyser les 12 dernières conversations en italien. Le problème : il manquait des exemples dans la base de formation. C'est corrigé. Vous pouvez tester maintenant, ou je vous envoie le rapport complet ?",
    actions: ['Tester maintenant', 'Voir le rapport', "C'est bon"],
  },
  {
    q: "Je voudrais déplacer mon rendez-vous de demain à la semaine prochaine.",
    agent: 'Anaïs', initials: 'A', color: '#d97706',
    role: 'Prise de RDV & suivi',
    a: "Bien sûr. Votre rendez-vous est prévu demain à 11h15 avec le Dr Berger. J'ai trois créneaux la semaine prochaine : lundi 14h, mardi 10h30, jeudi 16h. Lequel vous convient ?",
    actions: ['Lundi 14h', 'Mardi 10h30', 'Jeudi 16h'],
  },
];

const LiveDemo = () => {
  const [idx, setIdx] = React.useState(0);
  const [typed, setTyped] = React.useState('');
  const [showActions, setShowActions] = React.useState(false);
  const timerRef = React.useRef(null);

  const current = QUESTIONS[idx];

  React.useEffect(() => {
    setTyped('');
    setShowActions(false);
    clearInterval(timerRef.current);
    let i = 0;
    const target = current.a;
    timerRef.current = setInterval(() => {
      i += 2;
      if (i >= target.length) {
        setTyped(target);
        clearInterval(timerRef.current);
        setTimeout(() => setShowActions(true), 250);
      } else {
        setTyped(target.slice(0, i));
      }
    }, 22);
    return () => clearInterval(timerRef.current);
  }, [idx]);

  const styleVars = { '--agent-color': current.color };

  return (
    <section className="demo" data-screen-label="05 Live demo">

      <div className="demo__head">
        <span className="b-marker"><span className="b-marker__br">[</span> 04 / Démo live <span className="b-marker__br">]</span></span>
        <h2 className="demo__title">
          Posez une question. <em>Regardez qui répond.</em>
        </h2>
      </div>

      <div className="demo__stage" style={styleVars}>

        <div className="demo__chips">
          {QUESTIONS.map((q, i) => (
            <button
              key={i}
              type="button"
              className={`demo__chip ${i === idx ? 'is-active' : ''}`}
              onClick={() => setIdx(i)}
            >
              <span className="demo__chip-q">{q.q}</span>
              <span className="demo__chip-tag">→ {q.agent}</span>
            </button>
          ))}
        </div>

        <div className="demo__convo">

          <div className="demo__bubble demo__bubble--user">
            <span className="demo__bubble-from">Vous · à l'instant</span>
            {current.q}
          </div>

          <div className="demo__agent-row">
            <span className="demo__agent-avatar" style={{ background: current.color }}>
            <img src={window.AGENT_AVATAR_URL && window.AGENT_AVATAR_URL(current.agent)} alt={current.agent} />
          </span>
            <div>
              <div className="demo__agent-name">{current.agent}</div>
              <div className="demo__agent-role">{current.role}</div>
            </div>
            <span className="demo__agent-status">en cours…</span>
          </div>

          <div className="demo__bubble demo__bubble--agent">
            {typed}
            {typed.length < current.a.length && <span className="demo__caret">▍</span>}
          </div>

          <div className={`demo__actions ${showActions ? 'is-shown' : ''}`}>
            {current.actions.map((a, i) => (
              <button key={i} className="demo__action">{a}</button>
            ))}
          </div>

        </div>

      </div>
    </section>
  );
};

window.LiveDemo = LiveDemo;