"use client";

import { useState } from "react";

/*
  Emojis, sem biblioteca.

  Um seletor completo de emoji pesa mais do que a tela inteira do Chats e traz
  busca em ingles, tons de pele e categorias que ninguem usa no balcao. Aqui
  ficam os que aparecem de verdade numa conversa de venda, em seis prateleiras
  curtas — e a barra de busca entende portugues.
*/

const PRATELEIRAS: { nome: string; simbolo: string; emojis: [string, string][] }[] = [
  {
    nome: "Rosto",
    simbolo: "🙂",
    emojis: [
      ["😀", "sorriso feliz"],
      ["😃", "alegre"],
      ["😄", "rindo"],
      ["😁", "sorrindo dentes"],
      ["😆", "gargalhada"],
      ["😅", "alivio riso"],
      ["😂", "chorando de rir"],
      ["🙂", "sorriso leve"],
      ["😉", "piscadinha"],
      ["😊", "sorriso timido"],
      ["😍", "apaixonado coracao"],
      ["😘", "beijo"],
      ["🤗", "abraco"],
      ["🤔", "pensando duvida"],
      ["😐", "serio neutro"],
      ["😴", "dormindo"],
      ["😎", "oculos estiloso"],
      ["🥳", "festa comemorar"],
      ["😅", "suando"],
      ["😢", "triste"],
      ["😭", "chorando"],
      ["😡", "bravo raiva"],
      ["🤯", "explodindo mente"],
      ["🙃", "de cabeca para baixo"],
    ],
  },
  {
    nome: "Gestos",
    simbolo: "👍",
    emojis: [
      ["👍", "joia positivo ok"],
      ["👎", "negativo nao"],
      ["👌", "ok perfeito"],
      ["🙏", "obrigado por favor"],
      ["👏", "palmas parabens"],
      ["🤝", "acordo fechado aperto"],
      ["💪", "forca"],
      ["✌️", "paz"],
      ["🤙", "chama"],
      ["👋", "ola tchau aceno"],
      ["☝️", "atencao"],
      ["✍️", "escrevendo assinar"],
    ],
  },
  {
    nome: "Venda",
    simbolo: "💰",
    emojis: [
      ["💰", "dinheiro venda"],
      ["💵", "nota dinheiro"],
      ["💳", "cartao pagamento"],
      ["🏷️", "etiqueta preco"],
      ["🔖", "marcador"],
      ["🎁", "presente brinde"],
      ["🛒", "carrinho compra"],
      ["🛍️", "sacola compras"],
      ["📦", "caixa pacote entrega"],
      ["🚚", "caminhao entrega frete"],
      ["📈", "grafico subindo"],
      ["🤑", "lucro dinheiro"],
      ["💸", "desconto gastando"],
      ["🧾", "recibo nota fiscal"],
    ],
  },
  {
    nome: "Produção",
    simbolo: "🖨️",
    emojis: [
      ["🖨️", "impressora impressao"],
      ["🎨", "arte design cor"],
      ["✂️", "corte tesoura"],
      ["📐", "medida regua"],
      ["📏", "regua tamanho"],
      ["🧵", "linha costura"],
      ["👕", "camiseta"],
      ["☕", "caneca cafe"],
      ["🪧", "placa banner"],
      ["📄", "papel folha"],
      ["🖼️", "quadro moldura"],
      ["🔧", "ferramenta ajuste"],
    ],
  },
  {
    nome: "Tempo",
    simbolo: "⏰",
    emojis: [
      ["⏰", "alarme prazo"],
      ["⏳", "ampulheta esperando"],
      ["📅", "calendario data"],
      ["🕐", "hora relogio"],
      ["✅", "feito pronto certo"],
      ["❌", "errado cancelado"],
      ["⚠️", "atencao aviso"],
      ["🔔", "sino aviso"],
      ["📌", "importante fixar"],
      ["🚀", "rapido lancamento"],
      ["🔥", "quente promocao"],
      ["⭐", "estrela destaque"],
    ],
  },
  {
    nome: "Coração",
    simbolo: "❤️",
    emojis: [
      ["❤️", "coracao vermelho amor"],
      ["🧡", "coracao laranja"],
      ["💛", "coracao amarelo"],
      ["💚", "coracao verde"],
      ["💙", "coracao azul"],
      ["💜", "coracao roxo"],
      ["🖤", "coracao preto"],
      ["✨", "brilho novo"],
      ["🎉", "festa comemoracao"],
      ["🎊", "confete"],
      ["👑", "coroa top"],
      ["💎", "diamante premium"],
    ],
  },
];

export default function PainelDeEmojis({ aoEscolher }: { aoEscolher: (emoji: string) => void }) {
  const [prateleira, setPrateleira] = useState(0);
  const [busca, setBusca] = useState("");

  const termo = busca.trim().toLowerCase();
  const lista = termo
    ? PRATELEIRAS.flatMap((grupo) => grupo.emojis).filter(([, palavras]) => palavras.includes(termo.split(" ")[0]))
    : PRATELEIRAS[prateleira].emojis;

  return (
    <div className="chat-emojis" onClick={(evento) => evento.stopPropagation()}>
      <div className="chat-emojis-busca">
        <input
          value={busca}
          onChange={(evento) => setBusca(evento.target.value)}
          placeholder="Procurar emoji"
          autoFocus
        />
      </div>

      <div className="chat-emojis-grade">
        {lista.length === 0 ? (
          <div className="chat-emojis-vazio">Nada com esse nome.</div>
        ) : (
          lista.map(([emoji, palavras]) => (
            <button key={emoji + palavras} type="button" title={palavras} onClick={() => aoEscolher(emoji)}>
              {emoji}
            </button>
          ))
        )}
      </div>

      {termo ? null : (
        <div className="chat-emojis-abas">
          {PRATELEIRAS.map((grupo, indice) => (
            <button
              key={grupo.nome}
              type="button"
              title={grupo.nome}
              data-ativo={indice === prateleira ? "sim" : "nao"}
              onClick={() => setPrateleira(indice)}
            >
              {grupo.simbolo}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}