"use client";

import {
  LayoutDashboard, Wrench, FolderKanban, Cpu, GraduationCap,
  Users, ImageIcon, MessageSquare, ArrowLeft, ChevronRight, Info, Phone, Newspaper, LogOut, Globe, Tags, ClipboardList, HardHat, Settings, Award,
} from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { usePathname } from "next/navigation";
import { logout } from "@/services/auth";
import { useAdminSettings } from "@/components/admin/AdminSettingsProvider";
import { AdminLocaleSwitcher } from "@/components/admin/AdminLocaleSwitcher";
import {
  Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent,
  SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem,
  SidebarHeader, SidebarFooter, useSidebar,
} from "@/components/ui/sidebar";

const navItems = [
  { title: "Dashboard", url: "/admin/dashboard", icon: LayoutDashboard, exact: true },
  { title: "Services", url: "/admin/services", icon: Wrench },
  { title: "Projects", url: "/admin/projects", icon: FolderKanban },
  { title: "Technologies", url: "/admin/technologies", icon: Cpu },
  { title: "Training", url: "/admin/training", icon: GraduationCap },
  { title: "Clients", url: "/admin/clients", icon: Users },
  { title: "News", url: "/admin/news", icon: Newspaper },
  { title: "News Categories", url: "/admin/news-categories", icon: Tags },
  // { title: "Hero / Homepage", url: "/admin/hero", icon: ImageIcon },
  { title: "About Page", url: "/admin/about", icon: Info },
  { title: "Contact", url: "/admin/contact", icon: Phone },
  { title: "Quote Requests", url: "/admin/quotes", icon: MessageSquare },
  { title: "Inspection Quotes", url: "/admin/inspection-quotes", icon: ClipboardList },
  { title: "Inspectors", url: "/admin/inspectors", icon: HardHat },
  { title: "Certificates", url: "/admin/certificates", icon: Award },
  { title: "Pages", url: "/admin/pages", icon: Globe },
];

export function AdminSidebar() {
  const { state } = useSidebar();
  const collapsed = state === "collapsed";
  const pathname = usePathname();
  const router = useRouter();
  const { settings } = useAdminSettings();
  // const logoSrc = settings?.logo_dark_url ?? "/logo.png";
  const faviconSrc = settings?.favicon_url ?? "/favicon.png";

  const handleLogout = async () => {
    await logout();
    router.push("/admin/login");
  };

  const isActive = (url: string, exact?: boolean) => {
    if (exact) return pathname === url;
    return pathname.startsWith(url);
  };

  return (
    <Sidebar collapsible="icon" className="border-r-0">
      <SidebarHeader className="p-4 border-b border-sidebar-border">
        <div className="flex items-center gap-3 overflow-hidden">
          <img src={faviconSrc} alt="Petro-Base" className="h-6 w-6 shrink-0 object-contain" />
          {!collapsed && (
            <div className="flex flex-col min-w-0">
              <span className="text-sm font-bold text-sidebar-foreground truncate">Petro-Base</span>
              {/* <span className="text-[10px] text-sidebar-foreground/50 uppercase tracking-widest">CMS</span> */}
            </div>
          )}
        </div>
      </SidebarHeader>

      <SidebarContent className="pt-2">
        <SidebarGroup>
          <SidebarGroupLabel className="text-[10px] uppercase tracking-[0.2em] text-sidebar-foreground/40 font-semibold">
            Content
          </SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {navItems.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton
                    render={<Link href={item.url} />}
                    isActive={isActive(item.url, item.exact)}
                    tooltip={item.title}
                  >
                    <item.icon className="h-4 w-4" />
                    <span>{item.title}</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarGroup>
          <SidebarGroupLabel className="text-[10px] uppercase tracking-[0.2em] text-sidebar-foreground/40 font-semibold">
            System
          </SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton
                  render={<Link href="/admin/settings" />}
                  isActive={isActive("/admin/settings")}
                  tooltip="Settings"
                >
                  <Settings className="h-4 w-4" />
                  <span>Settings</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter className="border-t border-sidebar-border p-3">
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton
              render={<Link href="/" className="text-sidebar-foreground/60 hover:text-sidebar-foreground" />}
              tooltip="Back to Site"
            >
              <ArrowLeft className="h-4 w-4" />
              <span>Back to Site</span>
              {!collapsed && <ChevronRight className="ml-auto h-3 w-3" />}
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton
              tooltip="Logout"
              onClick={handleLogout}
              className="text-destructive/70 hover:text-destructive hover:bg-destructive/10"
            >
              <LogOut className="h-4 w-4" />
              <span>Logout</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
        <div className="px-1 pt-1">
          <AdminLocaleSwitcher />
        </div>
      </SidebarFooter>
    </Sidebar>
  );
}