import React from 'react';
import { X, ScanFace, CheckCircle, ArrowRight, Sparkles } from 'lucide-react';
import { Language } from '../types';
import { TRANSLATIONS } from '../constants/translations';

interface AnalysisModalProps {
  isVisible: boolean;
  onClose: () => void;
  language: Language;
  result: { faceShape: string; skinTone: string; bestVibe: string; };
  onUnlock: () => void;
}

export const AnalysisModal: React.FC<AnalysisModalProps> = ({ 
  isVisible, onClose, language, result, onUnlock 
}) => {
  const t = TRANSLATIONS[language];

  if (!isVisible) return null;

  return (
    <div className="fixed inset-0 z-[80] flex items-center justify-center p-4 bg-gray-900/90 backdrop-blur-md animate-fade-in">
       <div className="w-full max-w-md bg-black text-white rounded-3xl overflow-hidden border border-gray-800 shadow-2xl relative">
          {/* Header */}
          <div className="p-6 text-center border-b border-gray-800 relative">
             <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-rose-500 to-transparent"></div>
             <div className="w-16 h-16 mx-auto bg-gray-900 rounded-full flex items-center justify-center border border-gray-700 mb-4 shadow-[0_0_30px_rgba(244,63,94,0.3)]">
                <ScanFace className="w-8 h-8 text-rose-500" />
             </div>
             <h2 className="text-2xl font-serif font-bold tracking-wide text-rose-100">{t.analysisTitle}</h2>
             <p className="text-xs text-gray-500 font-mono mt-1 tracking-widest uppercase">{t.analysisSubtitle}</p>
          </div>

          {/* Report Content */}
          <div className="p-8 space-y-6">
             <div className="flex items-center justify-between group">
                <div>
                   <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">{t.lblFaceShape}</p>
                   <p className="text-lg font-bold text-white group-hover:text-rose-400 transition-colors">{result.faceShape}</p>
                </div>
                <div className="w-10 h-10 rounded-full border border-gray-700 flex items-center justify-center">
                   <div className="w-6 h-8 border-2 border-white rounded-[40%] opacity-80"></div>
                </div>
             </div>

             <div className="w-full h-px bg-gray-800"></div>

             <div className="flex items-center justify-between group">
                <div>
                   <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">{t.lblSkinTone}</p>
                   <p className="text-lg font-bold text-white group-hover:text-rose-400 transition-colors">{result.skinTone}</p>
                </div>
                <div className="w-8 h-8 rounded-full bg-[#fde3e3] border-2 border-white/20"></div>
             </div>

             <div className="w-full h-px bg-gray-800"></div>

             <div className="bg-gradient-to-r from-rose-900/50 to-gray-900 p-4 rounded-xl border border-rose-500/30 flex items-center gap-4">
                <div className="w-10 h-10 bg-rose-500 rounded-full flex items-center justify-center text-white shrink-0 shadow-lg shadow-rose-900">
                   <Sparkles className="w-5 h-5" />
                </div>
                <div>
                   <p className="text-xs text-rose-300 font-bold uppercase mb-0.5">{t.lblRecVibe}</p>
                   <p className="text-xl font-serif font-bold text-white leading-none">{result.bestVibe}</p>
                </div>
             </div>
          </div>

          {/* Footer Action */}
          <div className="p-6 bg-gray-900 border-t border-gray-800">
             <button 
               onClick={onUnlock}
               className="w-full py-4 bg-white text-black font-bold text-lg rounded-xl hover:bg-rose-50 transition-all flex items-center justify-center gap-2 group"
             >
                {t.pddSlashBtn} <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
             </button>
             <p className="text-center text-[10px] text-gray-600 mt-3 font-mono">
                {t.aiConfidence}: 98.4%
             </p>
          </div>
       </div>
    </div>
  );
};