import { usePage } from '@inertiajs/react';
import { Menu, ExternalLink } from 'lucide-react';
import { Button } from '@/Components/ui/button';
import { ModeToggle } from '@/Components/ModeToggle';
import { 
    Sheet, 
    SheetContent, 
    SheetTrigger,
    SheetTitle,
    SheetDescription
} from '@/Components/ui/sheet';
import { 
    DropdownMenu, 
    DropdownMenuContent, 
    DropdownMenuItem, 
    DropdownMenuLabel, 
    DropdownMenuSeparator, 
    DropdownMenuTrigger 
} from '@/Components/ui/dropdown-menu';
import { Avatar, AvatarFallback, AvatarImage } from '@/Components/ui/avatar';
import AdminSidebar from './AdminSidebar';

export default function AdminHeader() {
    const { auth } = usePage().props;
    const user = auth.user;

    return (
        <header className="sticky top-0 z-30 flex h-16 items-center gap-4 border-b bg-background px-6 shadow-sm transition-colors duration-300">
            
            {/* Mobile Sidebar Trigger */}
            <Sheet>
                <SheetTrigger asChild>
                    <Button variant="outline" size="icon" className="md:hidden">
                        <Menu className="h-5 w-5" />
                        <span className="sr-only">Toggle Menu</span>
                    </Button>
                </SheetTrigger>
                <SheetContent side="left" className="p-0 w-64 border-r-0">
                    <SheetTitle className="sr-only">Admin Menu</SheetTitle>
                    <SheetDescription className="sr-only">
                        Sidebar navigation for the administration panel.
                    </SheetDescription>

                    <AdminSidebar />
                </SheetContent>
            </Sheet>

            {/* Page Title */}
            <div className="flex-1">
                <h1 className="text-lg font-semibold text-foreground">Administrator</h1>
            </div>

            {/* Right Side Actions */}
            <div className="flex items-center gap-2 md:gap-4">
                
                {/* View Site Button (Desktop) */}
                <Button variant="outline" size="sm" asChild className="hidden md:flex">
                    <a href="/" target="_blank" rel="noopener noreferrer" title="Open Site in New Tab">
                        <ExternalLink className="me-2 h-4 w-4" /> View Site
                    </a>
                </Button>

                {/* View Site Button (Mobile Icon) */}
                <Button variant="ghost" size="icon" asChild className="md:hidden">
                    <a href="/" target="_blank" rel="noopener noreferrer" title="View Site">
                        <ExternalLink className="h-5 w-5" />
                    </a>
                </Button>

                <ModeToggle />

                {/* User Profile Dropdown */}
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                            <Avatar className="h-9 w-9 border border-border">
                                <AvatarImage src={user.avatar || `https://ui-avatars.com/api/?name=${user.name}&background=DC2626&color=fff`} alt={user.name} className="object-cover" />
                                <AvatarFallback>AD</AvatarFallback>
                            </Avatar>
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent className="w-56" align="end" forceMount>
                        <DropdownMenuLabel className="font-normal">
                            <div className="flex flex-col space-y-1">
                                <p className="text-sm font-medium leading-none">{user.name}</p>
                                <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
                            </div>
                        </DropdownMenuLabel>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem onClick={() => window.location.href = route('settings.edit')}>
                            Profile Settings
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem 
                            className="text-red-600 focus:text-red-600 cursor-pointer"
                            onClick={() => router.post(route('logout'))}
                        >
                            Log out
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>
        </header>
    );
}