/* ChatDemo — animowany agent AI obsługi klienta.
   Odgrywa rozmowę krok po kroku: klient pisze -> bot "myśli" -> odpowiada.
   Po ostatniej wiadomości pauza i restart (pętla). */

function CdBotIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="3" y="8" width="18" height="12" rx="3" />
      <path d="M12 8V4" /><circle cx="12" cy="3" r="1.4" fill="currentColor" stroke="none" />
      <circle cx="9" cy="14" r="1.3" fill="currentColor" stroke="none" />
      <circle cx="15" cy="14" r="1.3" fill="currentColor" stroke="none" />
      <path d="M1 13v3" /><path d="M23 13v3" />
    </svg>
  );
}

// scenariusz rozmowy (1:1 ze zrzutu)
const CD_MESSAGES = [
  { from: "user", time: "09:12", node: "Dzień dobry, gdzie jest moje zamówienie?" },
  {
    from: "bot", time: "09:12", think: 1700,
    node: (
      <>
        Dzień dobry! Sprawdzę to dla Ciebie.<br /><br />
        Twoje zamówienie nr <strong>2026/05/12345</strong> zostało wysłane dzisiaj o 08:47.<br /><br />
        Aktualny status: <span className="cd-ok">W drodze</span><br />
        Przewidywana dostawa: <strong>jutro (24.05)</strong> przez InPost kurier
      </>
    ),
  },
  { from: "user", time: "09:13", node: "Czy dotrze na pewno jutro?" },
  {
    from: "bot", time: "09:13", think: 1500,
    node: (
      <>
        Tak, wszystko na to wskazuje 🙂<br />
        Przesyłki InPost doręczane są zazwyczaj w 24h. Otrzymasz SMS z dokładną godziną doręczenia.
      </>
    ),
  },
  { from: "user", time: "09:14", node: "Czy to serum nadaje się do cery wrażliwej?" },
  {
    from: "bot", time: "09:14", think: 1600,
    node: (
      <>
        Tak, nasze serum jest odpowiednie dla cery wrażliwej. Ma lekką formułę,
        bez substancji zapachowych i zostało przebadane dermatologicznie.
      </>
    ),
  },
];

function ChatDemo() {
  const reduceMotion = typeof window !== "undefined" &&
    window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  const [count, setCount] = React.useState(reduceMotion ? CD_MESSAGES.length : 0);
  const [typing, setTyping] = React.useState(false);
  const bodyRef = React.useRef(null);

  // sterownik sekwencji
  React.useEffect(() => {
    if (reduceMotion) return;
    let cancelled = false;
    const timers = [];
    const wait = (ms) => new Promise((res) => timers.push(setTimeout(res, ms)));

    async function run() {
      while (!cancelled) {
        setCount(0); setTyping(false);
        await wait(900);
        for (let i = 0; i < CD_MESSAGES.length && !cancelled; i++) {
          const m = CD_MESSAGES[i];
          if (m.from === "bot") {
            setTyping(true);
            await wait(1500);
            if (cancelled) break;
            setTyping(false);
          } else {
            await wait(i === 0 ? 500 : 1100);
            if (cancelled) break;
          }
          setCount(i + 1);
          await wait(1700); // pauza na spokojne przeczytanie wiadomości (~3s/wiadomość)
          if (cancelled) break;
        }
        await wait(4500); // pauza przed restartem
      }
    }
    run();
    return () => { cancelled = true; timers.forEach(clearTimeout); };
  }, [reduceMotion]);

  // auto-scroll do najnowszej wiadomości
  React.useEffect(() => {
    const el = bodyRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [count, typing]);

  const shown = CD_MESSAGES.slice(0, count);

  return (
    <div className="cd-stage">
      <div className="cd-phone">
        <div className="cd-head">
          <div className="cd-head-avatar"><CdBotIcon /></div>
          <div className="cd-head-meta">
            <div className="cd-head-title">Opiekun AI</div>
            <div className="cd-head-sub"><span className="cd-head-dot"></span>Wirtualny asystent sklepu</div>
          </div>
          <div className="cd-head-actions">
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
          </div>
        </div>

        <div className="cd-body" ref={bodyRef}>
          {shown.map((m, i) => (
            <div key={i} className={"cd-row cd-enter " + (m.from === "bot" ? "cd-row--bot" : "cd-row--user")}>
              {m.from === "bot" && <div className="cd-msg-avatar"><CdBotIcon /></div>}
              <div className="cd-stack">
                <div className="cd-bubble">{m.node}</div>
                <div className="cd-time">{m.time}</div>
              </div>
            </div>
          ))}
          {typing && (
            <div className="cd-row cd-row--bot cd-enter">
              <div className="cd-msg-avatar"><CdBotIcon /></div>
              <div className="cd-typing"><span></span><span></span><span></span></div>
            </div>
          )}
        </div>

        <div className="cd-chips">
          <span className="cd-chip">Śledź zamówienie</span>
          <span className="cd-chip">Zwroty i reklamacje</span>
          <span className="cd-chip">Dostawa</span>
        </div>

        <div className="cd-input">
          <div className="cd-input-field cd-input-field--demo" title="Wersja demo — wysyłanie wiadomości jest wyłączone">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="4" y="11" width="16" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
            Wersja demo — wysyłanie wiadomości wyłączone
          </div>
          <div className="cd-send cd-send--off" aria-disabled="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>
          </div>
        </div>
      </div>
    </div>
  );
}