"use client";

import React from "react";
import { ChevronLeft, ChevronRight, School } from "lucide-react";
import { navigationConfig } from "@/config/navigation";
import { brandConfig } from "@/config/brand";
import { BrandLogo } from "@/components/shared/BrandLogo";
import { NavItem } from "./NavItem";
import { cn } from "@/lib/utils";
import { useAuth } from "@/context/AuthContext";
import { filterNavigationByRole } from "@/lib/rbac";

interface SidebarProps {
  collapsed: boolean;
  onToggleCollapse: () => void;
  className?: string;
}

const SidebarComponent: React.FC<SidebarProps> = ({
  collapsed,
  onToggleCollapse,
  className,
}) => {
  const { user } = useAuth();

  const dynamicSections = React.useMemo(() => {
    return filterNavigationByRole(navigationConfig, user?.role || "Super Admin");
  }, [user?.role]);

  return (
    <aside
      className={cn(
        "hidden lg:flex flex-col bg-brand-navy border-r border-slate-800 transition-all duration-300 ease-in-out z-30 shrink-0 select-none min-h-screen sticky top-0 h-screen print:hidden",
        collapsed ? "w-20" : "w-64",
        className
      )}
    >
      {/* Brand Header */}
      <div className="h-16 flex items-center px-4 border-b border-white/10 overflow-hidden shrink-0">
        <BrandLogo collapsed={collapsed} />
      </div>

      {/* Navigation List */}
      <div className="flex-1 overflow-y-auto px-3 py-4 space-y-4 scrollbar-thin scrollbar-thumb-white/10">
        <React.Suspense fallback={null}>
          {dynamicSections.map((section, idx) => (
            <div key={idx} className="space-y-1">
              {!collapsed ? (
                <h4 className="px-3 pb-1 text-[11px] font-bold uppercase tracking-wider text-slate-400">
                  {section.title}
                </h4>
              ) : (
                <div className="h-px bg-white/10 mx-2 my-2" />
              )}

              <div className="space-y-1">
                {section.items.map((item) => (
                  <NavItem key={item.id} item={item} collapsed={collapsed} />
                ))}
              </div>
            </div>
          ))}
        </React.Suspense>
      </div>

      {/* Footer Info & Collapse Toggle */}
      <div className="p-3 border-t border-white/10 bg-brand-navy-dark/60 flex flex-col gap-2 shrink-0">
        {!collapsed && (
          <div className="px-2.5 py-1.5 rounded-lg bg-white/5 border border-white/10 flex items-center gap-2">
            <School className="w-4 h-4 text-brand-blue-secondary shrink-0" />
            <div className="min-w-0 flex-1">
              <p className="text-xs font-semibold text-white truncate">
                {brandConfig.shortSchoolName}
              </p>
              <p className="text-[10px] text-slate-400 truncate">
                TA {brandConfig.academicYear.current} ({brandConfig.academicYear.semester})
              </p>
            </div>
          </div>
        )}

        <button
          onClick={onToggleCollapse}
          className="flex items-center justify-center gap-2 w-full py-2 px-3 rounded-lg text-slate-300 hover:text-white hover:bg-white/10 text-xs font-medium transition-colors"
          title={collapsed ? "Perluas Sidebar" : "Ciutkan Menu"}
        >
          {collapsed ? (
            <ChevronRight className="w-4 h-4" />
          ) : (
            <>
              <ChevronLeft className="w-4 h-4" />
              <span>Ciutkan Menu</span>
            </>
          )}
        </button>
      </div>
    </aside>
  );
};

export const Sidebar = React.memo(SidebarComponent);