"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Menu, X } from "lucide-react";
import { FrontendBrandLogo } from "@/components/frontend/brand-logo";
import { AdminSidebarNav } from "./admin-sidebar-nav";

export function AdminMobileNav() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      {/* Mobile menu button - positioned absolutely over the header placeholder */}
      <Button
        variant="ghost"
        size="icon"
        className="fixed left-4 top-4 z-50 md:hidden shrink-0 rounded-xl"
        onClick={() => setIsOpen(!isOpen)}
        aria-label={isOpen ? "Close navigation menu" : "Open navigation menu"}
        aria-expanded={isOpen}
      >
        {isOpen ? (
          <X className="h-5 w-5" aria-hidden="true" />
        ) : (
          <Menu className="h-5 w-5" aria-hidden="true" />
        )}
      </Button>

      {/* Mobile backdrop */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-background/80 backdrop-blur-sm z-40 md:hidden"
          onClick={() => setIsOpen(false)}
          aria-hidden="true"
        />
      )}

      {/* Mobile sidebar */}
      <aside
        className={cn(
          "fixed left-0 top-0 z-50 flex h-screen w-64 flex-col md:hidden",
          "bg-card border-r border-border/40 shadow-lg",
          "transition-transform duration-300 ease-in-out",
          isOpen ? "translate-x-0" : "-translate-x-full"
        )}
        aria-label="Mobile navigation"
        aria-hidden={!isOpen}
      >
        {/* Logo header */}
        <div className="flex items-center gap-3 border-b border-border/40 px-4 py-4 bg-gradient-to-br from-primary/5 to-transparent shrink-0">
          <FrontendBrandLogo
            variant="compact"
            href="/admin/dashboard"
            roleBadge="admin"
            className="gap-3"
            onNavigate={() => setIsOpen(false)}
          />
        </div>

        <div className="flex-1 overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent hover:scrollbar-thumb-border/80">
          <AdminSidebarNav onNavigate={() => setIsOpen(false)} />
        </div>

        <div className="border-t border-border/40 bg-muted/50 p-3 shrink-0">
          <p className="text-xs text-muted-foreground text-center font-medium">
            ameera holidays admin v1.0
          </p>
        </div>
      </aside>
    </>
  );
}