"use client";

import Image from "next/image";
import { useCallback, useEffect, useRef, useState } from "react";
import { Check, CheckCheck, FileText, MoreVertical, Paperclip, Send, Trash2, X } from "lucide-react";
import { getSupabaseClient } from "@/lib/supabase";

/*
  Conversa do pedido — lado da loja.

  Desenho de aplicativo de mensagem, nao de formulario: mensagens seguidas do
  mesmo autor viram um bloco so, com hora e confirmacao apenas na ultima; o
  avatar aparece uma vez por bloco; a data separa os dias. O que a loja escreve
  fica a direita na cor da marca, o que o cliente escreve fica a esquerda em
  branco.

  Uma imagem pode ser marcada como ARTE: chega no portal com os botoes de
  aprovar e pedir ajuste, e a resposta volta para ca e para o pedido.
*/

export type CartaoDaConversa = {
  tipo: "produto" | "cupom";
  titulo?: string | null;
  subtitulo?: string | null;
  imagem?: string | null;
  preco?: number | null;
  link?: string | null;
  codigo?: string | null;
};

const emReais = (valor?: number | null) =>
  new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(Number(valor || 0));

/* Produto e cupom mandados pelo Chats aparecem aqui do mesmo jeito: a conversa
   e uma so, vista por duas portas. */
function CartaoNoBalao({ cartao, minha }: { cartao: CartaoDaConversa; minha: boolean }) {
  const fundo = minha ? "bg-white/15" : "bg-[var(--ks-color-bg-inset)]";

  if (cartao.tipo === "cupom") {
    return (
      <div className={`mb-1.5 rounded-xl ${fundo} p-2.5`}>
        <div className="text-[10px] font-bold uppercase tracking-[0.12em] opacity-70">Cupom de desconto</div>
        <div className="mt-0.5 text-[17px] font-extrabold tracking-tight">{cartao.codigo || cartao.titulo}</div>
        {cartao.subtitulo ? <div className="text-[11.5px] opacity-80">{cartao.subtitulo}</div> : null}
      </div>
    );
  }

  return (
    <a
      href={cartao.link || "#"}
      target="_blank"
      rel="noreferrer"
      className={`mb-1.5 flex items-center gap-2.5 rounded-xl ${fundo} p-2 no-underline`}
      style={{ color: "inherit" }}
    >
      {cartao.imagem ? (
        <Image
          src={cartao.imagem}
          alt={cartao.titulo || "Produto"}
          width={56}
          height={56}
          unoptimized
          className="h-14 w-14 shrink-0 rounded-lg object-cover"
        />
      ) : null}
      <span className="min-w-0">
        <span className="block truncate text-[12.5px] font-bold leading-tight">{cartao.titulo}</span>
        {cartao.preco ? (
          <span className="block text-[14px] font-extrabold tracking-tight">{emReais(cartao.preco)}</span>
        ) : (
          <span className="block text-[11.5px] opacity-80">Ver na loja</span>
        )}
      </span>
    </a>
  );
}

export type MensagemDoPedido = {
  id: string;
  sender: "store" | "client";
  sender_name?: string | null;
  body?: string | null;
  card?: CartaoDaConversa | null;
  attachment_url?: string | null;
  attachment_name?: string | null;
  attachment_kind?: string | null;
  is_art?: boolean | null;
  art_status?: "pending" | "approved" | "rejected" | null;
  art_decided_at?: string | null;
  art_decision_note?: string | null;
  created_at: string;
  deleted_at?: string | null;
  read_by_store_at?: string | null;
  read_by_client_at?: string | null;
};

const DIA_EM_MS = 24 * 60 * 60 * 1000;
const INTERVALO_DE_AGRUPAMENTO_MS = 5 * 60 * 1000;

function rotuloDoDia(iso: string) {
  const data = new Date(iso);
  const hoje = new Date();
  const zerar = (valor: Date) => new Date(valor.getFullYear(), valor.getMonth(), valor.getDate()).getTime();
  const diferenca = Math.round((zerar(hoje) - zerar(data)) / DIA_EM_MS);
  if (diferenca === 0) return "Hoje";
  if (diferenca === 1) return "Ontem";
  return data.toLocaleDateString("pt-BR", { day: "2-digit", month: "long", year: "numeric" });
}

