'use client';

import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { useEffect, useState, useRef } from 'react';
import Link from 'next/link';
import ProtectedRoute from './protected-route';
import SidebarLayout from './components/sidebar-layout';
import { useTranslations } from './hooks/useTranslations';
import { useSettings } from './contexts/SettingsContext';
import { useFormatCurrency } from './hooks/useFormatCurrency';
import { 
  Users, 
  Calendar, 
  TrendingUp,
  Clock,
  Activity,
  AlertCircle,
  CheckCircle,
  DollarSign,
  Pill,
  AlertTriangle,
  ArrowRight,
  UserPlus,
  Receipt,
  ChevronRight,
  CircleAlert,
  Eye,
  Glasses,
  Scissors,
  Target,
  Scan,
  Brain,
  Camera,
  FileText
} from 'lucide-react';

interface EyeClinicStats {
  stats: {
    totalPatients: number;
    todayAppointments: number;
    todayExams: number;
    weekExams: number;
    totalExams: number;
  };
  surgeryStats: {
    scheduled: number;
    completed: number;
    today: number;
    byType: { _id: string; count: number }[];
  };
  glaucomaStats: {
    total: number;
    uncontrolled: number;
    iopAverage: { avgOD: number; avgOS: number; maxOD: number; maxOS: number } | null;
  };
  drStats: {
    total: number;
    dueScreening: number;
    pdrCases: number;
    distribution: { _id: string; count: number }[];
  };
  opticalStats: {
    activePrescriptions: number;
    pendingOrders: number;
    readyOrders: number;
  };
  imagingStats: {
    todayOCT: number;
    todayFundus: number;
    weekTotal: number;
  };
  criticalAlerts: {
    id: string;
    type: string;
    title: string;
    description: string;
    link: string;
    icon: string;
  }[];
  upcomingSurgeries: any[];
  recentActivities: any[];
}

interface UpcomingAppointment {
  id: string;
  patient: string;
  time: string;
  type: string;
  status: string;
}

const getAlertIcon = (icon: string) => {
  switch (icon) {
    case 'glaucoma': return Activity;
    case 'dr': return Scan;
    case 'pdr': return AlertTriangle;
    case 'surgery': return Scissors;
    case 'optical': return Glasses;
    case 'exam': return Eye;
    case 'imaging': return Camera;
    default: return AlertCircle;
  }
};

const getAlertStyles = (type: string) => {
  switch (type) {
    case 'critical':
      return 'bg-red-50 border-red-200 text-red-800';
    case 'warning':
      return 'bg-amber-50 border-amber-200 text-amber-800';
    case 'info':
      return 'bg-blue-50 border-blue-200 text-blue-800';
    default:
      return 'bg-gray-50 border-gray-200 text-gray-800';
  }
};

const getAlertIconStyles = (type: string) => {
  switch (type) {
    case 'critical':
      return 'text-red-600';
    case 'warning':
      return 'text-amber-600';
    case 'info':
      return 'text-blue-600';
    default:
      return 'text-gray-600';
  }
};

