'use client';

import { useState, useEffect, use } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import SidebarLayout from '../../../components/sidebar-layout';
import ProtectedRoute from '../../../protected-route';
import { useTranslations } from '../../../hooks/useTranslations';
import { ArrowLeft, Save, User, Scissors, Calendar } from 'lucide-react';
import toast from 'react-hot-toast';

interface Patient {
  _id: string;
  name: string;
  patientId: string;
  email?: string;
  phone?: string;
  dateOfBirth?: string;
}

interface Doctor {
  _id: string;
  name: string;
  specialization?: string;
  department?: string;
}

interface Surgery {
  _id: string;
  surgeryNumber: string;
  patientId: Patient;
  surgeonId?: Doctor;
  surgeryDate: string;
  surgeryType: string;
  status: string;
  eye?: string;
  procedure?: string;
  operatingRoom?: string;
  anesthesia?: {
    type?: string;
  };
  surgeryDetails?: {
    cataract?: {
      technique?: string;
      iol?: {
        model?: string;
        power?: number;
      };
      targetRefraction?: number;
    };
    refractive?: {
      procedure?: string;
      opticalZone?: number;
      ablationZone?: number;
    };
  };
  preOperativeAssessment?: {
    notes?: string;
  };
  operativeNote?: string;
}

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

  const [formData, setFormData] = useState({
    surgeryType: 'cataract',
    eye: 'OD',
    procedure: '',
    surgeonId: '',
    surgeryDate: '',
    surgeryTime: '',
    anesthesiaType: 'topical',
    operatingRoom: '',
    status: 'scheduled',
    preOpNotes: '',
    cataractDetails: {
      iolModel: '',
      iolPower: 0,
      targetRefraction: 0,
      technique: 'phaco'
    },
    refractiveDetails: {
      procedure: 'lasik',
      ablationZone: 6.5,
      opticalZone: 6.0
    }
  });

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

  const fetchSurgery = async () => {
    try {
      const response = await fetch(`/api/surgery/${id}`);
      if (response.ok) {
        const data = await response.json();
        setSurgery(data);
        
        const surgeryDate = new Date(data.surgeryDate);
        const dateStr = surgeryDate.toISOString().split('T')[0];
        const timeStr = surgeryDate.toTimeString().slice(0, 5);

        setFormData({
          surgeryType: data.surgeryType || 'cataract',
          eye: data.surgeryDetails?.cataract?.eye || data.surgeryDetails?.refractive?.eye || 'OD',
          procedure: data.procedure || '',
          surgeonId: data.surgeonId?._id || '',
          surgeryDate: dateStr,
          surgeryTime: timeStr,
          anesthesiaType: data.anesthesia?.type || 'topical',
          operatingRoom: data.operatingRoom || '',
          status: data.status || 'scheduled',
          preOpNotes: data.operativeNote || data.preOperativeAssessment?.notes || '',
          cataractDetails: {
            iolModel: data.surgeryDetails?.cataract?.iol?.model || '',
            iolPower: data.surgeryDetails?.cataract?.iol?.power || 0,
            targetRefraction: data.surgeryDetails?.cataract?.targetRefraction || 0,
            technique: data.surgeryDetails?.cataract?.technique || 'phaco'
          },
          refractiveDetails: {
            procedure: data.surgeryDetails?.refractive?.procedure || 'lasik',
            ablationZone: data.surgeryDetails?.refractive?.ablationZone || 6.5,
            opticalZone: data.surgeryDetails?.refractive?.opticalZone || 6.0
          }
        });
      } else {
        setError(t('surgery.editPage.notFound'));
      }
    } catch (err) {
      console.error('Error fetching surgery:', err);
      setError(t('surgery.editPage.failedToLoad'));
    } finally {
      setLoading(false);
    }
  };

  const fetchDoctors = async () => {
    try {
      const response = await fetch('/api/doctors');
      if (response.ok) {
        const data = await response.json();
        const doctorsList = Array.isArray(data) ? data : (data.doctors || []);
        setDoctors(doctorsList);
      }
    } catch (error) {
      console.error('Error fetching doctors:', error);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.surgeryDate) {
      toast.error('Please select a surgery date');
      return;
    }

    setIsSubmitting(true);
    try {
      const surgeryDateTime = new Date(`${formData.surgeryDate}T${formData.surgeryTime}`);
      
      const response = await fetch(`/api/surgery/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          surgeonId: formData.surgeonId || undefined,
          surgeryType: formData.surgeryType,
          surgeryDate: surgeryDateTime,
          status: formData.status,
          anesthesia: { type: formData.anesthesiaType },
          operatingRoom: formData.operatingRoom,
          operativeNote: formData.preOpNotes,
          surgeryDetails: formData.surgeryType === 'cataract' ? {
            cataract: {
              eye: formData.eye,
              technique: formData.cataractDetails.technique,
              iol: {
                model: formData.cataractDetails.iolModel,
                power: formData.cataractDetails.iolPower
              },
              targetRefraction: formData.cataractDetails.targetRefraction
            }
          } : formData.surgeryType === 'refractive' ? {
            refractive: {
              eye: formData.eye,
              procedure: formData.refractiveDetails.procedure,
              opticalZone: formData.refractiveDetails.opticalZone,
              ablationZone: formData.refractiveDetails.ablationZone
            }
          } : undefined
        })
      });

      if (response.ok) {
        toast.success(t('surgery.editPage.updateSuccess'));
        router.push(`/surgery/${id}`);
      } else {
        const error = await response.json();
        toast.error(error.message || t('surgery.editPage.updateFailed'));
      }
    } catch (error) {
      console.error('Error updating surgery:', error);
      toast.error(t('surgery.editPage.updateFailed'));
    } finally {
      setIsSubmitting(false);
    }
  };

  const surgeryTypes = [
    { value: 'cataract', label: t('surgery.types.cataract') },
    { value: 'refractive', label: t('surgery.types.refractive') },
    { value: 'retinal', label: t('surgery.types.vitreoretinal') },
    { value: 'glaucoma', label: t('surgery.types.glaucoma') },
    { value: 'corneal', label: t('surgery.types.corneal') },
    { value: 'oculoplastic', label: t('surgery.types.oculoplastic') },
    { value: 'strabismus', label: t('surgery.types.strabismus') },
    { value: 'other', label: t('common.other') }
  ];

  const statusOptions = [
    { value: 'scheduled', label: t('surgery.detailPage.status.scheduled') },
    { value: 'inProgress', label: t('surgery.detailPage.status.inProgress') },
    { value: 'completed', label: t('surgery.detailPage.status.completed') },
    { value: 'cancelled', label: t('surgery.detailPage.status.cancelled') },
    { value: 'postponed', label: t('surgery.detailPage.status.postponed') }
  ];

  if (loading) {
    return (
      <ProtectedRoute>
        <SidebarLayout title={t('surgery.editPage.title')} description={t('surgery.editPage.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.editPage.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">
              <h2 className="text-lg font-semibold text-red-800">{error || t('surgery.editPage.notFound')}</h2>
            </div>
          </div>
        </SidebarLayout>
      </ProtectedRoute>
    );
  }

  return (
    <ProtectedRoute>
      <SidebarLayout title={t('surgery.editPage.title')} description={t('surgery.editPage.description')}>
        <div className="max-w-4xl mx-auto">
          <div className="mb-6">
            <Link href={`/surgery/${id}`} 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>

          <form onSubmit={handleSubmit} className="space-y-6">
            {/* Patient Info (Read Only) */}
            <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="flex items-center justify-between p-4 bg-purple-50 rounded-lg">
                <div>
                  <p className="font-medium text-gray-900">{surgery.patientId.name}</p>
                  <p className="text-sm text-gray-500">
                    ID: {surgery.patientId.patientId} 
                    {surgery.patientId.dateOfBirth && ` | DOB: ${new Date(surgery.patientId.dateOfBirth).toLocaleDateString()}`}
                  </p>
                </div>
              </div>
            </div>

            {/* Surgery Details */}
            <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">
                <Scissors className="h-5 w-5 text-purple-600" />
                {t('surgery.surgeryDetails')}
              </h2>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div>
                  <label className="block text-sm text-gray-600 mb-1">{t('surgery.surgeryType')}</label>
                  <select
                    value={formData.surgeryType}
                    onChange={(e) => setFormData(prev => ({ ...prev, surgeryType: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                  >
                    {surgeryTypes.map(type => (
                      <option key={type.value} value={type.value}>{type.label}</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm text-gray-600 mb-1">{t('surgery.eye')}</label>
                  <select
                    value={formData.eye}
                    onChange={(e) => setFormData(prev => ({ ...prev, eye: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                  >
                    <option value="OD">{t('surgery.odRightEye')}</option>
                    <option value="OS">{t('surgery.osLeftEye')}</option>
                    <option value="OU">{t('surgery.ouBothEyes')}</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm text-gray-600 mb-1">{t('common.status')}</label>
                  <select
                    value={formData.status}
                    onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                  >
                    {statusOptions.map(status => (
                      <option key={status.value} value={status.value}>{status.label}</option>
                    ))}
                  </select>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm text-gray-600 mb-1">{t('surgery.surgeon')}</label>
                  <select
                    value={formData.surgeonId}
                    onChange={(e) => setFormData(prev => ({ ...prev, surgeonId: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                  >
                    <option value="">{t('surgery.selectSurgeon')}</option>
                    {doctors.map(doc => (
                      <option key={doc._id} value={doc._id}>
                        {doc.name}{doc.specialization ? ` - ${doc.specialization}` : ''}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm text-gray-600 mb-1">{t('surgery.anesthesiaType')}</label>
                  <select
                    value={formData.anesthesiaType}
                    onChange={(e) => setFormData(prev => ({ ...prev, anesthesiaType: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                  >
                    <option value="topical">{t('surgery.anesthesia.topical')}</option>
                    <option value="local">{t('surgery.anesthesia.local')}</option>
                    <option value="general">{t('surgery.anesthesia.general')}</option>
                    <option value="sedation">{t('surgery.anesthesia.sedation')}</option>
                  </select>
                </div>
              </div>
            </div>

            {/* Schedule */}
            <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">
                <Calendar className="h-5 w-5 text-purple-600" />
                {t('surgery.schedule')}
              </h2>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label className="block text-sm text-gray-600 mb-1">{t('surgery.date')} <span className="text-red-500">*</span></label>
                  <input
                    type="date"
                    value={formData.surgeryDate}
                    onChange={(e) => setFormData(prev => ({ ...prev, surgeryDate: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm text-gray-600 mb-1">{t('surgery.time')}</label>
                  <input
                    type="time"
                    value={formData.surgeryTime}
                    onChange={(e) => setFormData(prev => ({ ...prev, surgeryTime: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                  />
                </div>
                <div>
                  <label className="block text-sm text-gray-600 mb-1">{t('surgery.operatingRoom')}</label>
                  <input
                    type="text"
                    value={formData.operatingRoom}
                    onChange={(e) => setFormData(prev => ({ ...prev, operatingRoom: e.target.value }))}
                    placeholder={t('surgery.operatingRoomPlaceholder')}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                  />
                </div>
              </div>
            </div>

            {/* Cataract Details */}
            {formData.surgeryType === 'cataract' && (
              <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">{t('surgery.cataractDetails')}</h2>
                
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div>
                    <label className="block text-sm text-gray-600 mb-1">{t('surgery.technique')}</label>
                    <select
                      value={formData.cataractDetails.technique}
                      onChange={(e) => setFormData(prev => ({
                        ...prev,
                        cataractDetails: { ...prev.cataractDetails, technique: e.target.value }
                      }))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                    >
                      <option value="phaco">{t('surgery.techniques.phaco')}</option>
                      <option value="femto">{t('surgery.techniques.femto')}</option>
                      <option value="ecce">{t('surgery.techniques.ecce')}</option>
                      <option value="sics">{t('surgery.techniques.sics')}</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm text-gray-600 mb-1">{t('surgery.iolModel')}</label>
                    <input
                      type="text"
                      value={formData.cataractDetails.iolModel}
                      onChange={(e) => setFormData(prev => ({
                        ...prev,
                        cataractDetails: { ...prev.cataractDetails, iolModel: e.target.value }
                      }))}
                      placeholder={t('surgery.iolModelPlaceholder')}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm text-gray-600 mb-1">{t('surgery.iolPower')}</label>
                    <input
                      type="number"
                      step="0.5"
                      value={formData.cataractDetails.iolPower}
                      onChange={(e) => setFormData(prev => ({
                        ...prev,
                        cataractDetails: { ...prev.cataractDetails, iolPower: parseFloat(e.target.value) || 0 }
                      }))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm text-gray-600 mb-1">{t('surgery.targetRefraction')}</label>
                    <input
                      type="number"
                      step="0.25"
                      value={formData.cataractDetails.targetRefraction}
                      onChange={(e) => setFormData(prev => ({
                        ...prev,
                        cataractDetails: { ...prev.cataractDetails, targetRefraction: parseFloat(e.target.value) || 0 }
                      }))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                    />
                  </div>
                </div>
              </div>
            )}

            {/* Refractive Details */}
            {formData.surgeryType === 'refractive' && (
              <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">{t('surgery.refractiveDetails')}</h2>
                
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div>
                    <label className="block text-sm text-gray-600 mb-1">{t('surgery.procedureType')}</label>
                    <select
                      value={formData.refractiveDetails.procedure}
                      onChange={(e) => setFormData(prev => ({
                        ...prev,
                        refractiveDetails: { ...prev.refractiveDetails, procedure: e.target.value }
                      }))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                    >
                      <option value="lasik">LASIK</option>
                      <option value="prk">PRK</option>
                      <option value="smile">SMILE</option>
                      <option value="icl">ICL</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm text-gray-600 mb-1">{t('surgery.opticalZone')}</label>
                    <input
                      type="number"
                      step="0.1"
                      value={formData.refractiveDetails.opticalZone}
                      onChange={(e) => setFormData(prev => ({
                        ...prev,
                        refractiveDetails: { ...prev.refractiveDetails, opticalZone: parseFloat(e.target.value) || 0 }
                      }))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm text-gray-600 mb-1">{t('surgery.ablationZone')}</label>
                    <input
                      type="number"
                      step="0.1"
                      value={formData.refractiveDetails.ablationZone}
                      onChange={(e) => setFormData(prev => ({
                        ...prev,
                        refractiveDetails: { ...prev.refractiveDetails, ablationZone: parseFloat(e.target.value) || 0 }
                      }))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                    />
                  </div>
                </div>
              </div>
            )}

            {/* Pre-Op Notes */}
            <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
              <label className="block text-sm text-gray-600 mb-1">{t('surgery.preOpNotes')}</label>
              <textarea
                value={formData.preOpNotes}
                onChange={(e) => setFormData(prev => ({ ...prev, preOpNotes: e.target.value }))}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                rows={3}
                placeholder={t('surgery.preOpNotesPlaceholder')}
              />
            </div>

            {/* Submit */}
            <div className="flex justify-end gap-4">
              <Link href={`/surgery/${id}`} className="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                {t('common.cancel')}
              </Link>
              <button
                type="submit"
                disabled={isSubmitting || !formData.surgeryDate}
                className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
              >
                <Save className="h-4 w-4" />
                {isSubmitting ? t('surgery.editPage.updating') : t('surgery.editPage.updateSurgery')}
              </button>
            </div>
          </form>
        </div>
      </SidebarLayout>
    </ProtectedRoute>
  );
}