"use client";

import { useEffect, useState } from "react";
import { Plus, Trash2 } from "lucide-react";

/*
  As respostas prontas da loja.

  "Qual o prazo?" chega dez vezes por dia e a resposta e sempre a mesma — mas
  cada grafica tem o seu prazo, o seu jeito de cobrar e o seu jeito de falar.
  Por isso as frases sao escritas aqui pela propria loja, e nao vem de fabrica:
  frase generica ninguem usa, e o atalho morre.

  Edita-se de dentro do Chats, sem sair para uma tela de configuracao: no meio
  de um atendimento, sair da conversa e perder o cliente.
*/

export type RespostaPronta = { atalho: string; texto: string };

export default function EditorDeRespostas({
  respostas,
  aoFechar,
  aoSalvar,
}: {
  respostas: RespostaPronta[];
  aoFechar: () => void;
  aoSalvar: (lista: RespostaPronta[]) => Promise<void>;
}) {
  const [lista, setLista] = useState<RespostaPronta[]>(respostas);
  const [salvando, setSalvando] = useState(false);
  const [erro, setErro] = useState<string | null>(null);

  useEffect(() => {
    const aoTeclar = (evento: KeyboardEvent) => {
      if (evento.key === "Escape") aoFechar();
    };
    window.addEventListener("keydown", aoTeclar);
    return () => window.removeEventListener("keydown", aoTeclar);
  }, [aoFechar]);

  function mudar(indice: number, campo: keyof RespostaPronta, valor: string) {
    setLista((antes) => antes.map((item, i) => (i === indice ? { ...item, [campo]: valor } : item)));
  }

  async function salvar() {
    const limpas = lista
      .map((item) => ({
        atalho: item.atalho.trim().toLowerCase().replace(/\s+/g, "-").slice(0, 24),
        texto: item.texto.trim().slice(0, 900),
      }))
      .filter((item) => item.atalho && item.texto);

    setSalvando(true);
    setErro(null);
    try {
      await aoSalvar(limpas);
      aoFechar();
    } catch (falha) {
      setErro(falha instanceof Error ? falha.message : "Não consegui salvar.");
    } finally {
      setSalvando(false);
    }
  }

  return (
    <div className="chat-decisao" role="dialog" aria-modal="true" onClick={aoFechar}>
      <div
        className="chat-decisao-caixa chat-respostas-caixa"
        onClick={(evento) => evento.stopPropagation()}
      >
        <div className="chat-decisao-titulo">Respostas prontas</div>
        <p className="chat-decisao-texto">
          Dê um nome curto para cada frase. Na conversa, digite <strong>/</strong> e escolha — ou digite o nome
          direto, tipo <strong>/prazo</strong>.
        </p>

        <div className="chat-respostas-lista">
          {lista.length === 0 ? (
            <div className="chat-vazio" style={{ padding: "18px 0" }}>
              Nenhuma frase salva ainda.
            </div>
          ) : (
            lista.map((resposta, indice) => (
              <div key={indice} className="chat-resposta-linha">
                <input
                  value={resposta.atalho}
                  onChange={(evento) => mudar(indice, "atalho", evento.target.value)}
                  placeholder="prazo"
                  className="chat-resposta-atalho"
                />
                <textarea
                  value={resposta.texto}
                  onChange={(evento) => mudar(indice, "texto", evento.target.value)}
                  placeholder="Nosso prazo de produção é de 3 dias úteis."
                  rows={2}
                />
                <button
                  type="button"
                  className="chat-icone"
                  aria-label="Apagar resposta"
                  onClick={() => setLista((antes) => antes.filter((_, i) => i !== indice))}
                >
                  <Trash2 size={15} />
                </button>
              </div>
            ))
          )}
        </div>

        <button
          type="button"
          className="chat-botao-linha"
          onClick={() => setLista((antes) => [...antes, { atalho: "", texto: "" }])}
        >
          <Plus size={15} />
          Adicionar frase
        </button>

        {erro ? <div className="chat-erro">{erro}</div> : null}

        <div className="chat-decisao-botoes">
          <button type="button" className="chat-decisao-cancelar" onClick={aoFechar}>
            Cancelar
          </button>
          <button type="button" className="chat-decisao-confirmar" disabled={salvando} onClick={() => void salvar()}>
            {salvando ? "Salvando..." : "Salvar"}
          </button>
        </div>
      </div>
    </div>
  );
}