function hora(iso: string) {
  return new Date(iso).toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
}

function iniciais(nome?: string | null) {
  const partes = String(nome || "").trim().split(/\s+/).filter(Boolean);
  if (!partes.length) return "?";
  if (partes.length === 1) return partes[0].slice(0, 2).toUpperCase();
  return (partes[0][0] + partes[partes.length - 1][0]).toUpperCase();
}

const ROTULO_DA_ARTE: Record<string, string> = {
  pending: "Aguardando o cliente",
  approved: "Aprovada pelo cliente",
  rejected: "Reprovada pelo cliente",
};

const COR_DA_ARTE: Record<string, string> = {
  pending: "border-amber-200 bg-amber-50 text-amber-700",
  approved: "border-emerald-200 bg-emerald-50 text-emerald-700",
  rejected: "border-rose-200 bg-rose-50 text-rose-700",
};

/* Visualizador da imagem: fundo escuro, a foto no centro, X no canto. Antes o
   clique abria outra aba com o endereco cru do armazenamento a mostra. */
function VisualizadorDeImagem({
  url,
  nome,
  aoFechar,
}: {
  url: string;
  nome?: string | null;
  aoFechar: () => void;
}) {
  useEffect(() => {
    const aoTeclar = (evento: KeyboardEvent) => {
      if (evento.key === "Escape") aoFechar();
    };
    window.addEventListener("keydown", aoTeclar);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", aoTeclar);
      document.body.style.overflow = "";
    };
  }, [aoFechar]);

  return (
    <div
      role="dialog"
      aria-modal="true"
      onClick={aoFechar}
      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 p-6 backdrop-blur-sm"
    >
      <button
        type="button"
        onClick={aoFechar}
        aria-label="Fechar imagem"
        className="absolute right-5 top-5 inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20"
      >
        <X className="h-5 w-5" />
      </button>
      <div onClick={(evento) => evento.stopPropagation()} className="max-h-full max-w-full">
        <Image
          src={url}
          alt={nome || "Imagem da conversa"}
          width={1400}
          height={1400}
          unoptimized
          className="max-h-[86vh] w-auto max-w-[92vw] rounded-lg object-contain"
        />
      </div>
    </div>
  );
}

