'use client';

import { useState, useEffect, useRef } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { signOut, useSession } from 'next-auth/react';
import { useTranslations } from '../hooks/useTranslations';
import { useSettings } from '../contexts/SettingsContext';
import LanguageSwitcher from './LanguageSwitcher';
import { 
  Users, 
  Calendar, 
  CalendarDays,
  Receipt,
  Home,
  Stethoscope,
  Plus,
  LogOut,
  Menu,
  X,
  Bell,
  Settings,
  Brain,
  TrendingUp,
  Pill,
  Camera,
  LineChart,
  Mic,
  User,
  ChevronDown,
  ChevronRight,
  UserPlus,
  UserCheck,
  List,
  BarChart3,
  DollarSign,
  Activity,
  Target,
  ShoppingCart,
  FolderOpen,
  FilePlus,
  Files,
  MonitorPlay,
  ImageDown,
  Video,
  MessageCircle,
  Clock,
  Eye,
  Glasses,
  Scissors,
  ScanLine,
  Scan,
  Focus,
  Sparkles,
  Package
} from 'lucide-react';

interface SidebarLayoutProps {
  children: React.ReactNode;
  title: string;
  description?: string;
}

interface NavigationItem {
  id: string;
  label: string;
  icon: any;
  href: string;
  roles: string[];
  children?: NavigationItem[];
}

