"use client";
import { useState, type ReactNode } from "react";
import { usePathname } from "next/navigation";
import { PlatformModeBanner } from "./PlatformModeBanner";
import { AvisoSemSmtp } from "./AvisoSemSmtp";
import { AdminSidebar } from "./AdminSidebar";
import { BuscaDoAdmin } from "./BuscaDoAdmin";
import { TooltipProvider } from "@/components/ui/tooltip";
import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { List } from "@/lib/ui/icons";
import { useT } from "@/hooks/i18n/useT";
import type { ModuloOpcional } from "@/lib/instalacao/modulos";

interface AdminShellProps {
  userEmail: string;
  /** Repassado ao menu: entradas de módulo só aparecem com ele ligado. */
  modulosLigados?: readonly ModuloOpcional[];
  /**
   * A instalação está SEM SMTP (lido uma vez em `app/admin/(protected)/layout.tsx`).
   * `true` desenha o aviso persistente de `/admin/email` em todas as telas do
   * admin (#2755, item 3); o padrão `false` mantém a casca como estava.
   */
  semSmtp?: boolean;
  children: ReactNode;
}

/**
 * Shell for /admin/*. Renders the cross-tenant banner (sticky top), platform
 * sidebar, and main content area. Client component (não mais Server) desde
 * que ganhou o drawer de navegação mobile — precisa do estado de
 * aberto/fechado, no mesmo padrão de `app/app/_components/AppShell.tsx`;
 * `children` continua chegando como Server Component normalmente (React
 * permite RSC como `children` de um Client Component sem forçar o subtree
 * inteiro pro cliente).
 *
 * O `TooltipProvider` mora aqui, e não em cada componente, porque o Radix exige
 * um Provider ANCESTRAL de todo `Tooltip`: sem ele o componente lança
 * "`Tooltip` must be used within `TooltipProvider`" no cliente, e o React
 * derruba a árvore inteira — a tela vira a página de erro do Next, não um
 * tooltip quebrado. O dono não recebe pista nenhuma: vê "Algo deu errado" e um
 * ID opaco (`app/error.tsx`), e no servidor não há rastro, porque o erro é do
 * cliente.
 *
 * QUEM É ATINGIDO, medido em vez de suposto: o único consumidor do Tooltip do
 * Radix sem Provider próprio é o `TenantBadge`. Ele é montado em 4 telas —
 * /admin/inbox, /admin/inbox/[conversationId], /admin/lgpd e
 * /admin/lgpd/requests/[id]. Os outros três importadores de
 * `components/ui/tooltip` (CredentialCard, MessageBubble, PlatformAdminsTable)
 * embrulham o seu, por isso nunca quebraram.
 *
 * O que este Provider NÃO conserta, apesar de parecer: /admin/usage e
 * /app/ai/usage. Os gráficos de lá (`UsageCharts`, `UsageChart`) importam um
 * `Tooltip` de nome igual e origem diferente — o do **recharts**, que não usa
 * Provider nenhum. Verificado abrindo /admin/usage com o defeito presente: a
 * tela carrega normalmente. Fica escrito porque o nome colide e o próximo
 * leitor vai procurar um Provider faltando ali e não vai encontrar.
 *
 * A quebra é CONDICIONAL A DADO: os mounts de `TenantBadge` estão atrás de
 * guarda de organização resolvida, então uma instalação sem conversas (ou sem
 * solicitação LGPD) abre as 4 telas normalmente mesmo com o defeito. Quem for
 * reproduzir precisa de pelo menos uma linha com tenant; ver a tela abrir num
 * banco vazio não significa que o defeito não existe.
 *
 * Um Provider na casca cobre as quatro telas de uma vez e faz tela nova nascer
 * funcionando, em vez de repetir o erro a cada tela adicionada — é o padrão
 * recomendado pelo Radix (Provider perto da raiz, compartilhando o delay).
 */
export function AdminShell({
  userEmail,
  modulosLigados = [],
  semSmtp = false,
  children,
}: AdminShellProps) {
  const t = useT();
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  // Mesmo padrão de `app/app/_components/AppShell.tsx`: ajuste de estado
  // durante o render, não em `useEffect` (ver comentário lá).
  const pathname = usePathname();
  const [ultimoPathname, setUltimoPathname] = useState(pathname);
  if (pathname !== ultimoPathname) {
    setUltimoPathname(pathname);
    setMobileNavOpen(false);
  }

  return (
    <TooltipProvider>
      <div className="flex min-h-screen w-full flex-col bg-background">
        <PlatformModeBanner />
        {/* Logo abaixo da tarja do modo plataforma: as duas são o topo
            persistente deste painel — ver a medição de largura em
            `PlatformModeBanner.tsx` e a decisão de lugar em `AvisoSemSmtp.tsx`. */}
        {semSmtp ? <AvisoSemSmtp /> : null}
        <div className="flex flex-1">
          <AdminSidebar userEmail={userEmail} modulosLigados={modulosLigados} />
          <Sheet open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
            <SheetContent side="left" className="w-72 max-w-[85vw] gap-0 p-0 lg:hidden">
              <SheetTitle className="sr-only">{t("Menu de navegação")}</SheetTitle>
              <AdminSidebar userEmail={userEmail} variant="mobile" modulosLigados={modulosLigados} />
            </SheetContent>
          </Sheet>
          <div className="flex min-w-0 flex-1 flex-col">
            {/* Barra do topo do painel. Nasceu só para carregar o hambúrguer
                abaixo de `lg`, onde a sidebar fixa não está mais no DOM; agora
                carrega também a BUSCA (⌘K), que é o que o painel não tinha e o
                app do tenant já tinha. Ela existe nos dois tamanhos: no desktop
                a busca fica à direita e o hambúrguer some. */}
            <header className="flex h-14 items-center gap-2 border-b bg-background px-3">
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="shrink-0 lg:hidden"
                onClick={() => setMobileNavOpen(true)}
                aria-label={t("Abrir menu de navegação")}
              >
                <List size={20} aria-hidden />
              </Button>
              <span className="text-sm font-semibold tracking-tight lg:hidden">
                {t("Admin Plataforma")}
              </span>
              <div className="ml-auto">
                <BuscaDoAdmin modulosLigados={modulosLigados} />
              </div>
            </header>
            {/* `overflow-x-hidden` como rede de segurança — mesmo motivo do
                `AppShell` (ver comentário lá): se algo estourar a largura, a
                PÁGINA não rola de lado; quem precisa de scroll horizontal é
                o componente específico, contido nele mesmo. */}
            <main className="flex-1 overflow-y-auto overflow-x-hidden p-4 sm:p-6">{children}</main>
          </div>
        </div>
      </div>
    </TooltipProvider>
  );
}