"use client";

import Link from "next/link";
import {
  BarChart3,
  BriefcaseBusiness,
  Building2,
  CalendarDays,
  ClipboardList,
  FileText,
  HelpCircle,
  LayoutDashboard,
  LockKeyhole,
  LogOut,
  Menu,
  Package,
  Receipt,
  Search,
  Settings,
  Shield,
  Users,
  Wrench,
  X,
} from "lucide-react";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { getCompanyProfile } from "@/services/settings-service";
import { getSessionUser, logoutUser } from "@/services/auth-service";
import { getCustomers } from "@/services/customer-service";
import { getEquipment } from "@/services/equipment-service";
import { getContracts } from "@/services/contract-service";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Sidebar } from "./sidebar";
import { TenantBroadcastBanner } from "./tenant-broadcast-banner";

const navItems = [
  { label: "Dashboard", href: "/", icon: LayoutDashboard },
  { label: "Clientes", href: "/clientes", icon: Users },
  { label: "Equipamentos", href: "/equipamentos", icon: Package },
  { label: "Categorias", href: "/categorias", icon: BriefcaseBusiness },
  { label: "Locações", href: "/locacoes", icon: ClipboardList },
  { label: "Reservas", href: "/reservas", icon: CalendarDays },
  { label: "Contratos", href: "/contratos", icon: FileText },
  { label: "Financeiro", href: "/financeiro", icon: Receipt },
  { label: "Agenda", href: "/agenda", icon: CalendarDays },
  { label: "Manutenções", href: "/manutencoes", icon: Wrench },
  { label: "Fornecedores", href: "/fornecedores", icon: BriefcaseBusiness },
  { label: "Relatórios", href: "/relatorios", icon: BarChart3 },
  { label: "Configurações", href: "/configuracoes", icon: Settings },
];

