/* global React, Icon */
const { useState: useC, useEffect: useCE, useRef: useCR } = React;

function ChatWidget() {
  const [open, setOpen] = useC(typeof location !== "undefined" && new URLSearchParams(location.search).get("chat") === "1");
  const [seen, setSeen] = useC(false);
  const [msgs, setMsgs] = useC([]);
  const [inputMode, setInputMode] = useC(null); // 'name' | 'phone' | 'question'
  const [draft, setDraft] = useC("");
  const data = useCR({ treatment: "", name: "", phone: "" });
  const bodyRef = useCR(null);

  const TRT = window.TREATMENTS || {};
  const order = window.TREATMENT_ORDER || [];

  const pushBot = (m) => setMsgs((x) => [...x, { from: "bot", ...m }]);
  const pushUser = (text) => setMsgs((x) => [...x, { from: "user", text }]);

  useCE(() => {
    if (open && msgs.length === 0) {
      setTimeout(() => pushBot({
        text: "Olá! Sou o assistente da Thays Fernandes. Como posso te ajudar hoje?",
        chips: [
          { label: "Quero agendar", action: "agendar" },
          { label: "Tirar uma dúvida", action: "duvida" },
          { label: "Ver tratamentos", action: "tratamentos" },
        ],
      }), 280);
    }
  }, [open]);

  useCE(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [msgs, inputMode]);

  function handle(action, value, label) {
    if (action === "agendar") {
      pushUser("Quero agendar");
      setTimeout(() => pushBot({
        text: "Perfeito! Qual tratamento te interessa?",
        chips: [
          ...order.map((k) => ({ label: TRT[k].title, action: "pick", value: k })),
          { label: "Ainda não sei", action: "pick", value: "" },
        ],
      }), 260);
    } else if (action === "pick") {
      data.current.treatment = value ? TRT[value].title : "Ainda não sei";
      pushUser(data.current.treatment);
      setTimeout(() => { pushBot({ text: "Ótimo. Como é o seu nome?" }); setInputMode("name"); }, 260);
    } else if (action === "duvida") {
      pushUser("Tirar uma dúvida");
      setTimeout(() => pushBot({
        text: "Claro! Escolha um tema ou escreva sua pergunta:",
        chips: [
          { label: "Onde fica o atendimento?", action: "faq", value: "onde" },
          { label: "Como funciona a avaliação?", action: "faq", value: "aval" },
          { label: "Qual o horário?", action: "faq", value: "horario" },
          { label: "Outra dúvida", action: "outra" },
        ],
      }), 260);
    } else if (action === "faq") {
      const ans = {
        onde: "O atendimento é na Clínica Med Clin — R. Padre João Moreira, 80, Centro, Serro/MG.",
        aval: "Na avaliação tricológica analisamos couro cabeludo e fios por imagem para identificar a causa e montar um protocolo personalizado. Dura cerca de 60 minutos.",
        horario: "Atendemos de segunda a sábado, das 9h às 19h.",
      }[value];
      pushUser(label);
      setTimeout(() => pushBot({
        text: ans,
        chips: [{ label: "Quero agendar", action: "agendar" }, { label: "Falar no WhatsApp", action: "wa" }],
      }), 260);
    } else if (action === "outra") {
      pushUser("Outra dúvida");
      setTimeout(() => { pushBot({ text: "Pode escrever sua pergunta que eu encaminho para a Thays." }); setInputMode("question"); }, 260);
    } else if (action === "tratamentos") {
      pushUser("Ver tratamentos");
      setTimeout(() => pushBot({
        text: "Estes são os tratamentos da Thays:",
        links: order.map((k) => ({ label: TRT[k].title, href: "tratamento.html?id=" + k })),
        chips: [{ label: "Quero agendar", action: "agendar" }],
      }), 260);
    } else if (action === "wa") {
      window.open(window.tfWa("Olá, Thays! Vim pelo site e gostaria de tirar uma dúvida."), "_blank");
    } else if (action === "restart") {
      data.current = { treatment: "", name: "", phone: "" };
      setMsgs([]); setInputMode(null);
      setTimeout(() => pushBot({
        text: "Vamos começar de novo. Como posso ajudar?",
        chips: [
          { label: "Quero agendar", action: "agendar" },
          { label: "Tirar uma dúvida", action: "duvida" },
          { label: "Ver tratamentos", action: "tratamentos" },
        ],
      }), 200);
    }
  }

  function submitInput(e) {
    e.preventDefault();
    const field = e.target.querySelector("input");
    const v = (field ? field.value : draft).trim();
    if (!v) return;
    pushUser(v);
    setDraft("");
    if (inputMode === "name") {
      data.current.name = v; setInputMode(null);
      setTimeout(() => { pushBot({ text: "E qual o seu WhatsApp para confirmarmos?" }); setInputMode("phone"); }, 240);
    } else if (inputMode === "phone") {
      data.current.phone = v; setInputMode(null);
      const d = data.current;
      const wamsg = `Olá, Thays! Vim pelo site. Tenho interesse em: ${d.treatment}. Meu nome é ${d.name} e meu WhatsApp é ${d.phone}. Gostaria de agendar uma avaliação.`;
      setTimeout(() => pushBot({
        text: `Obrigada, ${d.name}! Resumo do seu pedido:`,
        summary: { treatment: d.treatment, name: d.name, phone: d.phone },
        cta: { label: "Enviar para a Thays", href: window.tfWa(wamsg) },
        note: "Toque para enviar pelo WhatsApp. A Thays responde em até 24h.",
        chips: [{ label: "Recomeçar", action: "restart" }],
      }), 260);
    } else if (inputMode === "question") {
      setInputMode(null);
      const wamsg = `Olá, Thays! Vim pelo site e tenho uma dúvida: ${v}`;
      setTimeout(() => pushBot({
        text: "Anotado! Posso encaminhar sua dúvida diretamente para a Thays:",
        cta: { label: "Enviar dúvida no WhatsApp", href: window.tfWa(wamsg) },
        chips: [{ label: "Quero agendar", action: "agendar" }, { label: "Recomeçar", action: "restart" }],
      }), 260);
    }
  }

  return (
    <div className="tf-chat">
      {open && (
        <div className="tf-chat-panel" role="dialog" aria-label="Chat de atendimento">
          <div className="tf-chat-head">
            <div className="tf-chat-id">
              <span className="tf-chat-av"><img src="assets/photos/web/p8.jpg" alt="Thays" /></span>
              <div>
                <strong>Thays Fernandes</strong>
                <span><i className="dot" /> Online · responde em até 24h</span>
              </div>
            </div>
            <button className="tf-chat-x" onClick={() => setOpen(false)} aria-label="Fechar"><Icon name="x" size={18} /></button>
          </div>

          <div className="tf-chat-body" ref={bodyRef}>
            {msgs.map((m, i) => (
              <div key={i} className={"tf-msg " + m.from}>
                {m.from === "bot" && <span className="tf-msg-av"><img src="assets/logo-tf.png" alt="" /></span>}
                <div className="tf-msg-col">
                  {m.text && <div className="tf-bubble">{m.text}</div>}
                  {m.summary && (
                    <div className="tf-chat-summary">
                      <div><Icon name="target" size={14} /> {m.summary.treatment}</div>
                      <div><Icon name="user" size={14} /> {m.summary.name}</div>
                      <div><Icon name="phone" size={14} /> {m.summary.phone}</div>
                    </div>
                  )}
                  {m.links && (
                    <div className="tf-chat-links">
                      {m.links.map((l) => <a key={l.label} href={l.href}>{l.label}<Icon name="arrow-right" size={14} /></a>)}
                    </div>
                  )}
                  {m.cta && <a className="tf-chat-cta" href={m.cta.href} target="_blank" rel="noreferrer"><Icon name="message-circle" size={16} /> {m.cta.label}</a>}
                  {m.note && <div className="tf-chat-note">{m.note}</div>}
                  {m.chips && (
                    <div className="tf-chat-chips">
                      {m.chips.map((c) => (
                        <button key={c.label} onClick={() => handle(c.action, c.value, c.label)}>{c.label}</button>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>

          {inputMode && (
            <form className="tf-chat-input" onSubmit={submitInput}>
              <input
                autoFocus
                value={draft}
                onChange={(e) => setDraft(e.target.value)}
                placeholder={inputMode === "name" ? "Digite seu nome" : inputMode === "phone" ? "(38) 9 0000-0000" : "Escreva sua dúvida"}
              />
              <button type="submit" aria-label="Enviar"><Icon name="send" size={18} /></button>
            </form>
          )}
        </div>
      )}

      <button className={"tf-chat-fab" + (open ? " open" : "")} onClick={() => { setOpen(!open); setSeen(true); }} aria-label="Abrir chat">
        <Icon name={open ? "x" : "message-circle"} size={24} />
        {!seen && !open && <span className="tf-chat-ping" />}
      </button>
    </div>
  );
}

Object.assign(window, { ChatWidget });