import { type ReactNode } from 'react';
import { usePage, router } from '@inertiajs/react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Shield,
  Building2,
  Package,
  Users,
  Activity,
  Settings,
  LogOut,
  Bell,
  User,
  Menu,
} from 'lucide-react';

interface AdminLayoutProps {
  children: ReactNode;
  header?: ReactNode;
}

export default function AuthenticatedLayout({ children, header }: AdminLayoutProps) {
  const { auth } = usePage().props as any;
  
  const navigation = [
    {
      name: 'Dashboard',
      href: '/admin/dashboard',
      icon: Shield,
      current: location.pathname === '/admin/dashboard',
    },
    {
      name: 'Tenants',
      href: '/admin/tenants',
      icon: Building2,
      current: location.pathname.startsWith('/admin/tenants'),
    },
    {
      name: 'Packages',
      href: '/admin/packages',
      icon: Package,
      current: location.pathname.startsWith('/admin/packages'),
    },
    {
      name: 'Jobs',
      href: '/admin/jobs',
      icon: Activity,
      current: location.pathname.startsWith('/admin/jobs'),
    },
    {
      name: 'Logs',
      href: '/admin/logs',
      icon: Users,
      current: location.pathname.startsWith('/admin/logs'),
    },
    {
      name: 'Settings',
      href: '/admin/settings',
      icon: Settings,
      current: location.pathname.startsWith('/admin/settings'),
    },
  ];

  const handleLogout = () => {
    router.post('/admin/logout');
  };

  return (
    <div className="min-h-screen bg-gray-100">
      {/* Sidebar */}
      <div className="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg">
        <div className="flex h-16 items-center justify-center border-b border-gray-200">
          <div className="flex items-center gap-2 text-xl font-bold">
            <Shield className="h-6 w-6 text-blue-600" />
            <span>Super Admin</span>
          </div>
        </div>
        
        <nav className="mt-6 px-3">
          {navigation.map((item) => {
            const Icon = item.icon;
            return (
              <a
                key={item.name}
                href={item.href}
                className={cn(
                  'group flex items-center px-3 py-2 text-sm font-medium rounded-md mb-1',
                  item.current
                    ? 'bg-blue-100 text-blue-700'
                    : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
                )}
              >
                <Icon
                  className={cn(
                    'mr-3 h-5 w-5',
                    item.current ? 'text-blue-700' : 'text-gray-400 group-hover:text-gray-500'
                  )}
                />
                {item.name}
              </a>
            );
          })}
        </nav>
      </div>

      {/* Main content */}
      <div className="ml-64">
        {/* Top navigation */}
        <div className="sticky top-0 z-40 flex h-16 items-center justify-between bg-white shadow-sm border-b border-gray-200 px-4">
          {header && (
            <div className="flex-1">
              {header}
            </div>
          )}
          
          <div className="flex items-center gap-4">
            {/* Notifications */}
            <Button variant="ghost" size="sm" className="relative">
              <Bell className="h-5 w-5" />
              <Badge
                variant="destructive"
                className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 text-xs"
              >
                3
              </Badge>
            </Button>

            {/* Admin User Menu */}
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="flex items-center gap-2">
                  <div className="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
                    <User className="h-4 w-4 text-blue-600" />
                  </div>
                  <span className="text-sm font-medium">
                    {auth?.admin?.name || 'Admin'}
                  </span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-56">
                <DropdownMenuItem>
                  <User className="mr-2 h-4 w-4" />
                  Profile
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Settings className="mr-2 h-4 w-4" />
                  Settings
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={handleLogout} className="text-red-600">
                  <LogOut className="mr-2 h-4 w-4" />
                  Sign out
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>

        {/* Page content */}
        <main className="flex-1">
          <div className="p-6">
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}