App.tsx

import React, { useState, useCallback } from 'react';
import { PromptFormData, OptimizationResult } from './types';
import { optimizePrompt } from './services/geminiService';
import InputForm from './components/InputForm';
import OutputDisplay from './components/OutputDisplay';

const App: React.FC = () => {
  const [formData, setFormData] = useState<PromptFormData>({
    source_prompt: '',
    llm: '',
    accuracy: '',
    failure_modes: '',
    cost: '',
  });
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);
  const [result, setResult] = useState<OptimizationResult | null>(null);

  const handleSubmit = useCallback(async () => {
    if (!formData.source_prompt.trim()) {
      setError('The source prompt cannot be empty.');
      return;
    }
    setIsLoading(true);
    setError(null);
    setResult(null);

    try {
      const optimizationResult = await optimizePrompt(formData);
      setResult(optimizationResult);
    } catch (e) {
      console.error(e);
      setError('Failed to optimize prompt. Please check the console for more details.');
    } finally {
      setIsLoading(false);
    }
  }, [formData]);

  return (
    <div className="min-h-screen bg-gray-950 text-gray-200 font-sans">
      <header className="bg-gray-950/70 backdrop-blur-lg sticky top-0 z-10 border-b border-gray-700">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center">
              <h1 className="text-xl font-bold text-gray-50">
                Prompt Engineer
              </h1>
            </div>
          </div>
        </div>
      </header>

      <main className="container mx-auto p-4 sm:p-6 lg:p-8">
        <div className="grid grid-cols-1 md:grid-cols-2 md:gap-8">
          <div className="flex flex-col">
            <InputForm
              formData={formData}
              setFormData={setFormData}
              onSubmit={handleSubmit}
              isLoading={isLoading}
            />
          </div>
          <div className="mt-8 md:mt-0">
            <OutputDisplay
              result={result}
              isLoading={isLoading}
              error={error}
            />
          </div>
        </div>
      </main>
      
      <footer className="text-center p-4 mt-8 border-t border-gray-800">
        <p className="text-sm text-gray-500">Powered by Gemini</p>
      </footer>
    </div>
  );
};

export default App;