'use client';

import { useState, useEffect, use } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import SidebarLayout from '../../components/sidebar-layout';
import ProtectedRoute from '../../protected-route';
import { useTranslations } from '../../hooks/useTranslations';
import { 
  ArrowLeft, 
  Calendar, 
  Clock, 
  User, 
  Scissors, 
  Eye,
  FileText,
  Edit,
  Trash2,
  CheckCircle,
  XCircle,
  AlertCircle,
  Stethoscope
} from 'lucide-react';

interface Surgery {
  _id: string;
  surgeryNumber: string;
  patientId: {
    _id: string;
    name: string;
    patientId: string;
    email?: string;
    phone?: string;
    dateOfBirth?: string;
    gender?: string;
  };
  surgeonId?: {
    _id: string;
    name: string;
    email?: string;
    specialization?: string;
  };
  surgeryDate: string;
  surgeryType: string;
  status: 'scheduled' | 'inProgress' | 'completed' | 'cancelled' | 'postponed';
  anesthesia?: {
    type?: string;
    agents?: string[];
    complications?: string[];
  };
  surgeryDetails?: {
    cataract?: {
      eye?: string;
      technique?: string;
      incisionSize?: number;
      iol?: {
        implanted?: boolean;
        brand?: string;
        model?: string;
        power?: number;
        position?: string;
      };
      complications?: string[];
    };
    refractive?: {
      eye?: string;
      procedure?: string;
      targetRefraction?: number;
      ablationZone?: number;
      opticalZone?: number;
    };
  };
  preOperativeAssessment?: {
    visualAcuity?: { OD?: string; OS?: string };
    iop?: { OD?: number; OS?: number };
    diagnosis?: string;
    indications?: string[];
  };
  immediatePostOp?: {
    visualAcuity?: { OD?: string; OS?: string };
    iop?: { OD?: number; OS?: number };
    woundStatus?: string;
  };
  operativeNote?: string;
  operatingRoom?: string;
  surgeryDuration?: number;
  intraOperativeComplications?: string[];
  postOperativeInstructions?: string;
  medications?: {
    name: string;
    dosage: string;
    frequency: string;
    duration: string;
    eye: string;
  }[];
  followUpSchedule?: { date: string; reason: string }[];
  createdAt: string;
  updatedAt: string;
}

