"use client";

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { useAuthStore } from '@/lib/store';
import {
  LayoutDashboard,
  Users,
  Stethoscope,
  Calendar,
  ClipboardList,
  Clock,
  FileText,
  Settings,
  Bell,
  Shield,
  LogOut,
  Briefcase,
  Newspaper,
} from 'lucide-react';

const adminLinks = [
  { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
  { href: '/dashboard/staff', label: 'Staff Management', icon: Users },
  { href: '/dashboard/doctors', label: 'Doctors', icon: Stethoscope },
  { href: '/dashboard/appointments', label: 'Appointments', icon: Calendar },
  { href: '/dashboard/leaves', label: 'Leave Requests', icon: ClipboardList },
  { href: '/dashboard/attendance', label: 'Attendance', icon: Clock },
  { href: '/dashboard/reports', label: 'Reports', icon: FileText },
  { href: '/dashboard/blog', label: 'Blog Posts', icon: Newspaper },
  { href: '/dashboard/careers', label: 'Careers', icon: Briefcase },
  { href: '/dashboard/settings', label: 'Settings', icon: Settings },
];

const staffLinks = [
  { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
  { href: '/dashboard/my-attendance', label: 'My Attendance', icon: Clock },
  { href: '/dashboard/my-leaves', label: 'My Leaves', icon: ClipboardList },
  { href: '/dashboard/notifications', label: 'Notifications', icon: Bell },
];

const doctorLinks = [
  { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
  { href: '/dashboard/my-appointments', label: 'My Appointments', icon: Calendar },
  { href: '/dashboard/my-patients', label: 'My Patients', icon: Users },
  { href: '/dashboard/my-schedule', label: 'My Schedule', icon: Clock },
  { href: '/dashboard/notifications', label: 'Notifications', icon: Bell },
];

export function Sidebar() {
  const pathname = usePathname();
  const { user, logout } = useAuthStore();

  const isAdmin = user?.role === 'super_admin' || user?.role === 'hr_admin' || user?.role === 'medical_director';
  const isDoctor = user?.role === 'doctor';

  const links = isAdmin ? adminLinks : isDoctor ? doctorLinks : staffLinks;

  return (
    <aside className="hidden lg:flex flex-col w-64 h-[calc(100vh-4rem)] border-r bg-card sticky top-16">
      <nav className="flex-1 p-4 space-y-1">
        {links.map((link) => (
          <Link
            key={link.href}
            href={link.href}
            className={cn(
              "flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors",
              pathname === link.href
                ? "bg-hospital-100 text-hospital-700 dark:bg-hospital-900 dark:text-hospital-200"
                : "text-muted-foreground hover:text-foreground hover:bg-muted"
            )}
          >
            <link.icon className="h-4 w-4" />
            {link.label}
          </Link>
        ))}
      </nav>

      <div className="p-4 border-t">
        <button
          onClick={() => {
            logout();
            window.location.href = '/login';
          }}
          className="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium text-red-600 hover:bg-red-50 w-full transition-colors"
        >
          <LogOut className="h-4 w-4" />
          Logout
        </button>
      </div>
    </aside>
  );
}