'use client';

import { useState, useRef } from 'react';
import Link from 'next/link';
import SidebarLayout from '../../components/sidebar-layout';
import { useTranslations } from '../../hooks/useTranslations';
import { 
  ArrowLeft, 
  Upload, 
  Brain, 
  Eye, 
  AlertTriangle,
  CheckCircle,
  Loader2,
  Image as ImageIcon,
  FileImage
} from 'lucide-react';

interface AnalysisResult {
  drLevel: string;
  drLevelConfidence: number;
  dmeDetected: boolean;
  dmeConfidence: number;
  findings: {
    name: string;
    confidence: number;
    location: string;
    severity: string;
  }[];
  recommendations: string[];
  referralNeeded: boolean;
  urgency: string;
}

export default function AIAnalysisPage() {
  const { t } = useTranslations();
  const [selectedImage, setSelectedImage] = useState<File | null>(null);
  const [imagePreview, setImagePreview] = useState<string | null>(null);
  const [selectedEye, setSelectedEye] = useState<'OD' | 'OS'>('OD');
  const [isAnalyzing, setIsAnalyzing] = useState(false);
  const [result, setResult] = useState<AnalysisResult | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleImageSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setSelectedImage(file);
      const reader = new FileReader();
      reader.onloadend = () => {
        setImagePreview(reader.result as string);
      };
      reader.readAsDataURL(file);
      setResult(null);
    }
  };

  const handleAnalyze = async () => {
    if (!selectedImage) return;

    setIsAnalyzing(true);
    
    // Simulate AI analysis (in production, this would call an actual AI API)
    await new Promise(resolve => setTimeout(resolve, 3000));
    
    // Mock result - in production this would come from the AI model
    const mockResult: AnalysisResult = {
      drLevel: 'moderate_npdr',
      drLevelConfidence: 0.87,
      dmeDetected: true,
      dmeConfidence: 0.72,
      findings: [
        { name: 'Microaneurysms', confidence: 0.95, location: 'Temporal arcade', severity: 'moderate' },
        { name: 'Hemorrhages', confidence: 0.88, location: 'Macula', severity: 'mild' },
        { name: 'Hard Exudates', confidence: 0.82, location: 'Perifoveal', severity: 'moderate' },
        { name: 'Cotton Wool Spots', confidence: 0.65, location: 'Superior nasal', severity: 'mild' }
      ],
      recommendations: [
        'Consider OCT to evaluate macular thickness',
        'Review HbA1c and optimize glycemic control',
        'Consider anti-VEGF treatment if CI-DME confirmed',
        'Follow up in 3-4 months'
      ],
      referralNeeded: true,
      urgency: 'moderate'
    };

    setResult(mockResult);
    setIsAnalyzing(false);
  };

  const getDRLevelLabel = (level: string) => {
    const labels: Record<string, string> = {
      'no_dr': t('drScreening.grades.none'),
      'mild_npdr': t('drScreening.grades.mild'),
      'moderate_npdr': t('drScreening.grades.moderate'),
      'severe_npdr': t('drScreening.grades.severe'),
      'pdr': t('drScreening.grades.pdr')
    };
    return labels[level] || level;
  };

  const getDRLevelColor = (level: string) => {
    const colors: Record<string, string> = {
      'no_dr': 'bg-green-100 text-green-700 border-green-200',
      'mild_npdr': 'bg-yellow-100 text-yellow-700 border-yellow-200',
      'moderate_npdr': 'bg-orange-100 text-orange-700 border-orange-200',
      'severe_npdr': 'bg-red-100 text-red-700 border-red-200',
      'pdr': 'bg-red-200 text-red-800 border-red-300'
    };
    return colors[level] || 'bg-gray-100 text-gray-700 border-gray-200';
  };

  return (
    <SidebarLayout title={t('drScreening.title')} description={t('drScreening.description')}>
      <div className="max-w-5xl 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>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Upload Section */}
          <div className="space-y-6">
            <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">
                <Brain className="h-5 w-5 text-indigo-600" />
                {t('drScreening.aiAnalysis.title')}
              </h2>
              
              <p className="text-sm text-gray-600 mb-4">
                {t('drScreening.aiAnalysis.description')}
              </p>

              <div className="mb-4">
                <label className="block text-sm text-gray-600 mb-2">{t('drScreening.aiAnalysis.eye')}</label>
                <div className="flex gap-4">
                  {['OD', 'OS'].map(eye => (
                    <label
                      key={eye}
                      className={`flex-1 p-3 rounded-lg border-2 cursor-pointer transition-all text-center ${
                        selectedEye === eye
                          ? 'border-indigo-500 bg-indigo-50'
                          : 'border-gray-200 hover:border-gray-300'
                      }`}
                    >
                      <input
                        type="radio"
                        name="eye"
                        value={eye}
                        checked={selectedEye === eye}
                        onChange={() => setSelectedEye(eye as 'OD' | 'OS')}
                        className="sr-only"
                      />
                      <span className="font-medium">{eye}</span>
                      <span className="text-sm text-gray-500 block">{eye === 'OD' ? t('drScreening.aiAnalysis.rightEye') : t('drScreening.aiAnalysis.leftEye')}</span>
                    </label>
                  ))}
                </div>
              </div>

              <input
                type="file"
                ref={fileInputRef}
                onChange={handleImageSelect}
                accept="image/*"
                className="hidden"
              />

              {imagePreview ? (
                <div className="relative">
                  <img
                    src={imagePreview}
                    alt="Fundus"
                    className="w-full h-64 object-cover rounded-lg"
                  />
                  <button
                    onClick={() => {
                      setSelectedImage(null);
                      setImagePreview(null);
                      setResult(null);
                    }}
                    className="absolute top-2 right-2 p-2 bg-red-600 text-white rounded-full hover:bg-red-700"
                  >
                    ×
                  </button>
                </div>
              ) : (
                <div
                  onClick={() => fileInputRef.current?.click()}
                  className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-indigo-400 transition-colors"
                >
                  <FileImage className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                  <p className="text-gray-600 mb-2">{t('drScreening.aiAnalysis.uploadPrompt')}</p>
                  <p className="text-sm text-gray-400">{t('drScreening.aiAnalysis.uploadFormats')}</p>
                </div>
              )}

              <button
                onClick={handleAnalyze}
                disabled={!selectedImage || isAnalyzing}
                className="w-full mt-4 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
              >
                {isAnalyzing ? (
                  <>
                    <Loader2 className="h-5 w-5 animate-spin" />
                    {t('drScreening.aiAnalysis.analyzing')}
                  </>
                ) : (
                  <>
                    <Brain className="h-5 w-5" />
                    {t('drScreening.aiAnalysis.analyzeImage')}
                  </>
                )}
              </button>
            </div>

            {/* Instructions */}
            <div className="bg-blue-50 rounded-xl p-4 border border-blue-100">
              <h3 className="font-medium text-blue-900 mb-2">{t('drScreening.aiAnalysis.imageGuidelines')}</h3>
              <ul className="text-sm text-blue-800 space-y-1">
                <li>• {t('drScreening.aiAnalysis.guideline1')}</li>
                <li>• {t('drScreening.aiAnalysis.guideline2')}</li>
                <li>• {t('drScreening.aiAnalysis.guideline3')}</li>
                <li>• {t('drScreening.aiAnalysis.guideline4')}</li>
                <li>• {t('drScreening.aiAnalysis.guideline5')}</li>
              </ul>
            </div>
          </div>

          {/* Results Section */}
          <div className="space-y-6">
            {result ? (
              <>
                {/* DR Level */}
                <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                  <h3 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.aiAnalysis.analysisResults')}
                  </h3>

                  <div className={`p-4 rounded-lg border-2 mb-4 ${getDRLevelColor(result.drLevel)}`}>
                    <div className="flex justify-between items-center">
                      <div>
                        <p className="text-sm opacity-75">{t('drScreening.aiAnalysis.drLevel')}</p>
                        <p className="text-xl font-bold">{getDRLevelLabel(result.drLevel)}</p>
                      </div>
                      <div className="text-right">
                        <p className="text-sm opacity-75">{t('drScreening.aiAnalysis.confidence')}</p>
                        <p className="text-xl font-bold">{(result.drLevelConfidence * 100).toFixed(0)}%</p>
                      </div>
                    </div>
                  </div>

                  <div className={`p-4 rounded-lg border mb-4 ${
                    result.dmeDetected 
                      ? 'bg-amber-50 border-amber-200' 
                      : 'bg-green-50 border-green-200'
                  }`}>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        {result.dmeDetected ? (
                          <AlertTriangle className="h-5 w-5 text-amber-600" />
                        ) : (
                          <CheckCircle className="h-5 w-5 text-green-600" />
                        )}
                        <span className="font-medium">
                          {result.dmeDetected ? t('drScreening.aiAnalysis.dmeDetected') : t('drScreening.aiAnalysis.noDmeDetected')}
                        </span>
                      </div>
                      <span className="text-sm text-gray-600">
                        {(result.dmeConfidence * 100).toFixed(0)}% {t('drScreening.aiAnalysis.confidence').toLowerCase()}
                      </span>
                    </div>
                  </div>

                  {result.referralNeeded && (
                    <div className="p-3 bg-red-50 border border-red-200 rounded-lg mb-4">
                      <p className="text-red-800 font-medium flex items-center gap-2">
                        <AlertTriangle className="h-4 w-4" />
                        {t('drScreening.aiAnalysis.referralRecommended')} - {result.urgency} {t('drScreening.aiAnalysis.urgency')}
                      </p>
                    </div>
                  )}
                </div>

                {/* Findings */}
                <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                  <h3 className="font-semibold text-gray-900 mb-4">{t('drScreening.aiAnalysis.detectedFindings')}</h3>
                  <div className="space-y-3">
                    {result.findings.map((finding, index) => (
                      <div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div>
                          <p className="font-medium text-gray-900">{finding.name}</p>
                          <p className="text-sm text-gray-500">{finding.location} • {finding.severity}</p>
                        </div>
                        <div className="text-right">
                          <div className="w-24 bg-gray-200 rounded-full h-2">
                            <div 
                              className="bg-indigo-600 h-2 rounded-full"
                              style={{ width: `${finding.confidence * 100}%` }}
                            ></div>
                          </div>
                          <p className="text-xs text-gray-500 mt-1">
                            {(finding.confidence * 100).toFixed(0)}%
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Recommendations */}
                <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                  <h3 className="font-semibold text-gray-900 mb-4">{t('drScreening.aiAnalysis.recommendations')}</h3>
                  <ul className="space-y-2">
                    {result.recommendations.map((rec, index) => (
                      <li key={index} className="flex items-start gap-2">
                        <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                        <span className="text-gray-700">{rec}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                {/* Disclaimer */}
                <div className="bg-amber-50 rounded-xl p-4 border border-amber-100">
                  <p className="text-sm text-amber-800">
                    <strong>{t('drScreening.aiAnalysis.disclaimer')}:</strong> {t('drScreening.aiAnalysis.disclaimerText')}
                  </p>
                </div>
              </>
            ) : (
              <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-12 text-center">
                <Brain className="h-16 w-16 text-gray-300 mx-auto mb-4" />
                <h3 className="text-lg font-medium text-gray-900 mb-2">{t('drScreening.aiAnalysis.noAnalysisYet')}</h3>
                <p className="text-gray-500">
                  {t('drScreening.aiAnalysis.noAnalysisDescription')}
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
    </SidebarLayout>
  );
}