"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
  LayoutDashboard,
  User,
  FileText,
  BookOpen,
  Award,
  CreditCard,
  Menu,
  X,
} from "lucide-react";
import { useState } from "react";
import { useLanguage } from "@/lib/i18n";

const sidebarLinks = [
  { name: "common.dashboard", href: "/dashboard", icon: LayoutDashboard },
  { name: "guide.profile", href: "/dashboard/profile", icon: User },
  { name: "guide.myBlogs", href: "/dashboard/blogs", icon: BookOpen },
  { name: "guide.monthlyReports", href: "/dashboard/reports", icon: FileText },
  { name: "guide.idCard", href: "/dashboard/id-card", icon: CreditCard },
  {
    name: "guide.certifications",
    href: "/dashboard/certifications",
    icon: Award,
  },
] as const;

export function DashboardSidebar() {
  const pathname = usePathname();
  const [mobileOpen, setMobileOpen] = useState(false);
  const { t } = useLanguage();

  const sidebarContent = (
    <div className="flex h-full flex-col">
      <div className="flex h-[65px] items-center border-b border-[var(--theme-border)] bg-white/95 px-4">
        <Link href="/" className="inline-flex">
          <Image
            src="/uttarakhand-logo.png"
            alt="Uttarakhand Tourism"
            width={190}
            height={54}
            className="h-11 w-auto object-contain"
            priority
          />
        </Link>
      </div>

      <nav className="flex-1 space-y-1.5 overflow-y-auto px-3 py-4">
        {sidebarLinks.map((link) => {
          const isActive =
            pathname === link.href ||
            (link.href !== "/dashboard" && pathname.startsWith(link.href));

          return (
            <Link
              key={link.name}
              href={link.href}
              onClick={() => setMobileOpen(false)}
              className={cn(
                "group flex items-center gap-3 rounded-2xl px-4 py-3 text-sm font-semibold transition-all",
                isActive
                  ? "bg-gradient-to-r from-[var(--theme-secondary)] to-[var(--theme-accent)] text-white shadow-lg shadow-[var(--theme-secondary)]/20"
                  : "text-white/68 hover:bg-white/10 hover:text-white",
              )}
            >
              <link.icon
                className={cn(
                  "h-5 w-5 shrink-0 transition-transform group-hover:scale-110",
                  isActive ? "text-white" : "text-[var(--theme-secondary)]",
                )}
              />
              {t(link.name)}
            </Link>
          );
        })}
      </nav>
    </div>
  );

  return (
    <>
      <div className="fixed inset-x-0 top-0 z-50 flex h-16 items-center justify-between border-b border-[var(--theme-border)] bg-white/90 px-4 shadow-sm backdrop-blur-xl lg:hidden">
        <Image
          src="/uttarakhand-logo.png"
          alt="Uttarakhand Tourism"
          width={165}
          height={48}
          className="h-10 w-auto object-contain"
          priority
        />
        <Button
          variant="outline"
          size="icon"
          className="rounded-full bg-white"
          onClick={() => setMobileOpen((open) => !open)}
        >
          {mobileOpen ? (
            <X className="h-5 w-5" />
          ) : (
            <Menu className="h-5 w-5" />
          )}
          <span className="sr-only">Toggle guide navigation</span>
        </Button>
      </div>

      <aside className="fixed inset-y-0 left-0 z-40 hidden w-64 bg-[var(--sidebar)] shadow-[18px_0_60px_rgba(15,23,42,0.18)] lg:block">
        {sidebarContent}
      </aside>

      {mobileOpen && (
        <button
          type="button"
          aria-label="Close guide navigation"
          className="fixed inset-0 z-40 bg-black/45 backdrop-blur-sm lg:hidden"
          onClick={() => setMobileOpen(false)}
        />
      )}

      <aside
        className={cn(
          "fixed bottom-0 left-0 top-16 z-50 w-80 max-w-[86vw] border-r border-white/10 bg-[var(--sidebar)] shadow-2xl transition-transform duration-300 lg:hidden",
          mobileOpen ? "translate-x-0" : "-translate-x-full",
        )}
      >
        {sidebarContent}
      </aside>
    </>
  );
}