'use client';

import { useState } from 'react';
import SidebarLayout from '../../components/sidebar-layout';
import ProtectedRoute from '../../protected-route';
import { useTranslations } from '../../hooks/useTranslations';
import toast from 'react-hot-toast';
import { 
  Calculator, 
  Eye,
  Target,
  Zap,
  ArrowRight,
  Check,
  Info
} from 'lucide-react';

interface IOLResult {
  formula: string;
  inputData: {
    axialLength: number;
    keratometry: { k1: number; k2: number; avgK: number };
    acd: number;
    aConstant: number;
    targetRefraction: number;
    lensModel: string;
  };
  calculatedPower: number;
  predictedRefraction: number;
  alternativePowers: { power: number; predictedRefraction: number }[];
  recommendations: {
    emmetropia: number;
    slightMyopia?: number;
    reading?: number;
  };
}

const commonIOLs = [
  { name: 'Alcon AcrySof IQ', aConstant: 118.7 },
  { name: 'Alcon AcrySof SN60WF', aConstant: 118.7 },
  { name: 'AMO Tecnis ZCB00', aConstant: 119.3 },
  { name: 'Bausch+Lomb enVista', aConstant: 119.1 },
  { name: 'Zeiss CT Lucia', aConstant: 118.8 },
  { name: 'Rayner RayOne', aConstant: 118.6 },
  { name: 'Custom', aConstant: 118.0 }
];

