'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import SidebarLayout from '../../components/sidebar-layout';
import SearchablePatientSelect from '../../components/SearchablePatientSelect';
import { useTranslations } from '../../hooks/useTranslations';
import { ArrowLeft, Save, User, Activity, Eye, X } from 'lucide-react';

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

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

  const [formData, setFormData] = useState({
    glaucomaType: 'poag',
    severity: 'mild',
    diagnosisDate: new Date().toISOString().split('T')[0],
    riskFactors: [] as string[],
    familyHistory: false,
    targetIOP: { OD: 16, OS: 16 },
    currentIOP: { OD: 0, OS: 0, method: 'goldmann', time: '' },
    opticNerve: {
      OD: { cdr: 0.3, rimThinning: 'none', hemorrhage: false, nflDefect: false },
      OS: { cdr: 0.3, rimThinning: 'none', hemorrhage: false, nflDefect: false }
    },
    medications: [] as { name: string; dosage: string; frequency: string; eye: string }[],
    notes: ''
  });

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

  const toggleRiskFactor = (factor: string) => {
    setFormData(prev => ({
      ...prev,
      riskFactors: prev.riskFactors.includes(factor)
        ? prev.riskFactors.filter(f => f !== factor)
        : [...prev.riskFactors, factor]
    }));
  };

  const addMedication = () => {
    setFormData(prev => ({
      ...prev,
      medications: [...prev.medications, { name: '', dosage: '', frequency: 'bid', eye: 'both' }]
    }));
  };

  const updateMedication = (index: number, field: string, value: string) => {
    setFormData(prev => ({
      ...prev,
      medications: prev.medications.map((med, i) => 
        i === index ? { ...med, [field]: value } : med
      )
    }));
  };

  const removeMedication = (index: number) => {
    setFormData(prev => ({
      ...prev,
      medications: prev.medications.filter((_, i) => i !== index)
    }));
  };

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

    setIsSubmitting(true);
    try {
      const response = await fetch('/api/glaucoma', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          patientId: selectedPatient._id,
          ...formData,
          iopHistory: [{
            date: new Date(),
            OD: formData.currentIOP.OD,
            OS: formData.currentIOP.OS,
            method: formData.currentIOP.method,
            time: formData.currentIOP.time
          }]
        })
      });

      const data = await response.json();
      if (response.ok) {
        router.push(`/glaucoma/${data.record._id}`);
      } else {
        alert(data.error || 'Failed to create glaucoma record');
      }
    } catch (error) {
      console.error('Error creating glaucoma record:', error);
      alert('Failed to create glaucoma record');
    } finally {
      setIsSubmitting(false);
    }
  };

  const riskFactorOptions = [
    'elevated_iop', 'thin_cornea', 'high_myopia', 'diabetes', 
    'hypertension', 'migraine', 'sleep_apnea', 'steroid_use'
  ];

  const glaucomaMedications = [
    'Latanoprost 0.005%', 'Timolol 0.5%', 'Brimonidine 0.2%', 'Dorzolamide 2%',
    'Bimatoprost 0.01%', 'Travoprost 0.004%', 'Brinzolamide 1%', 'Combigan',
    'Cosopt', 'Simbrinza', 'Rocklatan', 'Vyzulta'
  ];

  return (
    <SidebarLayout title={t('glaucomaCenter.newRecord')} description={t('glaucomaCenter.description')}>
      <div className="max-w-4xl mx-auto">
        <div className="mb-6">
          <Link href="/glaucoma" className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900">
            <ArrowLeft className="h-4 w-4" />
            {t('glaucomaCenter.title')}
          </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-blue-600" />
              {t('glaucomaCenter.patientInformation')}
            </h2>

            {selectedPatient ? (
              <div className="flex items-center justify-between p-4 bg-blue-50 rounded-lg">
                <div>
                  <p className="font-medium text-gray-900">{selectedPatient.name}</p>
                  <p className="text-sm text-gray-500">ID: {selectedPatient.patientId}</p>
                </div>
                <button type="button" onClick={() => setSelectedPatient(null)} className="text-red-600 text-sm">
                  {t('glaucomaCenter.change')}
                </button>
              </div>
            ) : (
              <SearchablePatientSelect
                value=""
                onChange={handlePatientSelect}
                placeholder={t('glaucomaCenter.searchPatientPlaceholder')}
                className="w-full"
              />
            )}
          </div>

          {/* Diagnosis Information */}
          <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">
              <Activity className="h-5 w-5 text-blue-600" />
              {t('glaucomaCenter.diagnosis')}
            </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('glaucomaCenter.glaucomaType')}</label>
                <select
                  value={formData.glaucomaType}
                  onChange={(e) => setFormData(prev => ({ ...prev, glaucomaType: e.target.value }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                >
                  <option value="poag">{t('glaucomaCenter.typeOptions.poag')}</option>
                  <option value="pacg">{t('glaucomaCenter.typeOptions.pacg')}</option>
                  <option value="ntg">{t('glaucomaCenter.typeOptions.ntg')}</option>
                  <option value="secondary">{t('glaucomaCenter.typeOptions.secondary')}</option>
                  <option value="congenital">{t('glaucomaCenter.typeOptions.congenital')}</option>
                  <option value="suspect">{t('glaucomaCenter.typeOptions.suspect')}</option>
                </select>
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">{t('glaucomaCenter.severityLabel')}</label>
                <select
                  value={formData.severity}
                  onChange={(e) => setFormData(prev => ({ ...prev, severity: e.target.value }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                >
                  <option value="suspect">{t('glaucomaCenter.severityOptions.suspect')}</option>
                  <option value="mild">{t('glaucomaCenter.severityOptions.mild')}</option>
                  <option value="moderate">{t('glaucomaCenter.severityOptions.moderate')}</option>
                  <option value="severe">{t('glaucomaCenter.severityOptions.severe')}</option>
                  <option value="end_stage">{t('glaucomaCenter.severityOptions.endStage')}</option>
                </select>
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">{t('glaucomaCenter.diagnosisDate')}</label>
                <input
                  type="date"
                  value={formData.diagnosisDate}
                  onChange={(e) => setFormData(prev => ({ ...prev, diagnosisDate: e.target.value }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                />
              </div>
            </div>

            <div className="mb-4">
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={formData.familyHistory}
                  onChange={(e) => setFormData(prev => ({ ...prev, familyHistory: e.target.checked }))}
                  className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                />
                <span className="text-sm text-gray-700">{t('glaucomaCenter.familyHistoryOfGlaucoma')}</span>
              </label>
            </div>

            <div>
              <label className="block text-sm text-gray-600 mb-2">{t('glaucomaCenter.riskFactorsLabel')}</label>
              <div className="flex flex-wrap gap-2">
                {riskFactorOptions.map(factor => (
                  <button
                    key={factor}
                    type="button"
                    onClick={() => toggleRiskFactor(factor)}
                    className={`px-3 py-1.5 rounded-full text-sm border transition-all ${
                      formData.riskFactors.includes(factor)
                        ? 'bg-blue-100 border-blue-500 text-blue-700'
                        : 'bg-gray-50 border-gray-200 text-gray-600 hover:border-gray-300'
                    }`}
                  >
                    {t(`glaucomaCenter.riskFactorOptions.${factor}`) || factor.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
                  </button>
                ))}
              </div>
            </div>
          </div>

          {/* IOP & Target */}
          <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">
              <Eye className="h-5 w-5 text-blue-600" />
              {t('glaucomaCenter.intraocularPressure')}
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="font-medium text-gray-700 mb-3">{t('glaucomaCenter.currentIOP')}</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm text-gray-600 mb-1">{t('glaucomaCenter.odMmHg')}</label>
                    <input
                      type="number"
                      value={formData.currentIOP.OD}
                      onChange={(e) => setFormData(prev => ({
                        ...prev,
                        currentIOP: { ...prev.currentIOP, OD: parseInt(e.target.value) || 0 }
                      }))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm text-gray-600 mb-1">{t('glaucomaCenter.osMmHg')}</label>
                    <input
                      type="number"
                      value={formData.currentIOP.OS}
                      onChange={(e) => setFormData(prev => ({
                        ...prev,
                        currentIOP: { ...prev.currentIOP, OS: parseInt(e.target.value) || 0 }
                      }))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4 mt-3">
                  <div>
                    <label className="block text-sm text-gray-600 mb-1">{t('glaucomaCenter.methodLabel')}</label>
                    <select
                      value={formData.currentIOP.method}
                      onChange={(e) => setFormData(prev => ({
                        ...prev,
                        currentIOP: { ...prev.currentIOP, method: e.target.value }
                      }))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    >
                      <option value="goldmann">{t('glaucomaCenter.iopMethods.goldmann')}</option>
                      <option value="nct">{t('glaucomaCenter.iopMethods.nct')}</option>
                      <option value="icare">{t('glaucomaCenter.iopMethods.icare')}</option>
                      <option value="tono_pen">{t('glaucomaCenter.iopMethods.tonoPen')}</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm text-gray-600 mb-1">{t('glaucomaCenter.timeLabel')}</label>
                    <input
                      type="time"
                      value={formData.currentIOP.time}
                      onChange={(e) => setFormData(prev => ({
                        ...prev,
                        currentIOP: { ...prev.currentIOP, time: e.target.value }
                      }))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                </div>
              </div>

              <div>
                <h3 className="font-medium text-gray-700 mb-3">{t('glaucomaCenter.targetIOP')}</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm text-gray-600 mb-1">{t('glaucomaCenter.odTargetMmHg')}</label>
                    <input
                      type="number"
                      value={formData.targetIOP.OD}
                      onChange={(e) => setFormData(prev => ({
                        ...prev,
                        targetIOP: { ...prev.targetIOP, OD: parseInt(e.target.value) || 0 }
                      }))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm text-gray-600 mb-1">{t('glaucomaCenter.osTargetMmHg')}</label>
                    <input
                      type="number"
                      value={formData.targetIOP.OS}
                      onChange={(e) => setFormData(prev => ({
                        ...prev,
                        targetIOP: { ...prev.targetIOP, OS: parseInt(e.target.value) || 0 }
                      }))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Optic Nerve */}
          <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('glaucomaCenter.opticNerveAssessment')}</h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {['OD', 'OS'].map(eye => (
                <div key={eye} className="p-4 bg-gray-50 rounded-lg">
                  <h3 className="font-medium text-gray-700 mb-3">{eye} ({eye === 'OD' ? t('glaucomaCenter.rightEye') : t('glaucomaCenter.leftEye')})</h3>
                  <div className="space-y-3">
                    <div>
                      <label className="block text-sm text-gray-600 mb-1">{t('glaucomaCenter.cupToDiscRatio')}</label>
                      <input
                        type="number"
                        step="0.1"
                        min="0"
                        max="1"
                        value={formData.opticNerve[eye as 'OD' | 'OS'].cdr}
                        onChange={(e) => setFormData(prev => ({
                          ...prev,
                          opticNerve: {
                            ...prev.opticNerve,
                            [eye]: { ...prev.opticNerve[eye as 'OD' | 'OS'], cdr: parseFloat(e.target.value) }
                          }
                        }))}
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                      />
                    </div>
                    <div>
                      <label className="block text-sm text-gray-600 mb-1">{t('glaucomaCenter.rimThinning')}</label>
                      <select
                        value={formData.opticNerve[eye as 'OD' | 'OS'].rimThinning}
                        onChange={(e) => setFormData(prev => ({
                          ...prev,
                          opticNerve: {
                            ...prev.opticNerve,
                            [eye]: { ...prev.opticNerve[eye as 'OD' | 'OS'], rimThinning: e.target.value }
                          }
                        }))}
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                      >
                        <option value="none">{t('glaucomaCenter.rimThinningOptions.none')}</option>
                        <option value="superior">{t('glaucomaCenter.rimThinningOptions.superior')}</option>
                        <option value="inferior">{t('glaucomaCenter.rimThinningOptions.inferior')}</option>
                        <option value="temporal">{t('glaucomaCenter.rimThinningOptions.temporal')}</option>
                        <option value="diffuse">{t('glaucomaCenter.rimThinningOptions.diffuse')}</option>
                      </select>
                    </div>
                    <div className="flex gap-4">
                      <label className="flex items-center gap-2">
                        <input
                          type="checkbox"
                          checked={formData.opticNerve[eye as 'OD' | 'OS'].hemorrhage}
                          onChange={(e) => setFormData(prev => ({
                            ...prev,
                            opticNerve: {
                              ...prev.opticNerve,
                              [eye]: { ...prev.opticNerve[eye as 'OD' | 'OS'], hemorrhage: e.target.checked }
                            }
                          }))}
                          className="rounded border-gray-300 text-blue-600"
                        />
                        <span className="text-sm">{t('glaucomaCenter.hemorrhage')}</span>
                      </label>
                      <label className="flex items-center gap-2">
                        <input
                          type="checkbox"
                          checked={formData.opticNerve[eye as 'OD' | 'OS'].nflDefect}
                          onChange={(e) => setFormData(prev => ({
                            ...prev,
                            opticNerve: {
                              ...prev.opticNerve,
                              [eye]: { ...prev.opticNerve[eye as 'OD' | 'OS'], nflDefect: e.target.checked }
                            }
                          }))}
                          className="rounded border-gray-300 text-blue-600"
                        />
                        <span className="text-sm">{t('glaucomaCenter.nflDefect')}</span>
                      </label>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Medications */}
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-lg font-semibold text-gray-900">{t('glaucomaCenter.medications')}</h2>
              <button
                type="button"
                onClick={addMedication}
                className="text-blue-600 hover:text-blue-700 text-sm font-medium"
              >
                + {t('glaucomaCenter.addMedication')}
              </button>
            </div>

            {formData.medications.length === 0 ? (
              <p className="text-gray-500 text-sm">{t('glaucomaCenter.noMedicationsAdded')}</p>
            ) : (
              <div className="space-y-3">
                {formData.medications.map((med, index) => (
                  <div key={index} className="flex gap-3 items-start p-3 bg-gray-50 rounded-lg">
                    <div className="flex-1 grid grid-cols-4 gap-3">
                      <select
                        value={med.name}
                        onChange={(e) => updateMedication(index, 'name', e.target.value)}
                        className="px-3 py-2 border border-gray-300 rounded-lg text-sm"
                      >
                        <option value="">{t('glaucomaCenter.selectMedication')}</option>
                        {glaucomaMedications.map(m => (
                          <option key={m} value={m}>{m}</option>
                        ))}
                      </select>
                      <select
                        value={med.frequency}
                        onChange={(e) => updateMedication(index, 'frequency', e.target.value)}
                        className="px-3 py-2 border border-gray-300 rounded-lg text-sm"
                      >
                        <option value="qd">{t('glaucomaCenter.frequency.qd')}</option>
                        <option value="bid">{t('glaucomaCenter.frequency.bid')}</option>
                        <option value="tid">{t('glaucomaCenter.frequency.tid')}</option>
                        <option value="qhs">{t('glaucomaCenter.frequency.qhs')}</option>
                      </select>
                      <select
                        value={med.eye}
                        onChange={(e) => updateMedication(index, 'eye', e.target.value)}
                        className="px-3 py-2 border border-gray-300 rounded-lg text-sm"
                      >
                        <option value="both">{t('glaucomaCenter.eyeOptions.both')}</option>
                        <option value="OD">{t('glaucomaCenter.eyeOptions.od')}</option>
                        <option value="OS">{t('glaucomaCenter.eyeOptions.os')}</option>
                      </select>
                      <button
                        type="button"
                        onClick={() => removeMedication(index)}
                        className="text-red-600 hover:text-red-700 text-sm"
                      >
                        {t('glaucomaCenter.remove')}
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* 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('glaucomaCenter.clinicalNotes')}</label>
            <textarea
              value={formData.notes}
              onChange={(e) => setFormData(prev => ({ ...prev, notes: e.target.value }))}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
              rows={3}
              placeholder={t('glaucomaCenter.clinicalNotesPlaceholder')}
            />
          </div>

          {/* Submit */}
          <div className="flex justify-end gap-4">
            <Link href="/glaucoma" className="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
              {t('glaucomaCenter.cancel')}
            </Link>
            <button
              type="submit"
              disabled={isSubmitting || !selectedPatient}
              className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center gap-2"
            >
              <Save className="h-4 w-4" />
              {isSubmitting ? t('glaucomaCenter.saving') : t('glaucomaCenter.createRecord')}
            </button>
          </div>
        </form>
      </div>
    </SidebarLayout>
  );
}