//File: frontend/app/_components/navigation.jsx
'use client'; // <-- 1. กำหนดให้ไฟล์นี้เป็น Client Component

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Home, FileText, Settings, Package2 } from 'lucide-react';
import { can } from "@/lib/rbac";
import { cn } from "@/lib/utils";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";


export function Navigation({ user }) { // 2. รับข้อมูล user มาจาก props
  const pathname = usePathname(); // 3. ใช้งาน usePathname ได้แล้ว

  const navLinks = [
    { href: '/dashboard', label: 'Dashboard', icon: Home },
    { href: '/correspondences', label: 'Correspondences', icon: FileText },
    { href: '/drawings', label: 'Drawings', icon: FileText },
    // ... เพิ่มเมนูอื่นๆ ตามต้องการ
  ];

  const adminLink = { 
    href: '/admin/users', 
    label: 'Admin', 
    icon: Settings, 
    requiredPermission: 'manage_users' 
  };

  return (
    <div className="flex h-full max-h-screen flex-col 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="h-6 w-6" />
          <span className="">LCB P3 DMS</span>
        </Link>
        {/* Bell Icon can be here if needed */}
      </div>
      <div className="flex-1">
        <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
          {navLinks.map(({ href, label, icon: Icon }) => (
            <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="h-4 w-4" />
              {label}
            </Link>
          ))}
          
          {user && can(user, adminLink.requiredPermission) && (
            <>
              <div className="my-2 border-t"></div>
              <Link
                href={adminLink.href}
                className={cn(
                  'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
                   pathname.startsWith('/admin') ? 'bg-muted text-primary' : ''
                )}
              >
                <adminLink.icon className="h-4 w-4" />
                {adminLink.label}
              </Link>
            </>
          )}
        </nav>
      </div>
      <div className="mt-auto p-4">
        <Card>
          <CardHeader className="p-2 pt-0 md:p-4">
            <CardTitle>Need Help?</CardTitle>
            <CardDescription>Contact support for any issues or questions.</CardDescription>
          </CardHeader>
          <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
            <Button size="sm" className="w-full">Contact</Button>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}