"use client";
import { useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { useT } from "@/hooks/i18n/useT";
import { MagnifyingGlass } from "@/lib/ui/icons";
import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
import { cn } from "@/lib/utils";
/**
* O MIOLO da paleta de navegação (⌘K), separado de QUEM a alimenta.
*
* Ele nasceu dentro de `components/shell/CommandPalette.tsx`, que calculava os
* destinos com `useAuth()` + `searchable(...)`. Quando o painel do
* administrador passou a precisar da mesma busca, copiar estas ~250 linhas
* significaria dois filtros, dois teclados e dois lugares para consertar o
* mesmo defeito de acessibilidade.
*
* O que muda entre os dois consumidores é só a FONTE:
* - tenant: `searchable(...)` em `lib/navigation/registry.ts`;
* - admin: `destinosDoAdmin(...)` em `lib/admin/navegacao.ts`.
*
* Por isso este componente recebe `destinos` e `grupos` por PROP e não conhece
* nem `useAuth` nem o registro do tenant — a paleta do admin roda numa árvore
* que não tem `AuthProvider` (ver `app/admin/(protected)/layout.tsx`), e um
* `useAuth()` aqui derrubaria a tela inteira no cliente.
*
* Não usa `cmdk`: o projeto já tem Dialog e Input, e uma lista filtrada com
* setas e Enter são poucas linhas.
*
* v1 busca só NAVEGAÇÃO — destinos. Contato, conversa e lead têm outra fonte
* de dados e são outra feature.
*/
/** O mínimo que um destino precisa ter para aparecer aqui. */
export interface DestinoDaPaleta {
href: string;
label: string;
description: string;
/** Id do grupo; a ordem e o rótulo vêm de `grupos`. */
group: string;
icon: PhosphorIcon;
}
export interface GrupoDaPaleta {
id: string;
/** Texto em português: é a CHAVE do dicionário. */
label: string;
}
/** Sem acento e sem caixa: ninguém digita "orçamento" com cedilha às pressas. */
function normalizar(texto: string): string {
return texto
.normalize("NFD")
.replace(/[\u0300-\u036f]/g, "")
.toLowerCase();
}
export interface PaletaDeDestinosProps {
open: boolean;
onOpenChange: (open: boolean) => void;
destinos: readonly DestinoDaPaleta[];
grupos: readonly GrupoDaPaleta[];
/**
* Título acessível do diálogo (sr-only), JÁ TRADUZIDO pelo chamador.
*
* Os três textos abaixo chegam prontos de propósito: `t()` só aceita literal
* ou membro de objeto — `t(parametro)` é "dado de runtime" e o gate
* `i18n-espanhol-cobre-a-tela` reprova. Quem conhece o literal é o chamador.
*/
titulo: string;
/** `aria-label` da lista de resultados, já traduzido. */
rotuloLista: string;
/** Placeholder do campo, já traduzido. */
placeholder: string;
}
export function PaletaDeDestinos({
open,
onOpenChange,
destinos,
grupos,
titulo,
rotuloLista,
placeholder,
}: PaletaDeDestinosProps) {
const rotuloGrupo = useMemo(() => new Map(grupos.map((g) => [g.id, g.label])), [grupos]);
return (
);
}
function Resultados({
aoEscolher,
destinos,
grupos,
rotuloGrupo,
rotuloLista,
placeholder,
}: {
aoEscolher: () => void;
destinos: readonly DestinoDaPaleta[];
grupos: readonly GrupoDaPaleta[];
rotuloGrupo: Map;
rotuloLista: string;
placeholder: string;
}) {
const t = useT();
const router = useRouter();
const [busca, setBusca] = useState("");
const [destacado, setDestacado] = useState(0);
const [categoriaAtiva, setCategoriaAtiva] = useState("todos");
const ordemGrupo = useMemo(() => new Map(grupos.map((g, i) => [g.id, i])), [grupos]);
// Lista dos grupos disponíveis nos destinos visíveis
const categoriasDisponiveis = useMemo(() => {
const gruposNoCatalogo = new Set(destinos.map((v) => v.group));
return grupos.filter((g) => gruposNoCatalogo.has(g.id));
}, [destinos, grupos]);
const resultados = useMemo(() => {
const termo = normalizar(busca.trim());
const filtrados = destinos.filter((d) => {
const casaCategoria = categoriaAtiva === "todos" || d.group === categoriaAtiva;
if (!casaCategoria) return false;
if (!termo) return true;
return normalizar(`${d.label} ${d.description} ${rotuloGrupo.get(d.group) ?? ""}`).includes(
termo,
);
});
if (termo) return filtrados;
// O catálogo não é contíguo por grupo (a Prospecção, de CRM, vem antes do
// Inbox). Sem reordenar, a 1ª seção seria a do 1º item e as setas, que
// andam por este array, pulariam de uma seção para outra. Ordenado pelos
// grupos, a ordem do array é a ordem da tela. O sort é estável.
return [...filtrados].sort(
(a, b) => (ordemGrupo.get(a.group) ?? 0) - (ordemGrupo.get(b.group) ?? 0),
);
}, [busca, destinos, categoriaAtiva, rotuloGrupo, ordemGrupo]);
// Agrupamento para exibição visual estruturada quando não há busca específica digitada
const resultadosAgrupados = useMemo(() => {
const map = new Map();
for (const item of resultados) {
const lista = map.get(item.group) ?? [];
lista.push(item);
map.set(item.group, lista);
}
return map;
}, [resultados]);
function navegar(destino: DestinoDaPaleta) {
aoEscolher();
router.push(destino.href);
}
/**
* O destaque volta ao topo junto com a busca, no mesmo evento: mantê-lo
* apontaria para outro item depois que a lista muda, e o Enter navegaria
* para o lugar errado.
*/
function aoDigitar(valor: string) {
setBusca(valor);
setDestacado(0);
}
function mudarCategoria(id: string) {
setCategoriaAtiva(id);
setDestacado(0);
}
function aoTeclar(e: React.KeyboardEvent) {
if (e.key === "ArrowDown") {
e.preventDefault();
setDestacado((i) => Math.min(i + 1, resultados.length - 1));
} else if (e.key === "ArrowUp") {
e.preventDefault();
setDestacado((i) => Math.max(i - 1, 0));
} else if (e.key === "Enter") {
e.preventDefault();
const alvo = resultados[destacado];
if (alvo) navegar(alvo);
}
}
const emModoCatalogo = !busca.trim() && categoriaAtiva === "todos";
return (
<>
{/* `pr-14`: o X do diálogo (`components/ui/dialog.tsx`) mora no canto de
cima à direita, e o "Limpar" ficava embaixo dele — no celular, onde o
X tem 44 px de alvo, o toque em "Limpar" FECHAVA a busca. */}
{resultados.map((d, i) => {
const Icon = d.icon;
const ativo = i === destacado;
// No item destacado o fundo é a cor de destaque: o cinza de apoio
// ficava 1,2:1 sobre o verde (medido), ilegível. A cor de frente do
// destaque SEM opacidade herda o piso de 4,5:1 que
// lib/branding/contraste.ts garante para qualquer marca própria; a
// 90%, uma marca de luminância média cai para 4,1:1.
const secundario = ativo ? "text-accent-foreground" : "text-muted-foreground";
return (