App.tsx

import React, { useState, useEffect, useCallback, useRef } from 'react';
import { AppState, Message, ScenarioMode, Scenario, AudioData, Character, TefAdMode, TefQuestioningMode, TefReview } from './types';
import { useAudio } from './hooks/useAudio';
import { useDocumentHead } from './hooks/useDocumentHead';
import { useConversationTimer } from './hooks/useConversationTimer';
import { initializeSession, sendVoiceMessage, resetSession, setScenario, transcribeAndCleanupAudio, generateCharacterSpeech, PIPELINE_MAX_MS } from './services/geminiService';
import { processScenarioDescriptionOpenAI } from './services/openaiService';
import { clearHistory } from './services/conversationHistory';
import { hasApiKeyOrEnv } from './services/apiKeyService';
import { assignVoicesToCharacters } from './services/voiceService';
import { generateId, generateTefAdSystemInstruction, generateTefQuestioningSystemInstruction } from './services/scenarioService';
import { generateTefReview } from './services/tefReviewService';
import { Orb } from './components/Orb';
import { Controls } from './components/Controls';
import { ConversationHistory } from './components/ConversationHistory';
import { ScenarioSetup } from './components/ScenarioSetup';
import { AdPersuasionSetup } from './components/AdPersuasionSetup';
import { AdQuestioningSetup } from './components/AdQuestioningSetup';
import { PersuasionTimer } from './components/PersuasionTimer';
import { QuestioningTimer } from './components/QuestioningTimer';
import { TefQuestioningSummary } from './components/TefQuestioningSummary';
import { TefAdSummary } from './components/TefAdSummary';
import { AdThumbnail } from './components/AdThumbnail';
import { ImageLightbox } from './components/ImageLightbox';
import { ApiKeySetup } from './components/ApiKeySetup';
import { GearIcon } from './components/icons/GearIcon';
import { ConversationHint } from './components/ConversationHint';
import { PracticeModeSheet } from './components/PracticeModeSheet';
import { combineAbortSignals } from './utils/combineAbortSignals';
import { isAbortLikeError } from './utils/isAbortLikeError';

