const SUGGESTIONS = ["Algo barato e rápido", "Sem taxa perto de mim", "Repetir meu último pedido"];

/** The big black card, pulled in from the right — now the bot's room. */
function BotPanel({ open, onClose }) {
  const [msgs, setMsgs] = React.useState([
    { from: "bot", text: "Fala. Diz o que você tá com vontade e eu acho no beco." }
  ]);
  const [draft, setDraft] = React.useState("");
  const scroller = React.useRef(null);

  React.useEffect(() => { if (scroller.current) scroller.current.scrollTop = scroller.current.scrollHeight; }, [msgs, open]);

  const send = (text) => {
    const t = (text || draft).trim();
    if (!t) return;
    setDraft("");
    setMsgs(m => [...m, { from: "eu", text: t }, { from: "bot", text: "…", pending: true }]);
    setTimeout(() => setMsgs(m => m.filter(x => !x.pending).concat({
      from: "bot",
      text: "Achei 3 lugares com taxa R$ 0,00 a menos de 2 km. Quer que eu abra o primeiro?"
    })), 900);
  };

  return (
    <div onClick={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()} style={{
      position: "absolute", top: 34, right: 0, bottom: 0, width: 340, zIndex: 400,
      transform: open ? "translateX(0)" : "translateX(104%)",
      transition: "transform var(--dur-slow) var(--ease-out)",
      background: "var(--black)", borderLeft: "1px solid var(--white)",
      borderTopLeftRadius: "var(--radius-xl)", borderBottomLeftRadius: "var(--radius-xl)",
      display: "flex", flexDirection: "column", padding: "18px 18px 20px"
    }}>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-300)" }}>Bot do beco</div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontStretch: "125%", textTransform: "uppercase", fontSize: 24, lineHeight: 1, color: "var(--white)", marginTop: 4 }}>
            Pede em palavras
          </div>
        </div>
        <button type="button" onClick={onClose} aria-label="Fechar"
          style={{ background: "none", border: "none", color: "var(--ink-300)", cursor: "pointer", padding: 4 }}>
          <Icon d={P.x} size={18} />
        </button>
      </div>

      <div ref={scroller} style={{ flex: 1, overflowY: "auto", margin: "18px 0", display: "flex", flexDirection: "column", gap: 10, scrollbarWidth: "none" }}>
        {msgs.map((m, i) => (
          <div key={i} style={{ display: "flex", justifyContent: m.from === "eu" ? "flex-end" : "flex-start" }}>
            <div style={{
              maxWidth: "84%", padding: "10px 13px",
              borderRadius: m.from === "eu" ? "var(--radius-lg) var(--radius-lg) 3px var(--radius-lg)" : "var(--radius-lg) var(--radius-lg) var(--radius-lg) 3px",
              background: m.from === "eu" ? "var(--white)" : "transparent",
              color: m.from === "eu" ? "var(--black)" : "var(--white)",
              border: m.from === "eu" ? "none" : "1px solid var(--ink-600)",
              fontSize: 14, lineHeight: 1.4, opacity: m.pending ? 0.5 : 1
            }}>{m.text}</div>
          </div>
        ))}
      </div>

      <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 12 }}>
        {SUGGESTIONS.map(s => (
          <button key={s} type="button" onClick={() => send(s)}
            style={{
              background: "transparent", border: "1px solid var(--ink-600)", borderRadius: "var(--radius-pill)",
              padding: "7px 11px", cursor: "pointer", color: "var(--ink-200)",
              fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 9.5, letterSpacing: "0.1em", textTransform: "uppercase"
            }}>{s}</button>
        ))}
      </div>

      <form onSubmit={e => { e.preventDefault(); send(); }}
        style={{ display: "flex", alignItems: "center", gap: 8, height: 48, padding: "0 6px 0 16px", border: "1px solid var(--white)", borderRadius: "var(--radius-pill)" }}>
        <input value={draft} onChange={e => setDraft(e.target.value)} placeholder="escreve aqui"
          style={{ flex: 1, minWidth: 0, background: "transparent", border: "none", outline: "none", fontFamily: "var(--font-body)", fontSize: 14, color: "var(--white)" }} />
        <button type="submit" aria-label="Enviar" style={{
          width: 36, height: 36, borderRadius: "var(--radius-pill)", background: "var(--white)", color: "var(--black)",
          border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center"
        }}><Icon d={P.chevronRight} size={16} stroke={2.6} /></button>
      </form>
    </div>
  );
}
Object.assign(window, { BotPanel });