'use client'

import { usePathname } from 'next/navigation'
import { Bell, ChevronDown, Building2 } from 'lucide-react'
import { useAuth } from '@/lib/auth-context'
import { arrayFetcher } from '@/lib/fetcher'
import useSWR from 'swr'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Badge } from '@/components/ui/badge'

const pageLabels: Record<string, string> = {
  '/dashboard': 'Dashboard',
  '/tenants': 'Empresas',
  '/portal-users': 'Usuários do Portal',
  '/audit': 'Auditoria',
  '/ad/users': 'Usuários do Active Directory',
  '/ad/groups': 'Grupos do Active Directory',
  '/sync': 'Sincronização',
  '/tenant-config': 'Configuração do Tenant',
  '/permissions': 'Permissões e Objetos Protegidos',
  '/agent': 'Conector / Agente',
  '/agent-download': 'Download do Agente',
}

export function Topbar() {
  const pathname = usePathname()
  const { user, activeTenantId, setActiveTenantId } = useAuth()
  const { data: tenantsRaw } = useSWR(
    user?.role === 'admin_global' ? '/api/tenants' : null,
    arrayFetcher,
  )
  const tenants: any[] = Array.isArray(tenantsRaw) ? tenantsRaw : []

  const isAdmin = user?.role === 'admin_global'
  const activeTenant = activeTenantId
    ? tenants.find((t: any) => t.id === activeTenantId)
    : null

  const pageTitle = pageLabels[pathname] ?? 'Portal de Serviços'

  return (
    <header className="h-16 border-b border-border bg-card flex items-center px-6 gap-4 shrink-0">
      {/* Page title */}
      <div className="flex-1">
        <h1 className="text-base font-semibold text-foreground">{pageTitle}</h1>
        {activeTenant && (
          <p className="text-xs text-muted-foreground">
            {activeTenant.name} &middot; {activeTenant.domain}
          </p>
        )}
      </div>

      {/* Tenant switcher - apenas admin global */}
      {isAdmin && (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button className="flex items-center gap-2 px-3 py-1.5 text-sm rounded-md border border-border bg-background hover:bg-accent transition-colors">
              <Building2 className="w-4 h-4 text-muted-foreground" />
              <span className="text-sm text-foreground">
                {activeTenant ? activeTenant.name : 'Visão Global'}
              </span>
              <ChevronDown className="w-3 h-3 text-muted-foreground" />
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-64">
            <DropdownMenuItem onClick={() => setActiveTenantId(null)}>
              <Building2 className="w-4 h-4 mr-2 text-muted-foreground" />
              <span>Visão Global</span>
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            {tenants.map((tenant: any) => (
              <DropdownMenuItem
                key={tenant.id}
                onClick={() => setActiveTenantId(tenant.id)}
                className="flex items-center gap-2"
              >
                <span className={`w-2 h-2 rounded-full shrink-0 ${
                  tenant.status === 'active' ? 'bg-green-500' : 'bg-red-500'
                }`} />
                <span className="truncate flex-1">{tenant.name}</span>
                {tenant.status === 'inactive' && (
                  <Badge variant="secondary" className="text-xs shrink-0">inativo</Badge>
                )}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      )}

      {/* Notifications */}
      <button
        className="relative p-2 rounded-md hover:bg-accent transition-colors"
        aria-label="Notificações"
      >
        <Bell className="w-4 h-4 text-muted-foreground" />
        <span className="absolute top-1 right-1 w-2 h-2 rounded-full bg-destructive" />
      </button>

      {/* User avatar */}
      <div className="flex items-center gap-2">
        <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
          <span className="text-xs font-bold text-primary-foreground">
            {user?.name?.slice(0, 2).toUpperCase() ?? 'AD'}
          </span>
        </div>
        <div className="hidden md:block">
          <p className="text-sm font-medium text-foreground leading-none">{user?.name}</p>
          <p className="text-xs text-muted-foreground mt-0.5">
            {user?.role === 'admin_global' ? 'Admin Global' : user?.tenantName}
          </p>
        </div>
      </div>
    </header>
  )
}