"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { motion } from "motion/react";
import { useState } from "react";
import { useAuth } from "@/app/components/providers/auth-provider";
import { IconChevronDown, NavIcon } from "../icons/nav-icons";
import {
  getNavGroupsForRole,
  canShowLaporanMenu,
  laporanSubItems,
  type NavItem,
} from "./nav-config";

function NavLink({ item }: { item: NavItem }) {
  const pathname = usePathname();
  const isActive = pathname === item.href;

  return (
    <Link
      href={item.href}
      className={`text-l-regular relative flex h-[46px] items-center gap-3 rounded-lg p-3 transition-colors ${
        isActive
          ? "text-secondary-500"
          : "text-neutral-100 hover:bg-neutral-20"
      }`}
    >
      {isActive && (
        <motion.span
          initial={{ scaleX: 0 }}
          animate={{ scaleX: 1 }}
          className="absolute inset-0 origin-left rounded-lg bg-secondary-50"
          transition={{ duration: 0.22, ease: [0.16, 1, 0.3, 1] }}
          aria-hidden
        />
      )}
      <NavIcon
        name={item.icon}
        className={`relative z-10 ${isActive ? "text-secondary-500" : "text-neutral-100"}`}
      />
      <span className="relative z-10 flex-1">{item.label}</span>
    </Link>
  );
}

function LaporanDropdown() {
  const pathname = usePathname();
  const [open, setOpen] = useState(() => pathname.startsWith("/laporan"));

  return (
    <div className="flex flex-col gap-2">
      <button
        type="button"
        onClick={() => setOpen((prev) => !prev)}
        className="text-l-regular flex h-[46px] w-full items-center gap-3 rounded-lg p-3 text-left text-neutral-100 transition-colors hover:bg-neutral-20"
      >
        <NavIcon name="assessment" className="text-neutral-100" />
        <span className="flex-1">Laporan</span>
        <IconChevronDown
          className={`text-neutral-100 transition-transform ${open ? "rotate-0" : "-rotate-90"}`}
        />
      </button>

      {open && (
        <div className="relative flex flex-col gap-2 pl-4">
          <div className="absolute top-0 bottom-0 left-4 w-px bg-neutral-40" />
          {laporanSubItems.map((item) => {
            const isActive = item.href !== "#" && pathname === item.href;

            return (
              <Link
                key={item.label}
                href={item.href}
                className={`text-l-regular relative flex h-[42px] items-center rounded-lg py-2.5 pr-3 pl-4 transition-colors ${
                  isActive
                    ? "text-secondary-500"
                    : "text-neutral-100 hover:bg-neutral-20"
                }`}
              >
                {item.label}
              </Link>
            );
          })}
        </div>
      )}
    </div>
  );
}

type SidebarProps = {
  className?: string;
};

export function Sidebar({ className }: SidebarProps) {
  const { role, isReady } = useAuth();

  if (!isReady) {
    return (
      <aside
        className={`flex h-full w-[263px] shrink-0 flex-col border-r border-neutral-40 bg-neutral-10 ${className ?? ""}`}
      />
    );
  }

  const navGroups = getNavGroupsForRole(role);
  const mainMenu = navGroups[0];
  const otherGroups = navGroups.slice(1);
  const showLaporan = canShowLaporanMenu(role);

  return (
    <aside
      className={`flex h-full w-[263px] shrink-0 flex-col border-r border-neutral-40 bg-neutral-10 ${className ?? ""}`}
    >
      <div className="flex h-[74px] shrink-0 items-center justify-center gap-1 border-b border-neutral-40">
        <Image
          src="/images/logo-icon.png"
          alt="Logo Induk Kupie Aceh"
          width={27}
          height={27}
          className="size-[27px] object-cover"
        />
        <span className="font-brand text-[16px] font-bold text-neutral-100">
          ADMIN KUPIE ACEH
        </span>
      </div>

      <nav className="scrollbar-hide flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto p-5">
        {mainMenu && (
          <div className="flex flex-col gap-2">
            <p className="text-s-regular text-neutral-80">{mainMenu.title}</p>
            <div className="flex flex-col gap-1">
              {mainMenu.items.map((item) => (
                <NavLink key={item.label} item={item} />
              ))}
              {showLaporan && <LaporanDropdown />}
            </div>
          </div>
        )}

        {otherGroups.map((group) => (
          <div key={group.title} className="flex flex-col gap-2">
            <p className="text-s-regular text-neutral-80">{group.title}</p>
            <div className="flex flex-col gap-1">
              {group.items.map((item) => (
                <NavLink key={item.label} item={item} />
              ))}
            </div>
          </div>
        ))}
      </nav>
    </aside>
  );
}