export default function SurgeryDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const router = useRouter();
  const { t } = useTranslations();
  const [surgery, setSurgery] = useState<Surgery | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    fetchSurgery();
  }, [id]);

  const fetchSurgery = async () => {
    try {
      const response = await fetch(`/api/surgery/${id}`);
      if (response.ok) {
        const data = await response.json();
        setSurgery(data);
      } else {
        setError(t('surgery.detailPage.surgeryNotFound'));
      }
    } catch (err) {
      console.error('Error fetching surgery:', err);
      setError(t('surgery.detailPage.failedToLoad'));
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async () => {
    if (!confirm(t('surgery.detailPage.confirmDelete'))) return;
    
    try {
      const response = await fetch(`/api/surgery/${id}`, { method: 'DELETE' });
      if (response.ok) {
        router.push('/surgery');
      } else {
        alert(t('surgery.detailPage.failedToDelete'));
      }
    } catch (err) {
      console.error('Error deleting surgery:', err);
      alert(t('surgery.detailPage.failedToDelete'));
    }
  };

  const getStatusBadge = (status: string) => {
    const styles: Record<string, string> = {
      scheduled: 'bg-blue-100 text-blue-800',
      inProgress: 'bg-yellow-100 text-yellow-800',
      completed: 'bg-green-100 text-green-800',
      cancelled: 'bg-red-100 text-red-800',
      postponed: 'bg-gray-100 text-gray-800'
    };
    const icons: Record<string, React.ReactNode> = {
      scheduled: <Clock className="h-4 w-4" />,
      inProgress: <AlertCircle className="h-4 w-4" />,
      completed: <CheckCircle className="h-4 w-4" />,
      cancelled: <XCircle className="h-4 w-4" />,
      postponed: <AlertCircle className="h-4 w-4" />
    };
    const statusLabels: Record<string, string> = {
      scheduled: t('surgery.detailPage.status.scheduled'),
      inProgress: t('surgery.detailPage.status.inProgress'),
      completed: t('surgery.detailPage.status.completed'),
      cancelled: t('surgery.detailPage.status.cancelled'),
      postponed: t('surgery.detailPage.status.postponed')
    };
    return (
      <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-medium ${styles[status] || 'bg-gray-100 text-gray-800'}`}>
        {icons[status]}
        {statusLabels[status] || status}
      </span>
    );
  };

  const getSurgeryTypeLabel = (type: string) => {
    const labels: Record<string, string> = {
      cataract: t('surgery.types.cataract'),
      refractive: t('surgery.types.refractive'),
      retinal: t('surgery.types.vitreoretinal'),
      glaucoma: t('surgery.types.glaucoma'),
      corneal: t('surgery.types.corneal'),
      oculoplastic: t('surgery.types.oculoplastic'),
      strabismus: t('surgery.types.strabismus'),
      other: t('common.other')
    };
    return labels[type] || type;
  };

  if (loading) {
    return (
      <ProtectedRoute>
        <SidebarLayout title={t('surgery.detailPage.title')} description={t('surgery.detailPage.loading')}>
          <div className="flex items-center justify-center h-64">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600"></div>
          </div>
        </SidebarLayout>
      </ProtectedRoute>
    );
  }

  if (error || !surgery) {
    return (
      <ProtectedRoute>
        <SidebarLayout title={t('surgery.detailPage.title')} description={t('surgery.detailPage.error')}>
          <div className="max-w-4xl mx-auto">
            <div className="mb-6">
              <Link href="/surgery" className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900">
                <ArrowLeft className="h-4 w-4" />
                {t('surgery.backToSurgeries')}
              </Link>
            </div>
            <div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
              <XCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
              <h2 className="text-lg font-semibold text-red-800">{error || t('surgery.detailPage.surgeryNotFound')}</h2>
            </div>
          </div>
        </SidebarLayout>
      </ProtectedRoute>
    );
  }

  return (
    <ProtectedRoute>
    <SidebarLayout title={t('surgery.detailPage.title')} description={`${t('surgery.detailPage.surgeryNumber')} #${surgery.surgeryNumber}`}>
      <div className="max-w-4xl mx-auto">
        <div className="mb-6 flex items-center justify-between">
          <Link href="/surgery" className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900">
            <ArrowLeft className="h-4 w-4" />
            {t('surgery.backToSurgeries')}
          </Link>
          <div className="flex gap-2">
            <Link
              href={`/surgery/${id}/edit`}
              className="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
            >
              <Edit className="h-4 w-4" />
              {t('surgery.detailPage.edit')}
            </Link>
            <button
              onClick={handleDelete}
              className="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
            >
              <Trash2 className="h-4 w-4" />
              {t('surgery.detailPage.delete')}
            </button>
          </div>
        </div>

        {/* Header */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
          <div className="flex items-start justify-between mb-4">
            <div>
              <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
                <Scissors className="h-6 w-6 text-purple-600" />
                {getSurgeryTypeLabel(surgery.surgeryType)}
              </h1>
              <p className="text-gray-500 mt-1">{t('surgery.detailPage.surgeryNumber')} #{surgery.surgeryNumber}</p>
            </div>
            {getStatusBadge(surgery.status)}
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
            <div className="flex items-center gap-3">
              <Calendar className="h-5 w-5 text-gray-400" />
              <div>
                <p className="text-xs text-gray-500">{t('surgery.detailPage.date')}</p>
                <p className="font-medium">{new Date(surgery.surgeryDate).toLocaleDateString()}</p>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <Clock className="h-5 w-5 text-gray-400" />
              <div>
                <p className="text-xs text-gray-500">{t('surgery.detailPage.time')}</p>
                <p className="font-medium">{new Date(surgery.surgeryDate).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</p>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <Eye className="h-5 w-5 text-gray-400" />
              <div>
                <p className="text-xs text-gray-500">{t('surgery.eye')}</p>
                <p className="font-medium">
                  {surgery.surgeryDetails?.cataract?.eye || surgery.surgeryDetails?.refractive?.eye || 'N/A'}
                </p>
              </div>
            </div>
            {surgery.operatingRoom && (
              <div className="flex items-center gap-3">
                <Stethoscope className="h-5 w-5 text-gray-400" />
                <div>
                  <p className="text-xs text-gray-500">{t('surgery.detailPage.or')}</p>
                  <p className="font-medium">{surgery.operatingRoom}</p>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Patient & Surgeon Info */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <User className="h-5 w-5 text-purple-600" />
              {t('surgery.patientInformation')}
            </h2>
            <div className="space-y-3">
              <div>
                <p className="text-sm text-gray-500">{t('surgery.detailPage.name')}</p>
                <Link href={`/patients/${surgery.patientId._id}`} className="font-medium text-purple-600 hover:text-purple-700">
                  {surgery.patientId.name}
                </Link>
              </div>
              <div>
                <p className="text-sm text-gray-500">{t('surgery.detailPage.patientId')}</p>
                <p className="font-medium">{surgery.patientId.patientId}</p>
              </div>
              {surgery.patientId.phone && (
                <div>
                  <p className="text-sm text-gray-500">{t('surgery.detailPage.phone')}</p>
                  <p className="font-medium">{surgery.patientId.phone}</p>
                </div>
              )}
              {surgery.patientId.dateOfBirth && (
                <div>
                  <p className="text-sm text-gray-500">{t('surgery.detailPage.dateOfBirth')}</p>
                  <p className="font-medium">{new Date(surgery.patientId.dateOfBirth).toLocaleDateString()}</p>
                </div>
              )}
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <Stethoscope className="h-5 w-5 text-purple-600" />
              {t('surgery.surgeon')}
            </h2>
            {surgery.surgeonId ? (
              <div className="space-y-3">
                <div>
                  <p className="text-sm text-gray-500">{t('surgery.detailPage.name')}</p>
                  <p className="font-medium">{surgery.surgeonId.name}</p>
                </div>
                {surgery.surgeonId.specialization && (
                  <div>
                    <p className="text-sm text-gray-500">{t('surgery.detailPage.specialization')}</p>
                    <p className="font-medium">{surgery.surgeonId.specialization}</p>
                  </div>
                )}
                {surgery.surgeonId.email && (
                  <div>
                    <p className="text-sm text-gray-500">{t('surgery.detailPage.email')}</p>
                    <p className="font-medium">{surgery.surgeonId.email}</p>
                  </div>
                )}
              </div>
            ) : (
              <p className="text-gray-500">{t('surgery.detailPage.noSurgeonAssigned')}</p>
            )}
            {surgery.anesthesia?.type && (
              <div className="mt-4 pt-4 border-t border-gray-100">
                <p className="text-sm text-gray-500">{t('surgery.anesthesiaType')}</p>
                <p className="font-medium capitalize">{surgery.anesthesia.type}</p>
              </div>
            )}
          </div>
        </div>

        {/* Surgery Details */}
        {surgery.surgeryDetails?.cataract && (
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('surgery.detailPage.cataractSurgeryDetails')}</h2>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              {surgery.surgeryDetails.cataract.technique && (
                <div>
                  <p className="text-sm text-gray-500">{t('surgery.technique')}</p>
                  <p className="font-medium capitalize">{surgery.surgeryDetails.cataract.technique}</p>
                </div>
              )}
              {surgery.surgeryDetails.cataract.incisionSize && (
                <div>
                  <p className="text-sm text-gray-500">{t('surgery.detailPage.incisionSize')}</p>
                  <p className="font-medium">{surgery.surgeryDetails.cataract.incisionSize} mm</p>
                </div>
              )}
              {surgery.surgeryDetails.cataract.iol?.model && (
                <div>
                  <p className="text-sm text-gray-500">{t('surgery.iolModel')}</p>
                  <p className="font-medium">{surgery.surgeryDetails.cataract.iol.model}</p>
                </div>
              )}
              {surgery.surgeryDetails.cataract.iol?.power !== undefined && (
                <div>
                  <p className="text-sm text-gray-500">{t('surgery.iolPower')}</p>
                  <p className="font-medium">{surgery.surgeryDetails.cataract.iol.power} D</p>
                </div>
              )}
              {surgery.surgeryDetails.cataract.iol?.position && (
                <div>
                  <p className="text-sm text-gray-500">{t('surgery.detailPage.iolPosition')}</p>
                  <p className="font-medium capitalize">{surgery.surgeryDetails.cataract.iol.position}</p>
                </div>
              )}
            </div>
            {surgery.surgeryDetails.cataract.complications && surgery.surgeryDetails.cataract.complications.length > 0 && (
              <div className="mt-4 pt-4 border-t border-gray-100">
                <p className="text-sm text-gray-500 mb-2">{t('surgery.fields.complications')}</p>
                <div className="flex flex-wrap gap-2">
                  {surgery.surgeryDetails.cataract.complications.map((comp, idx) => (
                    <span key={idx} className="px-2 py-1 bg-red-100 text-red-800 rounded text-sm">{comp}</span>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}

        {surgery.surgeryDetails?.refractive && (
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('surgery.detailPage.refractiveSurgeryDetails')}</h2>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              {surgery.surgeryDetails.refractive.procedure && (
                <div>
                  <p className="text-sm text-gray-500">{t('surgery.procedure')}</p>
                  <p className="font-medium uppercase">{surgery.surgeryDetails.refractive.procedure}</p>
                </div>
              )}
              {surgery.surgeryDetails.refractive.targetRefraction !== undefined && (
                <div>
                  <p className="text-sm text-gray-500">{t('surgery.targetRefraction')}</p>
                  <p className="font-medium">{surgery.surgeryDetails.refractive.targetRefraction} D</p>
                </div>
              )}
              {surgery.surgeryDetails.refractive.opticalZone && (
                <div>
                  <p className="text-sm text-gray-500">{t('surgery.opticalZone')}</p>
                  <p className="font-medium">{surgery.surgeryDetails.refractive.opticalZone} mm</p>
                </div>
              )}
              {surgery.surgeryDetails.refractive.ablationZone && (
                <div>
                  <p className="text-sm text-gray-500">{t('surgery.ablationZone')}</p>
                  <p className="font-medium">{surgery.surgeryDetails.refractive.ablationZone} mm</p>
                </div>
              )}
            </div>
          </div>
        )}

        {/* Pre-Op Assessment */}
        {surgery.preOperativeAssessment && (
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('surgery.detailPage.preOperativeAssessment')}</h2>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              {surgery.preOperativeAssessment.visualAcuity && (
                <>
                  <div>
                    <p className="text-sm text-gray-500">{t('surgery.detailPage.visualAcuityOD')}</p>
                    <p className="font-medium">{surgery.preOperativeAssessment.visualAcuity.OD || 'N/A'}</p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">{t('surgery.detailPage.visualAcuityOS')}</p>
                    <p className="font-medium">{surgery.preOperativeAssessment.visualAcuity.OS || 'N/A'}</p>
                  </div>
                </>
              )}
              {surgery.preOperativeAssessment.iop && (
                <>
                  <div>
                    <p className="text-sm text-gray-500">{t('surgery.detailPage.iopOD')}</p>
                    <p className="font-medium">{surgery.preOperativeAssessment.iop.OD ?? 'N/A'} mmHg</p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">{t('surgery.detailPage.iopOS')}</p>
                    <p className="font-medium">{surgery.preOperativeAssessment.iop.OS ?? 'N/A'} mmHg</p>
                  </div>
                </>
              )}
            </div>
            {surgery.preOperativeAssessment.diagnosis && (
              <div className="mt-4">
                <p className="text-sm text-gray-500">{t('surgery.detailPage.diagnosis')}</p>
                <p className="font-medium">{surgery.preOperativeAssessment.diagnosis}</p>
              </div>
            )}
          </div>
        )}

        {/* Operative Note */}
        {surgery.operativeNote && (
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <FileText className="h-5 w-5 text-purple-600" />
              {t('surgery.detailPage.operativeNotes')}
            </h2>
            <p className="text-gray-700 whitespace-pre-wrap">{surgery.operativeNote}</p>
          </div>
        )}

        {/* Post-Op Instructions */}
        {surgery.postOperativeInstructions && (
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('surgery.detailPage.postOperativeInstructions')}</h2>
            <p className="text-gray-700 whitespace-pre-wrap">{surgery.postOperativeInstructions}</p>
          </div>
        )}

        {/* Medications */}
        {surgery.medications && surgery.medications.length > 0 && (
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('surgery.detailPage.postOpMedications')}</h2>
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-gray-200">
                    <th className="text-left py-2 font-medium text-gray-600">{t('surgery.detailPage.medication')}</th>
                    <th className="text-left py-2 font-medium text-gray-600">{t('surgery.detailPage.dosage')}</th>
                    <th className="text-left py-2 font-medium text-gray-600">{t('surgery.detailPage.frequency')}</th>
                    <th className="text-left py-2 font-medium text-gray-600">{t('surgery.detailPage.duration')}</th>
                    <th className="text-left py-2 font-medium text-gray-600">{t('surgery.eye')}</th>
                  </tr>
                </thead>
                <tbody>
                  {surgery.medications.map((med, idx) => (
                    <tr key={idx} className="border-b border-gray-100">
                      <td className="py-2">{med.name}</td>
                      <td className="py-2">{med.dosage}</td>
                      <td className="py-2">{med.frequency}</td>
                      <td className="py-2">{med.duration}</td>
                      <td className="py-2">{med.eye}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* Follow-up Schedule */}
        {surgery.followUpSchedule && surgery.followUpSchedule.length > 0 && (
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('surgery.detailPage.followUpSchedule')}</h2>
            <div className="space-y-3">
              {surgery.followUpSchedule.map((followUp, idx) => (
                <div key={idx} className="flex items-center gap-4 p-3 bg-gray-50 rounded-lg">
                  <Calendar className="h-5 w-5 text-gray-400" />
                  <div>
                    <p className="font-medium">{new Date(followUp.date).toLocaleDateString()}</p>
                    <p className="text-sm text-gray-500">{followUp.reason}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Metadata */}
        <div className="text-sm text-gray-500 text-center">
          <p>{t('surgery.detailPage.created')}: {new Date(surgery.createdAt).toLocaleString()}</p>
          {surgery.updatedAt !== surgery.createdAt && (
            <p>{t('surgery.detailPage.lastUpdated')}: {new Date(surgery.updatedAt).toLocaleString()}</p>
          )}
        </div>
      </div>
    </SidebarLayout>
    </ProtectedRoute>
  );
}