"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  ClipboardList,
  FileText,
  ShieldCheck,
  History,
  Menu,
  X,
  ChevronLeft,
} from "lucide-react";

const menuItems = [
  {
    name: "Dashboard",
    href: "/dashboard",
    icon: LayoutDashboard,
  },
  {
    name: "Enquiries",
    href: "/enquiries",
    icon: ClipboardList,
  },
  {
    name: "Analytics",
    href: "/analytics",
    icon: FileText,
  },
  // {
  //   name: "Blogs",
  //   href: "/blogs",
  //   icon: FileText,
  // },
];

interface Admin {
  role?: string;
}

export default function Sidebar() {
  const pathname = usePathname();

  const [admin, setAdmin] = useState<Admin | null>(null);
  const [collapsed, setCollapsed] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const storedAdmin = localStorage.getItem("admin");

    if (storedAdmin) {
      try {
        setAdmin(JSON.parse(storedAdmin));
      } catch {
        setAdmin(null);
      }
    }
  }, []);

  useEffect(() => {
    setMobileOpen(false);
  }, [pathname]);

  const isActive = (href: string) => pathname === href;

  const linkClass = (href: string) =>
    `group flex items-center rounded-xl py-3 transition-all duration-300 ease-out ${
      collapsed
        ? "lg:justify-center lg:px-3"
        : "gap-3 px-4"
    } ${
      isActive(href)
        ? "bg-[#C9A227] text-white shadow-sm"
        : "text-gray-300 hover:bg-gray-800 hover:text-white"
    }`;

  return (
    <>
      {/* Mobile / Tablet menu button */}
      <button
        type="button"
        onClick={() => setMobileOpen(true)}
        aria-label="Open sidebar"
        className={`fixed left-4 top-4 z-50 flex h-11 w-11 items-center justify-center rounded-xl bg-gray-900 text-white shadow-lg transition-all duration-300 hover:bg-gray-800 lg:hidden ${
          mobileOpen
            ? "pointer-events-none opacity-0"
            : "opacity-100"
        }`}
      >
        <Menu size={21} />
      </button>

      {/* Mobile / Tablet overlay */}
      <div
        onClick={() => setMobileOpen(false)}
        className={`fixed inset-0 z-40 bg-black/50 backdrop-blur-[2px] transition-opacity duration-300 lg:hidden ${
          mobileOpen
            ? "pointer-events-auto opacity-100"
            : "pointer-events-none opacity-0"
        }`}
      />

      {/* Sidebar */}
      <aside
        className={`
          fixed left-0 top-0 z-50
          flex h-screen shrink-0 flex-col
          bg-gray-900 text-white shadow-xl

          w-72
          transition-all duration-300 ease-out

          ${mobileOpen ? "translate-x-0" : "-translate-x-full"}

          lg:relative
          lg:translate-x-0

          ${collapsed ? "lg:w-20" : "lg:w-64"}
        `}
      >
        {/* Header */}
        <div
          className={`
            relative flex h-22 shrink-0 items-center
            border-b border-gray-800
            transition-all duration-300
            ${collapsed ? "lg:justify-center lg:px-3" : "px-6"}
          `}
        >
          {/* Expanded logo */}
          <div
            className={`overflow-hidden whitespace-nowrap transition-all duration-300 ${
              collapsed
                ? "lg:w-0 lg:opacity-0"
                : "w-auto opacity-100"
            }`}
          >
            <h1 className="text-2xl font-bold tracking-wide text-[#C9A227]">
              TGHR
            </h1>

            <p className="mt-0.5 text-sm text-gray-400">
              Admin Panel
            </p>
          </div>

          {/* Collapsed logo */}
          <div
            className={`hidden text-xl font-bold tracking-wide text-[#C9A227] transition-all duration-300 lg:block ${
              collapsed
                ? "scale-100 opacity-100"
                : "pointer-events-none absolute scale-75 opacity-0"
            }`}
          >
            T
          </div>

          {/* Mobile close */}
          <button
            type="button"
            onClick={() => setMobileOpen(false)}
            aria-label="Close sidebar"
            className="absolute right-4 top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg text-gray-400 transition hover:bg-gray-800 hover:text-white lg:hidden"
          >
            <X size={20} />
          </button>

          {/* Desktop collapse */}
          <button
            type="button"
            onClick={() =>
              setCollapsed((previous) => !previous)
            }
            aria-label={
              collapsed
                ? "Expand sidebar"
                : "Collapse sidebar"
            }
            className="absolute -right-3 top-1/2 z-50 hidden h-7 w-7 -translate-y-1/2 items-center justify-center rounded-full border border-gray-700 bg-gray-900 text-gray-300 shadow-md transition-all duration-300 hover:bg-[#C9A227] hover:text-white lg:flex"
          >
            <ChevronLeft
              size={15}
              className={`transition-transform duration-300 ${
                collapsed ? "rotate-180" : ""
              }`}
            />
          </button>
        </div>

        {/* Navigation */}
        <nav className="flex-1 space-y-2 overflow-y-auto p-4">
          {menuItems.map((item) => {
            const Icon = item.icon;

            return (
              <Link
                key={item.href}
                href={item.href}
                title={collapsed ? item.name : undefined}
                className={linkClass(item.href)}
              >
                <Icon
                  size={20}
                  strokeWidth={1.8}
                  className="shrink-0"
                />

                <span
                  className={`whitespace-nowrap text-sm font-medium transition-all duration-300 ${
                    collapsed
                      ? "lg:w-0 lg:overflow-hidden lg:opacity-0"
                      : "w-auto opacity-100"
                  }`}
                >
                  {item.name}
                </span>
              </Link>
            );
          })}

          {/* Super Admin items */}
          {admin?.role === "Super Admin" && (
            <>
              {/* Blogs */}
              <Link
                href="/blogs"
                title={collapsed ? "Blogs" : undefined}
                className={linkClass("/blogs")}
              >
                <FileText
                  size={20}
                  strokeWidth={1.8}
                  className="shrink-0"
                />

                <span
                  className={`whitespace-nowrap text-sm font-medium transition-all duration-300 ${
                    collapsed
                      ? "lg:w-0 lg:overflow-hidden lg:opacity-0"
                      : "w-auto opacity-100"
                  }`}
                >
                  Blogs
                </span>
              </Link>

              {/* Admin Management */}
              <Link
                href="/admins"
                title={
                  collapsed
                    ? "Admin Management"
                    : undefined
                }
                className={linkClass("/admins")}
              >
                <ShieldCheck
                  size={20}
                  strokeWidth={1.8}
                  className="shrink-0"
                />

                <span
                  className={`whitespace-nowrap text-sm font-medium transition-all duration-300 ${
                    collapsed
                      ? "lg:w-0 lg:overflow-hidden lg:opacity-0"
                      : "w-auto opacity-100"
                  }`}
                >
                  Admin Management
                </span>
              </Link>

              {/* Audit Logs */}
              <Link
                href="/audit"
                title={
                  collapsed ? "Audit Logs" : undefined
                }
                className={linkClass("/audit")}
              >
                <History
                  size={20}
                  strokeWidth={1.8}
                  className="shrink-0"
                />

                <span
                  className={`whitespace-nowrap text-sm font-medium transition-all duration-300 ${
                    collapsed
                      ? "lg:w-0 lg:overflow-hidden lg:opacity-0"
                      : "w-auto opacity-100"
                  }`}
                >
                  Audit Logs
                </span>
              </Link>
            </>
          )}
        </nav>

        
      </aside>
    </>
  );
}