'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import SidebarLayout from '../components/sidebar-layout';
import ProtectedRoute from '../protected-route';
import { useTranslations } from '../hooks/useTranslations';
import { 
  Scissors, 
  Plus, 
  Search, 
  Calendar,
  User,
  ChevronRight,
  Clock,
  CheckCircle,
  AlertCircle,
  Eye,
  Target,
  Zap
} from 'lucide-react';

interface Surgery {
  _id: string;
  surgeryNumber: string;
  patientId: {
    _id: string;
    name: string;
    patientId: string;
  };
  surgeonId: {
    name: string;
  };
  surgeryDate: string;
  surgeryType: string;
  status: string;
  preOperativeAssessment: {
    diagnosis: string;
  };
  surgeryDetails?: {
    cataract?: { eye: string };
    refractive?: { eye: string };
  };
}

export default function SurgeryPage() {
  const { t } = useTranslations();
  const [surgeries, setSurgeries] = useState<Surgery[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [typeFilter, setTypeFilter] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [dateFilter, setDateFilter] = useState('');

  useEffect(() => {
    fetchSurgeries();
  }, [typeFilter, statusFilter, dateFilter]);

  const fetchSurgeries = async () => {
    try {
      setIsLoading(true);
      const params = new URLSearchParams();
      if (typeFilter) params.append('surgeryType', typeFilter);
      if (statusFilter) params.append('status', statusFilter);
      if (dateFilter) params.append('startDate', dateFilter);
      
      const response = await fetch(`/api/surgery?${params.toString()}`);
      const data = await response.json();
      setSurgeries(data.surgeries || []);
    } catch (error) {
      console.error('Error fetching surgeries:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const filteredSurgeries = surgeries.filter(surgery => {
    if (!searchTerm) return true;
    const search = searchTerm.toLowerCase();
    return (
      surgery.patientId?.name?.toLowerCase().includes(search) ||
      surgery.patientId?.patientId?.toLowerCase().includes(search) ||
      surgery.surgeryNumber?.toLowerCase().includes(search)
    );
  });

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'scheduled': return 'bg-blue-100 text-blue-700';
      case 'inProgress': return 'bg-yellow-100 text-yellow-700';
      case 'completed': return 'bg-green-100 text-green-700';
      case 'cancelled': return 'bg-red-100 text-red-700';
      case 'postponed': return 'bg-gray-100 text-gray-700';
      default: return 'bg-gray-100 text-gray-700';
    }
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'scheduled': return Clock;
      case 'inProgress': return Zap;
      case 'completed': return CheckCircle;
      case 'cancelled': return AlertCircle;
      default: return Clock;
    }
  };

  const getSurgeryTypeLabel = (type: string) => {
    switch (type) {
      case 'cataract': return 'Cataract';
      case 'refractive': return 'Refractive';
      case 'retinal': return 'Retinal';
      case 'glaucoma': return 'Glaucoma';
      case 'oculoplastic': return 'Oculoplastic';
      case 'corneal': return 'Corneal';
      case 'strabismus': return 'Strabismus';
      default: return type;
    }
  };

  const getSurgeryTypeIcon = (type: string) => {
    switch (type) {
      case 'cataract': return '💎';
      case 'refractive': return '🎯';
      case 'retinal': return '👁️';
      case 'glaucoma': return '🔴';
      case 'oculoplastic': return '✨';
      case 'corneal': return '🔵';
      case 'strabismus': return '↔️';
      default: return '🔬';
    }
  };

  const todaySurgeries = surgeries.filter(s => 
    new Date(s.surgeryDate).toDateString() === new Date().toDateString()
  );

  const scheduledSurgeries = surgeries.filter(s => s.status === 'scheduled');
  const completedSurgeries = surgeries.filter(s => s.status === 'completed');

  return (
    <ProtectedRoute>
      <SidebarLayout title={t('surgery.title')} description={t('surgery.description')}>
        <div className="space-y-6">
          {/* Stats Cards */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-5 text-white">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-purple-100 text-sm">{t('surgery.todaysSurgeries')}</p>
                  <p className="text-3xl font-bold mt-1">{todaySurgeries.length}</p>
                </div>
                <Calendar className="h-10 w-10 text-purple-200" />
              </div>
            </div>
            
            <div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-5 text-white">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-blue-100 text-sm">{t('surgery.scheduled')}</p>
                  <p className="text-3xl font-bold mt-1">{scheduledSurgeries.length}</p>
                </div>
                <Clock className="h-10 w-10 text-blue-200" />
              </div>
            </div>
            
            <div className="bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-5 text-white">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-green-100 text-sm">{t('surgery.completed')}</p>
                  <p className="text-3xl font-bold mt-1">{completedSurgeries.length}</p>
                </div>
                <CheckCircle className="h-10 w-10 text-green-200" />
              </div>
            </div>
            
            <div className="bg-gradient-to-br from-amber-500 to-amber-600 rounded-xl p-5 text-white">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-amber-100 text-sm">{t('surgery.totalProcedures')}</p>
                  <p className="text-3xl font-bold mt-1">{surgeries.length}</p>
                </div>
                <Scissors className="h-10 w-10 text-amber-200" />
              </div>
            </div>
          </div>

          {/* Quick Actions */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <Link
              href="/surgery/new?type=cataract"
              className="flex items-center gap-3 p-4 bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all hover:border-purple-200"
            >
              <span className="text-2xl">💎</span>
              <div>
                <p className="font-medium text-gray-900">{t('surgery.surgeryTypes.cataract')}</p>
                <p className="text-sm text-gray-500">{t('surgery.scheduleSurgery')}</p>
              </div>
            </Link>
            <Link
              href="/surgery/new?type=refractive"
              className="flex items-center gap-3 p-4 bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all hover:border-blue-200"
            >
              <span className="text-2xl">🎯</span>
              <div>
                <p className="font-medium text-gray-900">{t('surgery.surgeryTypes.lasikPrk')}</p>
                <p className="text-sm text-gray-500">{t('surgery.refractiveProcedure')}</p>
              </div>
            </Link>
            <Link
              href="/surgery/new?type=retinal"
              className="flex items-center gap-3 p-4 bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all hover:border-green-200"
            >
              <span className="text-2xl">👁️</span>
              <div>
                <p className="font-medium text-gray-900">{t('surgery.surgeryTypes.retinal')}</p>
                <p className="text-sm text-gray-500">{t('surgery.vitreoretinalSurgery')}</p>
              </div>
            </Link>
            <Link
              href="/surgery/iol-calculator"
              className="flex items-center gap-3 p-4 bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all hover:border-amber-200"
            >
              <span className="text-2xl">🔢</span>
              <div>
                <p className="font-medium text-gray-900">{t('surgery.iolCalculator')}</p>
                <p className="text-sm text-gray-500">{t('surgery.calculateLensPower')}</p>
              </div>
            </Link>
          </div>

          {/* Search and Filters */}
          <div className="bg-white rounded-xl shadow-sm p-4 border border-gray-100">
            <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
              <div className="flex flex-1 gap-4 w-full">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
                  <input
                    type="text"
                    placeholder={t('surgery.searchPlaceholder')}
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500"
                  />
                </div>
                <select
                  value={typeFilter}
                  onChange={(e) => setTypeFilter(e.target.value)}
                  className="px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500"
                >
                  <option value="">{t('surgery.allTypes')}</option>
                  <option value="cataract">{t('surgery.surgeryTypes.cataract')}</option>
                  <option value="refractive">{t('surgery.surgeryTypes.refractive')}</option>
                  <option value="retinal">{t('surgery.surgeryTypes.retinal')}</option>
                  <option value="glaucoma">{t('surgery.surgeryTypes.glaucoma')}</option>
                  <option value="oculoplastic">{t('surgery.surgeryTypes.oculoplastic')}</option>
                  <option value="corneal">{t('surgery.surgeryTypes.corneal')}</option>
                </select>
                <select
                  value={statusFilter}
                  onChange={(e) => setStatusFilter(e.target.value)}
                  className="px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500"
                >
                  <option value="">{t('surgery.allStatus')}</option>
                  <option value="scheduled">{t('surgery.scheduled')}</option>
                  <option value="inProgress">{t('surgery.inProgress')}</option>
                  <option value="completed">{t('surgery.completed')}</option>
                  <option value="cancelled">{t('surgery.cancelled')}</option>
                </select>
                <input
                  type="date"
                  value={dateFilter}
                  onChange={(e) => setDateFilter(e.target.value)}
                  className="px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500"
                />
              </div>
              
              <Link
                href="/surgery/new"
                className="flex items-center gap-2 px-5 py-2.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium"
              >
                <Plus className="h-5 w-5" />
                {t('surgery.newSurgery')}
              </Link>
            </div>
          </div>

          {/* Surgeries List */}
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            {isLoading ? (
              <div className="p-8 text-center">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mx-auto"></div>
                <p className="mt-4 text-gray-500">{t('common.loading')}</p>
              </div>
            ) : filteredSurgeries.length === 0 ? (
              <div className="p-12 text-center">
                <Scissors className="h-16 w-16 text-gray-300 mx-auto mb-4" />
                <h3 className="text-lg font-medium text-gray-900 mb-2">{t('surgery.noResults')}</h3>
                <p className="text-gray-500 mb-6">{t('surgery.scheduleFirstSurgery')}</p>
                <Link
                  href="/surgery/new"
                  className="inline-flex items-center gap-2 px-5 py-2.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
                >
                  <Plus className="h-5 w-5" />
                  {t('surgery.newSurgery')}
                </Link>
              </div>
            ) : (
              <div className="divide-y divide-gray-100">
                {filteredSurgeries.map((surgery) => {
                  const StatusIcon = getStatusIcon(surgery.status);
                  const isToday = new Date(surgery.surgeryDate).toDateString() === new Date().toDateString();
                  
                  return (
                    <Link
                      key={surgery._id}
                      href={`/surgery/${surgery._id}`}
                      className={`flex items-center justify-between p-5 hover:bg-gray-50 transition-colors ${
                        isToday ? 'bg-purple-50/50' : ''
                      }`}
                    >
                      <div className="flex items-center gap-4">
                        <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-2xl">
                          {getSurgeryTypeIcon(surgery.surgeryType)}
                        </div>
                        <div>
                          <div className="flex items-center gap-2">
                            <h3 className="font-semibold text-gray-900">{surgery.patientId?.name}</h3>
                            {isToday && (
                              <span className="px-2 py-0.5 bg-purple-600 text-white rounded text-xs font-medium">
                                {t('surgery.today')}
                              </span>
                            )}
                          </div>
                          <p className="text-sm text-gray-500">
                            {surgery.surgeryNumber} | ID: {surgery.patientId?.patientId}
                          </p>
                          <p className="text-sm text-gray-600 mt-1">
                            {surgery.preOperativeAssessment?.diagnosis}
                          </p>
                        </div>
                      </div>
                      
                      <div className="flex items-center gap-8">
                        <div className="text-center">
                          <p className="text-xs text-gray-500 uppercase tracking-wide">{t('surgery.tableHeaders.type')}</p>
                          <p className="font-medium text-gray-900 mt-1">
                            {getSurgeryTypeLabel(surgery.surgeryType)}
                          </p>
                        </div>
                        
                        <div className="text-center">
                          <p className="text-xs text-gray-500 uppercase tracking-wide">{t('surgery.tableHeaders.eye')}</p>
                          <p className="font-medium text-gray-900 mt-1">
                            {surgery.surgeryDetails?.cataract?.eye || 
                             surgery.surgeryDetails?.refractive?.eye || '-'}
                          </p>
                        </div>
                        
                        <div className="text-center">
                          <p className="text-xs text-gray-500 uppercase tracking-wide">{t('surgery.tableHeaders.status')}</p>
                          <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium mt-1 ${
                            getStatusColor(surgery.status)
                          }`}>
                            <StatusIcon className="h-3 w-3" />
                            {surgery.status}
                          </span>
                        </div>
                        
                        <div className="text-right min-w-[120px]">
                          <p className="text-xs text-gray-500">{t('surgery.tableHeaders.scheduled')}</p>
                          <p className="font-medium text-gray-900 mt-1">
                            {new Date(surgery.surgeryDate).toLocaleDateString()}
                          </p>
                          <p className="text-sm text-gray-500">
                            Dr. {surgery.surgeonId?.name}
                          </p>
                        </div>
                        
                        <ChevronRight className="h-5 w-5 text-gray-400" />
                      </div>
                    </Link>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      </SidebarLayout>
    </ProtectedRoute>
  );
}