/* BeautyChatDemo — animowany agent AI rezerwacji 24/7 (motyw ciemny).
   Odgrywa rozmowę o umówieniu wizyty, kończy kartą rezerwacji. Pętla. */

function BcSparkle() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M12 3l1.6 4.8L18.4 9l-4.8 1.6L12 15l-1.6-4.4L5.6 9l4.8-1.2L12 3z" />
      <path d="M19 14l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7.7-2z" />
    </svg>
  );
}

// scenariusz rozmowy (1:1 ze zrzutu). type: user | bot | card
const BC_MESSAGES = [
  { from: "user", node: "Dzień dobry, chciałabym umówić się na modelowanie ust." },
  { from: "bot", think: 1600, node: "Dzień dobry! 💛 Jasne, pomogę z rezerwacją. Jaki termin Cię interesuje?" },
  { from: "user", node: "Najbliższy, najlepiej po południu." },
  { from: "bot", think: 1800, node: "Mam dostępne terminy: wtorek 17:00, środa 18:30, piątek 16:15. Który wybierasz?" },
  { from: "user", node: "Środa 18:30" },
  { from: "bot", think: 1500, node: "Super! Rezerwuję wizytę na środę 18:30. Kliknij poniżej, aby potwierdzić." },
  { from: "card", think: 1300 },
];

function BcCard() {
  return (
    <div className="bc-card">
      <div className="bc-card-top">
        <div className="bc-card-cal">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <rect x="3" y="4.5" width="18" height="16" rx="2.5" /><path d="M3 9h18" /><path d="M8 2.5v4M16 2.5v4" />
          </svg>
        </div>
        <div className="bc-card-info">
          <div className="bc-card-title">Modelowanie ust</div>
          <div className="bc-card-meta">
            Środa, 10 czerwca 2026<br />
            godz. 18:30<br />
            Lume Clinic Warszawa
          </div>
        </div>
      </div>
      <div className="bc-confirm">Potwierdź wizytę</div>
    </div>
  );
}

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

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

  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 < BC_MESSAGES.length && !cancelled; i++) {
          const m = BC_MESSAGES[i];
          if (m.from === "user") {
            await wait(i === 0 ? 500 : 1100);
            if (cancelled) break;
          } else {
            setTyping(true);
            await wait(1500);
            if (cancelled) break;
            setTyping(false);
          }
          setCount(i + 1);
          await wait(1700); // pauza na spokojne przeczytanie wiadomości (~3s/wiadomość)
          if (cancelled) break;
        }
        await wait(4800); // pauza przed restartem
      }
    }
    run();
    return () => { cancelled = true; timers.forEach(clearTimeout); };
  }, [reduceMotion]);

  React.useEffect(() => {
    const el = bodyRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [count, typing]);

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

  return (
    <div className="bc-stage">
      <div className="bc-phone">
        <div className="bc-head">
          <div className="bc-head-avatar"><BcSparkle /></div>
          <div className="bc-head-meta">
            <div className="bc-head-title">Asystent AI</div>
            <div className="bc-head-sub">Rezerwacja online 24/7</div>
          </div>
          <div className="bc-head-actions">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M5 12h14"/></svg>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
          </div>
        </div>

        <div className="bc-body" ref={bodyRef}>
          {shown.map((m, i) => {
            if (m.from === "card") return <BcCard key={i} />;
            return (
              <div key={i} className={"bc-row bc-enter " + (m.from === "bot" ? "bc-row--bot" : "bc-row--user")}>
                {m.from === "bot" && <div className="bc-msg-avatar"><BcSparkle /></div>}
                <div className="bc-bubble">{m.node}</div>
              </div>
            );
          })}
          {typing && (
            <div className="bc-row bc-row--bot bc-enter">
              <div className="bc-msg-avatar"><BcSparkle /></div>
              <div className="bc-typing"><span></span><span></span><span></span></div>
            </div>
          )}
        </div>

        <div className="bc-input">
          <div className="bc-input-field" 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="bc-send" 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>
  );
}