'use client';

import {
  Home, Calendar, FileText, PillBottle, PhoneCall, MessageSquare, Users, UserPlus,
  Bell, Clipboard, Mic, LayoutDashboard, User, FlaskConical, DollarSign
} from 'lucide-react';
import clsx from 'clsx';
import Link from 'next/link';
import Image from 'next/image';

export default function Sidebar({ sidebarOpen, setSidebarOpen, role = 'patient' }) {
  const doctorLinks = [
    { name: 'Dashboard', href: '/dashboard/doctor', icon: FileText },
    { name: 'Consultations', href: '/dashboard/doctor/consultations', icon: Calendar },
    { name: 'Messages', href: '/dashboard/doctor/messages', icon: MessageSquare },
    { name: 'Notifications', href: '/dashboard/doctor/notifications', icon: Bell },
    {
      name: 'Forum',
      href: '/dashboard/doctor/forum',
      icon: () => (
        <div className="relative w-5 h-5">
          <Mic className="absolute text-white opacity-80 w-4 h-4" />
          <Users className="absolute left-2 top-2 text-white opacity-40 w-3 h-3" />
        </div>
      ),
    },
    { name: 'Patient List', href: '/dashboard/doctor/patients', icon: UserPlus },
    { name: 'Support', href: '/dashboard/doctor/support', icon: Users },
  ];

  const patientLinks = [
    { name: 'Home', href: '/dashboard/patient', icon: Home },
    { name: 'Consultations', href: '/dashboard/patient/appointments', icon: Calendar },
    { name: 'Test Results', href: '/dashboard/patient/test-results', icon: FileText },
    { name: 'Prescription', href: '/dashboard/patient/prescription', icon: PillBottle },
    { name: 'Notifications', href: '/dashboard/patient/notifications', icon: Bell },
    { name: 'Doctor Call Out', href: '/dashboard/patient/callouts', icon: PhoneCall },
    { name: 'Messages', href: '/dashboard/patient/messages', icon: MessageSquare },
    { name: 'Doctor List', href: '/dashboard/patient/doctors', icon: Users },
    { name: 'Support', href: '/dashboard/patient/support', icon: Users },
    { name: 'Subscription', href: '/dashboard/patient/subscription', icon: DollarSign },
  ];

  const labLinks = [
    { name: 'Dashboard', href: '/dashboard/lab', icon: Users },
    { name: 'Test Results', href: '/dashboard/lab/test-results', icon: FileText },
    { name: 'Notifications', href: '/dashboard/lab/notifications', icon: Bell },
    { name: 'Support', href: '/dashboard/lab/support', icon: Users },
  ];

  const pharmacyLinks = [
    { name: 'Dashboard', href: '/dashboard/pharmacy', icon: Users },
    { name: 'Prescriptions', href: '/dashboard/pharmacy/prescriptions', icon: PillBottle },
    { name: 'Profile', href: '/dashboard/pharmacy/profile', icon: UserPlus },
    { name: 'Notifications', href: '/dashboard/pharmacy/notifications', icon: Bell },
    { name: 'Support', href: '/dashboard/pharmacy/support', icon: Users },
  ];

  const adminLinks = [
    { name: 'Dashboard', href: '/dashboard/admin', icon: LayoutDashboard },
    { name: 'Users', href: '/dashboard/admin/users', icon: Users },
    { name: 'Doctors', href: '/dashboard/admin/doctors', icon: Users },
    { name: 'Patients', href: '/dashboard/admin/patients', icon: Users },
    { name: 'Labs', href: '/dashboard/admin/labs', icon: FlaskConical },
    { name: 'Pharmacies', href: '/dashboard/admin/pharmacy', icon: PillBottle },
    { name: 'Consultations', href: '/dashboard/admin/consultations', icon: Calendar },
    { name: 'Support', href: '/dashboard/admin/support', icon: Users },
  ];

  const sidebarTitle = {
    doctor: 'Doctor Dashboard',
    patient: 'Patient Dashboard',
    lab: 'Lab Dashboard',
    pharmacy: 'Pharmacy Dashboard',
    admin: 'Admin Dashboard'
  };

  const links =
    role === 'doctor' ? doctorLinks :
      role === 'lab' ? labLinks :
        role === 'pharmacy' ? pharmacyLinks :
          role === 'admin' ? adminLinks :
            patientLinks;

  return (
    <aside
      className={clsx(
        'bg-black shadow-md w-64 fixed inset-y-0 z-40 transform md:relative md:translate-x-0 transition-transform',
        {
          '-translate-x-full': !sidebarOpen,
          'translate-x-0': sidebarOpen,
        }
      )}
    >
      <div className="flex flex-col h-full overflow-y-auto p-4 space-y-4">
        {/* Mobile Header */}
        <div className="flex justify-between items-center md:hidden">
          <h2 className="font-bold text-white">{sidebarTitle[role] || 'Dashboard'}</h2>
          <button onClick={() => setSidebarOpen(false)} className="text-white font-bold">
            X
          </button>
        </div>

        {/* Logo */}
        <Link
          href="/"
          className="flex items-center space-x-2 p-2 hover:bg-gray-800 rounded cursor-pointer text-white font-semibold text-xl"
        >
          <Image
            src="/images/logo.png"
            alt="Med Bridge Afrik Logo"
            width={80}
            height={30}
            priority
          />
        </Link>

        {/* Navigation Links */}
        <nav>
          <ul className="space-y-3">
            {links.map(({ name, href, icon: Icon }) => (
              <li key={name}>
                <Link
                  href={href}
                  className="flex items-center space-x-2 hover:bg-gray-300 p-2 rounded cursor-pointer text-white"
                >
                  <Icon className="w-5 h-5" />
                  <span>{name}</span>
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </div>
    </aside>
  );
}