export default function SidebarLayout({ children, title, description }: SidebarLayoutProps) {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [profileMenuOpen, setProfileMenuOpen] = useState(false);
  const [mobileProfileMenuOpen, setMobileProfileMenuOpen] = useState(false);
  const [expandedMenus, setExpandedMenus] = useState<Set<string>>(new Set());
  const pathname = usePathname();
  const { data: session } = useSession();
  const { t, translationsLoaded } = useTranslations();
  const { settings } = useSettings();
  const profileMenuRef = useRef<HTMLDivElement>(null);
  const mobileProfileMenuRef = useRef<HTMLDivElement>(null);

  const isAdmin = session?.user?.role === 'admin';

  const toggleSubmenu = (menuId: string) => {
    setExpandedMenus(prev => {
      const newSet = new Set(prev);
      if (newSet.has(menuId)) {
        newSet.delete(menuId);
      } else {
        newSet.add(menuId);
      }
      return newSet;
    });
  };

  const navigation: NavigationItem[] = [
    { id: 'dashboard', label: t('navigation.dashboard'), icon: Home, href: '/', roles: ['admin', 'doctor', 'staff'] },
    { id: 'doctors', label: t('navigation.doctors'), icon: UserPlus, href: '/doctors', roles: ['admin'] },
    { id: 'patients', label: t('navigation.patients'), icon: Users, href: '/patients', roles: ['admin', 'doctor', 'staff'] },
    { 
      id: 'appointments', 
      label: t('navigation.appointments'), 
      icon: Calendar, 
      href: '/appointments', 
      roles: ['admin', 'doctor', 'staff'],
      children: [
        { id: 'appointments-list', label: t('navigation.allAppointments'), icon: Calendar, href: '/appointments', roles: ['admin', 'doctor', 'staff'] },
        { id: 'appointments-new', label: t('navigation.newAppointment'), icon: Plus, href: '/appointments/new', roles: ['admin', 'doctor', 'staff'] },
        { id: 'calendar', label: t('navigation.calendar'), icon: CalendarDays, href: '/calendar', roles: ['admin', 'doctor', 'staff'] }
      ]
    },
    { 
      id: 'eye-exam', 
      label: t('navigation.eyeExaminations'), 
      icon: Eye, 
      href: '/eye-exam', 
      roles: ['admin', 'doctor', 'staff'],
      children: [
        { id: 'eye-exam-list', label: t('navigation.allExaminations'), icon: Eye, href: '/eye-exam', roles: ['admin', 'doctor', 'staff'] },
        { id: 'eye-exam-new', label: t('navigation.newExamination'), icon: Plus, href: '/eye-exam/new', roles: ['admin', 'doctor', 'staff'] }
      ]
    },
    { 
      id: 'prescriptions', 
      label: t('navigation.opticalPrescriptions'), 
      icon: Glasses, 
      href: '/prescriptions', 
      roles: ['admin', 'doctor', 'staff'],
      children: [
        { id: 'rx-list', label: t('navigation.allPrescriptions'), icon: Glasses, href: '/prescriptions', roles: ['admin', 'doctor', 'staff'] },
        { id: 'rx-new', label: t('navigation.newPrescription'), icon: Plus, href: '/prescriptions/new', roles: ['admin', 'doctor', 'staff'] }
      ]
    },
    { 
      id: 'glaucoma', 
      label: t('navigation.glaucomaCenter'), 
      icon: Activity, 
      href: '/glaucoma', 
      roles: ['admin', 'doctor', 'staff'],
      children: [
        { id: 'glaucoma-patients', label: t('navigation.allPatients'), icon: Activity, href: '/glaucoma', roles: ['admin', 'doctor', 'staff'] },
        { id: 'glaucoma-new', label: t('navigation.newPatient'), icon: Plus, href: '/glaucoma/new', roles: ['admin', 'doctor', 'staff'] },
        { id: 'iop-tracking', label: t('navigation.iopTracking'), icon: TrendingUp, href: '/glaucoma/iop', roles: ['admin', 'doctor', 'staff'] }
      ]
    },
    { 
      id: 'dr-screening', 
      label: t('navigation.drScreening'), 
      icon: ScanLine, 
      href: '/dr-screening', 
      roles: ['admin', 'doctor', 'staff'],
      children: [
        { id: 'dr-patients', label: t('navigation.allPatients'), icon: ScanLine, href: '/dr-screening', roles: ['admin', 'doctor', 'staff'] },
        { id: 'dr-new', label: t('navigation.newScreening'), icon: Plus, href: '/dr-screening/new', roles: ['admin', 'doctor', 'staff'] },
        { id: 'dr-ai', label: t('navigation.aiAnalysis'), icon: Brain, href: '/dr-screening/ai-analysis', roles: ['admin', 'doctor', 'staff'] }
      ]
    },
    { 
      id: 'surgery', 
      label: t('navigation.eyeSurgery'), 
      icon: Scissors, 
      href: '/surgery', 
      roles: ['admin', 'doctor', 'staff'],
      children: [
        { id: 'surgery-list', label: t('navigation.allSurgeries'), icon: Scissors, href: '/surgery', roles: ['admin', 'doctor', 'staff'] },
        { id: 'surgery-new', label: t('navigation.scheduleSurgery'), icon: Plus, href: '/surgery/new', roles: ['admin', 'doctor', 'staff'] },
        { id: 'iol-calculator', label: t('navigation.iolCalculator'), icon: Target, href: '/surgery/iol-calculator', roles: ['admin', 'doctor', 'staff'] }
      ]
    },
    { 
      id: 'optical-shop', 
      label: t('navigation.opticalShop'), 
      icon: Glasses, 
      href: '/optical-shop', 
      roles: ['admin', 'doctor', 'staff'],
      children: [
        { id: 'optical-orders', label: t('navigation.orders'), icon: ShoppingCart, href: '/optical-shop', roles: ['admin', 'doctor', 'staff'] },
        { id: 'optical-frames', label: t('navigation.frames'), icon: Glasses, href: '/optical-shop/frames', roles: ['admin', 'staff'] },
        { id: 'optical-lenses', label: t('navigation.lensInventory'), icon: Package, href: '/optical-shop/lenses', roles: ['admin', 'staff'] }
      ]
    },
    { 
      id: 'ocular-imaging', 
      label: t('navigation.ocularImaging'), 
      icon: Scan, 
      href: '/imaging', 
      roles: ['admin', 'doctor', 'staff'],
      children: [
        { id: 'oct-scans', label: t('navigation.octScans'), icon: Scan, href: '/imaging/oct', roles: ['admin', 'doctor', 'staff'] },
        { id: 'fundus-photos', label: t('navigation.fundusPhotos'), icon: Camera, href: '/imaging/fundus', roles: ['admin', 'doctor', 'staff'] },
        { id: 'topography', label: t('navigation.topography'), icon: Focus, href: '/imaging/topography', roles: ['admin', 'doctor', 'staff'] },
        { id: 'imaging-incoming', label: t('navigation.incomingImages'), icon: ImageDown, href: '/imaging/incoming', roles: ['admin', 'staff'] },
        { id: 'imaging-devices', label: t('navigation.imagingDevices'), icon: MonitorPlay, href: '/imaging/devices', roles: ['admin'] }
      ]
    },
    { 
      id: 'documents', 
      label: t('navigation.documents'), 
      icon: FolderOpen, 
      href: '/documents', 
      roles: ['admin', 'doctor', 'staff'],
      children: [
        { id: 'documents-list', label: t('documents.title'), icon: Files, href: '/documents', roles: ['admin', 'doctor', 'staff'] },
        { id: 'documents-new', label: t('documents.addNew'), icon: FilePlus, href: '/documents/new', roles: ['admin', 'doctor', 'staff'] }
      ]
    },
    { 
      id: 'telemedicine', 
      label: t('navigation.telemedicine') || 'Telemedicine', 
      icon: Video, 
      href: '/telemedicine', 
      roles: ['admin', 'doctor', 'staff'],
      children: [
        { id: 'telemedicine-dashboard', label: t('telemedicine.dashboard') || 'Dashboard', icon: Video, href: '/telemedicine', roles: ['admin', 'doctor', 'staff'] },
        { id: 'telemedicine-sessions', label: t('telemedicine.sessions') || 'All Sessions', icon: MessageCircle, href: '/telemedicine/sessions', roles: ['admin', 'doctor', 'staff'] },
        { id: 'telemedicine-new', label: t('telemedicine.newSession') || 'New Session', icon: Plus, href: '/telemedicine/sessions/new', roles: ['admin', 'doctor', 'staff'] },
        { id: 'telemedicine-waiting', label: t('telemedicine.waitingRoom') || 'Waiting Room', icon: Clock, href: '/telemedicine/waiting-room', roles: ['admin', 'doctor', 'staff'] }
      ]
    },
    { 
      id: 'analytical-reports', 
      label: t('navigation.analyticalReports'), 
      icon: BarChart3, 
      href: '/analytical-reports', 
      roles: ['admin', 'doctor', 'staff'],
      children: [
        { id: 'financial-reports', label: t('navigation.financialReports'), icon: DollarSign, href: '/analytical-reports/financial', roles: ['admin', 'staff'] },
        { id: 'clinical-analytics', label: t('navigation.clinicalAnalytics'), icon: Activity, href: '/analytical-reports/clinical', roles: ['admin', 'doctor', 'staff'] },
        { id: 'operational-analytics', label: t('navigation.operationalAnalytics'), icon: LineChart, href: '/analytical-reports/operational', roles: ['admin', 'staff'] },
        { id: 'performance-reports', label: t('navigation.performanceReports'), icon: Target, href: '/analytical-reports/performance', roles: ['admin', 'doctor'] },
        { id: 'patient-analytics', label: t('navigation.patientAnalytics'), icon: Users, href: '/analytical-reports/patient', roles: ['admin', 'doctor', 'staff'] },
        { id: 'appointment-analytics', label: t('navigation.appointmentAnalytics'), icon: Calendar, href: '/analytical-reports/appointment', roles: ['admin', 'doctor', 'staff'] }
      ]
    },
    { 
      id: 'billing', 
      label: t('navigation.billing'), 
      icon: Receipt, 
      href: '/billing', 
      roles: ['admin', 'doctor', 'staff'],
      children: [
        { id: 'billing-home', label: t('billing.title'), icon: Receipt, href: '/billing', roles: ['admin', 'doctor', 'staff'] },
        { id: 'billing-new', label: t('billing.addNewInvoice'), icon: Plus, href: '/billing/invoices/new', roles: ['admin', 'doctor', 'staff'] },
        { id: 'service-items', label: t('navigation.serviceItems'), icon: List, href: '/billing/service-items', roles: ['admin', 'staff'] }
      ]
    },
    { id: 'notifications', label: t('navigation.notifications') || 'Notifications', icon: Bell, href: '/notifications', roles: ['admin', 'doctor', 'staff'] },
    { id: 'staff', label: t('navigation.staff'), icon: UserCheck, href: '/staff', roles: ['admin'] },
    { 
      id: 'ai-tools', 
      label: t('navigation.aiTools'), 
      icon: Brain, 
      href: '/ai-assistant', 
      roles: ['admin', 'doctor', 'staff'],
      children: [
        { id: 'ai-assistant', label: t('navigation.aiAssistant'), icon: Sparkles, href: '/ai-assistant', roles: ['admin', 'doctor', 'staff'] },
        { id: 'ai-treatment-recommendations', label: t('navigation.aiTreatmentRecommendations'), icon: Stethoscope, href: '/ai-treatment-recommendations', roles: ['admin', 'doctor', 'staff'] },
        { id: 'ai-drug-interaction', label: t('navigation.aiDrugInteraction'), icon: Pill, href: '/ai-drug-interaction', roles: ['admin', 'doctor', 'staff'] },
        { id: 'ai-medical-image', label: t('navigation.aiMedicalImage'), icon: Camera, href: '/ai-medical-image', roles: ['admin', 'doctor', 'staff'] },
        { id: 'ai-voice-input', label: t('navigation.aiVoiceInput'), icon: Mic, href: '/ai-voice-input', roles: ['admin', 'doctor', 'staff'] }
      ]
    }
  ].filter(item => {
    const userRole = session?.user?.role || 'doctor';
    // Filter parent items
    if (!item.roles.includes(userRole)) return false;
    // Filter children if they exist
    if (item.children) {
      item.children = item.children.filter(child => child.roles.includes(userRole));
      // If no children remain and parent has no direct href functionality, we might want to hide it
      // But for billing, we want to show it even if user can't access service-items
    }
    return true;
  });

  const handleLogout = () => {
    signOut({ callbackUrl: '/login' });
  };

  // Close profile menus when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (profileMenuRef.current && !profileMenuRef.current.contains(event.target as Node)) {
        setProfileMenuOpen(false);
      }
      if (mobileProfileMenuRef.current && !mobileProfileMenuRef.current.contains(event.target as Node)) {
        setMobileProfileMenuOpen(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  const isActiveRoute = (href: string) => {
    if (href === '/') {
      return pathname === '/';
    }
    return pathname.startsWith(href);
  };

  // Auto-expand billing, reports, and lab menus if on their pages
  useEffect(() => {
    if (pathname.startsWith('/billing')) {
      setExpandedMenus(prev => new Set(prev).add('billing'));
    }
    if (pathname.startsWith('/analytical-reports')) {
      setExpandedMenus(prev => new Set(prev).add('analytical-reports'));
    }
    if (pathname.startsWith('/documents')) {
      setExpandedMenus(prev => new Set(prev).add('documents'));
    }
    if (pathname.startsWith('/appointments') || pathname.startsWith('/calendar')) {
      setExpandedMenus(prev => new Set(prev).add('appointments'));
    }
    if (pathname.startsWith('/ai-')) {
      setExpandedMenus(prev => new Set(prev).add('ai-tools'));
    }
    if (pathname.startsWith('/eye-exam')) {
      setExpandedMenus(prev => new Set(prev).add('eye-exam'));
    }
    if (pathname.startsWith('/prescriptions')) {
      setExpandedMenus(prev => new Set(prev).add('prescriptions'));
    }
    if (pathname.startsWith('/glaucoma')) {
      setExpandedMenus(prev => new Set(prev).add('glaucoma'));
    }
    if (pathname.startsWith('/dr-screening')) {
      setExpandedMenus(prev => new Set(prev).add('dr-screening'));
    }
    if (pathname.startsWith('/surgery')) {
      setExpandedMenus(prev => new Set(prev).add('surgery'));
    }
    if (pathname.startsWith('/optical-shop')) {
      setExpandedMenus(prev => new Set(prev).add('optical-shop'));
    }
    if (pathname.startsWith('/imaging') || pathname.startsWith('/oct') || pathname.startsWith('/fundus')) {
      setExpandedMenus(prev => new Set(prev).add('ocular-imaging'));
    }
  }, [pathname]);

  // Show loading state if translations aren't loaded yet
  if (!translationsLoaded) {
    return (
      <div className="min-h-screen bg-gray-50 flex">
        <div className="flex items-center justify-center w-full">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
            <p className="mt-4 text-gray-600">Loading translations...</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 flex">
      {/* Mobile sidebar overlay */}
      {sidebarOpen && (
        <div 
          className="fixed inset-0 bg-gray-600 bg-opacity-75 z-40 lg:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      {/* Sidebar */}
      <div className={`
        fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0
        ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
      `}>
        {/* Sidebar Header */}
        <div className="flex items-center justify-between h-16 px-6 border-b border-gray-200">
          <div className="flex items-center space-x-3">
            <div className="w-8 h-8 bg-teal-600 rounded-lg flex items-center justify-center">
              <Eye className="h-5 w-5 text-white" />
            </div>
            <div>
              <h1 className="text-xl font-bold text-gray-900">
                {settings?.systemTitle || ''}
              </h1>
              <p className="text-xs text-gray-700">
                {settings?.systemDescription || ''}
              </p>
            </div>
          </div>
          <button
            onClick={() => setSidebarOpen(false)}
            className="lg:hidden p-1 rounded-md text-gray-400 hover:text-gray-600"
          >
            <X className="h-6 w-6" />
          </button>
        </div>


        {/* Navigation Menu */}
        <nav className="px-3 py-4 space-y-1">
          {navigation.map((item) => {
            const hasChildren = item.children && item.children.length > 0;
            const isExpanded = expandedMenus.has(item.id);
            const isActive = isActiveRoute(item.href) || (hasChildren && item.children?.some(child => isActiveRoute(child.href)));

            return (
              <div key={item.id}>
                {hasChildren ? (
                  <>
                    <button
                      onClick={() => toggleSubmenu(item.id)}
                      className={`
                        w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors
                        ${isActive
                          ? 'bg-blue-100 text-blue-700'
                          : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
                        }
                      `}
                    >
                      <div className="flex items-center space-x-3">
                        <item.icon className="h-5 w-5" />
                        <span>{item.label}</span>
                      </div>
                      {isExpanded ? (
                        <ChevronDown className="h-4 w-4" />
                      ) : (
                        <ChevronRight className="h-4 w-4" />
                      )}
                    </button>
                    {isExpanded && hasChildren && (
                      <div className="ml-4 mt-1 space-y-1">
                        {item.children?.map((child) => (
                          <Link
                            key={child.id}
                            href={child.href}
                            className={`
                              flex items-center space-x-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors
                              ${isActiveRoute(child.href)
                                ? 'bg-blue-100 text-blue-700'
                                : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
                              }
                            `}
                            onClick={() => setSidebarOpen(false)}
                          >
                            <child.icon className="h-4 w-4" />
                            <span>{child.label}</span>
                          </Link>
                        ))}
                      </div>
                    )}
                  </>
                ) : (
            <Link
              href={item.href}
              className={`
                flex items-center space-x-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors
                      ${isActive
                  ? 'bg-blue-100 text-blue-700'
                  : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
                }
              `}
              onClick={() => setSidebarOpen(false)}
            >
              <item.icon className="h-5 w-5" />
              <span>{item.label}</span>
            </Link>
                )}
              </div>
            );
          })}
        </nav>

        {/* General Settings - Admin Only */}
        {isAdmin && (
          <div className="px-3 py-4 border-t border-gray-200">
            <div className="space-y-1">
              <Link
                href="/settings"
                className="flex items-center space-x-3 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors"
                onClick={() => setSidebarOpen(false)}
              >
                <Settings className="h-4 w-4 text-gray-600" />
                <span>{t('settings.title')}</span>
              </Link>
              <Link
                href="/settings/notifications"
                className="flex items-center space-x-3 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors"
                onClick={() => setSidebarOpen(false)}
              >
                <Bell className="h-4 w-4 text-blue-600" />
                <span>{t('settings.notifications') || 'Notification Settings'}</span>
              </Link>
              <Link
                href="/ai-settings"
                className="flex items-center space-x-3 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors"
                onClick={() => setSidebarOpen(false)}
              >
                <Settings className="h-4 w-4 text-purple-600" />
                <span>{t('navigation.aiSettings')}</span>
              </Link>
            </div>
          </div>
        )}

        {/* Quick Actions */}
        <div className="px-3 py-4 border-t border-gray-200">
          <h3 className="text-xs font-semibold text-gray-700 uppercase tracking-wider mb-3 px-3">
            {t('ai.quickActions.title')}
          </h3>
          <div className="space-y-1">
            <Link
              href="/patients/new"
              className="flex items-center space-x-3 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors"
              onClick={() => setSidebarOpen(false)}
            >
              <Plus className="h-4 w-4 text-blue-600" />
              <span>{t('ai.quickActions.newPatient')}</span>
            </Link>
            <Link
              href="/appointments/new"
              className="flex items-center space-x-3 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors"
              onClick={() => setSidebarOpen(false)}
            >
              <Plus className="h-4 w-4 text-green-600" />
              <span>{t('ai.quickActions.newAppointment')}</span>
            </Link>
            {isAdmin && (
              <Link
                href="/doctors/new"
                className="flex items-center space-x-3 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors"
                onClick={() => setSidebarOpen(false)}
              >
                <UserPlus className="h-4 w-4 text-purple-600" />
                <span>{t('ai.quickActions.newDoctor')}</span>
              </Link>
            )}
          </div>
        </div>

        {/* Language Switcher */}
        <div className="px-3 py-4 border-t border-gray-200">
          <div className="px-3">
            <LanguageSwitcher />
          </div>
        </div>

        {/* User Profile */}
        <div className="px-3 py-4 border-t border-gray-200">
          <div className="relative" ref={profileMenuRef}>
            <button
              onClick={() => setProfileMenuOpen(!profileMenuOpen)}
              className="flex items-center space-x-3 w-full p-2 rounded-lg hover:bg-gray-100 transition-colors"
            >
              <div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold">
                {session?.user?.name?.charAt(0) || 'D'}
              </div>
              <div className="flex-1 min-w-0 text-left">
                <p className="text-sm font-medium text-gray-900 truncate">
                  {session?.user?.name || t('auth.doctor')}
                </p>
                <p className="text-xs text-gray-700">{session?.user?.role || t('auth.doctor')}</p>
              </div>
              <ChevronDown className={`h-4 w-4 text-gray-400 transition-transform ${profileMenuOpen ? 'rotate-180' : ''}`} />
            </button>

            {/* Profile Dropdown Menu */}
            {profileMenuOpen && (
              <div className="absolute bottom-full left-3 right-3 mb-2 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
                <div className="py-1">
                  <Link
                    href="/profile"
                    className="flex items-center space-x-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
                    onClick={() => setProfileMenuOpen(false)}
                  >
                    <User className="h-4 w-4" />
                    <span>{t('profile.profileSettings')}</span>
                  </Link>
                  <button
                    onClick={() => {
                      setProfileMenuOpen(false);
                      signOut({ callbackUrl: '/login' });
                    }}
                    className="flex items-center space-x-3 w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"
                  >
                    <LogOut className="h-4 w-4" />
                    <span>{t('profile.logout')}</span>
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex-1 flex flex-col lg:ml-0">
        {/* Top Header */}
        <header className="bg-white shadow-sm border-b border-gray-200 lg:hidden">
          <div className="flex items-center justify-between h-16 px-4">
            <button
              onClick={() => setSidebarOpen(true)}
              className="p-2 text-gray-400 hover:text-gray-600"
            >
              <Menu className="h-6 w-6" />
            </button>
            <div className="flex items-center space-x-4">
              <button className="p-2 text-gray-400 hover:text-gray-600">
                <Bell className="h-5 w-5" />
              </button>
              <LanguageSwitcher />
              <div className="relative" ref={mobileProfileMenuRef}>
                <button
                  onClick={() => setMobileProfileMenuOpen(!mobileProfileMenuOpen)}
                  className="flex items-center space-x-2 p-2 text-gray-400 hover:text-gray-600"
                >
                  <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold text-sm">
                    {session?.user?.name?.charAt(0) || 'D'}
                  </div>
                  <ChevronDown className={`h-4 w-4 transition-transform ${mobileProfileMenuOpen ? 'rotate-180' : ''}`} />
                </button>

                {/* Mobile Profile Dropdown Menu */}
                {mobileProfileMenuOpen && (
                  <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
                    <div className="py-1">
                      <div className="px-4 py-2 border-b border-gray-200">
                        <p className="text-sm font-medium text-gray-900">{session?.user?.name || t('auth.doctor')}</p>
                        <p className="text-xs text-gray-600">{session?.user?.email || 'doctor@icare.com'}</p>
                      </div>
                      <Link
                        href="/profile"
                        className="flex items-center space-x-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
                        onClick={() => setMobileProfileMenuOpen(false)}
                      >
                        <User className="h-4 w-4" />
                        <span>{t('profile.profileSettings')}</span>
                      </Link>
                      <button
                        onClick={() => {
                          setMobileProfileMenuOpen(false);
                          signOut({ callbackUrl: '/login' });
                        }}
                        className="flex items-center space-x-3 w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"
                      >
                        <LogOut className="h-4 w-4" />
                        <span>{t('profile.logout')}</span>
                      </button>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </header>

        {/* Page Content */}
        <main className="flex-1 overflow-y-auto">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            {/* Page Header */}
            <div className="mb-8 print:hidden">
              <h2 className="text-2xl font-bold text-gray-900">{title}</h2>
              {description && (
                                        <p className="text-gray-700">{description}</p>
              )}
            </div>

            {/* Page Content */}
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}