export function ConversaDoPedido({ orderId, podeResponder }: { orderId: string; podeResponder: boolean }) {
  const [mensagens, setMensagens] = useState<MensagemDoPedido[]>([]);
  const [carregando, setCarregando] = useState(true);
  const [texto, setTexto] = useState("");
  const [arquivo, setArquivo] = useState<File | null>(null);
  const [enviarComoArte, setEnviarComoArte] = useState(false);
  const [enviando, setEnviando] = useState(false);
  const [erro, setErro] = useState<string | null>(null);
  const [menuAberto, setMenuAberto] = useState<string | null>(null);
  const [imagemAberta, setImagemAberta] = useState<{ url: string; nome?: string | null } | null>(null);
  /* Pergunta com a cara do sistema: o alerta do navegador mostra "localhost
     diz" e nao deixa explicar o que vai acontecer. */
  const [aApagar, setAApagar] = useState<string | null>(null);
  const [threadId, setThreadId] = useState<string | null>(null);
  const fimDaLista = useRef<HTMLDivElement | null>(null);
  const campoDeArquivo = useRef<HTMLInputElement | null>(null);

  const buscar = useCallback(
    async (rolar: boolean) => {
      try {
        const resposta = await fetch(`/api/orders/${orderId}/mensagens`, { cache: "no-store" });
        const dados = (await resposta.json().catch(() => null)) as
          | { mensagens?: MensagemDoPedido[]; threadId?: string }
          | null;
        setMensagens(Array.isArray(dados?.mensagens) ? dados.mensagens : []);
        if (dados?.threadId) setThreadId(dados.threadId);
        if (rolar) window.setTimeout(() => fimDaLista.current?.scrollIntoView({ block: "end" }), 50);
      } finally {
        setCarregando(false);
      }
    },
    [orderId]
  );

  useEffect(() => {
    void buscar(true);
    /* A conversa se atualiza sozinha: a resposta do cliente aparece sem
       recarregar a pagina. */
    const relogio = window.setInterval(() => void buscar(false), 10000);
    return () => window.clearInterval(relogio);
  }, [buscar]);

  /* A mesma conversa tem duas portas: esta aba e o modulo Chats. Quem escreve
     avisa o canal do fio, e quem estiver com ele aberto na outra porta busca de
     novo na hora. */
  useEffect(() => {
    if (!threadId) return;
    const supabase = getSupabaseClient();
    const canal = supabase.channel(`chat-${threadId}`);
    canal.on("broadcast", { event: "novidade" }, () => void buscar(true));
    canal.subscribe();
    return () => {
      void supabase.removeChannel(canal);
    };
  }, [threadId, buscar]);

  async function avisarCanal() {
    if (!threadId) return;
    try {
      const supabase = getSupabaseClient();
      const canal = supabase.channel(`chat-${threadId}`);
      await canal.subscribe();
      await canal.send({ type: "broadcast", event: "novidade", payload: { threadId } });
      window.setTimeout(() => void supabase.removeChannel(canal), 1200);
    } catch {
      /* Sem tempo real, a consulta de dez segundos ainda traz a novidade. */
    }
  }

  useEffect(() => {
    if (!menuAberto) return;
    const fechar = () => setMenuAberto(null);
    window.addEventListener("click", fechar);
    return () => window.removeEventListener("click", fechar);
  }, [menuAberto]);

  async function enviar() {
    if (enviando || (!texto.trim() && !arquivo)) return;
    setEnviando(true);
    setErro(null);
    try {
      const dados = new FormData();
      dados.set("body", texto.trim());
      if (arquivo) dados.set("file", arquivo);
      if (arquivo && enviarComoArte) dados.set("is_art", "true");

      const resposta = await fetch(`/api/orders/${orderId}/mensagens`, { method: "POST", body: dados });
      const retorno = (await resposta.json().catch(() => null)) as { error?: string } | null;
      if (!resposta.ok) throw new Error(retorno?.error || "Nao foi possivel enviar.");

      setTexto("");
      setArquivo(null);
      setEnviarComoArte(false);
      if (campoDeArquivo.current) campoDeArquivo.current.value = "";
      await buscar(true);
      void avisarCanal();
    } catch (falha) {
      setErro(falha instanceof Error ? falha.message : "Nao foi possivel enviar.");
    } finally {
      setEnviando(false);
    }
  }

  async function apagar(messageId: string) {
    setAApagar(null);
    try {
      const resposta = await fetch(`/api/orders/${orderId}/mensagens?messageId=${encodeURIComponent(messageId)}`, {
        method: "DELETE",
      });
      const retorno = (await resposta.json().catch(() => null)) as { error?: string } | null;
      if (!resposta.ok) throw new Error(retorno?.error || "Nao foi possivel apagar.");
      await buscar(false);
      void avisarCanal();
    } catch (falha) {
      setErro(falha instanceof Error ? falha.message : "Nao foi possivel apagar.");
    }
  }

  let ultimoDia = "";

  return (
    <div className="overflow-hidden rounded-xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)]">
      <div className="flex items-center justify-between gap-2 border-b border-[var(--ks-color-border-subtle)] px-4 py-3">
        <div className="min-w-0">
          <h3 className="text-sm font-semibold text-[var(--ks-color-text-primary)]">Conversa com o cliente</h3>
          <p className="text-xs text-[var(--ks-color-text-soft)]">Aparece no portal do cliente, dentro deste pedido.</p>
        </div>
        {mensagens.length ? (
          <span className="text-[11px] text-[var(--ks-color-text-soft)]">{mensagens.length} mensagens</span>
        ) : null}
      </div>

      <div className="max-h-[470px] min-h-[260px] overflow-y-auto bg-[#f6f5f8] px-4 py-4">
        {carregando ? (
          <div className="py-12 text-center text-sm text-[var(--ks-color-text-soft)]">Carregando a conversa...</div>
        ) : mensagens.length === 0 ? (
          <div className="py-12 text-center text-sm text-[var(--ks-color-text-soft)]">
            Nenhuma mensagem ainda. Escreva abaixo para falar com o cliente pelo portal.
          </div>
        ) : (
          mensagens.map((mensagem, indice) => {
            const daLoja = mensagem.sender === "store";
            const dia = rotuloDoDia(mensagem.created_at);
            const mostrarDia = dia !== ultimoDia;
            ultimoDia = dia;

            const anterior = indice > 0 ? mensagens[indice - 1] : null;
            const seguinte = indice < mensagens.length - 1 ? mensagens[indice + 1] : null;
            const perto = (a?: MensagemDoPedido | null, b?: MensagemDoPedido | null) =>
              Boolean(
                a &&
                  b &&
                  a.sender === b.sender &&
                  Math.abs(new Date(b.created_at).getTime() - new Date(a.created_at).getTime()) <
                    INTERVALO_DE_AGRUPAMENTO_MS
              );
            const continuaBloco = !mostrarDia && perto(anterior, mensagem);
            const fechaBloco = !perto(mensagem, seguinte);

            const apagada = Boolean(mensagem.deleted_at);
            const situacaoDaArte = String(mensagem.art_status || "pending");
            const lida = daLoja ? Boolean(mensagem.read_by_client_at) : Boolean(mensagem.read_by_store_at);

            return (
              <div key={mensagem.id}>
                {mostrarDia ? (
                  <div className="my-4 flex justify-center">
                    <span className="rounded-md bg-white px-2.5 py-1 text-[11px] font-medium text-[var(--ks-color-text-soft)] shadow-[0_1px_2px_rgba(16,24,40,0.06)]">
                      {dia}
                    </span>
                  </div>
                ) : null}

                <div className={`flex items-end gap-2 ${daLoja ? "justify-end" : "justify-start"} ${continuaBloco ? "mt-0.5" : "mt-3"}`}>
                  {!daLoja ? (
                    <div className="w-7 shrink-0">
                      {fechaBloco ? (
                        <span className="flex h-7 w-7 items-center justify-center rounded-full bg-white text-[10px] font-bold text-[var(--ks-color-text-muted)] shadow-[0_1px_2px_rgba(16,24,40,0.08)]">
                          {iniciais(mensagem.sender_name)}
                        </span>
                      ) : null}
                    </div>
                  ) : null}

                  <div
                    className="group relative max-w-[76%]"
                    onContextMenu={(evento) => {
                      if (!podeResponder || !daLoja || apagada) return;
                      evento.preventDefault();
                      setMenuAberto(mensagem.id);
                    }}
                  >
                    <div
                      className={`px-3 py-2 text-[13px] leading-6 shadow-[0_1px_2px_rgba(16,24,40,0.08)] ${
                        daLoja
                          ? "bg-[var(--ks-color-primary)] text-white"
                          : "border border-[var(--ks-color-border-subtle)] bg-white text-[var(--ks-color-text-primary)]"
                      } ${
                        daLoja
                          ? `rounded-2xl ${fechaBloco ? "rounded-br-md" : ""}`
                          : `rounded-2xl ${fechaBloco ? "rounded-bl-md" : ""}`
                      }`}
                    >
                      {apagada ? (
                        <span className={`italic ${daLoja ? "text-white/70" : "text-[var(--ks-color-text-soft)]"}`}>
                          Esta mensagem foi apagada
                        </span>
                      ) : (
                        <>
                          {mensagem.attachment_url && mensagem.attachment_kind === "image" ? (
                            <button
                              type="button"
                              onClick={() =>
                                setImagemAberta({ url: mensagem.attachment_url || "", nome: mensagem.attachment_name })
                              }
                              className="mb-1.5 block w-full"
                            >
                              <Image
                                src={mensagem.attachment_url}
                                alt={mensagem.attachment_name || "Anexo"}
                                width={360}
                                height={360}
                                unoptimized
                                className="max-h-[260px] w-full rounded-xl object-cover"
                              />
                            </button>
                          ) : null}

                          {mensagem.attachment_url && mensagem.attachment_kind !== "image" ? (
                            <a
                              href={mensagem.attachment_url}
                              target="_blank"
                              rel="noreferrer"
                              className={`mb-1.5 flex items-center gap-2 rounded-xl px-2.5 py-2 text-xs font-medium ${
                                daLoja ? "bg-white/15" : "bg-[#f2f1f5]"
                              }`}
                            >
                              <FileText className="h-4 w-4 shrink-0" />
                              <span className="truncate">{mensagem.attachment_name || "Arquivo"}</span>
                            </a>
                          ) : null}

                          {mensagem.card ? <CartaoNoBalao cartao={mensagem.card} minha={daLoja} /> : null}

                          {mensagem.body ? <p className="whitespace-pre-wrap">{mensagem.body}</p> : null}

                          {mensagem.is_art ? (
                            <div
                              className={`mt-2 inline-flex items-center rounded-md border px-2 py-0.5 text-[11px] font-semibold ${
                                COR_DA_ARTE[situacaoDaArte] || COR_DA_ARTE.pending
                              }`}
                            >
                              Arte · {ROTULO_DA_ARTE[situacaoDaArte] || ROTULO_DA_ARTE.pending}
                            </div>
                          ) : null}

                          {mensagem.art_decision_note ? (
                            <p className={`mt-1 text-[11px] ${daLoja ? "text-white/80" : "text-[var(--ks-color-text-soft)]"}`}>
                              “{mensagem.art_decision_note}”
                            </p>
                          ) : null}
                        </>
                      )}

                      {fechaBloco ? (
                        <div
                          className={`mt-1 flex items-center justify-end gap-1 text-[10px] ${
                            daLoja ? "text-white/70" : "text-[var(--ks-color-text-soft)]"
                          }`}
                        >
                          {hora(mensagem.created_at)}
                          {daLoja ? (
                            lida ? (
                              <CheckCheck className="h-3.5 w-3.5 text-emerald-300" />
                            ) : (
                              <CheckCheck className="h-3.5 w-3.5" />
                            )
                          ) : (
                            <Check className="h-3.5 w-3.5" />
                          )}
                        </div>
                      ) : null}
                    </div>

                    {podeResponder && daLoja && !apagada ? (
                      <button
                        type="button"
                        onClick={(evento) => {
                          evento.stopPropagation();
                          setMenuAberto(menuAberto === mensagem.id ? null : mensagem.id);
                        }}
                        aria-label="Opções da mensagem"
                        className="absolute -left-7 top-1 hidden h-6 w-6 items-center justify-center rounded-full text-[var(--ks-color-text-soft)] transition hover:bg-white group-hover:flex"
                      >
                        <MoreVertical className="h-3.5 w-3.5" />
                      </button>
                    ) : null}

                    {menuAberto === mensagem.id ? (
                      <div
                        onClick={(evento) => evento.stopPropagation()}
                        className="absolute right-0 top-full z-20 mt-1 w-44 overflow-hidden rounded-xl border border-[var(--ks-color-border-subtle)] bg-white shadow-[var(--ks-shadow-overlay)]"
                      >
                        <button
                          type="button"
                          onClick={() => {
                            setMenuAberto(null);
                            setAApagar(mensagem.id);
                          }}
                          className="flex w-full items-center gap-2 px-3 py-2.5 text-left text-sm text-rose-600 transition hover:bg-rose-50"
                        >
                          <Trash2 className="h-3.5 w-3.5" />
                          Apagar para todos
                        </button>
                      </div>
                    ) : null}
                  </div>
                </div>
              </div>
            );
          })
        )}
        <div ref={fimDaLista} />
      </div>

      {podeResponder ? (
        <div className="border-t border-[var(--ks-color-border-subtle)] bg-white p-3">
          {arquivo ? (
            <div className="mb-2 flex flex-wrap items-center gap-2 rounded-xl bg-[#f6f5f8] px-3 py-2 text-xs">
              <Paperclip className="h-3.5 w-3.5 text-[var(--ks-color-text-soft)]" />
              <span className="max-w-[220px] truncate font-medium">{arquivo.name}</span>
              {arquivo.type.startsWith("image/") ? (
                <label className="ml-1 inline-flex cursor-pointer items-center gap-1.5 font-semibold text-[var(--ks-color-primary)]">
                  <input
                    type="checkbox"
                    checked={enviarComoArte}
                    onChange={(evento) => setEnviarComoArte(evento.target.checked)}
                    className="h-3.5 w-3.5 accent-[var(--ks-color-primary)]"
                  />
                  Enviar como arte para aprovação
                </label>
              ) : null}
              <button
                type="button"
                onClick={() => {
                  setArquivo(null);
                  setEnviarComoArte(false);
                  if (campoDeArquivo.current) campoDeArquivo.current.value = "";
                }}
                className="ml-auto inline-flex h-6 w-6 items-center justify-center rounded-full text-[var(--ks-color-text-soft)] hover:bg-white"
                aria-label="Remover anexo"
              >
                <X className="h-3.5 w-3.5" />
              </button>
            </div>
          ) : null}

          {erro ? <div className="mb-2 text-xs font-medium text-rose-600">{erro}</div> : null}

          <div className="flex items-end gap-2 rounded-2xl border border-[var(--ks-color-border-subtle)] bg-white px-2 py-1.5">
            <input
              ref={campoDeArquivo}
              type="file"
              className="hidden"
              onChange={(evento) => {
                const escolhido = evento.target.files?.[0] || null;
                setArquivo(escolhido);
                setEnviarComoArte(Boolean(escolhido?.type.startsWith("image/")));
              }}
            />
            <button
              type="button"
              onClick={() => campoDeArquivo.current?.click()}
              disabled={enviando}
              aria-label="Anexar arquivo"
              className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-[var(--ks-color-text-soft)] transition hover:bg-[#f6f5f8] hover:text-[var(--ks-color-text-primary)]"
            >
              <Paperclip className="h-4 w-4" />
            </button>

            <textarea
              value={texto}
              onChange={(evento) => setTexto(evento.target.value)}
              onKeyDown={(evento) => {
                if (evento.key === "Enter" && !evento.shiftKey) {
                  evento.preventDefault();
                  void enviar();
                }
              }}
              rows={1}
              placeholder="Escreva uma mensagem"
              className="max-h-28 min-h-[36px] flex-1 resize-none border-0 bg-transparent px-1 py-2 text-sm outline-none"
            />

            <button
              type="button"
              onClick={() => void enviar()}
              disabled={enviando || (!texto.trim() && !arquivo)}
              aria-label="Enviar mensagem"
              className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--ks-color-primary)] text-white transition hover:bg-[var(--ks-color-primary-strong)] disabled:cursor-not-allowed disabled:opacity-35"
            >
              <Send className="h-4 w-4" />
            </button>
          </div>
        </div>
      ) : null}

      {aApagar ? (
        <div
          role="dialog"
          aria-modal="true"
          onClick={() => setAApagar(null)}
          className="fixed inset-0 z-[110] flex items-center justify-center bg-[rgba(12,8,24,0.42)] p-6 backdrop-blur-[2px]"
        >
          <div
            onClick={(evento) => evento.stopPropagation()}
            className="w-[min(400px,100%)] rounded-[18px] bg-white p-5 shadow-[0_24px_60px_rgba(26,26,43,0.28)]"
          >
            <div className="text-[16px] font-extrabold text-[var(--ks-color-text-primary)]">
              Apagar esta mensagem?
            </div>
            <p className="mt-1.5 text-[13px] leading-5 text-[var(--ks-color-text-soft)]">
              Ela some para os dois lados e fica só o aviso de que foi apagada. Não dá para desfazer.
            </p>
            <div className="mt-4 flex justify-end gap-2">
              <button
                type="button"
                onClick={() => setAApagar(null)}
                className="h-9 rounded-xl bg-[#f1f0f7] px-4 text-[13px] font-bold text-[var(--ks-color-text-soft)] transition hover:bg-[#e6e6f2]"
              >
                Cancelar
              </button>
              <button
                type="button"
                onClick={() => void apagar(aApagar)}
                className="h-9 rounded-xl bg-[#e13a58] px-4 text-[13px] font-bold text-white transition hover:opacity-90"
              >
                Apagar para todos
              </button>
            </div>
          </div>
        </div>
      ) : null}

      {imagemAberta ? (
        <VisualizadorDeImagem
          url={imagemAberta.url}
          nome={imagemAberta.nome}
          aoFechar={() => setImagemAberta(null)}
        />
      ) : null}
    </div>
  );
}

export default ConversaDoPedido;