export function AppShell({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const pathname = usePathname();
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const [user, setUser] = useState({
    name: "",
    roleName: "",
    avatarUrl: null as string | null,
  });

  const [company, setCompany] = useState({
    legalName: "",
    document: "",
    status: "",
  });

  const [searchQuery, setSearchQuery] = useState("");
  const [searchResults, setSearchResults] = useState<{
    customers: any[];
    equipment: any[];
    contracts: any[];
  }>({ customers: [], equipment: [], contracts: [] });
  const [isSearching, setIsSearching] = useState(false);
  const [showDropdown, setShowDropdown] = useState(false);

  useEffect(() => {
    if (searchQuery.trim().length < 2) {
      setSearchResults({ customers: [], equipment: [], contracts: [] });
      setShowDropdown(false);
      return;
    }

    const delayDebounce = setTimeout(async () => {
      setIsSearching(true);
      setShowDropdown(true);
      try {
        const [custRes, equipRes, contractRes] = await Promise.all([
          getCustomers({ search: searchQuery }),
          getEquipment({ search: searchQuery }),
          getContracts({ search: searchQuery }),
        ]);

        setSearchResults({
          customers: custRes?.items || [],
          equipment: equipRes?.items || [],
          contracts: contractRes?.items || [],
        });
      } catch (err) {
        console.error("Erro na busca global:", err);
      } finally {
        setIsSearching(false);
      }
    }, 300);

    return () => clearTimeout(delayDebounce);
  }, [searchQuery]);

  useEffect(() => {
    // Guard client-side: segunda camada de proteção além do middleware
    const sessionUser = getSessionUser();
    if (!sessionUser) {
      router.replace("/login");
      return;
    }

    // Carregar dados do usuário da sessão
    setUser({
      name: sessionUser.name || "Usuário",
      roleName: sessionUser.role || "Operador",
      avatarUrl: null,
    });

    const loadCompanyData = () => {
      getCompanyProfile()
        .then((c) => {
          if (c) {
            setCompany({
              legalName: c.tradeName || c.legalName || "BlackLoc",
              document: c.document || "12.345.678/0001-90",
              status: (c as any).status || "ACTIVE",
            });
          }
        })
        .catch(() => {});
    };

    loadCompanyData();

    const handleCompanyUpdate = (e: any) => {
      const detail = e?.detail;
      if (detail) {
        setCompany({
          legalName: detail.tradeName || detail.legalName || "BlackLoc",
          document: detail.document || "12.345.678/0001-90",
          status: detail.status || "ACTIVE",
        });
      } else {
        loadCompanyData();
      }
    };

    window.addEventListener("company-profile-updated", handleCompanyUpdate);
    return () => {
      window.removeEventListener("company-profile-updated", handleCompanyUpdate);
    };
  }, [router]);

  const getInitials = (name: string) => {
    if (!name) return "RX";
    const parts = name.trim().split(" ").filter(Boolean);
    if (parts.length >= 2) {
      return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
    }
    return name.slice(0, 2).toUpperCase();
  };

  const handleLogout = () => {
    logoutUser(); // limpa sessionStorage + cookie de sessão
    router.replace("/login");
  };

  const isSuspended =
    user.roleName !== "SUPERADMIN" &&
    (company.status === "SUSPENDED" || company.status === "BLOCKED" || company.status === "INACTIVE");

  if (isSuspended) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-slate-950 p-6 text-white text-center">
        <div className="max-w-md space-y-6 rounded-2xl border border-blue-500/20 bg-slate-900/90 p-8 backdrop-blur-xl shadow-2xl">
          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-blue-500/10 text-blue-400 border border-blue-500/20">
            <LockKeyhole className="h-8 w-8" />
          </div>
          <div>
            <h1 className="text-2xl font-extrabold text-white tracking-tight">Acesso Temporariamente Suspenso</h1>
            <p className="mt-2 text-sm text-slate-300">
              O acesso aos serviços do sistema para a empresa <strong className="text-white">{company.legalName}</strong> está temporariamente indisponível.
            </p>
          </div>

          <div className="rounded-xl bg-slate-950/60 p-4 text-xs text-slate-400 text-left space-y-1.5 border border-slate-800">
            <p className="font-semibold text-slate-200">Suporte & Atendimento ao Cliente</p>
            <p>Para mais informações ou reativação da conta, entre em contato com nossa equipe de suporte:</p>
            <p className="font-mono text-blue-400 font-semibold pt-1">📧 suporte@blackloc.com.br</p>
          </div>

          <Button
            onClick={handleLogout}
            variant="secondary"
            className="w-full bg-slate-800 text-white hover:bg-slate-700 font-semibold"
          >
            Voltar para o Login
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="flex min-h-screen bg-muted/40">
      <Sidebar isCollapsed={isCollapsed} onToggleCollapse={() => setIsCollapsed(!isCollapsed)} />

      <div className="min-w-0 flex-1 transition-[width,margin] duration-300">
        {/* Header Superior Limpo & Elegante */}
        <header className="sticky top-0 z-20 flex h-16 items-center justify-between gap-3 border-b bg-background/90 px-4 backdrop-blur-md xl:px-8 print:hidden">
          {/* Botão de Menu Hambúrguer para Dispositivos Móveis */}
          <Button
            variant="ghost"
            size="icon"
            onClick={() => setMobileMenuOpen(true)}
            className="lg:hidden shrink-0 h-9 w-9 text-foreground border border-border rounded-lg"
            title="Abrir Menu de Navegação"
          >
            <Menu className="h-5 w-5" />
          </Button>

          {/* Campo de Pesquisa Global */}
          <div className="relative max-w-sm flex-1">
            <Search className="pointer-events-none absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              onFocus={() => {
                if (searchQuery.trim().length >= 2) setShowDropdown(true);
              }}
              className="pl-9 h-9 text-xs"
              placeholder="Pesquisar clientes, frotas, contratos..."
            />

            {/* Dropdown de Resultados de Busca */}
            {showDropdown && (
              <>
                <div
                  className="fixed inset-0 z-30"
                  onClick={() => setShowDropdown(false)}
                />
                <div className="absolute left-0 right-0 top-10 z-40 max-h-96 overflow-y-auto rounded-lg border border-border bg-white dark:bg-slate-900 p-2.5 text-foreground shadow-xl">
                  {isSearching ? (
                    <div className="flex items-center justify-center p-4 text-xs text-muted-foreground">
                      <svg
                        className="mr-2 h-4 w-4 animate-spin text-primary"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        />
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        />
                      </svg>
                      Buscando...
                    </div>
                  ) : searchResults.customers.length === 0 &&
                    searchResults.equipment.length === 0 &&
                    searchResults.contracts.length === 0 ? (
                    <div className="p-4 text-center text-xs text-muted-foreground">
                      Nenhum resultado encontrado para "{searchQuery}"
                    </div>
                  ) : (
                    <div className="space-y-3 text-xs">
                      {/* Grupo Clientes */}
                      {searchResults.customers.length > 0 && (
                        <div>
                          <p className="px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-muted-foreground bg-muted/40 rounded-sm">
                            Clientes ({searchResults.customers.length})
                          </p>
                          <div className="mt-1 space-y-0.5">
                            {searchResults.customers.slice(0, 5).map((c) => (
                              <button
                                key={c.id}
                                onClick={() => {
                                  setShowDropdown(false);
                                  setSearchQuery("");
                                  router.push(`/clientes?search=${encodeURIComponent(c.name)}`);
                                }}
                                className="w-full text-left px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-md transition-colors flex justify-between"
                              >
                                <span className="font-semibold truncate max-w-[200px]">{c.name}</span>
                                <span className="text-[10px] font-mono text-muted-foreground shrink-0">{c.document}</span>
                              </button>
                            ))}
                          </div>
                        </div>
                      )}

                      {/* Grupo Equipamentos */}
                      {searchResults.equipment.length > 0 && (
                        <div>
                          <p className="px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-muted-foreground bg-muted/40 rounded-sm">
                            Equipamentos / Frota ({searchResults.equipment.length})
                          </p>
                          <div className="mt-1 space-y-0.5">
                            {searchResults.equipment.slice(0, 5).map((e) => (
                              <button
                                key={e.id}
                                onClick={() => {
                                  setShowDropdown(false);
                                  setSearchQuery("");
                                  router.push(`/equipamentos?search=${encodeURIComponent(e.name)}`);
                                }}
                                className="w-full text-left px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-md transition-colors flex justify-between"
                              >
                                <span className="font-semibold truncate max-w-[180px]">{e.name}</span>
                                <span className="text-[10px] font-mono text-muted-foreground shrink-0">{e.serialNumber || e.code}</span>
                              </button>
                            ))}
                          </div>
                        </div>
                      )}

                      {/* Grupo Contratos */}
                      {searchResults.contracts.length > 0 && (
                        <div>
                          <p className="px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-muted-foreground bg-muted/40 rounded-sm">
                            Contratos / Locações ({searchResults.contracts.length})
                          </p>
                          <div className="mt-1 space-y-0.5">
                            {searchResults.contracts.slice(0, 5).map((c) => (
                              <button
                                key={c.id}
                                onClick={() => {
                                  setShowDropdown(false);
                                  setSearchQuery("");
                                  router.push(`/contratos?search=${encodeURIComponent(c.code)}`);
                                }}
                                className="w-full text-left px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-md transition-colors flex justify-between"
                              >
                                <span className="font-semibold truncate max-w-[180px]">{c.code}</span>
                                <span className="text-[10px] text-muted-foreground shrink-0">{c.customerName || c.customer?.name}</span>
                              </button>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              </>
            )}
          </div>

          {/* Widget da Empresa, Usuário e Logout */}
          <div className="flex items-center gap-3">
            {/* Box 1: Empresa Contratante (Razão Social & CNPJ) */}
            <div className="hidden md:flex items-center gap-2.5 rounded-lg border bg-card/80 px-3 py-1.5 shadow-2xs">
              <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary/10 text-primary">
                <Building2 className="h-4 w-4" />
              </div>
              <div className="text-left leading-tight">
                <p className="text-xs font-bold text-foreground truncate max-w-[260px]">
                  {company.legalName}
                </p>
                <p className="text-[10px] font-mono text-muted-foreground">
                  CNPJ: {company.document}
                </p>
              </div>
            </div>

            {/* Divisor vertical */}
            <div className="hidden md:block h-6 w-px bg-border" />

            {/* Box 2: Perfil do Usuário Logado (Foto/Iniciais, Nome e Grupo) */}
            <div className="flex items-center gap-2.5 rounded-lg border bg-card/80 px-2.5 py-1 shadow-2xs">
              {user.avatarUrl ? (
                <img
                  src={user.avatarUrl}
                  alt={user.name}
                  className="h-8 w-8 rounded-full object-cover border shadow-2xs"
                />
              ) : (
                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-tr from-primary to-blue-600 font-extrabold text-primary-foreground text-xs shadow-2xs">
                  {getInitials(user.name)}
                </div>
              )}

              <div className="text-left leading-tight hidden sm:block">
                <p className="text-xs font-bold text-foreground">{user.name}</p>
                <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-primary">
                  <Shield className="h-3 w-3" /> {user.roleName}
                </span>
              </div>
            </div>

            {/* Botão de Logout */}
            <Button
              variant="ghost"
              size="icon"
              onClick={handleLogout}
              className="h-9 w-9 rounded-lg border border-transparent hover:border-rose-500/30 hover:bg-rose-500/10 hover:text-rose-600 transition-all"
              title="Sair do Sistema (Logout)"
            >
              <LogOut className="h-4 w-4" />
            </Button>
          </div>
        </header>

        <TenantBroadcastBanner />
        <main className="px-4 py-6 xl:px-8 print:p-0 print:m-0">{children}</main>
      </div>

      {/* Drawer de Navegação Mobile */}
      {mobileMenuOpen && (
        <div className="fixed inset-0 z-50 lg:hidden print:hidden">
          {/* Backdrop com Fundo Escuro */}
          <div
            className="fixed inset-0 bg-slate-950/60 backdrop-blur-xs transition-opacity"
            onClick={() => setMobileMenuOpen(false)}
          />

          {/* Painel Lateral com Links de Navegação */}
          <div className="fixed inset-y-0 left-0 z-50 w-72 bg-card p-4 shadow-2xl border-r flex flex-col justify-between overflow-y-auto animate-in slide-in-from-left duration-200">
            <div>
              {/* Topo do Menu Mobile com Logo BlackLoc e Botão Fechar */}
              <div className="flex items-center justify-between border-b pb-3 mb-4">
                <div className="flex items-center gap-2.5">
                  <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary font-bold text-primary-foreground text-sm shadow-xs">
                    BL
                  </div>
                  <div>
                    <p className="text-sm font-bold text-foreground">BlackLoc</p>
                    <p className="text-[11px] text-muted-foreground">Locações industriais</p>
                  </div>
                </div>

                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setMobileMenuOpen(false)}
                  className="h-8 w-8 rounded-lg text-muted-foreground hover:text-foreground"
                  title="Fechar Menu"
                >
                  <X className="h-5 w-5" />
                </Button>
              </div>

              {/* Links de Navegação das Páginas */}
              <nav className="space-y-1">
                {navItems.map((item) => {
                  const Icon = item.icon;
                  const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
                  return (
                    <Link
                      key={item.href}
                      href={item.href}
                      onClick={() => setMobileMenuOpen(false)}
                      className={`flex items-center gap-3 rounded-lg px-3 py-2.5 text-xs font-semibold transition-all ${
                        active
                          ? "bg-primary text-primary-foreground shadow-xs"
                          : "text-muted-foreground hover:bg-muted hover:text-foreground"
                      }`}
                    >
                      <Icon className="h-4 w-4 shrink-0" />
                      <span>{item.label}</span>
                    </Link>
                  );
                })}
              </nav>
            </div>

            {/* Rodapé com Informações da Empresa & Usuário no Mobile */}
            <div className="border-t pt-4 mt-6 space-y-3">
              <div className="rounded-lg bg-muted/60 p-2.5 text-xs">
                <p className="font-bold text-foreground truncate">{company.legalName}</p>
                <p className="text-[10px] font-mono text-muted-foreground">CNPJ: {company.document}</p>
              </div>

              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-xs font-extrabold text-primary-foreground">
                    {getInitials(user.name)}
                  </div>
                  <div className="text-left leading-tight">
                    <p className="text-xs font-bold text-foreground">{user.name}</p>
                    <p className="text-[10px] text-muted-foreground">{user.roleName}</p>
                  </div>
                </div>

                <Button
                  variant="ghost"
                  size="icon"
                  onClick={handleLogout}
                  className="h-8 w-8 text-rose-600 hover:bg-rose-500/10"
                  title="Sair"
                >
                  <LogOut className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}