App.tsx

import React, { useState } from 'react';
import { StudentForm } from './components/StudentForm';
import { ResultsDisplay } from './components/ResultsDisplay';
import { Loader } from './components/Loader';
import { Header } from './components/Header';
import { FCEInputs, FCEOutputs } from './types';
import { generateFceMaterials } from './services/geminiService';

const App: React.FC = () => {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);
  const [results, setResults] = useState<FCEOutputs | null>(null);

  const handleGenerate = async (inputs: FCEInputs) => {
    setIsLoading(true);
    setError(null);
    setResults(null);
    try {
      const generatedResults = await generateFceMaterials(inputs);
      setResults(generatedResults);
    } catch (err) {
      console.error(err);
      setError(err instanceof Error ? err.message : 'An unknown error occurred. Please check the console and try again.');
    } finally {
      setIsLoading(false);
    }
  };

  const handleReset = () => {
    setResults(null);
    setError(null);
  };

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-800">
      <Header />
      <main className="container mx-auto p-4 md:p-8">
        {isLoading && <Loader />}
        
        {error && (
          <div className="text-center p-8">
            <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative max-w-2xl mx-auto" role="alert">
              <strong className="font-bold">Generation Failed!</strong>
              <span className="block sm:inline ml-2">{error}</span>
            </div>
            <button
              onClick={handleReset}
              className="mt-6 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg transition-colors duration-300"
            >
              Try Again
            </button>
          </div>
        )}

        {!isLoading && !error && results && (
          <ResultsDisplay results={results} onReset={handleReset} />
        )}

        {!isLoading && !error && !results && (
          <StudentForm onGenerate={handleGenerate} />
        )}
      </main>
      <footer className="text-center p-4 text-slate-500 text-sm">
        <p>FCE Prep Assistant &copy; 2024. Powered by Google Gemini.</p>
      </footer>
    </div>
  );
};

export default App;