App.tsx

import React, { useState, useCallback } from 'react';
import { PromptBox } from './components/PromptBox';
import { ImageUploader } from './components/ImageUploader';
import { ResultCard } from './components/ResultCard';
import { PromptConfig, GeneratedImage, ImageUploadState } from './types';
import { generateProductImage } from './services/geminiService';

const DEFAULT_PROMPTS = [
  "Professional studio shot, clean white background, soft studio lighting",
  "Lifestyle photography on a minimalist wooden table, morning sunlight, cozy atmosphere",
  "Placed on a marble countertop with luxury interior background, high contrast",
  "Outdoor nature setting, surrounded by green leaves and blurred forest background"
];

const INITIAL_PROMPTS: PromptConfig[] = Array.from({ length: 6 }, (_, i) => ({
  id: i + 1,
  text: DEFAULT_PROMPTS[i] || ""
}));

const App: React.FC = () => {
  const [prompts, setPrompts] = useState<PromptConfig[]>(INITIAL_PROMPTS);
  const [promptsSaved, setPromptsSaved] = useState(false);
  const [imageState, setImageState] = useState<ImageUploadState>({
    file: null,
    previewUrl: null,
    base64: null,
    mimeType: null
  });
  const [results, setResults] = useState<GeneratedImage[]>([]);
  const [isGenerating, setIsGenerating] = useState(false);

  const handlePromptChange = (id: number, value: string) => {
    setPrompts(prev => prev.map(p => p.id === id ? { ...p, text: value } : p));
  };

  const handleSavePrompts = () => {
    // Filter out empty prompts to check if at least one exists (optional validation)
    const activePrompts = prompts.filter(p => p.text.trim().length > 0);
    if (activePrompts.length === 0) {
      alert("Please enter at least one prompt configuration.");
      return;
    }
    setPromptsSaved(true);
  };

  const handleEditPrompts = () => {
    setPromptsSaved(false);
    // Reset results if user goes back to edit prompts? 
    // Let's keep them but user needs to know they might need to regenerate.
  };

  const handleImageSelected = useCallback((file: File, base64: string, mimeType: string) => {
    setImageState({
      file,
      previewUrl: URL.createObjectURL(file),
      base64,
      mimeType
    });
  }, []);

  const handleClearImage = useCallback(() => {
    setImageState({
      file: null,
      previewUrl: null,
      base64: null,
      mimeType: null
    });
    setResults([]);
  }, []);

  const handleGenerate = async () => {
    if (!imageState.base64 || !imageState.mimeType) return;
    
    const activePrompts = prompts.filter(p => p.text.trim().length > 0);
    if (activePrompts.length === 0) return;

    setIsGenerating(true);
    
    // Initialize results array with waiting states
    const initialResults: GeneratedImage[] = activePrompts.map(p => ({
      id: p.id,
      promptId: p.id,
      originalPrompt: p.text,
      imageUrl: null,
      status: 'waiting',
      error: null
    }));
    
    setResults(initialResults);

    // Process prompts sequentially to update UI progressively
    for (const promptConfig of activePrompts) {
      // Set current prompt to generating
      setResults(prev => prev.map(r => 
        r.promptId === promptConfig.id 
          ? { ...r, status: 'generating' } 
          : r
      ));

      try {
        const generatedImageBase64 = await generateProductImage(
          imageState.base64,
          imageState.mimeType,
          promptConfig.text
        );

        setResults(prev => prev.map(r => 
          r.promptId === promptConfig.id 
            ? { ...r, status: 'success', imageUrl: generatedImageBase64 } 
            : r
        ));
      } catch (err: any) {
        setResults(prev => prev.map(r => 
          r.promptId === promptConfig.id 
            ? { ...r, status: 'error', error: err.message || "Failed to generate" } 
            : r
        ));
      }
    }

    setIsGenerating(false);
  };

  return (
    <div className="min-h-screen pb-20">
      {/* Header */}
      <header className="bg-white border-b border-slate-200 sticky top-0 z-10">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center space-x-3">
             <div className="w-8 h-8 bg-gradient-to-br from-yellow-300 to-yellow-500 rounded-lg flex items-center justify-center shadow-sm">
                <span className="text-yellow-900 font-bold text-lg">N</span>
             </div>
             <h1 className="text-xl font-bold text-slate-800 tracking-tight">Nano Banana Studio</h1>
          </div>
          <div className="text-sm text-slate-500 hidden sm:block">
            Powered by Gemini Flash Image
          </div>
        </div>
      </header>

      <main className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 mt-8 space-y-12">
        
        {/* Step 1: Configuration */}
        <section>
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-bold text-slate-800 flex items-center">
              <span className="w-8 h-8 bg-slate-800 text-white rounded-full flex items-center justify-center text-sm mr-3">1</span>
              Configure Prompts
            </h2>
            {promptsSaved && (
              <button 
                onClick={handleEditPrompts}
                disabled={isGenerating}
                className="text-sm text-blue-600 hover:text-blue-700 font-medium disabled:opacity-50"
              >
                Edit Configuration
              </button>
            )}
          </div>

          <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 transition-opacity duration-300 ${promptsSaved ? 'opacity-60 pointer-events-none' : 'opacity-100'}`}>
            {prompts.map(prompt => (
              <PromptBox 
                key={prompt.id} 
                id={prompt.id} 
                value={prompt.text} 
                onChange={handlePromptChange} 
                disabled={promptsSaved}
              />
            ))}
          </div>
          
          {!promptsSaved && (
             <div className="mt-8 flex justify-center">
                <button
                  onClick={handleSavePrompts}
                  className="bg-slate-900 text-white px-8 py-3 rounded-full font-semibold hover:bg-slate-800 transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 active:translate-y-0"
                >
                  Save Configuration
                </button>
             </div>
          )}
        </section>

        {/* Step 2: Upload */}
        <section className={`transition-all duration-500 ${promptsSaved ? 'opacity-100 translate-y-0' : 'opacity-50 translate-y-4 pointer-events-none grayscale'}`}>
          <div className="flex items-center mb-6">
            <span className="w-8 h-8 bg-slate-800 text-white rounded-full flex items-center justify-center text-sm mr-3">2</span>
            <h2 className="text-2xl font-bold text-slate-800">Product Source</h2>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="md:col-span-1">
               <ImageUploader 
                 previewUrl={imageState.previewUrl} 
                 onImageSelected={handleImageSelected} 
                 onClear={handleClearImage}
                 disabled={!promptsSaved || isGenerating}
               />
            </div>
            <div className="md:col-span-2 flex flex-col justify-center text-slate-600 space-y-4">
              <p className="text-lg">Upload your product image to generate variations based on your saved configuration.</p>
              <ul className="list-disc list-inside text-slate-500 space-y-2 text-sm">
                <li>Best results with clear, well-lit images.</li>
                <li>Avoid cluttered backgrounds for better object isolation.</li>
                <li>The model will attempt to preserve the core product details.</li>
              </ul>
              
              <div className="pt-4">
                <button
                  onClick={handleGenerate}
                  disabled={!imageState.base64 || isGenerating}
                  className={`w-full sm:w-auto px-8 py-3 rounded-full font-bold text-lg shadow-lg transition-all transform flex items-center justify-center space-x-2 ${
                    !imageState.base64 || isGenerating 
                      ? 'bg-slate-200 text-slate-400 cursor-not-allowed shadow-none' 
                      : 'bg-yellow-400 text-yellow-900 hover:bg-yellow-300 hover:shadow-yellow-200/50 hover:-translate-y-1'
                  }`}
                >
                  {isGenerating ? (
                    <>
                      <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-yellow-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                      </svg>
                      Generating Variations...
                    </>
                  ) : (
                    <>
                      <span>Generate Variations</span>
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-5 h-5">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
                      </svg>
                    </>
                  )}
                </button>
              </div>
            </div>
          </div>
        </section>

        {/* Step 3: Results */}
        {results.length > 0 && (
          <section className="animate-fade-in-up">
            <div className="flex items-center mb-6">
              <span className="w-8 h-8 bg-slate-800 text-white rounded-full flex items-center justify-center text-sm mr-3">3</span>
              <h2 className="text-2xl font-bold text-slate-800">Generated Results</h2>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-6">
              {results.map((result) => (
                <ResultCard key={result.id} result={result} />
              ))}
            </div>
          </section>
        )}
      </main>
      
      {/* Footer sticky CTA mobile safe area spacer */}
      <div className="h-12"></div>
    </div>
  );
};

export default App;