import React, { useState } from 'react';
import { generatePodcastScript, synthesizePodcastAudio } from './services/geminiService';
import InputForm from './components/InputForm';
import Player from './components/Player';
import ScriptView from './components/ScriptView';
import { LoadingState, SpeakerConfig } from './types';

function App() {
  const [loadingState, setLoadingState] = useState<LoadingState>(LoadingState.IDLE);
  const [script, setScript] = useState<string>('');
  const [audioData, setAudioData] = useState<string | null>(null);
  const [errorMsg, setErrorMsg] = useState<string | null>(null);

  const handleGenerate = async (topic: string, language: string, speakers: SpeakerConfig) => {
    setLoadingState(LoadingState.GENERATING_SCRIPT);
    setErrorMsg(null);
    setAudioData(null);
    setScript('');

    try {
      // 1. Generate Script
      const generatedScript = await generatePodcastScript(topic, language);
      setScript(generatedScript);
      
      // 2. Synthesize Audio
      setLoadingState(LoadingState.SYNTHESIZING_AUDIO);
      const audioBase64 = await synthesizePodcastAudio(generatedScript, speakers);
      setAudioData(audioBase64);

      setLoadingState(LoadingState.READY);
    } catch (err: any) {
      console.error(err);
      setLoadingState(LoadingState.ERROR);
      setErrorMsg(err.message || "An unexpected error occurred.");
    }
  };

  return (
    <div className="min-h-screen bg-[#111827] text-white flex flex-col items-center py-12 px-4 sm:px-6 lg:px-8">
      {/* Header */}
      <div className="text-center mb-10">
        <div className="flex items-center justify-center space-x-3 mb-2">
           <span className="text-4xl">🎙️</span>
           <h1 className="text-4xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400">
            GeminiPod
          </h1>
        </div>
        <p className="text-gray-400 text-lg max-w-lg mx-auto">
          Turn any topic into an engaging podcast conversation with AI.
        </p>
      </div>

      {/* Main Content */}
      <InputForm 
        onSubmit={handleGenerate} 
        isLoading={loadingState === LoadingState.GENERATING_SCRIPT || loadingState === LoadingState.SYNTHESIZING_AUDIO} 
      />

      {/* Status Messages */}
      <div className="mt-6 h-8 text-center">
        {loadingState === LoadingState.GENERATING_SCRIPT && (
          <p className="text-blue-400 animate-pulse font-medium">Writing the script...</p>
        )}
        {loadingState === LoadingState.SYNTHESIZING_AUDIO && (
          <p className="text-purple-400 animate-pulse font-medium">Recording audio in studio (this may take a moment)...</p>
        )}
         {loadingState === LoadingState.ERROR && (
          <p className="text-red-400 font-medium">Error: {errorMsg}</p>
        )}
      </div>

      {/* Results */}
      {loadingState === LoadingState.READY && (
        <>
            <Player base64Audio={audioData} />
            <ScriptView script={script} />
        </>
      )}

      {/* Footer */}
      <footer className="mt-20 text-gray-600 text-sm">
         Powered by Gemini 2.5 Flash & TTS
      </footer>
    </div>
  );
}

export default App;