'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 { ArrowLeft, Save, Focus, User } from 'lucide-react';

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

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

  const [formData, setFormData] = useState({
    eye: 'OD',
    device: '',
    measurements: {
      simK1: 0,
      simK2: 0,
      simKAxis: 0,
      flatK: 0,
      steepK: 0,
      astigmatism: 0,
      centralK: 0,
      thinnestPachymetry: 0,
      thinnestLocation: ''
    },
    indices: {
      kpi: 0,
      isa: 0,
      sai: 0,
      iha: 0,
      ivs: 0
    },
    classification: 'normal',
    interpretation: '',
    notes: ''
  });

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

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

    setIsSubmitting(true);
    try {
      const response = await fetch('/api/imaging/topography', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          patientId: selectedPatient._id,
          ...formData,
          scanDate: new Date()
        })
      });

      if (response.ok) {
        const result = await response.json();
        router.push(`/imaging/topography/${result.scan._id}`);
      } else {
        const errorData = await response.json();
        alert(errorData.error || 'Failed to save topography');
      }
    } catch (error) {
      console.error('Error saving topography:', error);
      alert('Failed to save topography');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <SidebarLayout title="New Topography" description="Record corneal topography">
      <div className="max-w-4xl mx-auto">
        <div className="mb-6">
          <Link href="/imaging/topography" className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900">
            <ArrowLeft className="h-4 w-4" />
            Back to Topography
          </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-teal-600" />
              Patient
            </h2>

            {selectedPatient ? (
              <div className="flex items-center justify-between p-4 bg-teal-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>

          {/* Scan 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">
              <Focus className="h-5 w-5 text-teal-600" />
              Scan Details
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <label className="block text-sm text-gray-600 mb-1">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-teal-500"
                >
                  <option value="OD">OD (Right)</option>
                  <option value="OS">OS (Left)</option>
                </select>
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Device</label>
                <input
                  type="text"
                  value={formData.device}
                  onChange={(e) => setFormData(prev => ({ ...prev, device: e.target.value }))}
                  placeholder="e.g., Pentacam"
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Classification</label>
                <select
                  value={formData.classification}
                  onChange={(e) => setFormData(prev => ({ ...prev, classification: e.target.value }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500"
                >
                  <option value="normal">Normal</option>
                  <option value="suspect">Suspect</option>
                  <option value="keratoconus">Keratoconus</option>
                  <option value="post_lasik">Post-LASIK</option>
                  <option value="irregular">Irregular</option>
                </select>
              </div>
            </div>
          </div>

          {/* Keratometry */}
          <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">Keratometry</h2>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div>
                <label className="block text-sm text-gray-600 mb-1">Sim K1 (D)</label>
                <input
                  type="number"
                  step="0.01"
                  value={formData.measurements.simK1}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    measurements: { ...prev.measurements, simK1: parseFloat(e.target.value) || 0 }
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Sim K2 (D)</label>
                <input
                  type="number"
                  step="0.01"
                  value={formData.measurements.simK2}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    measurements: { ...prev.measurements, simK2: parseFloat(e.target.value) || 0 }
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Axis (°)</label>
                <input
                  type="number"
                  value={formData.measurements.simKAxis}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    measurements: { ...prev.measurements, simKAxis: parseInt(e.target.value) || 0 }
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Astigmatism (D)</label>
                <input
                  type="number"
                  step="0.01"
                  value={formData.measurements.astigmatism}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    measurements: { ...prev.measurements, astigmatism: parseFloat(e.target.value) || 0 }
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500"
                />
              </div>
            </div>
          </div>

          {/* Pachymetry */}
          <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">Pachymetry</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm text-gray-600 mb-1">Thinnest Point (µm)</label>
                <input
                  type="number"
                  value={formData.measurements.thinnestPachymetry}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    measurements: { ...prev.measurements, thinnestPachymetry: parseInt(e.target.value) || 0 }
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">Thinnest Location</label>
                <input
                  type="text"
                  value={formData.measurements.thinnestLocation}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    measurements: { ...prev.measurements, thinnestLocation: e.target.value }
                  }))}
                  placeholder="e.g., Inferotemporal"
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500"
                />
              </div>
            </div>
          </div>

          {/* Indices */}
          <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">Topographic Indices</h2>
            <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
              <div>
                <label className="block text-sm text-gray-600 mb-1">KPI</label>
                <input
                  type="number"
                  step="0.01"
                  value={formData.indices.kpi}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    indices: { ...prev.indices, kpi: parseFloat(e.target.value) || 0 }
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">ISA</label>
                <input
                  type="number"
                  step="0.01"
                  value={formData.indices.isa}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    indices: { ...prev.indices, isa: parseFloat(e.target.value) || 0 }
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">SAI</label>
                <input
                  type="number"
                  step="0.01"
                  value={formData.indices.sai}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    indices: { ...prev.indices, sai: parseFloat(e.target.value) || 0 }
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">IHA</label>
                <input
                  type="number"
                  step="0.01"
                  value={formData.indices.iha}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    indices: { ...prev.indices, iha: parseFloat(e.target.value) || 0 }
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500"
                />
              </div>
              <div>
                <label className="block text-sm text-gray-600 mb-1">IVS</label>
                <input
                  type="number"
                  step="0.01"
                  value={formData.indices.ivs}
                  onChange={(e) => setFormData(prev => ({
                    ...prev,
                    indices: { ...prev.indices, ivs: parseFloat(e.target.value) || 0 }
                  }))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500"
                />
              </div>
            </div>
          </div>

          {/* Interpretation */}
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <div className="mb-4">
              <label className="block text-sm text-gray-600 mb-1">Interpretation</label>
              <textarea
                value={formData.interpretation}
                onChange={(e) => setFormData(prev => ({ ...prev, interpretation: e.target.value }))}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500"
                rows={3}
                placeholder="Clinical interpretation..."
              />
            </div>
            <div>
              <label className="block text-sm text-gray-600 mb-1">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-teal-500"
                rows={2}
              />
            </div>
          </div>

          {/* Submit */}
          <div className="flex justify-end gap-4">
            <Link href="/imaging/topography" 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-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 flex items-center gap-2"
            >
              <Save className="h-4 w-4" />
              {isSubmitting ? 'Saving...' : 'Save Topography'}
            </button>
          </div>
        </form>
      </div>
    </SidebarLayout>
  );
}