const App: React.FC = () => {
  // SEO metadata - similar to Next.js metadata export
  useDocumentHead({
    title: 'Parle - Practice Speaking French with AI',
    description: 'Practice French conversation with AI using voice interaction. Learn real-world French with personalized scenarios and receive instant feedback.',
    ogTitle: 'Parle - Practice Speaking French with AI',
    ogDescription: 'Practice French conversation with AI using voice interaction. Learn real-world French with personalized scenarios and receive instant feedback.',
    ogType: 'website',
  });

  const [appState, setAppState] = useState<AppState>(AppState.IDLE);
  const [playbackSpeed, setPlaybackSpeed] = useState(1.0);
  const [hasStarted, setHasStarted] = useState(false);
  const [messages, setMessages] = useState<Message[]>([]);
  const messagesRef = useRef<Message[]>(messages);
  messagesRef.current = messages;
  const [autoPlayMessageId, setAutoPlayMessageId] = useState<number | null>(null);
  const [currentHint, setCurrentHint] = useState<string | null>(null);

  // Scenario mode state
  const [scenarioMode, setScenarioMode] = useState<ScenarioMode>('none');
  const [activeScenario, setActiveScenario] = useState<Scenario | null>(null);
  const [scenarioDescription, setScenarioDescription] = useState('');
  const [scenarioName, setScenarioName] = useState('');
  const [aiSummary, setAiSummary] = useState<string | null>(null);
  const [isProcessingScenario, setIsProcessingScenario] = useState(false);
  const [isRecordingDescription, setIsRecordingDescription] = useState(false);
  const [isTranscribingDescription, setIsTranscribingDescription] = useState(false);
  const [showTranscriptOptions, setShowTranscriptOptions] = useState(false);
  const [rawTranscript, setRawTranscript] = useState<string | null>(null);
  const [cleanedTranscript, setCleanedTranscript] = useState<string | null>(null);
  const [scenarioCharacters, setScenarioCharacters] = useState<Character[]>([]); // NEW: Characters for scenario

  // TEF Ad state
  const [tefAdMode, setTefAdMode] = useState<TefAdMode>('none');
  const [tefAdImage, setTefAdImage] = useState<string | null>(null);
  const [showLightbox, setShowLightbox] = useState(false);
  const [tefTimedUp, setTefTimedUp] = useState(false);
  const [tefAdTurnCount, setTefAdTurnCount] = useState(0);
  const [tefAdIsFirstMessage, setTefAdIsFirstMessage] = useState(true);

  // TEF Ad conversation timer
  const { elapsed: tefElapsed, reset: resetTefTimer } = useConversationTimer(
    appState,
    tefAdMode === 'practice',
    () => setTefTimedUp(true)
  );

  // TEF Questioning state
  const [tefQuestioningMode, setTefQuestioningMode] = useState<TefQuestioningMode>('none');
  const [tefQuestioningImage, setTefQuestioningImage] = useState<string | null>(null);
  const [tefQuestioningTimedUp, setTefQuestioningTimedUp] = useState(false);
  const [tefQuestioningQuestionCount, setTefQuestioningQuestionCount] = useState(0);
  const [tefQuestioningRepeatCount, setTefQuestioningRepeatCount] = useState(0);
  const [tefQuestioningIsFirstMessage, setTefQuestioningIsFirstMessage] = useState(true);
  const [showTefQuestioningSummary, setShowTefQuestioningSummary] = useState(false);

  // Review state — arrays to support carousel/regenerate
  const [tefQuestioningReviews, setTefQuestioningReviews] = useState<TefReview[]>([]);
  const [tefQuestioningReviewIndex, setTefQuestioningReviewIndex] = useState(0);
  const [tefQuestioningReviewLoading, setTefQuestioningReviewLoading] = useState(false);
  const [tefQuestioningReviewError, setTefQuestioningReviewError] = useState<string | null>(null);

  const [showTefAdSummary, setShowTefAdSummary] = useState(false);
  const [tefAdReviews, setTefAdReviews] = useState<TefReview[]>([]);
  const [tefAdReviewIndex, setTefAdReviewIndex] = useState(0);
  const [tefAdReviewLoading, setTefAdReviewLoading] = useState(false);
  const [tefAdReviewError, setTefAdReviewError] = useState<string | null>(null);

  // Snapshot refs for retry/regenerate after messages state is cleared
  const tefQuestioningMessagesSnapshotRef = useRef<Message[]>([]);
  const tefAdMessagesSnapshotRef = useRef<Message[]>([]);

  // Refs to keep handleTefQuestioningTimeUp (useCallback with []) in sync with current state.
  // Sync assignments (.current = ...) happen after tefQuestioningElapsed is declared below.
  const tefQuestioningElapsedRef = useRef(0);
  const activeScenarioRef = useRef<Scenario | null>(null);
  activeScenarioRef.current = activeScenario;

  // AbortController for cancelling in-flight requests (declared here so timer callback can use it)
  const abortControllerRef = useRef<AbortController | null>(null);

  // ---------------------------------------------------------------------------
  // TEF Questioning review helpers
  // ---------------------------------------------------------------------------

  const startTefQuestioningReview = (snapshot: Message[]) => {
    const adSummary = activeScenarioRef.current?.aiSummary;
    setTefQuestioningReviews([]);
    setTefQuestioningReviewIndex(0);
    setTefQuestioningReviewError(null);
    setTefQuestioningReviewLoading(true);
    generateTefReview({
      exerciseType: 'questioning',
      messages: snapshot,
      adSummary,
      elapsedSeconds: tefQuestioningElapsedRef.current,
    })
      .then((r) => {
        if (r) {
          setTefQuestioningReviews([r]);
          setTefQuestioningReviewIndex(0);
        }
      })
      .catch((e) => {
        setTefQuestioningReviewError(e instanceof Error ? e.message : 'Review failed');
      })
      .finally(() => setTefQuestioningReviewLoading(false));
  };

  const regenerateTefQuestioningReview = (snapshot: Message[]) => {
    const adSummary = activeScenarioRef.current?.aiSummary;
    setTefQuestioningReviewError(null);
    setTefQuestioningReviewLoading(true);
    generateTefReview({
      exerciseType: 'questioning',
      messages: snapshot,
      adSummary,
      elapsedSeconds: tefQuestioningElapsedRef.current,
    })
      .then((r) => {
        if (r) {
          setTefQuestioningReviews((prev) => {
            const next = [...prev, r];
            setTefQuestioningReviewIndex(next.length - 1);
            return next;
          });
        }
      })
      .catch((e) => {
        setTefQuestioningReviewError(e instanceof Error ? e.message : 'Review failed');
      })
      .finally(() => setTefQuestioningReviewLoading(false));
  };

  // ---------------------------------------------------------------------------
  // TEF Ad review helpers
  // ---------------------------------------------------------------------------

  const startTefAdReview = (snapshot: Message[]) => {
    const adSummary = activeScenario?.aiSummary;
    setTefAdReviews([]);
    setTefAdReviewIndex(0);
    setTefAdReviewError(null);
    setTefAdReviewLoading(true);
    generateTefReview({
      exerciseType: 'persuasion',
      messages: snapshot,
      adSummary,
      elapsedSeconds: tefElapsed,
    })
      .then((r) => {
        if (r) {
          setTefAdReviews([r]);
          setTefAdReviewIndex(0);
        }
      })
      .catch((e) => {
        setTefAdReviewError(e instanceof Error ? e.message : 'Review failed');
      })
      .finally(() => setTefAdReviewLoading(false));
  };

  const regenerateTefAdReview = (snapshot: Message[]) => {
    const adSummary = activeScenario?.aiSummary;
    setTefAdReviewError(null);
    setTefAdReviewLoading(true);
    generateTefReview({
      exerciseType: 'persuasion',
      messages: snapshot,
      adSummary,
      elapsedSeconds: tefElapsed,
    })
      .then((r) => {
        if (r) {
          setTefAdReviews((prev) => {
            const next = [...prev, r];
            setTefAdReviewIndex(next.length - 1);
            return next;
          });
        }
      })
      .catch((e) => {
        setTefAdReviewError(e instanceof Error ? e.message : 'Review failed');
      })
      .finally(() => setTefAdReviewLoading(false));
  };

  // TEF Questioning conversation timer (5-minute limit)
  const handleTefQuestioningTimeUp = useCallback(() => {
    // Treat this as an intentional abort so processAudioMessage doesn't
    // fall through into ERROR UI on AbortError.
    processingAbortedRef.current = true;
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
      abortControllerRef.current = null;
    }
    setTefQuestioningTimedUp(true);
    setShowTefQuestioningSummary(true);
    const snapshot = messagesRef.current;
    tefQuestioningMessagesSnapshotRef.current = snapshot;
    startTefQuestioningReview(snapshot);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const { elapsed: tefQuestioningElapsed } = useConversationTimer(
    appState,
    tefQuestioningMode === 'practice' && !showTefQuestioningSummary,
    handleTefQuestioningTimeUp,
    300
  );
  // Keep ref in sync so the memoized handleTefQuestioningTimeUp always reads the latest value
  tefQuestioningElapsedRef.current = tefQuestioningElapsed;

  // Audio retry state - stores last recorded audio for retry on failure
  const [lastChatAudio, setLastChatAudio] = useState<AudioData | null>(null);
  const [lastDescriptionAudio, setLastDescriptionAudio] = useState<AudioData | null>(null);
  const [canRetryChatAudio, setCanRetryChatAudio] = useState(false);
  const [canRetryDescriptionAudio, setCanRetryDescriptionAudio] = useState(false);
  const [retryingMessageTimestamps, setRetryingMessageTimestamps] = useState<Set<number>>(new Set());

  // Practice mode sheet state
  const [showModeSheet, setShowModeSheet] = useState(false);

  // API Key management state
  const [showApiKeyModal, setShowApiKeyModal] = useState(false);
  const [apiKeyCheckDone, setApiKeyCheckDone] = useState(false);

  // Ref to track if we're recording for scenario description
  const scenarioRecordingRef = useRef(false);
  const scenarioSetupOpenRef = useRef(false);

  // Abort + stale guarding for scenario description transcription requests.
  const scenarioDescriptionAbortControllerRef = useRef<AbortController | null>(null);
  const scenarioDescriptionRequestIdRef = useRef(0);

  // Ref to track if processing was aborted by the user
  const processingAbortedRef = useRef(false);
  /** Set before abort for user cancel (orb) or pipeline deadline; cleared in processAudioMessage finally/catch. */
  const pipelineFailureKindRef = useRef<'timeout' | 'user_cancel' | null>(null);
  // Request ID counter to detect stale responses from previous requests
  const requestIdRef = useRef(0);

  // Error flash state
  const [errorFlashVisible, setErrorFlashVisible] = useState(false);
  const [errorFlashMessage, setErrorFlashMessage] = useState<string>('');
  /** Persistent copy for ERROR status line (aligned with flash on pipeline failures). */
  const [chatProcessingErrorMessage, setChatProcessingErrorMessage] = useState('');

  const hasMessages = messages.length > 0;
  const geminiKeyMissing = apiKeyCheckDone && !hasApiKeyOrEnv('gemini');

  /**
   * Shows an error flash message that auto-dismisses after 3 seconds
   */
  const showErrorFlash = useCallback((message?: string) => {
    const errorMsg = message || 'An error occurred. Please try again.';
    setErrorFlashMessage(errorMsg);
    setErrorFlashVisible(true);
    setTimeout(() => {
      setErrorFlashVisible(false);
      setErrorFlashMessage('');
    }, 3000);
  }, []);

  const {
    isRecording,
    isPlaying,
    volume,
    startRecording,
    stopRecording,
    cancelRecording,
    getAudioContext,
    checkMicrophonePermission,
    requestMicrophonePermission
  } = useAudio();

  // Check for API keys on mount; never show modal on load so user can see the app first
  useEffect(() => {
    const checkApiKeys = async () => {
      setApiKeyCheckDone(true);
      if (hasApiKeyOrEnv('gemini')) {
        try {
          await initializeSession();
        } catch (error) {
          console.error('Failed to initialize Gemini session:', error);
        }
      }
    };
    checkApiKeys();
  }, []);

  // Handle API key save - re-initialize services if needed
  const handleApiKeySave = async () => {
    // Re-initialize Gemini session if Gemini key is now available
    if (hasApiKeyOrEnv('gemini')) {
      try {
        await initializeSession();
      } catch (error) {
        console.error('Failed to re-initialize Gemini session:', error);
      }
    }
    setApiKeyCheckDone(true);
  };

  // Handle API key modal close
  const handleApiKeyModalClose = () => {
    setShowApiKeyModal(false);
    // Mark that user has been offered the chance to enter keys
    setApiKeyCheckDone(true);
  };

  const handleCancelRecording = useCallback(() => {
    if (appState === AppState.RECORDING) {
      cancelRecording();
      setAppState(AppState.IDLE);
    }
  }, [appState, cancelRecording]);

  // Handle Escape key to cancel recording
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape' && appState === AppState.RECORDING) {
        handleCancelRecording();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [appState, handleCancelRecording]);

  // Handle Playback Speed updates
  const handleSpeedChange = (speed: number) => {
    setPlaybackSpeed(speed);
  };

  const handleStartInteraction = async () => {
    // Boilerplate to ensure AudioContext is resumed on user gesture
    getAudioContext();
    setHasStarted(true);
  };

  /**
   * Check microphone permission and request if necessary.
   * Returns true if permission is granted, false otherwise.
   */
  const ensureMicrophonePermission = useCallback(async (): Promise<boolean> => {
    const permissionState = await checkMicrophonePermission();

    if (permissionState === 'granted') {
      return true;
    }

    if (permissionState === 'denied') {
      alert('Microphone access has been denied. Please enable microphone access in your browser settings to use voice recording.');
      return false;
    }

    // For 'prompt' or 'unsupported' states, request permission
    const granted = await requestMicrophonePermission();
    if (!granted) {
      alert('Microphone access is required for voice recording. Please allow microphone access and try again.');
      return false;
    }

    return true;
  }, [checkMicrophonePermission, requestMicrophonePermission]);

  const handleStartRecording = async () => {
    if (!hasApiKeyOrEnv('gemini')) {
      setShowApiKeyModal(true);
      return;
    }
    if (!hasStarted) await handleStartInteraction();

    // Check and request microphone permission before starting
    const hasPermission = await ensureMicrophonePermission();
    if (!hasPermission) {
      return;
    }

    // Clear retry state when starting a new recording
    setCanRetryChatAudio(false);
    setLastChatAudio(null);
    setChatProcessingErrorMessage('');

    setAppState(AppState.RECORDING);
    await startRecording();
  };

  /**
   * Processes audio data (from recording or retry) and sends it to the AI
   */
  const processAudioMessage = async (audioData: AudioData) => {
    processingAbortedRef.current = false;
    const userAbort = new AbortController();
    abortControllerRef.current = userAbort;
    const deadlineAbort = new AbortController();
    let deadlineTimeoutId: ReturnType<typeof setTimeout> | undefined;
    // Increment request ID so we can detect stale responses
    const currentRequestId = ++requestIdRef.current;
    setAppState(AppState.PROCESSING);
    setChatProcessingErrorMessage('');

    try {
      deadlineTimeoutId = setTimeout(() => {
        pipelineFailureKindRef.current = 'timeout';
        deadlineAbort.abort();
      }, PIPELINE_MAX_MS);

      const pipelineSignal = combineAbortSignals(userAbort.signal, deadlineAbort.signal);

      const { base64, mimeType } = audioData;

      // Build phase-based per-turn context for TEF Ad practice
      // Skip context injection for the very first message (greeting turn)
      let phaseContextText: string | undefined;
      if (tefAdMode === 'practice' && !tefAdIsFirstMessage) {
        const turnNumber = tefAdTurnCount + 1;
        if (turnNumber <= 2) {
          phaseContextText = '[Per-turn context: Encourage the user to introduce and present the advertisement clearly and in an interesting way.]';
        } else if (turnNumber <= 4) {
          phaseContextText = '[Per-turn context: The user should be developing concrete arguments with examples. If they give a bare assertion without a concrete example, ask "Tu peux me donner un exemple concret?"]';
        } else {
          phaseContextText = '[Per-turn context: Push back with a counter-argument or nuance ("Oui mais...", "Tu ne penses pas que..."). The user should demonstrate they can handle objections and nuance their position.]';
        }
      }

      // Use Gemini for speaking practice
      const response = await sendVoiceMessage(
        base64,
        mimeType,
        pipelineSignal,
        phaseContextText
      );

      // Check if user aborted or a newer request has started (stale response)
      if (processingAbortedRef.current || currentRequestId !== requestIdRef.current) {
        if (response.audioUrl) {
          if (Array.isArray(response.audioUrl)) {
            response.audioUrl.forEach(url => {
              URL.revokeObjectURL(url);
            });
          } else {
            URL.revokeObjectURL(response.audioUrl);
          }
        }
        return;
      }

      // Handle multi-character response
      if (Array.isArray(response.audioUrl)) {
        // Validate multi-character response structure
        if (!response.characters || !Array.isArray(response.characters)) {
          console.error('Multi-character response missing characters array');
          const invalidMsg = 'Invalid response format from AI';
          setChatProcessingErrorMessage(invalidMsg);
          setCanRetryChatAudio(true);
          setAppState(AppState.ERROR);
          showErrorFlash(invalidMsg);
          return;
        }

        if (!Array.isArray(response.modelText)) {
          console.error('Multi-character response has invalid modelText');
          const invalidMsg = 'Invalid response format from AI';
          setChatProcessingErrorMessage(invalidMsg);
          setCanRetryChatAudio(true);
          setAppState(AppState.ERROR);
          showErrorFlash(invalidMsg);
          return;
        }

        // Verify all arrays have matching lengths
        const audioUrls = response.audioUrl;
        const characters = response.characters;
        const modelTexts = response.modelText;

        if (audioUrls.length !== characters.length || audioUrls.length !== modelTexts.length) {
          console.error('Multi-character response arrays have mismatched lengths', {
            audioUrls: audioUrls.length,
            characters: characters.length,
            modelTexts: modelTexts.length
          });
          const invalidMsg = 'Invalid response format from AI';
          setChatProcessingErrorMessage(invalidMsg);
          setCanRetryChatAudio(true);
          setAppState(AppState.ERROR);
          showErrorFlash(invalidMsg);
          return;
        }

        const timestamp = Date.now();

        // Create a blob URL for the user's recorded audio so the review service
        // can evaluate actual speech rather than relying solely on transcripts.
        const userAudioBlob = new Blob(
          [Uint8Array.from(atob(base64), c => c.charCodeAt(0))],
          { type: mimeType }
        );
        const userAudioUrl = URL.createObjectURL(userAudioBlob);

        const userMessage: Message = { role: 'user', text: response.userText, timestamp, audioUrl: userAudioUrl };

        // Create separate messages for each character
        const modelMessages: Message[] = characters.map((char, idx) => ({
          role: 'model' as const,
          text: modelTexts[idx],
          timestamp: timestamp + idx + 1,
          audioUrl: audioUrls[idx],
          characterId: char.characterId,
          characterName: char.characterName,
          voiceName: char.voiceName,
          hint: idx === characters.length - 1 ? response.hint : undefined,
          audioGenerationFailed: char.audioGenerationFailed || false,
          frenchText: char.frenchText // Store French text for TTS retry
        }));

        setMessages(prev => [...prev, userMessage, ...modelMessages]);

        // Update current hint (only in scenario mode, from last character)
        if ((scenarioMode === 'practice' || tefAdMode === 'practice') && response.hint) {
          setCurrentHint(response.hint);
        }

        // Set the first character message to auto-play (others will auto-play sequentially)
        setAutoPlayMessageId(timestamp + 1);
      } else {
        // Single-character response (original behavior)
        const { audioUrl, userText, modelText, hint, voiceName, audioGenerationFailed, characters } = response;

        // Add messages to history (append for chronological order - newest last)
        const timestamp = Date.now();
        const modelTimestamp = timestamp + 1;

        // Create a blob URL for the user's recorded audio so the review service
        // can evaluate actual speech rather than relying solely on transcripts.
        const userAudioBlob = new Blob(
          [Uint8Array.from(atob(base64), c => c.charCodeAt(0))],
          { type: mimeType }
        );
        const userAudioUrl = URL.createObjectURL(userAudioBlob);

        setMessages(prev => [
          ...prev,
          {
            role: 'user',
            text: userText,
            timestamp,
            audioUrl: userAudioUrl,
            ...(tefQuestioningMode === 'practice' && !tefQuestioningIsFirstMessage && {
              isRepeat: response.isRepeat,
              conceptLabels: response.conceptLabels,
            }),
          },
          {
            role: 'model',
            text: modelText as string,
            timestamp: modelTimestamp,
            audioUrl: audioUrl as string,
            hint,
            voiceName,
            audioGenerationFailed,
            frenchText: characters?.[0]?.frenchText // Store French text for TTS retry
          },
        ]);

        // Update current hint (only in scenario/ad/questioning practice mode)
        if ((scenarioMode === 'practice' || tefAdMode === 'practice') && hint) {
          setCurrentHint(hint);
        }
        if (tefQuestioningMode === 'practice' && !tefQuestioningIsFirstMessage && hint) {
          setCurrentHint(hint);
        }

        // Set the new model message to auto-play
        setAutoPlayMessageId(modelTimestamp);
      }

      // Success - clear retry state
      setCanRetryChatAudio(false);
      setLastChatAudio(null);
      setChatProcessingErrorMessage('');
      setAppState(AppState.IDLE);

      // Persuasion first-message handling
      if (tefAdMode === 'practice') {
        if (tefAdIsFirstMessage) {
          // First turn is a greeting — skip turn count increment, just mark first message done
          setTefAdIsFirstMessage(false);
        } else {
          // Increment turn count after each non-first successful user turn
          setTefAdTurnCount(prev => prev + 1);
        }
      }

      // TEF Questioning: count questions (skip first message / greeting)
      if (tefQuestioningMode === 'practice') {
        if (tefQuestioningIsFirstMessage) {
          setTefQuestioningIsFirstMessage(false);
        } else {
          setTefQuestioningQuestionCount(c => c + 1);
          if (response.isRepeat === true) {
            setTefQuestioningRepeatCount(r => r + 1);
          }
        }
      }

    } catch (error) {
      const kind = pipelineFailureKindRef.current;
      pipelineFailureKindRef.current = null;

      // If aborted or superseded by a newer request, don't show error
      if (processingAbortedRef.current || currentRequestId !== requestIdRef.current) {
        return;
      }

      const isAbort = isAbortLikeError(error);
      const defaultMsg = 'Connection error. Please try again.';

      if (isAbort && kind === 'user_cancel') {
        const msg = 'You canceled the processing.';
        setChatProcessingErrorMessage(msg);
        setCanRetryChatAudio(true);
        setAppState(AppState.ERROR);
        showErrorFlash(msg);
        return;
      }
      if (isAbort && kind === 'timeout') {
        const msg = 'Connection timed out';
        setChatProcessingErrorMessage(msg);
        setCanRetryChatAudio(true);
        setAppState(AppState.ERROR);
        showErrorFlash(msg);
        return;
      }

      console.error("Interaction failed", error);
      setChatProcessingErrorMessage(defaultMsg);
      setCanRetryChatAudio(true);
      setAppState(AppState.ERROR);
      showErrorFlash(defaultMsg);
    } finally {
      if (deadlineTimeoutId !== undefined) {
        clearTimeout(deadlineTimeoutId);
      }
      abortControllerRef.current = null;
      pipelineFailureKindRef.current = null;
    }
  };

  const handleStopRecording = async () => {
    processingAbortedRef.current = false;
    setAppState(AppState.PROCESSING);

    try {
      // Destructure base64 and mimeType from the hook
      const { base64, mimeType } = await stopRecording();

      // Check if user aborted while recording was stopping
      if (processingAbortedRef.current) {
        return;
      }

      // Store the audio for potential retry
      const audioData: AudioData = { base64, mimeType };
      setLastChatAudio(audioData);

      // Process the audio
      await processAudioMessage(audioData);

    } catch (error) {
      // If aborted, don't show error
      if (processingAbortedRef.current) {
        return;
      }
      console.error("Interaction failed", error);
      const defaultMsg = 'Connection error. Please try again.';
      setChatProcessingErrorMessage(defaultMsg);
      setAppState(AppState.ERROR);
      showErrorFlash(defaultMsg);
    }
  };

  /**
   * Retry sending the last recorded chat audio
   */
  const handleRetryChatAudio = async () => {
    if (!lastChatAudio) {
      console.error("No audio to retry");
      return;
    }
    await processAudioMessage(lastChatAudio);
  };

  /**
   * Retry generating audio for a specific message that failed
   */
  const handleRetryAudioGeneration = async (messageTimestamp: number) => {
    const message = messages.find(m => m.timestamp === messageTimestamp);
    if (!message || !message.audioGenerationFailed || !message.voiceName) {
      console.error("Cannot retry audio generation for this message", {
        hasMessage: !!message,
        audioGenerationFailed: message?.audioGenerationFailed,
        voiceName: message?.voiceName
      });
      return;
    }

    // Add this message to the retrying set
    setRetryingMessageTimestamps(prev => new Set(prev).add(messageTimestamp));

    try {
      // Use French-only text for TTS retry (falls back to full text if frenchText not available)
      const textForTTS = message.frenchText || message.text;
      const audioUrl = await generateCharacterSpeech(textForTTS, message.voiceName);

      // Update message with new audio
      setMessages(prev => prev.map(m =>
        m.timestamp === messageTimestamp
          ? { ...m, audioUrl, audioGenerationFailed: false }
          : m
      ));
    } catch (err) {
      console.error('Audio generation retry failed:', err);
      // Could show a toast notification here
    } finally {
      // Remove this message from the retrying set
      setRetryingMessageTimestamps(prev => {
        const next = new Set(prev);
        next.delete(messageTimestamp);
        return next;
      });
    }
  };

  // Abort handler - cancels in-flight processing (orb tap during PROCESSING)
  const handleAbortProcessing = useCallback(() => {
    if (!abortControllerRef.current) {
      return;
    }
    pipelineFailureKindRef.current = 'user_cancel';
    abortControllerRef.current.abort();
    // ERROR + retry are set in processAudioMessage catch (do not set processingAbortedRef — that is for exercise-exit suppress)
  }, []);

  // Orb click handler - toggle recording or abort processing
  const handleOrbClick = () => {
    if (appState === AppState.RECORDING) {
      handleStopRecording();
    } else if (appState === AppState.PROCESSING) {
      handleAbortProcessing();
    } else {
      handleStartRecording();
    }
  };

  const handleClearHistory = async () => {
    try {
      // Revoke all audio URLs before clearing messages
      messages.forEach(msg => {
        if (msg.audioUrl) {
          if (Array.isArray(msg.audioUrl)) {
            msg.audioUrl.forEach(url => {
              URL.revokeObjectURL(url);
            });
          } else {
            URL.revokeObjectURL(msg.audioUrl);
          }
        }
      });

      // Clear shared conversation history
      clearHistory();
      // Clear UI messages and hint
      setMessages([]);
      setAutoPlayMessageId(null);
      setCurrentHint(null);
      // Always reset Gemini session when clearing history, preserving scenario if active
      resetSession(activeScenario);
    } catch (error) {
      console.error("Error clearing history:", error);
      // Show error to user
      showErrorFlash();
      // Still clear UI messages even if resetSession fails
      setMessages([]);
      setAutoPlayMessageId(null);
      setCurrentHint(null);
    }
  };

  // Scenario mode handlers
  const abortScenarioDescriptionTranscription = useCallback(() => {
    if (scenarioDescriptionAbortControllerRef.current) {
      scenarioDescriptionAbortControllerRef.current.abort();
      scenarioDescriptionAbortControllerRef.current = null;
    }
  }, []);

  const handleOpenScenarioSetup = () => {
    scenarioSetupOpenRef.current = true;
    setScenarioMode('setup');
    setScenarioDescription('');
    setScenarioName('');
    setAiSummary(null);
    setShowTranscriptOptions(false);
    setRawTranscript(null);
    setCleanedTranscript(null);
  };

  const handleCloseScenarioSetup = () => {
    // Invalidate any in-flight transcription so late-resolving promises
    // cannot overwrite transcript state after close+reopen.
    scenarioDescriptionRequestIdRef.current += 1;
    abortScenarioDescriptionTranscription();
    scenarioSetupOpenRef.current = false;
    setScenarioMode('none');
    setScenarioDescription('');
    setScenarioName('');
    setAiSummary(null);
    setScenarioCharacters([]); // Clear characters
    setIsRecordingDescription(false);
    setIsTranscribingDescription(false);
    setShowTranscriptOptions(false);
    setRawTranscript(null);
    setCleanedTranscript(null);
    // Clear description retry state
    setCanRetryDescriptionAudio(false);
    setLastDescriptionAudio(null);
    if (scenarioRecordingRef.current) {
      cancelRecording();
      scenarioRecordingRef.current = false;
    }
  };

  const handleStartRecordingDescription = async () => {
    // Scenario creation requires both Gemini (transcription) and OpenAI (planning)
    if (!hasApiKeyOrEnv('gemini') || !hasApiKeyOrEnv('openai')) {
      setShowApiKeyModal(true);
      return;
    }
    try {
      getAudioContext();

      // Check and request microphone permission before starting
      const hasPermission = await ensureMicrophonePermission();
      if (!hasPermission) {
        return;
      }

      // Clear retry state when starting a new recording
      setCanRetryDescriptionAudio(false);
      setLastDescriptionAudio(null);

      scenarioRecordingRef.current = true;
      setIsRecordingDescription(true);
      await startRecording();
    } catch (error) {
      console.error('Error starting recording description:', error);
      scenarioRecordingRef.current = false;
      setIsRecordingDescription(false);
      throw error;
    }
  };

  /**
   * Process description audio (from recording or retry) and transcribe it
   */
  const processDescriptionAudio = async (audioData: AudioData): Promise<void> => {
    // Increment request ID so we can ignore stale results even if the modal
    // is closed and then re-opened while a previous transcription is still in-flight.
    const currentRequestId = ++scenarioDescriptionRequestIdRef.current;

    // Abort any previous transcription attempt (e.g., quick retry or close+reopen races).
    abortScenarioDescriptionTranscription();
    const abortController = new AbortController();
    scenarioDescriptionAbortControllerRef.current = abortController;

    setIsTranscribingDescription(true);

    try {
      const { base64, mimeType } = audioData;

      // Single LLM call to transcribe and clean up the audio - using Gemini
      const { rawTranscript: rawText, cleanedTranscript: cleanedText } = await transcribeAndCleanupAudio(
        base64,
        mimeType,
        abortController.signal
      );

      // Discard results if a newer request started or the modal has been closed.
      if (currentRequestId !== scenarioDescriptionRequestIdRef.current || !scenarioSetupOpenRef.current) {
        return;
      }

      setRawTranscript(rawText);
      setCleanedTranscript(cleanedText);

      if (!rawText.trim() || !cleanedText.trim()) {
        showErrorFlash('Transcription was empty. Please try again.');
        // Keep retry available for empty transcription
        setCanRetryDescriptionAudio(true);
        return;
      }

      // Success - clear retry state
      setCanRetryDescriptionAudio(false);
      setLastDescriptionAudio(null);
      setShowTranscriptOptions(true);
    } catch (error) {
      // If this was an intentional cancellation, discard silently.
      const errName = error instanceof DOMException ? error.name : (error as any)?.name;
      if (errName === 'AbortError') {
        return;
      }

      if (currentRequestId !== scenarioDescriptionRequestIdRef.current || !scenarioSetupOpenRef.current) {
        return;
      }

      console.error('Error transcribing description:', error);
      if (scenarioSetupOpenRef.current) {
        // Enable retry with the stored audio
        setCanRetryDescriptionAudio(true);
        showErrorFlash('Failed to transcribe audio. Please try again.');
      }
    } finally {
      // Only clear the spinner for the latest attempt; stale requests must not
      // affect transcript UI state after a close+reopen race.
      if (currentRequestId === scenarioDescriptionRequestIdRef.current) {
        setIsTranscribingDescription(false);
      }

      if (scenarioDescriptionAbortControllerRef.current === abortController) {
        scenarioDescriptionAbortControllerRef.current = null;
      }
    }
  };

  const handleStopRecordingDescription = async (): Promise<void> => {
    scenarioRecordingRef.current = false;
    setIsRecordingDescription(false);

    try {
      const { base64, mimeType } = await stopRecording();

      // Store the audio for potential retry
      const audioData: AudioData = { base64, mimeType };
      setLastDescriptionAudio(audioData);

      // Process the audio
      await processDescriptionAudio(audioData);
    } catch (error) {
      console.error('Error stopping recording description:', error);
      if (scenarioSetupOpenRef.current) {
        showErrorFlash('Failed to process recording. Please try again.');
      }
    }
  };

  /**
   * Retry transcribing the last recorded description audio
   */
  const handleRetryDescriptionAudio = async (): Promise<void> => {
    if (!lastDescriptionAudio) {
      console.error("No audio to retry");
      return;
    }
    await processDescriptionAudio(lastDescriptionAudio);
  };

  const handleSelectTranscript = (useCleaned: boolean) => {
    const selectedText = useCleaned ? cleanedTranscript : rawTranscript;
    if (selectedText) {
      setScenarioDescription(selectedText);
    }
    setShowTranscriptOptions(false);
    setRawTranscript(null);
    setCleanedTranscript(null);
  };

  const handleDismissTranscriptOptions = () => {
    setShowTranscriptOptions(false);
    setRawTranscript(null);
    setCleanedTranscript(null);
  };

  const handleCancelRecordingDescription = () => {
    scenarioRecordingRef.current = false;
    setIsRecordingDescription(false);
    // Invalidate any in-flight transcription and clear spinner immediately.
    scenarioDescriptionRequestIdRef.current += 1;
    setIsTranscribingDescription(false);
    abortScenarioDescriptionTranscription();
    cancelRecording();
  };

  const handleSubmitScenarioDescription = async (description: string, name: string) => {
    // Scenario creation requires both Gemini (transcription) and OpenAI (planning)
    if (!hasApiKeyOrEnv('gemini') || !hasApiKeyOrEnv('openai')) {
      setShowApiKeyModal(true);
      return;
    }
    setIsProcessingScenario(true);

    try {
      // Use OpenAI for scenario planning (returns JSON with summary and characters)
      const result = await processScenarioDescriptionOpenAI(description);

      // Try to parse as JSON first
      let parsed: { summary: string; characters?: Array<{ name: string; role: string; description?: string }> };
      try {
        parsed = JSON.parse(result);
      } catch (parseError) {
        // If not JSON, treat as plain summary (backward compatibility)
        console.warn('Scenario description response is not JSON, treating as plain text');
        parsed = { summary: result, characters: [] };
      }

      setAiSummary(parsed.summary);

      // Extract and assign voices to characters
      if (parsed.characters && parsed.characters.length > 0) {
        const charactersWithIds = parsed.characters.map((char, idx) => ({
          id: `${generateId()}_${idx}`,
          name: char.name,
          role: char.role,
          description: char.description
        }));

        const charactersWithVoices = assignVoicesToCharacters(charactersWithIds);
        setScenarioCharacters(charactersWithVoices);
      } else {
        // No characters extracted, fallback to single-character mode
        setScenarioCharacters([]);
      }
    } catch (error) {
      console.error('Error processing scenario:', error);
      setAiSummary('I understand your scenario. Ready to begin when you are!');
      setScenarioCharacters([]); // Fallback to single-character
    } finally {
      setIsProcessingScenario(false);
    }
  };

  const handleEditScenario = () => {
    // User wants to edit, clear summary to show form again
    setAiSummary(null);
  };

  const handleStartPractice = async (scenario: Scenario) => {
    // Revoke all audio URLs before clearing messages to prevent memory leaks
    messages.forEach(msg => {
      if (msg.audioUrl) {
        if (Array.isArray(msg.audioUrl)) {
          msg.audioUrl.forEach(url => URL.revokeObjectURL(url));
        } else {
          URL.revokeObjectURL(msg.audioUrl);
        }
      }
    });

    // Reset autoplay state
    setAutoPlayMessageId(null);

    // Clear existing conversation
    clearHistory();
    setMessages([]);

    // Enhance scenario with characters
    // Use scenarioCharacters if available (new scenario), otherwise fall back to scenario.characters (existing scenario)
    const enhancedScenario: Scenario = {
      ...scenario,
      characters: scenarioCharacters.length > 0 ? scenarioCharacters : scenario.characters
    };

    // Set the scenario for both providers
    setActiveScenario(enhancedScenario);
    setScenarioMode('practice');

    // Configure Gemini service with the scenario
    setScenario(enhancedScenario);

    // Close the setup modal
    setScenarioDescription('');
    setScenarioName('');
    setAiSummary(null);
  };

  const handleExitScenario = async () => {
    // Revoke all audio URLs before clearing messages
    messages.forEach(msg => {
      if (msg.audioUrl) {
        if (Array.isArray(msg.audioUrl)) {
          msg.audioUrl.forEach(url => URL.revokeObjectURL(url));
        } else {
          URL.revokeObjectURL(msg.audioUrl);
        }
      }
    });

    // Clear the scenario and characters
    setActiveScenario(null);
    setScenarioMode('none');
    setScenarioCharacters([]);

    // Reset Gemini service to normal mode
    setScenario(null);

    // Clear conversation and hint
    clearHistory();
    setMessages([]);
    setAutoPlayMessageId(null);
    setCurrentHint(null);
  };

  // TEF Ad handlers
  const handleOpenTefAdSetup = () => {
    setTefAdMode('setup');
  };

  // Mode sheet handler — routes mode selection to the appropriate setup flow
  const handleSelectMode = (modeId: 'ad-persuasion' | 'role-play' | 'ad-questioning') => {
    setShowModeSheet(false);
    if (modeId === 'ad-persuasion') {
      handleOpenTefAdSetup();
    } else if (modeId === 'role-play') {
      handleOpenScenarioSetup();
    } else if (modeId === 'ad-questioning') {
      setTefQuestioningMode('setup');
    }
  };

  const handleCloseTefAdSetup = () => {
    setTefAdMode('none');
    setTefAdImage(null);
  };

  const handleStartTefConversation = async (
    image: string,
    mimeType: string,
    confirmation: { summary: string; roleSummary: string }
  ) => {
    if (!hasApiKeyOrEnv('gemini')) {
      setShowApiKeyModal(true);
      return;
    }

    // Reset first-message flag at the start of every new session
    setTefAdIsFirstMessage(true);

    // Revoke existing audio URLs
    for (const msg of messages) {
      if (msg.audioUrl) {
        if (Array.isArray(msg.audioUrl)) {
          for (const url of msg.audioUrl) { URL.revokeObjectURL(url); }
        } else {
          URL.revokeObjectURL(msg.audioUrl);
        }
      }
    }

    // Clear conversation
    clearHistory();
    setMessages([]);
    setAutoPlayMessageId(null);
    setCurrentHint(null);

    // Build a Scenario from the TEF Ad confirmation
    const tefScenario: Scenario = {
      id: generateId(),
      name: 'TEF Ad Persuasion',
      description: generateTefAdSystemInstruction(confirmation.summary, confirmation.roleSummary),
      aiSummary: confirmation.summary,
      createdAt: Date.now(),
      isActive: true,
      characters: [{
        id: `${generateId()}_friend`,
        name: 'Friend',
        role: 'skeptical French-speaking friend',
        voiceName: 'aoede',
      }],
    };

    // Configure Gemini service with the TEF scenario
    setScenario(tefScenario);
    setActiveScenario(tefScenario);

    // Store image
    setTefAdImage(image);

    // Reset timer state
    setTefTimedUp(false);

    // Ensure mutual exclusivity with scenario mode
    setScenarioMode('none');

    // Reset turn count for the new session
    setTefAdTurnCount(0);

    setTefAdMode('practice');
  };

  const handleExitTefAd = () => {
    // Guard: prevent double-trigger
    if (showTefAdSummary) return;

    // Mark processing as aborted so any in-flight processAudioMessage continuation
    // won't create a new user audio blob URL after the snapshot has been captured.
    processingAbortedRef.current = true;

    setTefAdIsFirstMessage(true);

    // Abort any in-flight processing or recording
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
      abortControllerRef.current = null;
    }
    if (appState === AppState.RECORDING) {
      cancelRecording();
    }

    // Clear retry state
    setLastChatAudio(null);
    setCanRetryChatAudio(false);
    setLastDescriptionAudio(null);
    setCanRetryDescriptionAudio(false);

    setShowLightbox(false);
    setTefTimedUp(false);

    // Capture snapshot BEFORE clearing state — audio URLs must stay valid for review generation
    const snapshot = messagesRef.current;
    tefAdMessagesSnapshotRef.current = snapshot;

    // Show review screen and start generating review
    setTefAdReviews([]);
    setTefAdReviewIndex(0);
    setTefAdReviewError(null);
    setTefAdReviewLoading(true);
    setShowTefAdSummary(true);

    startTefAdReview(snapshot);
  };

  const handleDismissTefAdSummary = () => {
    // Revoke audio URLs from snapshot (safe now that review is done)
    for (const msg of tefAdMessagesSnapshotRef.current) {
      if (msg.audioUrl) {
        if (Array.isArray(msg.audioUrl)) {
          for (const url of msg.audioUrl) { URL.revokeObjectURL(url); }
        } else {
          URL.revokeObjectURL(msg.audioUrl);
        }
      }
    }
    tefAdMessagesSnapshotRef.current = [];

    // Clear scenario and conversation
    setActiveScenario(null);
    setScenario(null);
    clearHistory();
    setMessages([]);
    setAutoPlayMessageId(null);
    setCurrentHint(null);

    // Reset all TEF Ad state
    setTefAdMode('none');
    setTefAdImage(null);
    setShowLightbox(false);
    setTefTimedUp(false);
    setTefAdTurnCount(0);
    setTefAdIsFirstMessage(true);

    // Reset review state
    setTefAdReviews([]);
    setTefAdReviewIndex(0);
    setTefAdReviewLoading(false);
    setTefAdReviewError(null);
    setShowTefAdSummary(false);

    // Force back to idle so landing page is clean
    setAppState(AppState.IDLE);
  };

  // TEF Questioning handlers
  const handleStartTefQuestioningConversation = async (
    image: string,
    mimeType: string,
    confirmation: { summary: string; roleSummary: string }
  ) => {
    if (!hasApiKeyOrEnv('gemini')) {
      setShowApiKeyModal(true);
      return;
    }

    // Reset counts and first-message flag immediately
    setTefQuestioningQuestionCount(0);
    setTefQuestioningRepeatCount(0);
    setTefQuestioningIsFirstMessage(true);
    setTefQuestioningTimedUp(false);
    setShowTefQuestioningSummary(false);

    // Revoke existing audio URLs
    for (const msg of messages) {
      if (msg.audioUrl) {
        if (Array.isArray(msg.audioUrl)) {
          for (const url of msg.audioUrl) { URL.revokeObjectURL(url); }
        } else {
          URL.revokeObjectURL(msg.audioUrl);
        }
      }
    }

    // Clear conversation
    clearHistory();
    setMessages([]);
    setAutoPlayMessageId(null);
    setCurrentHint(null);

    // Build a synthetic Scenario for the questioning mode
    const questioningScenario: Scenario = {
      id: generateId(),
      name: 'TEF Ad Questioning',
      description: generateTefQuestioningSystemInstruction(confirmation.summary, confirmation.roleSummary),
      aiSummary: confirmation.summary,
      createdAt: Date.now(),
      isActive: true,
      isTefQuestioning: true,
      characters: [{
        id: `${generateId()}_agent`,
        name: 'Agent',
        role: 'customer service agent',
        voiceName: 'puck',
      }],
    };

    // Configure Gemini service with the questioning scenario
    setScenario(questioningScenario);
    setActiveScenario(questioningScenario);

    // Store image
    setTefQuestioningImage(image);

    // Ensure mutual exclusivity with other modes
    setScenarioMode('none');
    setTefAdMode('none');

    // Enter practice mode
    setTefQuestioningMode('practice');
  };

  const handleExitTefQuestioning = () => {
    // Treat this as an intentional abort so processAudioMessage doesn't
    // fall through into ERROR UI on AbortError.
    processingAbortedRef.current = true;
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
      abortControllerRef.current = null;
    }
    setShowLightbox(false);
    setShowTefQuestioningSummary(true);
    const snapshot = messagesRef.current;
    tefQuestioningMessagesSnapshotRef.current = snapshot;
    startTefQuestioningReview(snapshot);
  };

  const handleDismissTefQuestioningSummary = () => {
    // Abort any in-flight processing or recording
    processingAbortedRef.current = true;
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
      abortControllerRef.current = null;
    }
    setShowLightbox(false);
    if (appState === AppState.RECORDING) {
      cancelRecording();
    }

    // Clear scenario and conversation
    setActiveScenario(null);
    setScenario(null);
    clearHistory();
    setMessages([]);
    setAutoPlayMessageId(null);
    setCurrentHint(null);

    // Reset all questioning state
    setTefQuestioningMode('none');
    setTefQuestioningImage(null);
    setTefQuestioningTimedUp(false);
    setTefQuestioningQuestionCount(0);
    setTefQuestioningRepeatCount(0);
    setTefQuestioningIsFirstMessage(true);
    setShowTefQuestioningSummary(false);

    // Revoke audio URLs from the snapshot (safe now that review is done)
    for (const msg of tefQuestioningMessagesSnapshotRef.current) {
      if (msg.audioUrl) {
        if (Array.isArray(msg.audioUrl)) {
          for (const url of msg.audioUrl) { URL.revokeObjectURL(url); }
        } else {
          URL.revokeObjectURL(msg.audioUrl);
        }
      }
    }
    tefQuestioningMessagesSnapshotRef.current = [];

    // Reset review state
    setTefQuestioningReviews([]);
    setTefQuestioningReviewIndex(0);
    setTefQuestioningReviewLoading(false);
    setTefQuestioningReviewError(null);

    setAppState(AppState.IDLE);
  };

  // Status text for the landing view
  const getStatusText = () => {
    if (errorFlashVisible) {
      return <p className="text-red-400 font-medium animate-pulse">{errorFlashMessage}</p>;
    }
    if (appState === AppState.ERROR) {
      const errLine = chatProcessingErrorMessage || 'Connection error. Please try again.';
      return <p className="text-red-400 font-medium animate-pulse">{errLine}</p>;
    }
    if (geminiKeyMissing) {
      return <p className="text-yellow-400 font-medium text-sm">Warning: No Gemini API key configured.</p>;
    }
    if (appState === AppState.PROCESSING) {
      return <p className="text-slate-400 font-medium">Thinking...</p>;
    }
    if (appState === AppState.RECORDING) {
      return <p className="text-red-400 font-medium">Listening... Tap to stop</p>;
    }
    if (appState === AppState.PLAYING) {
      return <p className="text-sky-400 font-medium">Speaking...</p>;
    }
    if (appState === AppState.IDLE && hasStarted) {
      return <p className="text-slate-500">Ready. Tap the mic to speak.</p>;
    }
    return <p className="text-slate-500">Tap the mic to start your session.</p>;
  };

  return (
    <div className="min-h-dvh h-dvh bg-slate-900 flex flex-col relative overflow-hidden">

      {/* Background Ambience */}
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
        <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-blue-900/20 rounded-full blur-[120px]"></div>
        <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-indigo-900/20 rounded-full blur-[120px]"></div>
      </div>

      {/* Header */}
      <header className="w-full p-4 sm:p-6 flex flex-row justify-between items-center z-10 flex-shrink-0">
        <div className="flex items-center gap-2">
          <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
          <h1 className="text-xl font-bold tracking-tight text-slate-100">Parle</h1>
        </div>

        <div className="flex items-center gap-2">
          {/* TEF Ad practice header items */}
          {tefAdMode === 'practice' && tefAdImage && (
            <>
              <PersuasionTimer
                elapsed={tefElapsed}
                isPaused={appState === AppState.PROCESSING || appState === AppState.ERROR}
                turnCount={tefAdTurnCount}
              />
              <AdThumbnail
                imageDataUrl={tefAdImage}
                onOpenLightbox={() => setShowLightbox(true)}
              />
            </>
          )}

          {/* TEF Questioning practice header items */}
          {tefQuestioningMode === 'practice' && tefQuestioningImage && (
            <>
              <QuestioningTimer
                remainingSeconds={300 - tefQuestioningElapsed}
                isPaused={appState === AppState.PROCESSING || appState === AppState.ERROR}
                questionCount={tefQuestioningQuestionCount}
                isTimedUp={tefQuestioningTimedUp}
              />
              <AdThumbnail
                imageDataUrl={tefQuestioningImage}
                onOpenLightbox={() => setShowLightbox(true)}
              />
            </>
          )}

          <button
            onClick={() => setShowApiKeyModal(true)}
            className="p-2 text-slate-400 hover:text-white transition-colors bg-slate-800/50 rounded-full border border-slate-700/50"
            title="Settings"
            aria-label="Open API settings"
          >
            <GearIcon className="h-5 w-5" />
          </button>
        </div>
      </header>

      {/* Main Content Area - switches between landing and chat layouts */}
      {!hasMessages ? (
        /* ============ LANDING VIEW ============ */
        <main className="flex-grow min-h-0 overflow-y-auto flex flex-col items-center w-full max-w-2xl mx-auto px-4 z-10 pb-8">

          {/* Spacer pushes content to bottom; collapses when viewport is short to allow scrolling */}
          <div className="flex-grow"></div>

          {/* Controls (speed + scenario) — above the orb */}
          <Controls
            appState={appState}
            playbackSpeed={playbackSpeed}
            onSpeedChange={handleSpeedChange}
            onCancelRecording={handleCancelRecording}
            scenarioMode={scenarioMode}
            activeScenario={activeScenario}
            onOpenModeSheet={() => setShowModeSheet(true)}
            onExitScenario={handleExitScenario}
            tefAdMode={tefAdMode}
            onExitTefAd={handleExitTefAd}
            tefQuestioningMode={tefQuestioningMode}
            onExitTefQuestioning={handleExitTefQuestioning}
          />

          {/* Orb-Mic — at the bottom, closest to thumb */}
          <div className="mt-8">
            <Orb
              state={appState}
              volume={volume}
              size="large"
              onClick={handleOrbClick}
            />
          </div>

          {/* Status Text — below the orb */}
          <div className="h-8 my-2 text-center">
            {getStatusText()}
          </div>

          {/* Action Buttons — between status text and footer */}
          <div className="mt-2 flex items-center gap-3">
            {/* Cancel Recording Button */}
            <button
              onClick={handleCancelRecording}
              className={`px-4 py-2 text-sm font-medium text-slate-400 hover:text-slate-200 transition-colors rounded-lg hover:bg-slate-800/50 border border-slate-700/50 ${appState === AppState.RECORDING ? '' : 'hidden'}`}
              tabIndex={appState === AppState.RECORDING ? 0 : -1}
            >
              Cancel (Esc)
            </button>

            {/* Retry Button - visible when audio processing failed */}
            {canRetryChatAudio && appState === AppState.ERROR && (
              <button
                onClick={handleRetryChatAudio}
                className="flex items-center gap-2 px-4 py-2 text-sm font-medium bg-amber-600 hover:bg-amber-500 text-white transition-colors rounded-lg"
              >
                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
                </svg>
                Retry
              </button>
            )}
          </div>

          {/* Footer Info */}
          <div className="pt-1 text-center text-slate-600 text-xs">
            <p>Built by <a href="https://www.linkedin.com/in/uchechukwu-ozoemena/" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">CodeWithOz</a></p>
          </div>
        </main>
      ) : (
        /* ============ CHAT VIEW ============ */
        <>
          {/* Chat area - fills available space */}
          <main className="flex-grow flex flex-col w-full max-w-2xl mx-auto z-10 min-h-0">
            <ConversationHistory
              messages={messages}
              onClear={handleClearHistory}
              playbackSpeed={playbackSpeed}
              autoPlayMessageId={autoPlayMessageId}
              onRetryAudio={handleRetryAudioGeneration}
              retryingMessageTimestamps={retryingMessageTimestamps}
            />
            {/* Conversation hint - shown in scenario practice when idle or recording; flex-shrink-0 keeps it visible below the scrollable history */}
            <div className="flex-shrink-0">
              <ConversationHint
                hint={currentHint}
                isVisible={(scenarioMode === 'practice' || tefAdMode === 'practice' || tefQuestioningMode === 'practice') && (appState === AppState.IDLE || appState === AppState.RECORDING)}
              />
            </div>
          </main>

          {/* Sticky Footer - orb-mic + controls */}
          <div className="w-full z-20 flex-shrink-0 border-t border-slate-800 bg-slate-900/95 backdrop-blur-xl">
            {/* Error flash in footer */}
            {errorFlashVisible && (
              <div className="px-4 py-2 text-center">
                <p className="text-red-400 text-xs font-medium animate-pulse">{errorFlashMessage}</p>
              </div>
            )}

            {/* Retry Button - visible when audio processing failed */}
            {canRetryChatAudio && appState === AppState.ERROR && (
              <div className="px-4 py-2 text-center">
                <button
                  onClick={handleRetryChatAudio}
                  className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-amber-600 hover:bg-amber-500 text-white transition-colors rounded-lg"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                    <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
                  </svg>
                  Retry
                </button>
              </div>
            )}

            <div className="max-w-2xl mx-auto px-4 py-3 pb-6 flex items-center gap-3">
              {/* Controls on the left */}
              <div className="flex-grow min-w-0">
                <Controls
                  appState={appState}
                  playbackSpeed={playbackSpeed}
                  onSpeedChange={handleSpeedChange}
                  onCancelRecording={handleCancelRecording}
                  scenarioMode={scenarioMode}
                  activeScenario={activeScenario}
                  onOpenModeSheet={() => setShowModeSheet(true)}
                  onExitScenario={handleExitScenario}
                  tefAdMode={tefAdMode}
                  onExitTefAd={handleExitTefAd}
                  tefQuestioningMode={tefQuestioningMode}
                  onExitTefQuestioning={handleExitTefQuestioning}
                  compact
                />
              </div>

              {/* Orb-Mic on the right */}
              <div className="flex-shrink-0">
                <Orb
                  state={appState}
                  volume={volume}
                  size="small"
                  onClick={handleOrbClick}
                />
              </div>
            </div>
          </div>
        </>
      )}

      {/* TEF Ad Setup Modal */}
      {tefAdMode === 'setup' && (
        <AdPersuasionSetup
          onStartConversation={handleStartTefConversation}
          onClose={handleCloseTefAdSetup}
          geminiKeyMissing={geminiKeyMissing}
          onOpenApiKeyModal={() => setShowApiKeyModal(true)}
        />
      )}

      {/* TEF Questioning Setup Modal */}
      {tefQuestioningMode === 'setup' && (
        <AdQuestioningSetup
          onStartConversation={handleStartTefQuestioningConversation}
          onClose={() => setTefQuestioningMode('none')}
          geminiKeyMissing={geminiKeyMissing}
          onOpenApiKeyModal={() => setShowApiKeyModal(true)}
        />
      )}

      {/* TEF Questioning Summary Overlay */}
      {showTefQuestioningSummary && (
        <TefQuestioningSummary
          messages={tefQuestioningMessagesSnapshotRef.current}
          questionCount={tefQuestioningQuestionCount}
          repeatCount={tefQuestioningRepeatCount}
          elapsedSeconds={tefQuestioningElapsed}
          adImage={tefQuestioningImage}
          onDismiss={handleDismissTefQuestioningSummary}
          reviews={tefQuestioningReviews}
          reviewIndex={tefQuestioningReviewIndex}
          onNavigateReview={setTefQuestioningReviewIndex}
          isReviewLoading={tefQuestioningReviewLoading}
          reviewError={tefQuestioningReviewError}
          onRetryReview={() => startTefQuestioningReview(tefQuestioningMessagesSnapshotRef.current)}
          onRegenerateReview={() => regenerateTefQuestioningReview(tefQuestioningMessagesSnapshotRef.current)}
        />
      )}

      {/* TEF Ad Summary Overlay */}
      {showTefAdSummary && (
        <TefAdSummary
          elapsedSeconds={tefElapsed}
          turnCount={tefAdTurnCount}
          adImage={tefAdImage}
          reviews={tefAdReviews}
          reviewIndex={tefAdReviewIndex}
          onNavigateReview={setTefAdReviewIndex}
          isReviewLoading={tefAdReviewLoading}
          reviewError={tefAdReviewError}
          onRetryReview={() => startTefAdReview(tefAdMessagesSnapshotRef.current)}
          onRegenerateReview={() => regenerateTefAdReview(tefAdMessagesSnapshotRef.current)}
          onDismiss={handleDismissTefAdSummary}
        />
      )}

      {/* TEF Ad Time's Up Overlay */}
      {tefTimedUp && tefAdMode === 'practice' && !showTefAdSummary && (
        <div className="fixed inset-0 bg-slate-900/80 z-50 flex items-center justify-center p-4">
          <div className="bg-slate-800 rounded-2xl border border-slate-700 max-w-sm w-full p-8 text-center">
            <div className="w-16 h-16 bg-amber-900/30 rounded-full flex items-center justify-center mx-auto mb-4 border border-amber-700/50">
              <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-amber-400" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
              </svg>
            </div>
            <h2 className="text-xl font-bold text-slate-100 mb-2">Time's Up!</h2>
            <p className="text-slate-400 text-sm mb-6">
              Your 10-minute practice session has ended. Great work!
            </p>
            <div className="flex flex-col gap-3">
              <button
                onClick={() => { setTefTimedUp(false); }}
                className="w-full py-3 bg-slate-700 hover:bg-slate-600 text-slate-200 rounded-xl font-medium transition-colors"
              >
                Continue Anyway
              </button>
              <button
                onClick={() => { setTefTimedUp(false); handleExitTefAd(); }}
                className="w-full py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-medium transition-colors"
              >
                End Session
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Image Lightbox */}
      {showLightbox && (tefAdImage || tefQuestioningImage) && (
        <ImageLightbox
          imageDataUrl={(tefAdImage || tefQuestioningImage)!}
          onClose={() => setShowLightbox(false)}
        />
      )}

      {/* Scenario Setup Modal */}
      {scenarioMode === 'setup' && (
        <ScenarioSetup
          onStartPractice={handleStartPractice}
          onClose={handleCloseScenarioSetup}
          isRecordingDescription={isRecordingDescription}
          isTranscribingDescription={isTranscribingDescription}
          onStartRecordingDescription={handleStartRecordingDescription}
          onStopRecordingDescription={handleStopRecordingDescription}
          onCancelRecordingDescription={handleCancelRecordingDescription}
          isProcessingScenario={isProcessingScenario}
          aiSummary={aiSummary}
          onSubmitDescription={handleSubmitScenarioDescription}
          onEditScenario={handleEditScenario}
          currentDescription={scenarioDescription}
          currentName={scenarioName}
          onDescriptionChange={setScenarioDescription}
          onNameChange={setScenarioName}
          showTranscriptOptions={showTranscriptOptions}
          rawTranscript={rawTranscript}
          cleanedTranscript={cleanedTranscript}
          onSelectTranscript={handleSelectTranscript}
          onDismissTranscriptOptions={handleDismissTranscriptOptions}
          canRetryDescriptionAudio={canRetryDescriptionAudio}
          onRetryDescriptionAudio={handleRetryDescriptionAudio}
          geminiKeyMissing={apiKeyCheckDone && !hasApiKeyOrEnv('gemini')}
          openaiKeyMissing={apiKeyCheckDone && !hasApiKeyOrEnv('openai')}
          characters={scenarioCharacters}
        />
      )}

      {/* API Key Setup Modal */}
      {showApiKeyModal && (
        <ApiKeySetup
          onClose={handleApiKeyModalClose}
          onSave={handleApiKeySave}
        />
      )}

      {/* Practice Mode Sheet */}
      <PracticeModeSheet
        open={showModeSheet}
        onOpenChange={setShowModeSheet}
        onSelectMode={handleSelectMode}
      />
    </div>
  );
};

export default App;