// File: frontend/app/_components/SideNavigation.jsx
'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Home, FileText, Users, Settings, Package2, Upload, PlusCircle, Workflow, BarChart } from 'lucide-react';
import { can } from "@/lib/rbac";
import { cn } from "@/lib/utils";

// Component นี้จะรับ user object ที่มี roles และ permissions มาจาก Server Component Parent
export function SideNavigation({ user }) {
  const pathname = usePathname();

  // สร้าง Array ของเมนูหลักตามโครงสร้างเดิมของคุณ
  const mainNavLinks = [
    { href: '/dashboard', label: 'Dashboard', icon: Home, perm: null }, // หน้าแรกเข้าได้ทุกคน
    { href: '/correspondences', label: 'Correspondences', icon: FileText, perm: 'correspondence:view' },
    { href: '/drawings', label: 'Drawings', icon: FileText, perm: 'drawing:view' },
    { href: '/rfas', label: 'RFAs', icon: FileText, perm: 'rfa:view' },
    { href: '/transmittals', label: 'Transmittals', icon: FileText, perm: 'transmittal:view' },
    { href: '/reports', label: 'Reports', icon: BarChart, perm: 'report:view' },
  ];

  // สร้าง Array ของเมนู Admin ตามโครงสร้างเดิมของคุณ
  const adminNavLinks = [
    { href: '/admin', label: 'Admin', icon: Settings, perm: 'admin:view' },
    { href: '/users', label: 'ผู้ใช้/บทบาท', icon: Users, perm: 'users:manage' },
    { href: '/workflow', label: 'Workflow', icon: Workflow, perm: 'workflow:view' },
  ];

  return (
    <div className="flex flex-col h-full max-h-screen gap-2">
      <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
        <Link href="/dashboard" className="flex items-center gap-2 font-semibold">
          <Package2 className="w-6 h-6" />
          <span className="">LCB P3 DMS</span>
        </Link>
      </div>
      <div className="flex-1 overflow-y-auto">
        <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
          {/* Render เมนูหลัก */}
          {mainNavLinks.map(({ href, label, icon: Icon, perm }) => 
            (perm === null || can(user, perm)) && (
              <Link
                key={href}
                href={href}
                className={cn(
                  'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
                  (pathname === href || (href !== '/dashboard' && pathname.startsWith(href))) ? 'bg-muted text-primary' : ''
                )}
              >
                <Icon className="w-4 h-4" />
                {label}
              </Link>
            )
          )}
          
          {/* Render เมนู Admin ถ้ามีสิทธิ์อย่างน้อย 1 เมนู */}
          {adminNavLinks.some(link => can(user, link.perm)) && (
            <>
              <div className="my-2 border-t"></div>
              {adminNavLinks.map(({ href, label, icon: Icon, perm }) =>
                can(user, perm) && (
                  <Link
                    key={href}
                    href={href}
                    className={cn(
                      'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
                      pathname.startsWith(href) ? 'bg-muted text-primary' : ''
                    )}
                  >
                    <Icon className="w-4 h-4" />
                    {label}
                  </Link>
                )
              )}
            </>
          )}
        </nav>
      </div>
      {/* ส่วน Card ด้านล่างสามารถคงไว้ หรือเอาออกได้ตามต้องการ */}
    </div>
  );
}