/* global React, VendusAtoms, VendusCopilot */
const { I, Chip, Btn, Card, Eyebrow } = window.VendusAtoms;
const { useState, useMemo, useEffect } = React;

/* =====================================================
   MENSAGENS — rascunho-e-aprova
   A IA SUGERE a resposta; o vendedor revisa, edita e envia.
   NUNCA há envio automático (o ML modera mensagem automática
   e isso derruba a reputação da conta).
===================================================== */

function fmtData(d) {
  if (!d) return "";
  const dt = new Date(d);
  if (isNaN(dt.getTime())) return String(d);
  return dt.toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit" }) + " " + dt.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
}

const MSG_STATUS = {
  pendente: { chip: "warning", label: "Pendente", icon: "clock" },
  rascunho: { chip: "violet", label: "Rascunho salvo", icon: "pencil" },
  respondida: { chip: "success", label: "Respondida", icon: "check" },
  auto_respondida: { chip: "orange", label: "Respondida pela IA", icon: "sparkles" },
};

function MessagesPage({ store }) {
  const connected = !!(store && store.connected);
  const [messages, setMessages] = useState(null);
  const [selectedId, setSelectedId] = useState(null);
  const [draft, setDraft] = useState("");
  const [sending, setSending] = useState(false);
  const [checking, setChecking] = useState(false);
  const [filtro, setFiltro] = useState("todas");

  function load() {
    return window.VendusCopilot.getMessages().then((list) => {
      setMessages(list);
      const firstOpen = list.find((m) => m.status !== "respondida") || list[0];
      if (firstOpen) { setSelectedId(firstOpen.id); setDraft(firstOpen.rascunho_ia || ""); }
    });
  }
  useEffect(() => { load(); }, []);

  async function verificar() {
    setChecking(true);
    const r = await window.VendusCopilot.checkMessages();
    setChecking(false);
    if (r.ok) {
      window.vendusToast && window.vendusToast(r.novas_perguntas ? `${r.novas_perguntas} nova(s) pergunta(s) — rascunho já preparado pela IA.` : "Tudo em dia — nenhuma pergunta nova.", { icon: "check-check", tone: "success" });
      load();
    } else window.vendusToast && window.vendusToast(r.error, { icon: "alert-triangle", tone: "danger" });
  }

  const selected = useMemo(
    () => (messages || []).find((m) => m.id === selectedId) || null,
    [messages, selectedId]
  );

  const isPend = (m) => m.status === "pendente" || m.status === "lembrar" || m.status === "rascunho";
  const isResp = (m) => m.status === "respondida" || m.status === "auto_respondida";
  const all = messages || [];
  const nPend = all.filter(isPend).length, nResp = all.filter(isResp).length;
  const filtered = all.filter((m) => filtro === "todas" ? true : filtro === "pendentes" ? isPend(m) : isResp(m));
  const TABS = [["pendentes", `Pendentes${nPend ? " · " + nPend : ""}`], ["respondidas", `Respondidas${nResp ? " · " + nResp : ""}`], ["todas", `Todas · ${all.length}`]];

  function openMessage(m) {
    setSelectedId(m.id);
    setDraft(isResp(m) ? (m.resposta || m.rascunho_ia || "") : (m.rascunho_ia || ""));
  }

  function aprovarEEnviar() {
    if (!selected || !draft.trim()) return;
    setSending(true);
    window.VendusCopilot.sendMessage(selected.id, draft)
      .then((r) => {
        setSending(false);
        if (!r || r.ok === false) {
          window.vendusToast && window.vendusToast((r && r.error) || "Não consegui enviar agora.", { icon: "alert-triangle", tone: "danger" });
          return;
        }
        setMessages((prev) =>
          prev.map((m) =>
            m.id === selected.id
              ? { ...m, status: "respondida", resposta: draft, respondida_em: new Date().toISOString() }
              : m
          )
        );
        window.vendusToast && window.vendusToast("Resposta enviada ao cliente", { icon: "check-check", tone: "success" });
      })
      .catch((e) => {
        setSending(false);
        window.vendusToast && window.vendusToast("Erro ao enviar: " + (e.message || e), { icon: "alert-triangle", tone: "danger" });
      });
  }

  const pendentes = (messages || []).filter((m) => m.status === "pendente").length;

  /* Estado vazio honesto */
  if (messages && messages.length === 0) {
    return (
      <div className="page fade-in">
        <Header pendentes={0} connected={connected} checking={checking} onVerificar={verificar} />
        <Card padding={40}>
          <div style={{ textAlign: "center", maxWidth: 440, margin: "0 auto" }}>
            <div style={{ width: 54, height: 54, borderRadius: 14, background: "var(--bg-elev)", display: "grid", placeItems: "center", margin: "0 auto 14px" }}>
              <I name={connected ? "check-circle-2" : "message-square"} size={22} className={connected ? "text-success" : "text-faint"} />
            </div>
            <h3 className="section-title" style={{ marginBottom: 6 }}>{connected ? "Tudo em dia 🎉" : "Nenhuma mensagem ainda"}</h3>
            <p className="text-muted" style={{ fontSize: 13.5, lineHeight: 1.5 }}>
              {connected
                ? "Você não tem perguntas nem mensagens pendentes agora. Assim que um cliente perguntar, a IA já prepara um rascunho de resposta aqui — é só você revisar e enviar."
                : "Conecte sua conta do Mercado Livre para ver aqui as mensagens dos clientes — com um rascunho de resposta já sugerido para você revisar."}
            </p>
            <div style={{ marginTop: 16 }}>
              {connected
                ? <Btn variant="secondary" onClick={verificar} disabled={checking}><I name={checking ? "loader" : "refresh-cw"} size={14} /> {checking ? "Verificando…" : "Verificar agora"}</Btn>
                : <Btn variant="primary" onClick={() => window.vendusToast && window.vendusToast("Vá em Configurações → Integrações para conectar.", { icon: "info" })}><I name="plug" size={14} /> Conectar Mercado Livre</Btn>}
            </div>
          </div>
        </Card>
      </div>
    );
  }

  return (
    <div className="page fade-in">
      <Header pendentes={pendentes} connected={connected} checking={checking} onVerificar={verificar} />

      {/* Reforço do princípio rascunho-e-aprova */}
      <div className="banner" style={{ marginBottom: 18 }}>
        <div style={{ width: 36, height: 36, borderRadius: 9, background: "rgba(139,92,246,.15)", color: "var(--violet-400)", display: "grid", placeItems: "center", flexShrink: 0 }}>
          <I name="shield-check" size={17} />
        </div>
        <div className="text-muted" style={{ fontSize: 13, flex: 1 }}>
          A IA escreve um <b>rascunho</b> para cada cliente. <b>Você revisa e envia</b> — nada é enviado
          automaticamente.
        </div>
      </div>

      {/* Abas: Pendentes / Respondidas / Todas */}
      <div className="seg" style={{ marginBottom: 14 }}>
        {TABS.map(([k, l]) => <button key={k} onClick={() => setFiltro(k)} className={filtro === k ? "active" : ""}>{l}</button>)}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: 16, alignItems: "start" }}>
        {/* Lista */}
        <Card padding={8}>
          {filtered.length === 0 ? (
            <div className="text-muted" style={{ fontSize: 12.5, textAlign: "center", padding: "20px 10px" }}>
              {filtro === "pendentes" ? "Nenhuma pendente. 🎉" : filtro === "respondidas" ? "Nenhuma respondida ainda." : "Nada por aqui."}
            </div>
          ) : filtered.map((m) => {
            const st = MSG_STATUS[m.status] || MSG_STATUS.pendente;
            const active = m.id === selectedId;
            const quando = isResp(m) ? m.respondida_em : m.recebida_em;
            return (
              <button
                key={m.id}
                onClick={() => openMessage(m)}
                style={{
                  width: "100%",
                  textAlign: "left",
                  display: "block",
                  padding: "11px 12px",
                  borderRadius: 9,
                  border: 0,
                  cursor: "pointer",
                  marginBottom: 2,
                  background: active ? "var(--bg-elev)" : "transparent",
                }}
              >
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }}>
                  <span style={{ fontWeight: 600, fontSize: 13 }}>{m.cliente}</span>
                  <span className="text-faint" style={{ fontSize: 10.5, flexShrink: 0 }}>{fmtData(quando)}</span>
                </div>
                <div className="text-muted" style={{ fontSize: 12, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                  {m.tipo === "pergunta" ? "Pergunta: " : ""}{m.texto}
                </div>
                <div style={{ marginTop: 6 }}>
                  <Chip tone={st.chip} leading={<I name={st.icon} size={10} />}>{st.label}</Chip>
                </div>
              </button>
            );
          })}
        </Card>

        {/* Detalhe */}
        {selected ? (
          <Card padding={20}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
              <div>
                <div style={{ fontWeight: 700, fontSize: 15 }}>{selected.cliente}</div>
                <div className="text-faint" style={{ fontSize: 11.5 }}>{selected.tipo === "pergunta" ? "Pergunta · " : "Mensagem · "}recebida {fmtData(selected.recebida_em)}</div>
              </div>
              <Chip tone={(MSG_STATUS[selected.status] || {}).chip}>
                {(MSG_STATUS[selected.status] || {}).label}
              </Chip>
            </div>

            {/* Mensagem do cliente */}
            <div style={{ display: "flex", gap: 10, marginBottom: 18 }}>
              <div style={{ width: 30, height: 30, borderRadius: 8, background: "var(--bg-elev)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                <I name="user" size={15} className="text-muted" />
              </div>
              <div style={{ background: "var(--bg-elev)", borderRadius: 12, padding: "10px 14px", fontSize: 13.5, lineHeight: 1.5 }}>
                {selected.texto}
              </div>
            </div>

            {isResp(selected) ? (
              <div>
                <Eyebrow>{selected.status === "auto_respondida" ? "Respondida automaticamente pela IA" : "Resposta enviada"}</Eyebrow>
                <div style={{ background: "rgba(34,197,94,.08)", border: "1px solid rgba(34,197,94,.25)", borderRadius: 12, padding: "12px 14px", fontSize: 13.5, lineHeight: 1.5, marginTop: 8 }}>
                  {selected.resposta || draft || <span className="text-faint">(resposta não registrada — foi respondida direto no Mercado Livre)</span>}
                </div>
                <div className="text-faint" style={{ fontSize: 11.5, marginTop: 8, display: "flex", alignItems: "center", gap: 6 }}>
                  <I name={selected.status === "auto_respondida" ? "sparkles" : "check-check"} size={13} className="text-success" /> Respondida {fmtData(selected.respondida_em)}
                </div>
              </div>
            ) : (
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 8 }}>
                  <I name="sparkles" size={14} className="text-orange" />
                  <Eyebrow>Rascunho sugerido pela IA · edite à vontade</Eyebrow>
                </div>
                <textarea
                  value={draft}
                  onChange={(e) => setDraft(e.target.value)}
                  rows={6}
                  style={{
                    width: "100%",
                    resize: "vertical",
                    background: "var(--bg-app)",
                    border: "1px solid var(--border)",
                    borderRadius: 12,
                    padding: "12px 14px",
                    fontSize: 13.5,
                    lineHeight: 1.55,
                    color: "var(--fg-1)",
                    fontFamily: "var(--font-sans)",
                  }}
                />
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 12, flexWrap: "wrap" }}>
                  <Btn variant="primary" onClick={aprovarEEnviar} disabled={sending || !draft.trim()}>
                    <I name="send" size={14} /> {sending ? "Enviando…" : "Aprovar e enviar"}
                  </Btn>
                  <Btn variant="ghost" onClick={() => setDraft(selected.rascunho_ia || "")}>
                    <I name="rotate-ccw" size={14} /> Restaurar rascunho da IA
                  </Btn>
                  <span className="text-faint" style={{ fontSize: 11.5, display: "flex", alignItems: "center", gap: 5, marginLeft: "auto" }}>
                    <I name="lock" size={12} /> Você revisa antes de enviar
                  </span>
                </div>
              </div>
            )}
          </Card>
        ) : (
          <Card padding={40}>
            <div className="text-muted" style={{ textAlign: "center", fontSize: 13.5 }}>
              Selecione uma mensagem para ver o rascunho sugerido.
            </div>
          </Card>
        )}
      </div>
    </div>
  );
}

function Header({ pendentes, connected, checking, onVerificar }) {
  return (
    <div className="page-header">
      <div>
        <Eyebrow>Atendimento · IA</Eyebrow>
        <h1 className="page-title">Mensagens</h1>
        <div className="page-sub">
          {pendentes > 0
            ? `${pendentes} ${pendentes === 1 ? "cliente aguardando" : "clientes aguardando"} sua resposta`
            : "Tudo em dia — nenhuma mensagem pendente"}
        </div>
      </div>
      {connected && onVerificar && (
        <Btn variant="secondary" onClick={onVerificar} disabled={checking}>
          <I name={checking ? "loader" : "refresh-cw"} size={14} /> {checking ? "Verificando…" : "Verificar agora"}
        </Btn>
      )}
    </div>
  );
}

window.VendusMensagens = { MessagesPage };