"use client";

import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { useSelector } from "react-redux";
import { cn } from "@/lib/utils";
import { dashboardRoutes, canAccessRoute } from "@/lib/routes";

import backgroundImageSidebar from "@/assets/img/sidebar-4.jpg";
import logo from "@/assets/img/MAM2.png";

export default function Sidebar({ onNavigate }) {
  const pathname = usePathname();
  const user = useSelector((state) => state.auth.user);

  const links = dashboardRoutes.filter(
    (route) =>
      route.showInSidebar !== false && canAccessRoute(route, user?.role),
  );

  return (
    <div className="relative flex h-full flex-col overflow-hidden text-sidebar-foreground">
      <Image
        src={backgroundImageSidebar}
        alt=""
        fill
        priority
        sizes="256px"
        className="object-cover"
      />
      <div className="absolute inset-0 bg-sidebar/85" />

      <div className="relative z-10 flex h-full flex-col">
        <Link href="/" className="flex items-center gap-2 px-5 py-5">
          <div className="relative h-9 w-9 shrink-0 overflow-hidden rounded-md bg-white/10">
            <Image
              src={logo}
              alt="Logo"
              fill
              sizes="36px"
              className="object-contain"
            />
          </div>
          <span className="text-sm font-semibold tracking-wide">
            TÜBİTAK MAM
          </span>
        </Link>

        <nav className="flex-1 space-y-0.5 px-3 py-2">
          {links.map((route) => {
            const Icon = route.icon;
            const active = pathname === route.href;
            return (
              <Link
                key={route.href}
                href={route.href}
                onClick={onNavigate}
                className={cn(
                  "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
                  active
                    ? "bg-white/10 text-sidebar-active"
                    : "text-sidebar-muted hover:bg-white/10 hover:text-sidebar-foreground",
                )}
              >
                <Icon className="h-4 w-4 shrink-0" />
                {route.label}
              </Link>
            );
          })}
        </nav>

        <div className="px-5 py-4 text-[11px] text-sidebar-muted"></div>
      </div>
    </div>
  );
}