'use client';

import { useState, useEffect } 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 SearchablePatientSelect from '../../components/SearchablePatientSelect';
import { ArrowLeft, Save, User, Scissors, Calendar, Clock } from 'lucide-react';

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

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

export default function NewSurgeryPage() {
  const router = useRouter();
  const { t } = useTranslations();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [selectedPatient, setSelectedPatient] = useState<Patient | null>(null);
  const [doctors, setDoctors] = useState<Doctor[]>([]);

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

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

  const fetchDoctors = async () => {
    try {
      const response = await fetch('/api/doctors');
      if (response.ok) {
        const data = await response.json();
        // API returns array directly, not wrapped in { doctors: [] }
        const doctorsList = Array.isArray(data) ? data : (data.doctors || []);
        setDoctors(doctorsList);
        
        // Auto-select first doctor if only one exists
        if (doctorsList.length === 1 && !formData.surgeonId) {
          setFormData(prev => ({ ...prev, surgeonId: doctorsList[0]._id }));
        }
      } else {
        console.error('Failed to fetch doctors:', response.status);
      }
    } catch (error) {
      console.error('Error fetching doctors:', error);
    }
  };

  const handlePatientSelect = (patient: Patient | null) => {
    setSelectedPatient(patient);
  };

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

    setIsSubmitting(true);
    try {
      const surgeryDateTime = new Date(`${formData.surgeryDate}T${formData.surgeryTime}`);
      
      const response = await fetch('/api/surgery', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          patientId: selectedPatient._id,
          surgeonId: formData.surgeonId,
          surgeryType: formData.surgeryType,
          eye: formData.eye,
          procedure: formData.procedure,
          surgeryDate: surgeryDateTime,
          anesthesiaType: formData.anesthesiaType,
          operatingRoom: formData.operatingRoom,
          preOpNotes: formData.preOpNotes,
          cataractDetails: formData.surgeryType === 'cataract' ? formData.cataractDetails : undefined,
          refractiveDetails: formData.surgeryType === 'refractive' ? formData.refractiveDetails : undefined,
          status: 'scheduled'
        })
      });

      if (response.ok) {
        const result = await response.json();
        router.push(`/surgery/${result.surgery._id}`);
      } else {
        const error = await response.json();
        alert(error.message || 'Failed to schedule surgery');
      }
    } catch (error) {
      console.error('Error scheduling surgery:', error);
      alert('Failed to schedule surgery');
    } finally {
      setIsSubmitting(false);
    }
  };

  const surgeryTypes = [
    { value: 'cataract', label: 'Cataract Surgery' },
    { value: 'refractive', label: 'Refractive Surgery' },
    { value: 'retinal', label: 'Retinal Surgery' },
    { value: 'glaucoma', label: 'Glaucoma Surgery' },
    { value: 'corneal', label: 'Corneal Surgery' },
    { value: 'oculoplastic', label: 'Oculoplastic' },
    { value: 'strabismus', label: 'Strabismus' },
    { value: 'other', label: 'Other' }
  ];

  const procedures: Record<string, string[]> = {
    cataract: ['Phacoemulsification + IOL', 'ECCE + IOL', 'SICS + IOL', 'IOL Exchange', 'Secondary IOL'],
    refractive: ['LASIK', 'PRK', 'SMILE', 'ICL Implantation', 'RLE', 'CXL'],
    retinal: ['Vitrectomy', 'Scleral Buckle', 'Pneumatic Retinopexy', 'Membrane Peel', 'Laser Photocoagulation'],
    glaucoma: ['Trabeculectomy', 'Glaucoma Drainage Device', 'MIGS', 'Laser Trabeculoplasty', 'Cyclophotocoagulation'],
    corneal: ['Penetrating Keratoplasty', 'DSAEK', 'DMEK', 'PTK', 'Pterygium Excision'],
    oculoplastic: ['Blepharoplasty', 'Ptosis Repair', 'DCR', 'Orbital Surgery', 'Enucleation/Evisceration'],
    strabismus: ['Recession', 'Resection', 'Adjustable Suture'],
    other: ['Other Procedure']
  };

  return (
    <ProtectedRoute>
      <SidebarLayout title={t('surgery.scheduleSurgery')} description={t('surgery.scheduleNewSurgery')}>
        <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>

          <form onSubmit={handleSubmit} className="space-y-6">
            {/* Patient Selection */}
            <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>

              {selectedPatient ? (
                <div className="flex items-center justify-between p-4 bg-purple-50 rounded-lg">
                  <div>
                    <p className="font-medium text-gray-900">{selectedPatient.name}</p>
                    <p className="text-sm text-gray-500">ID: {selectedPatient.patientId} {selectedPatient.dateOfBirth && `| DOB: ${new Date(selectedPatient.dateOfBirth).toLocaleDateString()}`}</p>
                  </div>
                  <button type="button" onClick={() => setSelectedPatient(null)} className="text-red-600 text-sm">
                    {t('common.change')}
                  </button>
                </div>
              ) : (
                <SearchablePatientSelect
                  value=""
                  onChange={handlePatientSelect}
                  placeholder={t('surgery.searchPatientPlaceholder')}
                  className="w-full"
                />
              )}
            </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,
                        procedure: ''
                      }));
                    }}
                    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('surgery.procedure')}</label>
                  <select
                    value={formData.procedure}
                    onChange={(e) => setFormData(prev => ({ ...prev, 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="">{t('surgery.selectProcedure')}</option>
                    {procedures[formData.surgeryType]?.map(proc => (
                      <option key={proc} value={proc}>{proc}</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="">{doctors.length === 0 ? t('surgery.loadingDoctors') : t('surgery.selectSurgeon')}</option>
                    {doctors.map(doc => (
                      <option key={doc._id} value={doc._id}>
                        {doc.name}{doc.specialization ? ` - ${doc.specialization}` : ''}{doc.department ? ` (${doc.department})` : ''}
                      </option>
                    ))}
                  </select>
                  {doctors.length === 0 && (
                    <p className="text-xs text-gray-500 mt-1">{t('surgery.noSurgeonsNote')}</p>
                  )}
                </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 }))}
                    min={new Date().toISOString().split('T')[0]}
                    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')} <span className="text-red-500">*</span></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"
                    required
                  />
                </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 className="mt-4">
                  <Link 
                    href="/surgery/iol-calculator" 
                    className="text-purple-600 hover:text-purple-700 text-sm font-medium"
                  >
                    → {t('surgery.openIolCalculator')}
                  </Link>
                </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" 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 || !selectedPatient || !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.scheduling') : t('surgery.scheduleSurgeryButton')}
              </button>
            </div>
          </form>
        </div>
      </SidebarLayout>
    </ProtectedRoute>
  );
}