'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, Eye, Activity } from 'lucide-react';

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

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

  const [formData, setFormData] = useState({
    diabetesType: 'type2',
    diabetesDuration: 0,
    metabolicControl: {
      hba1c: 7.0,
      lastHba1cDate: new Date().toISOString().split('T')[0],
      bloodPressure: { systolic: 120, diastolic: 80 },
      lipidProfile: { totalCholesterol: 200, ldl: 100, hdl: 50, triglycerides: 150 }
    },
    currentStatus: {
      OD: {
        drLevel: 'no_dr',
        dmeStatus: 'no_dme',
        findings: [] as string[]
      },
      OS: {
        drLevel: 'no_dr',
        dmeStatus: 'no_dme',
        findings: [] as string[]
      }
    },
    imaging: {
      fundusPhoto: false,
      oct: false,
      ffa: false
    },
    notes: ''
  });

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

  const toggleFinding = (eye: 'OD' | 'OS', finding: string) => {
    setFormData(prev => ({
      ...prev,
      currentStatus: {
        ...prev.currentStatus,
        [eye]: {
          ...prev.currentStatus[eye],
          findings: prev.currentStatus[eye].findings.includes(finding)
            ? prev.currentStatus[eye].findings.filter(f => f !== finding)
            : [...prev.currentStatus[eye].findings, finding]
        }
      }
    }));
  };

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

    setIsSubmitting(true);
    try {
      const response = await fetch('/api/dr-screening', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          patientId: selectedPatient._id,
          ...formData,
          screeningHistory: [{
            date: new Date(),
            OD: formData.currentStatus.OD,
            OS: formData.currentStatus.OS,
            examiner: 'current_user',
            imaging: formData.imaging
          }]
        })
      });

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

  const drLevels = [
    { value: 'no_dr', label: t('drScreening.grades.none') },
    { value: 'mild_npdr', label: t('drScreening.grades.mild') },
    { value: 'moderate_npdr', label: t('drScreening.grades.moderate') },
    { value: 'severe_npdr', label: t('drScreening.grades.severe') },
    { value: 'pdr', label: t('drScreening.grades.pdr') }
  ];

  const dmeStatuses = [
    { value: 'no_dme', label: 'No DME' },
    { value: 'non_ci_dme', label: 'Non-CI DME' },
    { value: 'ci_dme', label: 'CI-DME (Clinically Significant)' }
  ];

  const findingsOptions = [
    'microaneurysms', 'hemorrhages', 'hard_exudates', 'cotton_wool_spots',
    'venous_beading', 'irma', 'neovascularization', 'vitreous_hemorrhage',
    'tractional_rd', 'macular_edema', 'laser_scars'
  ];

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

            {selectedPatient ? (
              <div className="flex items-center justify-between p-4 bg-indigo-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">
                  Change
                </button>
              </div>
            ) : (
              <SearchablePatientSelect
                value=""
                onChange={handlePatientSelect}
                placeholder="Search patient by name or ID..."
                className="w-full"
              />
            )}
          </div>

          {/* Diabetes 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-indigo-600" />
              {t('drScreening.sections.diabetesHistory')}
            </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('drScreening.fields.diabetesType')}</label>
                <select
                  value={formData.diabetesType}
                  onChange={(e) => setFormData(prev => ({ ...prev, diabetesType: e.target.value }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                >
                  <option value="type1">Type 1</option>
                  <option value="type2">Type 2</option>
                  <option value="gestational">Gestational</option>
                  <option value="other">Other</option>
                </select>
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">{t('drScreening.fields.diabetesDuration')}</label>
                <input
                  type="number"
                  value={formData.diabetesDuration}
                  onChange={(e) => setFormData(prev => ({ ...prev, diabetesDuration: parseInt(e.target.value) || 0 }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">{t('drScreening.fields.hba1c')}</label>
                <input
                  type="number"
                  step="0.1"
                  value={formData.metabolicControl.hba1c}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    metabolicControl: { ...prev.metabolicControl, hba1c: parseFloat(e.target.value) || 0 }
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                />
              </div>
            </div>

            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div>
                <label className="block text-sm text-gray-600 mb-1">BP Systolic</label>
                <input
                  type="number"
                  value={formData.metabolicControl.bloodPressure.systolic}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    metabolicControl: {
                      ...prev.metabolicControl,
                      bloodPressure: { ...prev.metabolicControl.bloodPressure, systolic: parseInt(e.target.value) || 0 }
                    }
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">BP Diastolic</label>
                <input
                  type="number"
                  value={formData.metabolicControl.bloodPressure.diastolic}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    metabolicControl: {
                      ...prev.metabolicControl,
                      bloodPressure: { ...prev.metabolicControl.bloodPressure, diastolic: parseInt(e.target.value) || 0 }
                    }
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Total Cholesterol</label>
                <input
                  type="number"
                  value={formData.metabolicControl.lipidProfile.totalCholesterol}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    metabolicControl: {
                      ...prev.metabolicControl,
                      lipidProfile: { ...prev.metabolicControl.lipidProfile, totalCholesterol: parseInt(e.target.value) || 0 }
                    }
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">LDL</label>
                <input
                  type="number"
                  value={formData.metabolicControl.lipidProfile.ldl}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    metabolicControl: {
                      ...prev.metabolicControl,
                      lipidProfile: { ...prev.metabolicControl.lipidProfile, ldl: parseInt(e.target.value) || 0 }
                    }
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                />
              </div>
            </div>
          </div>

          {/* Eye Examination */}
          <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-indigo-600" />
              {t('drScreening.sections.fundusFindings')}
            </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' ? 'Right' : 'Left'} Eye)</h3>
                  
                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm text-gray-600 mb-1">DR Level</label>
                      <select
                        value={formData.currentStatus[eye as 'OD' | 'OS'].drLevel}
                        onChange={(e) => setFormData(prev => ({
                          ...prev,
                          currentStatus: {
                            ...prev.currentStatus,
                            [eye]: { ...prev.currentStatus[eye as 'OD' | 'OS'], drLevel: e.target.value }
                          }
                        }))}
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                      >
                        {drLevels.map(level => (
                          <option key={level.value} value={level.value}>{level.label}</option>
                        ))}
                      </select>
                    </div>

                    <div>
                      <label className="block text-sm text-gray-600 mb-1">DME Status</label>
                      <select
                        value={formData.currentStatus[eye as 'OD' | 'OS'].dmeStatus}
                        onChange={(e) => setFormData(prev => ({
                          ...prev,
                          currentStatus: {
                            ...prev.currentStatus,
                            [eye]: { ...prev.currentStatus[eye as 'OD' | 'OS'], dmeStatus: e.target.value }
                          }
                        }))}
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                      >
                        {dmeStatuses.map(status => (
                          <option key={status.value} value={status.value}>{status.label}</option>
                        ))}
                      </select>
                    </div>

                    <div>
                      <label className="block text-sm text-gray-600 mb-2">Findings</label>
                      <div className="flex flex-wrap gap-1">
                        {findingsOptions.map(finding => (
                          <button
                            key={finding}
                            type="button"
                            onClick={() => toggleFinding(eye as 'OD' | 'OS', finding)}
                            className={`px-2 py-1 rounded text-xs border transition-all ${
                              formData.currentStatus[eye as 'OD' | 'OS'].findings.includes(finding)
                                ? 'bg-indigo-100 border-indigo-500 text-indigo-700'
                                : 'bg-white border-gray-200 text-gray-600 hover:border-gray-300'
                            }`}
                          >
                            {finding.replace(/_/g, ' ')}
                          </button>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Imaging */}
          <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('drScreening.sections.imagingResults')}</h2>
            <div className="flex gap-6">
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={formData.imaging.fundusPhoto}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    imaging: { ...prev.imaging, fundusPhoto: e.target.checked }
                  }))}
                  className="rounded border-gray-300 text-indigo-600"
                />
                <span className="text-sm text-gray-700">Fundus Photo</span>
              </label>
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={formData.imaging.oct}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    imaging: { ...prev.imaging, oct: e.target.checked }
                  }))}
                  className="rounded border-gray-300 text-indigo-600"
                />
                <span className="text-sm text-gray-700">OCT</span>
              </label>
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={formData.imaging.ffa}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    imaging: { ...prev.imaging, ffa: e.target.checked }
                  }))}
                  className="rounded border-gray-300 text-indigo-600"
                />
                <span className="text-sm text-gray-700">FFA</span>
              </label>
            </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">Clinical Notes</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-indigo-500"
              rows={3}
              placeholder="Additional notes..."
            />
          </div>

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