export default function IOLCalculatorPage() {
  const { t } = useTranslations();
  const [isCalculating, setIsCalculating] = useState(false);
  const [result, setResult] = useState<IOLResult | null>(null);
  const [selectedEye, setSelectedEye] = useState<'OD' | 'OS'>('OD');
  
  const [formData, setFormData] = useState({
    axialLength: '',
    k1: '',
    k2: '',
    acd: '',
    targetRefraction: '0',
    lensModel: 'Alcon AcrySof IQ',
    aConstant: '118.7',
    formula: 'srkt'
  });

  const handleLensChange = (lensName: string) => {
    const lens = commonIOLs.find(l => l.name === lensName);
    if (lens) {
      setFormData(prev => ({
        ...prev,
        lensModel: lensName,
        aConstant: lens.aConstant.toString()
      }));
    }
  };

  const handleCalculate = async () => {
    if (!formData.axialLength || !formData.k1 || !formData.k2) {
      toast.error(t('iolCalculatorPage.enterBiometryError'));
      return;
    }

    setIsCalculating(true);

    try {
      const response = await fetch('/api/surgery/iol-calculator', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });

      if (!response.ok) throw new Error('Calculation failed');

      const data = await response.json();
      setResult(data.calculation);
      toast.success(t('iolCalculatorPage.calculationSuccess'));
    } catch (error) {
      console.error('Error calculating IOL:', error);
      toast.error(t('iolCalculatorPage.calculationFailed'));
    } finally {
      setIsCalculating(false);
    }
  };

  return (
    <ProtectedRoute>
      <SidebarLayout title={t('iolCalculatorPage.title')} description={t('iolCalculatorPage.description')}>
        <div className="max-w-6xl mx-auto space-y-6">
          {/* Header */}
          <div className="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-xl p-6 text-white">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-white/20 rounded-xl">
                <Calculator className="h-8 w-8" />
              </div>
              <div>
                <h1 className="text-2xl font-bold">{t('iolCalculatorPage.title')}</h1>
                <p className="text-purple-100 mt-1">
                  {t('iolCalculatorPage.subtitle')}
                </p>
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Input Form */}
            <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
              <h2 className="text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2">
                <Eye className="h-5 w-5 text-purple-600" />
                {t('iolCalculatorPage.biometryData')}
              </h2>

              {/* Eye Selection */}
              <div className="flex gap-4 mb-6">
                <button
                  type="button"
                  onClick={() => setSelectedEye('OD')}
                  className={`flex-1 py-3 rounded-lg font-medium transition-colors ${
                    selectedEye === 'OD'
                      ? 'bg-purple-600 text-white'
                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                  }`}
                >
                  {t('iolCalculatorPage.odRightEye')}
                </button>
                <button
                  type="button"
                  onClick={() => setSelectedEye('OS')}
                  className={`flex-1 py-3 rounded-lg font-medium transition-colors ${
                    selectedEye === 'OS'
                      ? 'bg-purple-600 text-white'
                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                  }`}
                >
                  {t('iolCalculatorPage.osLeftEye')}
                </button>
              </div>

              <div className="space-y-4">
                {/* Axial Length */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    {t('iolCalculatorPage.axialLength')} *
                  </label>
                  <input
                    type="number"
                    step="0.01"
                    value={formData.axialLength}
                    onChange={(e) => setFormData(prev => ({ ...prev, axialLength: e.target.value }))}
                    className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500"
                    placeholder={t('iolCalculatorPage.axialLengthPlaceholder')}
                  />
                </div>

                {/* Keratometry */}
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      {t('iolCalculatorPage.k1Flat')} *
                    </label>
                    <input
                      type="number"
                      step="0.01"
                      value={formData.k1}
                      onChange={(e) => setFormData(prev => ({ ...prev, k1: e.target.value }))}
                      className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500"
                      placeholder={t('iolCalculatorPage.k1Placeholder')}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      {t('iolCalculatorPage.k2Steep')} *
                    </label>
                    <input
                      type="number"
                      step="0.01"
                      value={formData.k2}
                      onChange={(e) => setFormData(prev => ({ ...prev, k2: e.target.value }))}
                      className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500"
                      placeholder={t('iolCalculatorPage.k2Placeholder')}
                    />
                  </div>
                </div>

                {/* ACD */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    {t('iolCalculatorPage.acd')}
                  </label>
                  <input
                    type="number"
                    step="0.01"
                    value={formData.acd}
                    onChange={(e) => setFormData(prev => ({ ...prev, acd: e.target.value }))}
                    className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500"
                    placeholder={t('iolCalculatorPage.acdPlaceholder')}
                  />
                </div>

                {/* IOL Selection */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    {t('iolCalculatorPage.iolModel')}
                  </label>
                  <select
                    value={formData.lensModel}
                    onChange={(e) => handleLensChange(e.target.value)}
                    className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500"
                  >
                    {commonIOLs.map(lens => (
                      <option key={lens.name} value={lens.name}>
                        {lens.name} (A: {lens.aConstant})
                      </option>
                    ))}
                  </select>
                </div>

                {/* A-Constant */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    {t('iolCalculatorPage.aConstant')}
                  </label>
                  <input
                    type="number"
                    step="0.1"
                    value={formData.aConstant}
                    onChange={(e) => setFormData(prev => ({ ...prev, aConstant: e.target.value }))}
                    className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500"
                  />
                </div>

                {/* Formula */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    {t('iolCalculatorPage.formula')}
                  </label>
                  <div className="grid grid-cols-3 gap-2">
                    {['srkt', 'haigis', 'holladay1'].map(formula => (
                      <button
                        key={formula}
                        type="button"
                        onClick={() => setFormData(prev => ({ ...prev, formula }))}
                        className={`py-2 rounded-lg font-medium text-sm transition-colors ${
                          formData.formula === formula
                            ? 'bg-purple-600 text-white'
                            : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                        }`}
                      >
                        {formula.toUpperCase()}
                      </button>
                    ))}
                  </div>
                </div>

                {/* Target Refraction */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    {t('iolCalculatorPage.targetRefraction')}
                  </label>
                  <input
                    type="number"
                    step="0.25"
                    value={formData.targetRefraction}
                    onChange={(e) => setFormData(prev => ({ ...prev, targetRefraction: e.target.value }))}
                    className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500"
                    placeholder={t('iolCalculatorPage.targetRefractionPlaceholder')}
                  />
                </div>

                <button
                  type="button"
                  onClick={handleCalculate}
                  disabled={isCalculating}
                  className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 font-medium mt-6"
                >
                  {isCalculating ? (
                    <>
                      <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
                      {t('iolCalculatorPage.calculating')}
                    </>
                  ) : (
                    <>
                      <Calculator className="h-5 w-5" />
                      {t('iolCalculatorPage.calculateIolPower')}
                    </>
                  )}
                </button>
              </div>
            </div>

            {/* Results */}
            <div className="space-y-6">
              {result ? (
                <>
                  {/* Main Result */}
                  <div className="bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl p-6 text-white">
                    <div className="flex items-center justify-between mb-4">
                      <h3 className="text-lg font-semibold">{t('iolCalculatorPage.recommendedIolPower')}</h3>
                      <span className="px-3 py-1 bg-white/20 rounded-full text-sm">
                        {result.formula.toUpperCase()}
                      </span>
                    </div>
                    <div className="text-center py-6">
                      <p className="text-6xl font-bold">{result.calculatedPower}</p>
                      <p className="text-green-100 mt-2">{t('iolCalculatorPage.diopters')}</p>
                    </div>
                    <div className="bg-white/10 rounded-lg p-4 mt-4">
                      <div className="flex justify-between items-center">
                        <span className="text-green-100">{t('iolCalculatorPage.predictedRefraction')}</span>
                        <span className="text-xl font-semibold">
                          {result.predictedRefraction > 0 ? '+' : ''}{result.predictedRefraction} D
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* Alternative Powers */}
                  <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
                    <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
                      <Target className="h-5 w-5 text-purple-600" />
                      {t('iolCalculatorPage.powerOptions')}
                    </h3>
                    <div className="space-y-2">
                      {result.alternativePowers.map((alt, index) => (
                        <div
                          key={index}
                          className={`flex items-center justify-between p-3 rounded-lg ${
                            alt.power === result.calculatedPower
                              ? 'bg-green-50 border border-green-200'
                              : 'bg-gray-50'
                          }`}
                        >
                          <div className="flex items-center gap-3">
                            {alt.power === result.calculatedPower && (
                              <Check className="h-5 w-5 text-green-600" />
                            )}
                            <span className="font-mono font-semibold text-lg">{alt.power} D</span>
                          </div>
                          <span className={`font-mono ${
                            Math.abs(alt.predictedRefraction) < 0.25 ? 'text-green-600' :
                            Math.abs(alt.predictedRefraction) < 0.5 ? 'text-amber-600' : 'text-gray-600'
                          }`}>
                            {alt.predictedRefraction > 0 ? '+' : ''}{alt.predictedRefraction} D
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Recommendations */}
                  <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
                    <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
                      <Zap className="h-5 w-5 text-amber-600" />
                      {t('iolCalculatorPage.targetRecommendations')}
                    </h3>
                    <div className="grid grid-cols-3 gap-4">
                      <div className="text-center p-4 bg-green-50 rounded-lg">
                        <p className="text-sm text-gray-600 mb-1">{t('iolCalculatorPage.emmetropia')}</p>
                        <p className="text-2xl font-bold text-green-600">
                          {result.recommendations.emmetropia} D
                        </p>
                      </div>
                      {result.recommendations.slightMyopia && (
                        <div className="text-center p-4 bg-blue-50 rounded-lg">
                          <p className="text-sm text-gray-600 mb-1">{t('iolCalculatorPage.minusHalfTarget')}</p>
                          <p className="text-2xl font-bold text-blue-600">
                            {result.recommendations.slightMyopia} D
                          </p>
                        </div>
                      )}
                      {result.recommendations.reading && (
                        <div className="text-center p-4 bg-purple-50 rounded-lg">
                          <p className="text-sm text-gray-600 mb-1">{t('iolCalculatorPage.nearVision')}</p>
                          <p className="text-2xl font-bold text-purple-600">
                            {result.recommendations.reading} D
                          </p>
                        </div>
                      )}
                    </div>
                  </div>

                  {/* Input Summary */}
                  <div className="bg-gray-50 rounded-xl p-4 border border-gray-200">
                    <div className="flex items-center gap-2 mb-3">
                      <Info className="h-4 w-4 text-gray-500" />
                      <span className="text-sm font-medium text-gray-700">{t('iolCalculatorPage.calculationParameters')}</span>
                    </div>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                      <div>
                        <span className="text-gray-500">{t('iolCalculatorPage.al')}:</span>
                        <span className="ml-1 font-medium">{result.inputData.axialLength} mm</span>
                      </div>
                      <div>
                        <span className="text-gray-500">{t('iolCalculatorPage.avgK')}:</span>
                        <span className="ml-1 font-medium">{result.inputData.keratometry.avgK.toFixed(2)} D</span>
                      </div>
                      <div>
                        <span className="text-gray-500">ACD:</span>
                        <span className="ml-1 font-medium">{result.inputData.acd} mm</span>
                      </div>
                      <div>
                        <span className="text-gray-500">{t('iolCalculatorPage.aConst')}:</span>
                        <span className="ml-1 font-medium">{result.inputData.aConstant}</span>
                      </div>
                    </div>
                  </div>
                </>
              ) : (
                <div className="bg-white rounded-xl shadow-sm p-12 border border-gray-100 text-center">
                  <Calculator className="h-16 w-16 text-gray-300 mx-auto mb-4" />
                  <h3 className="text-lg font-medium text-gray-900 mb-2">{t('iolCalculatorPage.noCalculationYet')}</h3>
                  <p className="text-gray-500">{t('iolCalculatorPage.noCalculationDescription')}</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </SidebarLayout>
    </ProtectedRoute>
  );
}