'use client';

import React, { useEffect, useRef, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useAuth } from '@/lib/AuthContext';
import { getApiPath } from '@/lib/basePath';
import CVHeader from '@/components/layout/CVHeader';
import CVFooter from '@/components/layout/CVFooter';
import {
  Mic,
  Camera,
  ArrowRight,
  ChevronRight,
  AlertTriangle,
  BookOpen,
  Sparkles,
  RotateCcw,
  Loader2,
  StopCircle,
} from 'lucide-react';

const PROMPTS = [
  'Describe what you see - the people, the food, the atmosphere.',
  'Describe this natural landscape - what can you see, feel, and imagine?',
  'Describe this city scene - the buildings, the people, the mood.',
  'Describe what is happening in this classroom or learning environment.',
  'Describe this market scene - the colours, the products, the people.',
];

const FALLBACK_PHOTOS = [
  { url: '/photo-mode/AI_image_01.jpg', alt: 'Photo mode scene 1' },
  { url: '/photo-mode/AI_image_02.jpg', alt: 'Photo mode scene 2' },
  { url: '/photo-mode/AI_image_03.jpg', alt: 'Photo mode scene 3' },
  { url: '/photo-mode/AI_image_04.jpg', alt: 'Photo mode scene 4' },
  { url: '/photo-mode/AI_image_05.jpg', alt: 'Photo mode scene 5' },
];

const MIN_WORDS = 10;
const MAX_RECORD_SECONDS = 150;