export default function DashboardPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const { t, translationsLoaded } = useTranslations();
  const { settings } = useSettings();
  const formatCurrency = useFormatCurrency();

  const [eyeClinicStats, setEyeClinicStats] = useState<EyeClinicStats | null>(null);
  const [upcomingAppointments, setUpcomingAppointments] = useState<UpcomingAppointment[]>([]);
  const [todayRevenue, setTodayRevenue] = useState(0);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const dataFetchedRef = useRef(false);

  useEffect(() => {
    const fetchDashboardData = async () => {
      if (dataFetchedRef.current) return;

      try {
        setIsLoading(true);
        dataFetchedRef.current = true;

        const [eyeResponse, dashboardResponse] = await Promise.all([
          fetch('/api/eye-clinic/dashboard'),
          fetch('/api/dashboard')
        ]);

        if (eyeResponse.ok) {
          const eyeData = await eyeResponse.json();
          setEyeClinicStats(eyeData);
        }

        if (dashboardResponse.ok) {
          const dashData = await dashboardResponse.json();
          setUpcomingAppointments(dashData.upcomingAppointments || []);
          setTodayRevenue(dashData.operationalStats?.billing?.todayRevenue || 0);
        }

        setError(null);
      } catch (err) {
        console.error('Error fetching dashboard data:', err);
        setError('Failed to load dashboard data');
      } finally {
        setIsLoading(false);
      }
    };

    if (translationsLoaded && !dataFetchedRef.current) {
      fetchDashboardData();
    }
  }, [translationsLoaded]);

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

  if (status === 'unauthenticated') {
    router.push('/login');
    return null;
  }

  return (
    <ProtectedRoute>
      <SidebarLayout 
        title={t('dashboard.title')} 
        description={t('dashboard.description')}
      >
        <div className="space-y-6">
          {/* Welcome Section */}
          <div className="bg-gradient-to-r from-teal-600 to-cyan-700 rounded-2xl p-6 text-white shadow-lg">
            <div className="flex items-center justify-between">
              <div>
                <h1 className="text-2xl font-bold mb-2">
                  {t('dashboard.welcome.title', { name: `Dr. ${session?.user?.name || 'Doctor'}` })}
                </h1>
                <p className="text-teal-100">
                  {new Date().toLocaleDateString(settings?.language || 'en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
                </p>
                <div className="flex gap-6 mt-4">
                  <div>
                    <p className="text-3xl font-bold">{eyeClinicStats?.stats.todayAppointments || 0}</p>
                    <p className="text-teal-200 text-sm">{t('dashboard.stats.appointmentsToday')}</p>
                  </div>
                  <div>
                    <p className="text-3xl font-bold">{eyeClinicStats?.stats.todayExams || 0}</p>
                    <p className="text-teal-200 text-sm">{t('dashboard.stats.eyeExamsToday')}</p>
                  </div>
                  <div>
                    <p className="text-3xl font-bold">{eyeClinicStats?.surgeryStats.today || 0}</p>
                    <p className="text-teal-200 text-sm">{t('dashboard.stats.surgeriesToday')}</p>
                  </div>
                </div>
              </div>
              <Eye className="h-24 w-24 text-teal-200 opacity-30" />
            </div>
          </div>

          {/* Quick Actions */}
          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
            <Link href="/eye-exam/new" className="flex flex-col items-center gap-3 p-4 bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md hover:border-teal-300 transition-all group">
              <div className="p-3 bg-teal-100 rounded-full group-hover:bg-teal-200 transition-colors">
                <Eye className="h-6 w-6 text-teal-600" />
              </div>
              <span className="text-sm font-medium text-gray-700">{t('dashboard.quickActions.newEyeExam')}</span>
            </Link>
            <Link href="/prescriptions/new" className="flex flex-col items-center gap-3 p-4 bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md hover:border-blue-300 transition-all group">
              <div className="p-3 bg-blue-100 rounded-full group-hover:bg-blue-200 transition-colors">
                <Glasses className="h-6 w-6 text-blue-600" />
              </div>
              <span className="text-sm font-medium text-gray-700">{t('dashboard.quickActions.newPrescription')}</span>
            </Link>
            <Link href="/surgery/new" className="flex flex-col items-center gap-3 p-4 bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md hover:border-purple-300 transition-all group">
              <div className="p-3 bg-purple-100 rounded-full group-hover:bg-purple-200 transition-colors">
                <Scissors className="h-6 w-6 text-purple-600" />
              </div>
              <span className="text-sm font-medium text-gray-700">{t('dashboard.quickActions.scheduleSurgery')}</span>
            </Link>
            <Link href="/surgery/iol-calculator" className="flex flex-col items-center gap-3 p-4 bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md hover:border-amber-300 transition-all group">
              <div className="p-3 bg-amber-100 rounded-full group-hover:bg-amber-200 transition-colors">
                <Target className="h-6 w-6 text-amber-600" />
              </div>
              <span className="text-sm font-medium text-gray-700">{t('dashboard.quickActions.iolCalculator')}</span>
            </Link>
            <Link href="/dr-screening/ai-analysis" className="flex flex-col items-center gap-3 p-4 bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md hover:border-indigo-300 transition-all group">
              <div className="p-3 bg-indigo-100 rounded-full group-hover:bg-indigo-200 transition-colors">
                <Brain className="h-6 w-6 text-indigo-600" />
              </div>
              <span className="text-sm font-medium text-gray-700">{t('dashboard.quickActions.aiDRAnalysis')}</span>
            </Link>
            <Link href="/patients/new" className="flex flex-col items-center gap-3 p-4 bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md hover:border-green-300 transition-all group">
              <div className="p-3 bg-green-100 rounded-full group-hover:bg-green-200 transition-colors">
                <UserPlus className="h-6 w-6 text-green-600" />
              </div>
              <span className="text-sm font-medium text-gray-700">{t('dashboard.quickActions.newPatient')}</span>
            </Link>
          </div>

          {/* Critical Alerts */}
          {eyeClinicStats?.criticalAlerts && eyeClinicStats.criticalAlerts.length > 0 && (
            <div className="space-y-3">
              <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
                <CircleAlert className="h-5 w-5 text-red-600" />
                {t('dashboard.criticalAlerts.attentionRequired')}
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                {eyeClinicStats.criticalAlerts.map((alert) => {
                  const AlertIcon = getAlertIcon(alert.icon);
                  return (
                    <Link
                      key={alert.id}
                      href={alert.link}
                      className={`flex items-center gap-3 p-4 rounded-xl border transition-all hover:shadow-md ${getAlertStyles(alert.type)}`}
                    >
                      <AlertIcon className={`h-5 w-5 flex-shrink-0 ${getAlertIconStyles(alert.type)}`} />
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-sm">{alert.title}</p>
                        <p className="text-xs opacity-75">{alert.description}</p>
                      </div>
                      <ChevronRight className="h-4 w-4 flex-shrink-0 opacity-50" />
                    </Link>
                  );
                })}
              </div>
            </div>
          )}

          {/* Main Stats Cards */}
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
            {/* Total Patients */}
            <Link href="/patients" className="bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition-all border border-gray-100">
              <div className="flex items-center justify-between mb-3">
                <Users className="h-8 w-8 text-teal-600" />
                <span className="text-xs text-green-600 font-medium flex items-center">
                  <TrendingUp className="h-3 w-3 mr-1" />
                  {t('common.active')}
                </span>
              </div>
              <p className="text-2xl font-bold text-gray-900">{eyeClinicStats?.stats.totalPatients || 0}</p>
              <p className="text-sm text-gray-500">{t('dashboard.stats.totalPatients')}</p>
            </Link>

            {/* Eye Exams */}
            <Link href="/eye-exam" className="bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition-all border border-gray-100">
              <div className="flex items-center justify-between mb-3">
                <Eye className="h-8 w-8 text-blue-600" />
                <span className="px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full text-xs font-medium">
                  {eyeClinicStats?.stats.todayExams || 0} {t('dashboard.stats.today')}
                </span>
              </div>
              <p className="text-2xl font-bold text-gray-900">{eyeClinicStats?.stats.weekExams || 0}</p>
              <p className="text-sm text-gray-500">{t('dashboard.stats.examsThisWeek')}</p>
            </Link>

            {/* Surgeries */}
            <Link href="/surgery" className="bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition-all border border-gray-100">
              <div className="flex items-center justify-between mb-3">
                <Scissors className="h-8 w-8 text-purple-600" />
                <span className="px-2 py-0.5 bg-purple-100 text-purple-700 rounded-full text-xs font-medium">
                  {eyeClinicStats?.surgeryStats.scheduled || 0} {t('dashboard.stats.scheduled')}
                </span>
              </div>
              <p className="text-2xl font-bold text-gray-900">{eyeClinicStats?.surgeryStats.completed || 0}</p>
              <p className="text-sm text-gray-500">{t('dashboard.stats.surgeriesCompleted')}</p>
            </Link>

            {/* Optical Prescriptions */}
            <Link href="/prescriptions" className="bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition-all border border-gray-100">
              <div className="flex items-center justify-between mb-3">
                <Glasses className="h-8 w-8 text-amber-600" />
                {eyeClinicStats?.opticalStats.pendingOrders > 0 && (
                  <span className="px-2 py-0.5 bg-amber-100 text-amber-700 rounded-full text-xs font-medium">
                    {eyeClinicStats.opticalStats.pendingOrders} {t('dashboard.stats.pending')}
                  </span>
                )}
              </div>
              <p className="text-2xl font-bold text-gray-900">{eyeClinicStats?.opticalStats.activePrescriptions || 0}</p>
              <p className="text-sm text-gray-500">{t('dashboard.stats.activePrescriptions')}</p>
            </Link>

            {/* Revenue */}
            <Link href="/billing" className="bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition-all border border-gray-100">
              <div className="flex items-center justify-between mb-3">
                <DollarSign className="h-8 w-8 text-green-600" />
                <span className="text-xs text-green-600 font-medium">{t('dashboard.stats.today')}</span>
              </div>
              <p className="text-2xl font-bold text-gray-900">{formatCurrency(todayRevenue)}</p>
              <p className="text-sm text-gray-500">{t('dashboard.stats.todayRevenue')}</p>
            </Link>
          </div>

          {/* Specialty Centers Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {/* Glaucoma Center */}
            <Link href="/glaucoma" className="bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition-all border border-gray-100">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-blue-100 rounded-lg">
                    <Activity className="h-5 w-5 text-blue-600" />
                  </div>
                  <h4 className="font-semibold text-gray-900">{t('dashboard.centers.glaucomaCenter')}</h4>
                </div>
              </div>
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-500">{t('dashboard.centerStats.totalPatients')}</span>
                  <span className="font-semibold text-gray-900">{eyeClinicStats?.glaucomaStats.total || 0}</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-500">{t('dashboard.centerStats.uncontrolledIOP')}</span>
                  <span className={`font-semibold ${(eyeClinicStats?.glaucomaStats.uncontrolled || 0) > 0 ? 'text-red-600' : 'text-green-600'}`}>
                    {eyeClinicStats?.glaucomaStats.uncontrolled || 0}
                  </span>
                </div>
                {eyeClinicStats?.glaucomaStats.iopAverage && (
                  <div className="flex justify-between items-center">
                    <span className="text-sm text-gray-500">{t('dashboard.centerStats.avgIOP')}</span>
                    <span className="font-mono text-sm">
                      {eyeClinicStats.glaucomaStats.iopAverage.avgOD?.toFixed(1)}/{eyeClinicStats.glaucomaStats.iopAverage.avgOS?.toFixed(1)}
                    </span>
                  </div>
                )}
              </div>
            </Link>

            {/* DR Screening */}
            <Link href="/dr-screening" className="bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition-all border border-gray-100">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-indigo-100 rounded-lg">
                    <Scan className="h-5 w-5 text-indigo-600" />
                  </div>
                  <h4 className="font-semibold text-gray-900">{t('dashboard.centers.drScreening')}</h4>
                </div>
              </div>
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-500">{t('dashboard.centerStats.totalDiabeticPatients')}</span>
                  <span className="font-semibold text-gray-900">{eyeClinicStats?.drStats.total || 0}</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-500">{t('dashboard.centerStats.dueForScreening')}</span>
                  <span className={`font-semibold ${(eyeClinicStats?.drStats.dueScreening || 0) > 0 ? 'text-amber-600' : 'text-green-600'}`}>
                    {eyeClinicStats?.drStats.dueScreening || 0}
                  </span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-500">{t('dashboard.centerStats.pdrCases')}</span>
                  <span className={`font-semibold ${(eyeClinicStats?.drStats.pdrCases || 0) > 0 ? 'text-red-600' : 'text-gray-600'}`}>
                    {eyeClinicStats?.drStats.pdrCases || 0}
                  </span>
                </div>
              </div>
            </Link>

            {/* Ocular Imaging */}
            <Link href="/imaging/oct" className="bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition-all border border-gray-100">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-cyan-100 rounded-lg">
                    <Camera className="h-5 w-5 text-cyan-600" />
                  </div>
                  <h4 className="font-semibold text-gray-900">{t('dashboard.centers.imagingCenter')}</h4>
                </div>
              </div>
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-500">{t('dashboard.centerStats.octScansToday')}</span>
                  <span className="font-semibold text-gray-900">{eyeClinicStats?.imagingStats?.todayOCT || 0}</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-500">{t('dashboard.centerStats.fundusPhotosToday')}</span>
                  <span className="font-semibold text-gray-900">{eyeClinicStats?.imagingStats?.todayFundus || 0}</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-500">{t('dashboard.centerStats.thisWeekTotal')}</span>
                  <span className="font-semibold text-cyan-600">{eyeClinicStats?.imagingStats?.weekTotal || 0}</span>
                </div>
              </div>
            </Link>

            {/* Optical Shop */}
            <Link href="/optical-shop" className="bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition-all border border-gray-100">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-green-100 rounded-lg">
                    <Glasses className="h-5 w-5 text-green-600" />
                  </div>
                  <h4 className="font-semibold text-gray-900">{t('dashboard.centers.opticalShop')}</h4>
                </div>
              </div>
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-500">{t('dashboard.centerStats.activePrescriptions')}</span>
                  <span className="font-semibold text-gray-900">{eyeClinicStats?.opticalStats.activePrescriptions || 0}</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-500">{t('dashboard.centerStats.pendingOrders')}</span>
                  <span className={`font-semibold ${(eyeClinicStats?.opticalStats.pendingOrders || 0) > 0 ? 'text-amber-600' : 'text-gray-600'}`}>
                    {eyeClinicStats?.opticalStats.pendingOrders || 0}
                  </span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-500">{t('dashboard.centerStats.readyForPickup')}</span>
                  <span className="font-semibold text-green-600">{eyeClinicStats?.opticalStats.readyOrders || 0}</span>
                </div>
              </div>
            </Link>
          </div>

          {/* Two Column Layout */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {/* Upcoming Surgeries */}
            <div className="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-100">
              <div className="p-5 border-b border-gray-100 flex justify-between items-center">
                <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
                  <Scissors className="h-5 w-5 text-purple-600" />
                  {t('dashboard.upcomingSurgeries.title')}
                </h3>
                <Link href="/surgery" className="text-sm text-purple-600 hover:text-purple-700 font-medium flex items-center gap-1">
                  {t('dashboard.recentActivity.viewAll')} <ArrowRight className="h-4 w-4" />
                </Link>
              </div>
              <div className="p-5">
                {isLoading ? (
                  <div className="space-y-3">
                    {[1, 2, 3].map((i) => (
                      <div key={i} className="animate-pulse flex items-center gap-4 p-3 bg-gray-50 rounded-lg">
                        <div className="h-10 w-10 bg-gray-200 rounded-full"></div>
                        <div className="flex-1">
                          <div className="h-4 bg-gray-200 rounded w-1/3 mb-2"></div>
                          <div className="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : eyeClinicStats?.upcomingSurgeries && eyeClinicStats.upcomingSurgeries.length > 0 ? (
                  <div className="space-y-3">
                    {eyeClinicStats.upcomingSurgeries.slice(0, 5).map((surgery: any) => (
                      <Link
                        key={surgery._id}
                        href={`/surgery/${surgery._id}`}
                        className="flex items-center justify-between p-4 bg-purple-50 rounded-xl hover:bg-purple-100 transition-colors"
                      >
                        <div className="flex items-center gap-4">
                          <div className="p-2 bg-purple-200 rounded-full">
                            <Scissors className="h-5 w-5 text-purple-700" />
                          </div>
                          <div>
                            <p className="font-medium text-gray-900">{surgery.patientId?.name || t('patients.patient')}</p>
                            <p className="text-sm text-gray-600 capitalize">
                              {surgery.surgeryType?.replace('_', ' ')} - {surgery.procedure}
                            </p>
                          </div>
                        </div>
                        <div className="text-right">
                          <p className="font-medium text-purple-700">
                            {new Date(surgery.surgeryDate).toLocaleDateString(settings?.language || 'en-US')}
                          </p>
                          <p className="text-sm text-gray-500">{surgery.surgeonId?.name || t('surgery.tableHeaders.surgeon')}</p>
                        </div>
                      </Link>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-12">
                    <Scissors className="h-12 w-12 text-gray-300 mx-auto mb-3" />
                    <p className="text-gray-500">{t('dashboard.upcomingSurgeries.noSurgeries')}</p>
                    <Link href="/surgery/new" className="text-purple-600 hover:text-purple-700 text-sm mt-2 inline-block">
                      {t('dashboard.upcomingSurgeries.scheduleSurgery')}
                    </Link>
                  </div>
                )}
              </div>
            </div>

            {/* Right Column */}
            <div className="space-y-6">
              {/* Today's Appointments */}
              <div className="bg-white rounded-xl shadow-sm border border-gray-100">
                <div className="p-5 border-b border-gray-100 flex justify-between items-center">
                  <h3 className="font-semibold text-gray-900 flex items-center gap-2">
                    <Calendar className="h-5 w-5 text-teal-600" />
                    {t('dashboard.todayAppointments.title')}
                  </h3>
                  <Link href="/appointments" className="text-sm text-teal-600 hover:text-teal-700">
                    {t('dashboard.upcomingAppointments.viewAll')}
                  </Link>
                </div>
                <div className="p-5">
                  {isLoading ? (
                    <div className="space-y-3">
                      {[1, 2, 3].map((i) => (
                        <div key={i} className="animate-pulse p-3 bg-gray-50 rounded-lg">
                          <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                          <div className="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                      ))}
                    </div>
                  ) : upcomingAppointments.length > 0 ? (
                    <div className="space-y-3">
                      {upcomingAppointments.slice(0, 5).map((apt) => (
                        <Link
                          key={apt.id}
                          href={`/appointments/${apt.id}`}
                          className="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
                        >
                          <div className="flex items-center gap-3">
                            <Clock className="h-4 w-4 text-gray-400" />
                            <div>
                              <p className="text-sm font-medium text-gray-900">{apt.patient}</p>
                              <p className="text-xs text-gray-500">{apt.type}</p>
                            </div>
                          </div>
                          <div className="text-right">
                            <p className="text-sm font-medium text-gray-900">{apt.time}</p>
                            <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
                              apt.status === 'confirmed' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'
                            }`}>
                              {apt.status === 'confirmed' ? <CheckCircle className="h-3 w-3 mr-1" /> : <Clock className="h-3 w-3 mr-1" />}
                              {t(`dashboard.upcomingAppointments.status.${apt.status}`)}
                            </span>
                          </div>
                        </Link>
                      ))}
                    </div>
                  ) : (
                    <div className="text-center py-8">
                      <Clock className="h-10 w-10 text-gray-300 mx-auto mb-2" />
                      <p className="text-gray-500 text-sm">{t('dashboard.todayAppointments.noAppointments')}</p>
                    </div>
                  )}
                </div>
              </div>

              {/* Quick Links */}
              <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h3 className="font-semibold text-gray-900 mb-4">{t('dashboard.quickLinks.title')}</h3>
                <div className="grid grid-cols-2 gap-3">
                  <Link href="/glaucoma/iop" className="flex items-center gap-2 p-3 rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50 transition-all">
                    <Activity className="h-5 w-5 text-blue-600" />
                    <span className="text-sm font-medium text-gray-700">{t('dashboard.quickLinks.iopTracking')}</span>
                  </Link>
                  <Link href="/imaging/oct" className="flex items-center gap-2 p-3 rounded-lg border border-gray-200 hover:border-cyan-300 hover:bg-cyan-50 transition-all">
                    <Scan className="h-5 w-5 text-cyan-600" />
                    <span className="text-sm font-medium text-gray-700">{t('dashboard.quickLinks.octScans')}</span>
                  </Link>
                  <Link href="/imaging/fundus" className="flex items-center gap-2 p-3 rounded-lg border border-gray-200 hover:border-amber-300 hover:bg-amber-50 transition-all">
                    <Camera className="h-5 w-5 text-amber-600" />
                    <span className="text-sm font-medium text-gray-700">{t('dashboard.quickLinks.fundusPhotos')}</span>
                  </Link>
                  <Link href="/billing/invoices/new" className="flex items-center gap-2 p-3 rounded-lg border border-gray-200 hover:border-green-300 hover:bg-green-50 transition-all">
                    <Receipt className="h-5 w-5 text-green-600" />
                    <span className="text-sm font-medium text-gray-700">{t('dashboard.quickActions.newInvoice')}</span>
                  </Link>
                </div>
              </div>
            </div>
          </div>

          {/* Surgery Type Distribution */}
          {eyeClinicStats?.surgeryStats.byType && eyeClinicStats.surgeryStats.byType.length > 0 && (
            <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
              <h3 className="font-semibold text-gray-900 mb-4">{t('dashboard.surgeryDistribution')}</h3>
              <div className="flex flex-wrap gap-3">
                {eyeClinicStats.surgeryStats.byType.map((type) => (
                  <div key={type._id} className="flex items-center gap-2 px-4 py-2 bg-purple-50 rounded-lg">
                    <span className="text-sm font-medium text-purple-800 capitalize">{type._id.replace('_', ' ')}</span>
                    <span className="px-2 py-0.5 bg-purple-200 text-purple-800 rounded-full text-xs font-bold">{type.count}</span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </SidebarLayout>
    </ProtectedRoute>
  );
}