export default function PhotoMode() {
  const { user } = useAuth();
  const [photoIndex, setPhotoIndex] = useState(-1);
  const [photo, setPhoto] = useState({
    id: null,
    url: FALLBACK_PHOTOS[0].url,
    alt: FALLBACK_PHOTOS[0].alt,
    prompt: PROMPTS[0],
  });
  const [stage, setStage] = useState('idle');
  const [transcript, setTranscript] = useState('');
  const [feedback, setFeedback] = useState(null);
  const [recordingSeconds, setRecordingSeconds] = useState(0);
  const [mediaError, setMediaError] = useState('');
  const [speechScores, setSpeechScores] = useState(null);
  const [speechError, setSpeechError] = useState('');

  const mediaRecorderRef = useRef(null);
  const chunksRef = useRef([]);
  const timerRef = useRef(null);
  const streamRef = useRef(null);
  const isRecordingRef = useRef(false);
  const recordingStartedAtRef = useRef(0);

  const wordCount = transcript.trim().split(/\s+/).filter(Boolean).length;
  const displayIndex = photoIndex < 0 ? 0 : photoIndex;

  useEffect(() => {
    loadRandomPhoto();
    return () => {
      clearRecordingTimer();
      isRecordingRef.current = false;
      if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
        mediaRecorderRef.current.stop();
      }
      streamRef.current?.getTracks().forEach((track) => track.stop());
    };
  }, []);

  const loadRandomPhoto = async () => {
    try {
      const res = await fetch(getApiPath('/api/photo-mode/random-image'), { method: 'POST' });
      if (!res.ok) throw new Error('Failed to fetch image');
      const data = await res.json();
      setPhotoIndex((prev) => {
        const nextIndex = (prev + 1) % PROMPTS.length;
        setPhoto({
          id: data?.id ?? null,
          url: data.image_url || FALLBACK_PHOTOS[nextIndex].url,
          alt: data.alt || FALLBACK_PHOTOS[nextIndex].alt,
          prompt: data.prompt || PROMPTS[nextIndex],
        });
        return nextIndex;
      });
    } catch {
      setPhotoIndex((prev) => {
        const nextIndex = (prev + 1) % FALLBACK_PHOTOS.length;
        setPhoto({
          id: null,
          url: FALLBACK_PHOTOS[nextIndex].url,
          alt: FALLBACK_PHOTOS[nextIndex].alt,
          prompt: PROMPTS[nextIndex],
        });
        return nextIndex;
      });
    }
  };

  const clearRecordingTimer = () => {
    if (timerRef.current) {
      clearInterval(timerRef.current);
      timerRef.current = null;
    }
  };

  const startRecording = async () => {
    if (!navigator?.mediaDevices?.getUserMedia || typeof MediaRecorder === 'undefined') {
      setMediaError('Audio recording is not supported in this browser.');
      return;
    }

    setMediaError('');
    setTranscript('');
    setFeedback(null);
    setSpeechScores(null);
    setSpeechError('');
    chunksRef.current = [];
    setRecordingSeconds(0);

    let stream;
    try {
      stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    } catch {
      setMediaError('Microphone access denied. Please allow microphone access and try again.');
      return;
    }

    const mimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
      ? 'audio/webm;codecs=opus'
      : MediaRecorder.isTypeSupported('audio/webm')
        ? 'audio/webm'
        : '';
    const mr = mimeType ? new MediaRecorder(stream, { mimeType }) : new MediaRecorder(stream);
    mediaRecorderRef.current = mr;
    streamRef.current = stream;

    mr.ondataavailable = (event) => {
      if (event.data.size > 0) {
        chunksRef.current.push(event.data);
      }
    };

    mr.onstop = async () => {
      stream.getTracks().forEach((t) => t.stop());
      streamRef.current = null;
      const blob = new Blob(chunksRef.current, { type: mr.mimeType || 'audio/webm' });
      mediaRecorderRef.current = null;
      setStage('processing');

      if (!blob.size) {
        setMediaError('No audio was captured. Please try recording again.');
        setStage('transcript');
        return;
      }

      fetchSpeechScores(blob);
      try {
        const text = await transcribeAudio(blob);
        setTranscript(text.trim());
        setStage('transcript');
      } catch (error) {
        setMediaError(error?.message || 'Could not transcribe audio. Please try again.');
        setStage('transcript');
      }
    };

    isRecordingRef.current = true;
    recordingStartedAtRef.current = Date.now();
    timerRef.current = setInterval(() => {
      const elapsed = Math.min(
        MAX_RECORD_SECONDS,
        Math.floor((Date.now() - recordingStartedAtRef.current) / 1000)
      );
      setRecordingSeconds(elapsed);
      if (elapsed >= MAX_RECORD_SECONDS) {
        stopRecording();
      }
    }, 250);
    mr.start();
    setStage('recording');
  };

  function stopRecording() {
    if (!isRecordingRef.current && mediaRecorderRef.current?.state !== 'recording') return;
    clearRecordingTimer();
    isRecordingRef.current = false;
    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
      mediaRecorderRef.current.stop();
    }
  }

  const transcribeAudio = async (blob) => {
    const formData = new FormData();
    formData.append('audio', blob, 'audio.webm');
    const res = await fetch(getApiPath('/api/photo-mode/transcribe-recording'), { method: 'POST', body: formData });
    const data = await res.json();
    if (!res.ok) {
      throw new Error(data?.message || 'Transcription failed');
    }
    return data?.transcript || '';
  };

  const fetchSpeechScores = async (blob) => {
    try {
      const formData = new FormData();
      formData.append('audio', blob, 'audio.webm');
      formData.append('prompt', photo.prompt);
      const res = await fetch(getApiPath('/api/photo-mode/superspeech'), { method: 'POST', body: formData });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.message || 'SpeechSuper failed');
      setSpeechScores(data.scores);
    } catch {
      setSpeechError('Speech analysis unavailable.');
    }
  };

  const submitForFeedback = async () => {
    if (wordCount < MIN_WORDS) return;
    setStage('processing');
    try {
      const res = await fetch(getApiPath('/api/photo-mode/feedback'), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          message: transcript,
          imageId: photo.id ?? null,
          userId: user?.id ?? null,
          speechScores: speechScores ?? null,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.message || 'Feedback failed');
      setFeedback(data?.api_response || data || null);
      setStage('feedback');
    } catch (error) {
      setMediaError(error?.message || 'Unable to submit feedback right now.');
      setStage('transcript');
    }
  };

  const nextPhoto = () => {
    setStage('idle');
    setTranscript('');
    setFeedback(null);
    setSpeechScores(null);
    setSpeechError('');
    setRecordingSeconds(0);
    setMediaError('');
    loadRandomPhoto();
  };

  const fmtTime = (s) => `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`;
  const corrections = Array.isArray(feedback?.feedback)
    ? feedback.feedback
    : Array.isArray(feedback?.errors)
      ? feedback.errors
      : [];
  const correctedText = feedback?.corrected || feedback?.corrected_text || feedback?.correctedText || '';
  const overallFeedback = feedback?.overall_feedback || feedback?.overallFeedback || '';
  const vocabHighlights = Array.isArray(feedback?.vocabulary_highlights)
    ? feedback.vocabulary_highlights
    : Array.isArray(feedback?.vocabularyHighlights)
      ? feedback.vocabularyHighlights
      : [];

  return (
    <div className="min-h-screen flex flex-col" style={{ background: '#FAF5F0' }}>
      <CVHeader />
      <main className="flex-1">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 pt-8 pb-4">
        <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} className="flex flex-col items-center text-center">
          <div
            className="inline-flex items-center gap-2 rounded-full border px-3.5 py-1.5 mb-3"
            style={{ background: 'rgba(212,176,56,0.12)', borderColor: 'rgba(212,176,56,0.4)' }}
          >
            <Camera className="w-3 h-3" style={{ color: '#B8942A' }} />
            <span className="text-[11px] font-bold uppercase tracking-widest" style={{ color: '#8B6914' }}>
              Photo Mode - Picture Description Practice
            </span>
          </div>
          <h1 className="text-2xl sm:text-3xl font-black leading-tight mb-1" style={{ color: '#4A1429' }}>
            Describe the Picture
          </h1>
          <p className="text-sm" style={{ color: '#6B4455' }}>
            Look at the image, press the mic button, and describe what you see in at least {MIN_WORDS} words.
          </p>
        </motion.div>
      </div>

      <div className="max-w-5xl mx-auto px-4 sm:px-6 pb-12">
        <div className="flex flex-col lg:flex-row gap-6 items-start">
          <div className="w-full lg:w-[45%] shrink-0">
            <motion.div
              key={photo.url}
              initial={{ opacity: 0, scale: 0.97 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.4 }}
              className="rounded-3xl overflow-hidden shadow-xl"
              style={{ border: '3px solid #D4B038' }}
            >
              <img src={photo.url} alt={photo.alt} className="w-full object-cover" style={{ height: 420 }} />
            </motion.div>

            <div
              className="mt-3 rounded-2xl px-5 py-3.5 flex items-center justify-between"
              style={{ background: 'white', border: '1px solid #E5DDD5' }}
            >
              <div className="flex items-center gap-2">
                <BookOpen className="w-4 h-4" style={{ color: '#8B6B7A' }} />
                <span className="text-sm font-semibold" style={{ color: '#6B4455' }}>{photo.prompt}</span>
              </div>
              <span
                className="text-xs font-black px-2.5 py-1 rounded-full ml-3 shrink-0"
                style={{ background: 'rgba(212,176,56,0.15)', color: '#8B6914' }}
              >
                {displayIndex + 1} / {PROMPTS.length}
              </span>
            </div>

            <div className="mt-2 text-center">
              <span className="text-xs font-semibold" style={{ color: '#8B6B7A' }}>
                You must use at least {MIN_WORDS} words.
              </span>
            </div>
          </div>

          <div className="w-full lg:flex-1">
            <AnimatePresence mode="wait">
              {stage === 'idle' && (
                <motion.div
                  key="idle"
                  initial={{ opacity: 0, y: 16 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -8 }}
                  className="rounded-3xl p-8 flex flex-col items-center text-center"
                  style={{ background: 'white', border: '2px solid #E5DDD5', minHeight: 480 }}
                >
                  <div className="flex-1 flex flex-col items-center justify-center">
                    <div
                      className="w-24 h-24 rounded-full flex items-center justify-center mb-6"
                      style={{ background: 'rgba(74,20,41,0.08)', border: '2px dashed #D4B038' }}
                    >
                      <Mic className="w-10 h-10" style={{ color: '#4A1429' }} />
                    </div>
                    <h2 className="text-xl font-black mb-2" style={{ color: '#4A1429' }}>Ready to Describe?</h2>
                    <p className="text-sm leading-relaxed mb-8 max-w-sm" style={{ color: '#6B4455' }}>
                      Look at the picture on the left, then press the mic button below to start speaking. Describe what you see in detail.
                    </p>

                    {mediaError && (
                      <div
                        className="mb-4 px-4 py-3 rounded-xl text-sm font-semibold flex items-center gap-2"
                        style={{ background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.2)', color: '#DC2626' }}
                      >
                        <AlertTriangle className="w-4 h-4 shrink-0" /> {mediaError}
                      </div>
                    )}

                    <motion.button
                      onClick={startRecording}
                      whileHover={{ scale: 1.05 }}
                      whileTap={{ scale: 0.95 }}
                      className="flex items-center gap-3 px-8 py-4 rounded-2xl font-extrabold text-base transition-all"
                      style={{
                        background: 'linear-gradient(135deg, #4A1429, #6B1E3D)',
                        color: 'white',
                        boxShadow: '0 8px 28px rgba(74,20,41,0.35)',
                      }}
                    >
                      <Mic className="w-5 h-5" />
                      Start Recording
                    </motion.button>
                  </div>
                </motion.div>
              )}

              {stage === 'recording' && (
                <motion.div
                  key="recording"
                  initial={{ opacity: 0, y: 16 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -8 }}
                  className="rounded-3xl overflow-hidden"
                  style={{ background: 'white', border: '2px solid #D4B038', minHeight: 480 }}
                >
                  <div
                    className="flex items-center justify-between px-6 py-4"
                    style={{ background: 'linear-gradient(135deg, #4A1429, #6B1E3D)' }}
                  >
                    <div className="flex items-center gap-3">
                      <motion.div
                        animate={{ scale: [1, 1.3, 1] }}
                        transition={{ repeat: Infinity, duration: 1.2 }}
                        className="w-3 h-3 rounded-full bg-red-400"
                      />
                      <span className="text-white font-black text-sm tracking-wide">RECORDING</span>
                    </div>
                    <span className="font-mono font-black text-lg" style={{ color: '#D4B038' }}>
                      {fmtTime(recordingSeconds)}
                    </span>
                  </div>

                  <div className="p-6 flex-1 flex flex-col items-center justify-center text-center" style={{ minHeight: 280 }}>
                    <div className="relative mb-6 flex h-28 w-28 items-center justify-center">
                      <motion.div
                        className="absolute inset-0 rounded-full"
                        style={{ border: '2px solid rgba(212,176,56,0.42)' }}
                        animate={{ scale: [1, 1.18, 1], opacity: [0.65, 0.2, 0.65] }}
                        transition={{ repeat: Infinity, duration: 1.6, ease: 'easeInOut' }}
                      />
                      <div
                        className="relative z-10 flex h-20 w-20 items-center justify-center rounded-full"
                        style={{ background: 'rgba(74,20,41,0.08)', color: '#4A1429' }}
                      >
                        <Mic className="h-9 w-9" />
                      </div>
                    </div>

                    <p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: '#8B6B7A' }}>
                      Listening
                    </p>
                    <div className="mb-5 flex h-12 items-end justify-center gap-1.5">
                      {Array.from({ length: 16 }).map((_, i) => (
                        <motion.span
                          key={i}
                          className="w-1.5 rounded-full"
                          style={{ background: i % 3 === 0 ? '#4A1429' : '#D4B038' }}
                          animate={{ height: [12, 34 - (i % 4) * 4, 14] }}
                          transition={{
                            repeat: Infinity,
                            duration: 0.72 + (i % 5) * 0.08,
                            delay: i * 0.04,
                            ease: 'easeInOut',
                          }}
                        />
                      ))}
                    </div>
                    <p className="text-sm font-semibold" style={{ color: '#6B4455' }}>
                      Recording audio. Your full transcription will appear after this step.
                    </p>
                  </div>

                  <div className="px-6 pb-6 flex items-center justify-between">
                    <div className="text-sm font-semibold" style={{ color: '#8B6B7A' }}>
                      {fmtTime(Math.max(0, MAX_RECORD_SECONDS - recordingSeconds))} remaining
                    </div>
                    <motion.button
                      onClick={stopRecording}
                      whileHover={{ scale: 1.04 }}
                      whileTap={{ scale: 0.96 }}
                      className="flex items-center gap-2 px-6 py-3 rounded-xl font-extrabold text-sm"
                      style={{ background: 'linear-gradient(135deg, #D4B038, #B8942A)', color: '#3D0F22' }}
                    >
                      <StopCircle className="w-4 h-4" />
                      Stop and Transcribe
                    </motion.button>
                  </div>
                </motion.div>
              )}

              {stage === 'processing' && (
                <motion.div
                  key="processing"
                  initial={{ opacity: 0, scale: 0.97 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0 }}
                  className="rounded-3xl p-8 flex flex-col items-center justify-center text-center"
                  style={{ background: 'white', border: '2px solid #E5DDD5', minHeight: 480 }}
                >
                  <div className="relative mb-6">
                    <div
                      className="w-20 h-20 rounded-full flex items-center justify-center"
                      style={{ background: 'rgba(212,176,56,0.12)', border: '2px solid rgba(212,176,56,0.3)' }}
                    >
                      <motion.div
                        animate={{ rotate: 360 }}
                        transition={{ repeat: Infinity, duration: 1.2, ease: 'linear' }}
                      >
                        <Loader2 className="w-9 h-9" style={{ color: '#D4B038' }} />
                      </motion.div>
                    </div>
                  </div>

                  <h2 className="text-xl font-black mb-2" style={{ color: '#4A1429' }}>Analyzing your response...</h2>
                  <p className="text-sm leading-relaxed max-w-xs" style={{ color: '#6B4455' }}>
                    Preparing your transcription, grammar, vocabulary, and fluency review. This takes just a moment.
                  </p>

                  <div className="flex gap-2 mt-6">
                    {[0, 1, 2].map((i) => (
                      <motion.div
                        key={i}
                        animate={{ y: [0, -8, 0] }}
                        transition={{ repeat: Infinity, duration: 0.9, delay: i * 0.2 }}
                        className="w-2.5 h-2.5 rounded-full"
                        style={{ background: '#D4B038' }}
                      />
                    ))}
                  </div>
                </motion.div>
              )}

              {stage === 'transcript' && (
                <motion.div
                  key="transcript"
                  initial={{ opacity: 0, y: 16 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -8 }}
                  className="rounded-3xl overflow-hidden"
                  style={{ background: 'white', border: '2px solid #E5DDD5', minHeight: 480 }}
                >
                  <div
                    className="px-6 py-4"
                    style={{ background: 'linear-gradient(135deg, #FAF5F0, #F5EDE8)', borderBottom: '1px solid #E5DDD5' }}
                  >
                    <p className="text-xs font-black uppercase tracking-widest mb-0.5" style={{ color: '#8B6B7A' }}>Your Description</p>
                    <h2 className="text-lg font-black" style={{ color: '#4A1429' }}>Review before submitting</h2>
                  </div>

                  <div className="p-6" style={{ minHeight: 240 }}>
                    {mediaError && (
                      <div
                        className="mb-4 px-4 py-3 rounded-xl text-sm font-semibold flex items-center gap-2"
                        style={{ background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.2)', color: '#DC2626' }}
                      >
                        <AlertTriangle className="w-4 h-4 shrink-0" /> {mediaError}
                      </div>
                    )}
                    <p className="text-base leading-relaxed font-medium" style={{ color: '#2D0F1C' }}>
                      {transcript || (
                        <span className="italic" style={{ color: '#8B6B7A' }}>No speech detected. Please try again.</span>
                      )}
                    </p>
                  </div>

                  <div className="px-6 pb-2">
                    <div className="flex justify-between text-xs font-semibold mb-1" style={{ color: '#8B6B7A' }}>
                      <span>{wordCount} words used</span>
                      <span>Min. {MIN_WORDS} words</span>
                    </div>
                    <div className="h-1.5 rounded-full" style={{ background: '#F0E8E0' }}>
                      <div
                        className="h-1.5 rounded-full transition-all"
                        style={{
                          width: `${Math.min(100, (wordCount / MIN_WORDS) * 100)}%`,
                          background: wordCount >= MIN_WORDS ? '#16A34A' : '#D4B038',
                        }}
                      />
                    </div>
                  </div>

                  <div className="px-6 pb-6 mt-4 flex items-center gap-3">
                    <button
                      onClick={() => setStage('idle')}
                      className="flex items-center gap-2 px-5 py-3 rounded-xl font-bold text-sm transition-all hover:bg-gray-50"
                      style={{ border: '1.5px solid #E5DDD5', color: '#6B4455' }}
                    >
                      <RotateCcw className="w-4 h-4" /> Try Again
                    </button>
                    <motion.button
                      onClick={submitForFeedback}
                      disabled={wordCount < MIN_WORDS}
                      whileHover={{ scale: wordCount >= MIN_WORDS ? 1.03 : 1 }}
                      whileTap={{ scale: wordCount >= MIN_WORDS ? 0.97 : 1 }}
                      className="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-extrabold text-sm transition-all disabled:opacity-40"
                      style={{ background: 'linear-gradient(135deg, #4A1429, #6B1E3D)', color: 'white' }}
                    >
                      <Sparkles className="w-4 h-4" />
                      Get AI Feedback
                      <ArrowRight className="w-4 h-4" />
                    </motion.button>
                  </div>
                </motion.div>
              )}

              {stage === 'feedback' && feedback && (
                <motion.div
                  key="feedback"
                  initial={{ opacity: 0, y: 16 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -8 }}
                  className="rounded-3xl overflow-hidden"
                  style={{ background: 'white', border: '2px solid #E5DDD5' }}
                >
                  <div className="px-6 py-4" style={{ background: 'linear-gradient(135deg, #4A1429, #6B1E3D)' }}>
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-white/60 text-xs font-bold uppercase tracking-widest mb-0.5">AI Analysis Complete</p>
                        <h2 className="text-lg font-black text-white">Your Feedback</h2>
                      </div>
                    </div>
                  </div>

                  <div className="p-6 space-y-5 overflow-y-auto" style={{ maxHeight: 520 }}>
                    <div className="grid grid-cols-3 gap-3">
                      {[
                        { label: 'Grammar', key: 'grammar' },
                        { label: 'Vocabulary', key: 'vocabulary' },
                        { label: 'Fluency', key: 'fluency' },
                      ].map(({ label, key }) => (
                        <div
                          key={label}
                          className="rounded-2xl p-3 text-center"
                          style={{ background: '#FAF5F0', border: '1px solid #E5DDD5' }}
                        >
                          <div className="text-2xl font-black mb-0.5" style={{ color: '#D4B038' }}>
                            {speechScores?.[key] ?? '--'}<span className="text-sm font-bold">/10</span>
                          </div>
                          <div className="text-[11px] font-bold uppercase tracking-wide" style={{ color: '#8B6B7A' }}>
                            {label}
                          </div>
                        </div>
                      ))}
                    </div>

                    {speechError && (
                      <div
                        className="rounded-2xl px-4 py-3"
                        style={{ background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.2)' }}
                      >
                        <p className="text-sm font-semibold" style={{ color: '#DC2626' }}>{speechError}</p>
                      </div>
                    )}

                    {overallFeedback && (
                      <div
                        className="rounded-2xl px-4 py-3.5"
                        style={{ background: 'rgba(212,176,56,0.08)', border: '1px solid rgba(212,176,56,0.25)' }}
                      >
                        <p className="text-xs font-black uppercase tracking-widest mb-1.5" style={{ color: '#8B6914' }}>
                          Overall Feedback
                        </p>
                        <p className="text-sm leading-relaxed font-medium" style={{ color: '#4A1429' }}>
                          {overallFeedback}
                        </p>
                      </div>
                    )}

                    <div className="rounded-2xl overflow-hidden" style={{ border: '1px solid #E5DDD5' }}>
                      <div className="px-4 py-2.5" style={{ background: '#F5EDE8', borderBottom: '1px solid #E5DDD5' }}>
                        <p className="text-xs font-black uppercase tracking-widest" style={{ color: '#4A1429' }}>Your Description</p>
                      </div>
                      <div className="px-4 py-3">
                        <p className="text-[11px] font-bold uppercase tracking-wide mb-1" style={{ color: '#8B6B7A' }}>Original:</p>
                        <p className="text-sm leading-relaxed mb-3" style={{ color: '#2D0F1C' }}>{feedback.original || transcript}</p>
                        <p className="text-[11px] font-bold uppercase tracking-wide mb-1" style={{ color: '#16A34A' }}>Corrected:</p>
                        <p className="text-sm leading-relaxed" style={{ color: '#2D0F1C' }}>{correctedText || transcript}</p>
                      </div>
                    </div>

                    {corrections.length > 0 && (
                      <div>
                        <p className="text-xs font-black uppercase tracking-widest mb-3" style={{ color: '#4A1429' }}>
                          Corrections ({corrections.length})
                        </p>
                        <div className="space-y-2.5">
                          {corrections.map((err, i) => (
                            <div
                              key={i}
                              className="rounded-2xl px-4 py-3.5"
                              style={{ background: 'rgba(239,68,68,0.04)', border: '1px solid rgba(239,68,68,0.15)' }}
                            >
                              <div className="flex items-start gap-2 mb-1.5">
                                <AlertTriangle className="w-3.5 h-3.5 mt-0.5 shrink-0 text-red-500" />
                                <span className="text-sm font-bold text-red-600">Error: </span>
                                <span className="text-sm" style={{ color: '#2D0F1C' }}>{err.error}</span>
                              </div>
                              <div className="ml-5 space-y-0.5">
                                <p className="text-xs">
                                  <span className="font-bold" style={{ color: '#16A34A' }}>Suggestion: </span>
                                  <span style={{ color: '#2D0F1C' }}>{err.suggestion}</span>
                                </p>
                                <p className="text-xs leading-relaxed" style={{ color: '#6B4455' }}>
                                  <span className="font-bold">Explanation: </span>{err.explanation}
                                </p>
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

                    {vocabHighlights.length > 0 && (
                      <div>
                        <p className="text-xs font-black uppercase tracking-widest mb-2.5" style={{ color: '#4A1429' }}>
                          Good Vocabulary Used
                        </p>
                        <div className="flex flex-wrap gap-2">
                          {vocabHighlights.map((word, i) => (
                            <span
                              key={`${word}-${i}`}
                              className="px-3 py-1.5 rounded-full text-xs font-extrabold"
                              style={{
                                background: 'rgba(22,163,74,0.1)',
                                border: '1px solid rgba(22,163,74,0.25)',
                                color: '#16A34A',
                              }}
                            >
                              ? {word}
                            </span>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>

                  <div className="px-6 py-4 flex items-center gap-3" style={{ borderTop: '1px solid #E5DDD5' }}>
                    <button
                      onClick={() => setStage('idle')}
                      className="flex items-center gap-2 px-5 py-3 rounded-xl font-bold text-sm transition-all hover:bg-gray-50"
                      style={{ border: '1.5px solid #E5DDD5', color: '#6B4455' }}
                    >
                      <RotateCcw className="w-4 h-4" /> Retry This
                    </button>
                    <motion.button
                      onClick={nextPhoto}
                      whileHover={{ scale: 1.03 }}
                      whileTap={{ scale: 0.97 }}
                      className="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-extrabold text-sm"
                      style={{ background: 'linear-gradient(135deg, #D4B038, #B8942A)', color: '#3D0F22' }}
                    >
                      Next Picture
                      <ChevronRight className="w-4 h-4" />
                    </motion.button>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </div>
      </div>
      </main>

      <CVFooter />
    </div>
  );
}