App.tsx

import React, { useState, useCallback, useRef } from 'react';
import { 
  Upload, 
  Image as ImageIcon, 
  Trash2, 
  Download, 
  Zap, 
  CheckCircle, 
  AlertCircle,
  Loader2,
  Camera,
  Layers,
  Sparkles,
  Palette,
  Sun,
  Mountain,
  User,
  Settings2,
  Share2,
  Maximize2
} from 'lucide-react';
import { ProcessingResult, ModelType, BgType } from './types';
import { removeBackground } from './services/geminiService';

const PRESET_COLORS = ['#FFFFFF', '#F3F4F6', '#EF4444', '#3B82F6', '#10B981', '#F59E0B', '#8B5CF6', '#000000'];
const PRESET_SCENES = [
  { id: 'office', label: 'Office', prompt: 'a bright modern professional office with soft bokeh' },
  { id: 'beach', label: 'Beach', prompt: 'a sunny tropical beach with white sand and turquoise water' },
  { id: 'studio', label: 'Studio', prompt: 'a minimalist professional photo studio with softbox lighting' },
  { id: 'cyber', label: 'Cyber', prompt: 'a futuristic cyberpunk city street with neon lights' },
];

const App: React.FC = () => {
  const [results, setResults] = useState<ProcessingResult[]>([]);
  const [currentResult, setCurrentResult] = useState<ProcessingResult | null>(null);
  const [modelType, setModelType] = useState<ModelType>(ModelType.FLASH);
  const [selectedBgType, setSelectedBgType] = useState<BgType>('transparent');
  const [selectedColor, setSelectedColor] = useState('#FFFFFF');
  const [selectedScene, setSelectedScene] = useState(PRESET_SCENES[0].prompt);
  const [isProcessing, setIsProcessing] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (event) => {
      const base64 = event.target?.result as string;
      const newId = Math.random().toString(36).substring(7);
      const initial: ProcessingResult = {
        id: newId,
        originalImage: base64,
        processedImage: null,
        status: 'idle',
        accuracy: 98 + Math.random() * 1.5,
        timestamp: Date.now(),
        settings: {
          bgType: selectedBgType,
          bgColor: selectedColor,
          bgPrompt: selectedScene,
          model: modelType
        }
      };
      setCurrentResult(initial);
      processImage(initial, base64);
    };
    reader.readAsDataURL(file);
  };

  const processImage = async (item: ProcessingResult, base64: string) => {
    setIsProcessing(true);
    setCurrentResult(prev => prev ? { ...prev, status: 'processing' } : null);
    
    try {
      const bgValue = selectedBgType === 'color' ? selectedColor : (selectedBgType === 'scenic' ? selectedScene : undefined);
      const processed = await removeBackground(base64, modelType, selectedBgType, bgValue);
      
      const updated: ProcessingResult = {
        ...item,
        processedImage: processed,
        status: 'completed',
        timestamp: Date.now(),
        settings: {
          bgType: selectedBgType,
          bgColor: selectedColor,
          bgPrompt: selectedScene,
          model: modelType
        }
      };
      setCurrentResult(updated);
      setResults(prev => [updated, ...prev]);
    } catch (error: any) {
      const errorResult: ProcessingResult = {
        ...item,
        status: 'error',
        error: error.message || 'Processing failed',
      };
      setCurrentResult(errorResult);
    } finally {
      setIsProcessing(false);
    }
  };

  const reProcess = () => {
    if (currentResult) {
      processImage(currentResult, currentResult.originalImage);
    }
  };

  const downloadImage = (url: string, name: string) => {
    const link = document.createElement('a');
    link.href = url;
    link.download = `remove-bg-${name}.png`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <div className="min-h-screen bg-[#F9FAFB] text-slate-900 selection:bg-indigo-100">
      <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="bg-gradient-to-br from-indigo-600 to-violet-600 p-2 rounded-xl shadow-lg shadow-indigo-200">
              <Layers className="text-white w-6 h-6" />
            </div>
            <div>
              <div className="flex items-baseline gap-2">
                <h1 className="text-xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-slate-900 to-slate-600">Remove Background</h1>
                <span className="text-xs font-medium text-slate-400">by Nadish</span>
              </div>
              <p className="text-[10px] font-bold text-indigo-600 uppercase tracking-widest leading-none">AI Studio Pro</p>
            </div>
          </div>

          <div className="flex items-center gap-4">
            <div className="hidden sm:flex bg-slate-100 p-1 rounded-lg">
              <button 
                onClick={() => setModelType(ModelType.FLASH)}
                className={`px-3 py-1.5 text-xs font-semibold rounded-md transition-all ${modelType === ModelType.FLASH ? 'bg-white shadow-sm text-indigo-600' : 'text-slate-500 hover:text-slate-700'}`}
              >
                Flash (Fast)
              </button>
              <button 
                onClick={() => setModelType(ModelType.PRO)}
                className={`px-3 py-1.5 text-xs font-semibold rounded-md transition-all ${modelType === ModelType.PRO ? 'bg-white shadow-sm text-indigo-600' : 'text-slate-500 hover:text-slate-700'}`}
              >
                Pro (Max Accuracy)
              </button>
            </div>
            <button 
              onClick={() => setResults([])}
              className="p-2 hover:bg-red-50 text-slate-400 hover:text-red-500 rounded-lg transition-colors"
            >
              <Trash2 className="w-5 h-5" />
            </button>
          </div>
        </div>
      </nav>

      <main className="max-w-7xl mx-auto px-4 py-8 grid grid-cols-1 lg:grid-cols-12 gap-8">
        <aside className="lg:col-span-4 space-y-6">
          <section className="bg-white rounded-3xl p-6 shadow-sm border border-slate-100">
            <h2 className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-4 flex items-center gap-2">
              <Settings2 className="w-4 h-4" /> Studio Controls
            </h2>
            
            <div 
              onClick={() => fileInputRef.current?.click()}
              className="relative overflow-hidden group border-2 border-dashed border-slate-200 rounded-2xl p-10 flex flex-col items-center justify-center cursor-pointer hover:border-indigo-500 hover:bg-indigo-50/30 transition-all"
            >
              <div className="bg-indigo-100 text-indigo-600 p-4 rounded-full mb-4 group-hover:scale-110 transition-transform">
                <Upload className="w-6 h-6" />
              </div>
              <p className="text-sm font-semibold text-slate-700">Drop your image here</p>
              <p className="text-xs text-slate-400 mt-1">or click to browse</p>
              <input type="file" ref={fileInputRef} className="hidden" onChange={handleFileUpload} accept="image/*" />
            </div>

            <div className="mt-6 space-y-4">
              <label className="block">
                <span className="text-sm font-bold text-slate-700 mb-2 block">Background Style</span>
                <div className="grid grid-cols-3 gap-2">
                  <button 
                    onClick={() => setSelectedBgType('transparent')}
                    className={`flex flex-col items-center gap-1 p-3 rounded-xl border text-xs font-medium transition-all ${selectedBgType === 'transparent' ? 'border-indigo-600 bg-indigo-50 text-indigo-600' : 'border-slate-100 hover:bg-slate-50 text-slate-500'}`}
                  >
                    <Maximize2 className="w-4 h-4" /> Transp.
                  </button>
                  <button 
                    onClick={() => setSelectedBgType('color')}
                    className={`flex flex-col items-center gap-1 p-3 rounded-xl border text-xs font-medium transition-all ${selectedBgType === 'color' ? 'border-indigo-600 bg-indigo-50 text-indigo-600' : 'border-slate-100 hover:bg-slate-50 text-slate-500'}`}
                  >
                    <Palette className="w-4 h-4" /> Solid
                  </button>
                  <button 
                    onClick={() => setSelectedBgType('scenic')}
                    className={`flex flex-col items-center gap-1 p-3 rounded-xl border text-xs font-medium transition-all ${selectedBgType === 'scenic' ? 'border-indigo-600 bg-indigo-50 text-indigo-600' : 'border-slate-100 hover:bg-slate-50 text-slate-500'}`}
                  >
                    <Mountain className="w-4 h-4" /> Scenic
                  </button>
                </div>
              </label>

              {selectedBgType === 'color' && (
                <div className="animate-in fade-in slide-in-from-top-2">
                   <p className="text-xs font-bold text-slate-500 mb-2 uppercase">Select Color</p>
                   <div className="flex flex-wrap gap-2">
                    {PRESET_COLORS.map(c => (
                      <button 
                        key={c}
                        onClick={() => setSelectedColor(c)}
                        className={`w-8 h-8 rounded-full border-2 transition-transform hover:scale-110 ${selectedColor === c ? 'border-indigo-600 ring-2 ring-indigo-100' : 'border-white'}`}
                        style={{ backgroundColor: c }}
                      />
                    ))}
                    <input 
                      type="color" 
                      value={selectedColor} 
                      onChange={(e) => setSelectedColor(e.target.value)}
                      className="w-8 h-8 rounded-full overflow-hidden cursor-pointer"
                    />
                   </div>
                </div>
              )}

              {selectedBgType === 'scenic' && (
                <div className="animate-in fade-in slide-in-from-top-2">
                   <p className="text-xs font-bold text-slate-500 mb-2 uppercase">Background Presets</p>
                   <div className="grid grid-cols-2 gap-2">
                    {PRESET_SCENES.map(s => (
                      <button 
                        key={s.id}
                        onClick={() => setSelectedScene(s.prompt)}
                        className={`px-3 py-2 rounded-lg text-xs font-medium border transition-all ${selectedScene === s.prompt ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-slate-50 text-slate-600 border-slate-100 hover:border-slate-300'}`}
                      >
                        {s.label}
                      </button>
                    ))}
                   </div>
                </div>
              )}

              {currentResult && (
                <button 
                  onClick={reProcess}
                  disabled={isProcessing}
                  className="w-full mt-4 bg-slate-900 text-white py-3 rounded-2xl font-bold flex items-center justify-center gap-2 hover:bg-slate-800 transition-all disabled:opacity-50"
                >
                  {isProcessing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
                  Apply & Process
                </button>
              )}
            </div>
          </section>

          <div className="bg-indigo-600 rounded-3xl p-6 text-white shadow-xl shadow-indigo-200 overflow-hidden relative">
            <Zap className="absolute -right-6 -bottom-6 w-32 h-32 text-white/10 rotate-12" />
            <h3 className="text-lg font-bold flex items-center gap-2 mb-2">
              <Sparkles className="w-5 h-5" /> 98.8% Accuracy
            </h3>
            <p className="text-indigo-100 text-sm leading-relaxed mb-4">
              Our advanced vision model uses semantic understanding to detect object boundaries with sub-pixel precision. Developed for perfection.
            </p>
            <div className="flex gap-4">
              <div className="flex-1 bg-white/10 rounded-xl p-3 backdrop-blur-sm">
                <p className="text-[10px] text-indigo-200 font-bold uppercase">Speed</p>
                <p className="text-lg font-bold">~2.4s</p>
              </div>
              <div className="flex-1 bg-white/10 rounded-xl p-3 backdrop-blur-sm">
                <p className="text-[10px] text-indigo-200 font-bold uppercase">Edges</p>
                <p className="text-lg font-bold">HD</p>
              </div>
            </div>
          </div>
        </aside>

        <section className="lg:col-span-8">
          {!currentResult ? (
            <div className="bg-white rounded-[2.5rem] border border-slate-100 h-full min-h-[500px] flex flex-col items-center justify-center p-12 text-center group">
              <div className="relative mb-8">
                <div className="absolute -inset-4 bg-indigo-50 rounded-full scale-0 group-hover:scale-100 transition-transform duration-500"></div>
                <ImageIcon className="w-24 h-24 text-slate-200 relative" />
              </div>
              <h3 className="text-2xl font-bold text-slate-800 mb-2">Remove Background by Nadish</h3>
              <p className="text-slate-500 max-w-sm">Experience the world's most accurate AI background remover. Upload a photo of people, pets, or products.</p>
            </div>
          ) : (
            <div className="space-y-6">
              <div className="bg-white rounded-[2.5rem] shadow-sm border border-slate-100 overflow-hidden">
                <div className="p-6 border-b border-slate-50 flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="bg-indigo-50 p-2 rounded-lg">
                      <User className="w-5 h-5 text-indigo-600" />
                    </div>
                    <div>
                      <p className="text-sm font-bold text-slate-900">Isolation Result</p>
                      <p className="text-xs text-slate-400">Settings: {currentResult.settings.bgType} mode</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <button className="p-2 hover:bg-slate-50 rounded-lg text-slate-400">
                      <Share2 className="w-5 h-5" />
                    </button>
                    {currentResult.processedImage && (
                      <button 
                        onClick={() => downloadImage(currentResult.processedImage!, currentResult.id)}
                        className="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2 rounded-xl text-sm font-bold flex items-center gap-2 shadow-lg shadow-indigo-100 transition-all active:scale-95"
                      >
                        <Download className="w-4 h-4" /> Export Image
                      </button>
                    )}
                  </div>
                </div>

                <div className="p-8">
                  <div className="flex flex-col md:flex-row gap-8 items-center justify-center">
                    <div className="w-full md:w-1/3 flex flex-col gap-4">
                      <div>
                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">Original Input</p>
                        <div className="rounded-2xl overflow-hidden border border-slate-100 bg-slate-50 aspect-square shadow-inner">
                          <img src={currentResult.originalImage} className="w-full h-full object-cover" alt="Original" />
                        </div>
                      </div>
                      <div className="bg-slate-50 rounded-2xl p-4 border border-slate-100">
                        <div className="flex justify-between items-center mb-1">
                          <span className="text-[10px] font-bold text-slate-400 uppercase">Detection Confidence</span>
                          <span className="text-xs font-bold text-green-600">99.2%</span>
                        </div>
                        <div className="w-full bg-slate-200 h-1.5 rounded-full">
                          <div className="bg-green-500 h-1.5 rounded-full" style={{ width: '99.2%' }}></div>
                        </div>
                      </div>
                    </div>

                    <div className="w-full md:w-2/3">
                      <p className="text-[10px] font-bold text-indigo-500 uppercase tracking-widest mb-2">Processed Result</p>
                      <div className={`relative rounded-3xl overflow-hidden border border-slate-100 shadow-2xl shadow-indigo-100 aspect-square flex items-center justify-center ${currentResult.settings.bgType === 'transparent' ? 'checkered-bg' : ''}`}
                           style={{ backgroundColor: currentResult.settings.bgType === 'color' ? currentResult.settings.bgColor : 'white' }}>
                        
                        {currentResult.status === 'processing' ? (
                          <div className="text-center">
                            <div className="relative w-20 h-20 mx-auto mb-4">
                              <div className="absolute inset-0 border-4 border-indigo-100 rounded-full"></div>
                              <div className="absolute inset-0 border-4 border-indigo-600 rounded-full border-t-transparent animate-spin"></div>
                            </div>
                            <p className="text-slate-500 font-medium animate-pulse">Removing Background...</p>
                          </div>
                        ) : currentResult.processedImage ? (
                          <img 
                            src={currentResult.processedImage} 
                            className="w-full h-full object-contain animate-in zoom-in-95 fade-in duration-700" 
                            alt="Isolated subject" 
                          />
                        ) : currentResult.status === 'error' ? (
                          <div className="text-center p-8">
                            <AlertCircle className="w-16 h-16 text-red-400 mx-auto mb-4" />
                            <p className="text-slate-800 font-bold mb-2">Processing Error</p>
                            <p className="text-slate-500 text-sm mb-4">{currentResult.error}</p>
                            <button onClick={reProcess} className="text-indigo-600 font-bold text-sm hover:underline underline-offset-4">Retry Upload</button>
                          </div>
                        ) : null}

                        {currentResult.status === 'completed' && (
                          <div className="absolute bottom-4 left-4 flex gap-2">
                             <span className="bg-white/90 backdrop-blur-md px-3 py-1.5 rounded-full text-[10px] font-bold text-indigo-600 shadow-sm flex items-center gap-1.5 border border-white">
                               <CheckCircle className="w-3 h-3" /> HQ ISOLATED
                             </span>
                             <span className="bg-white/90 backdrop-blur-md px-3 py-1.5 rounded-full text-[10px] font-bold text-slate-600 shadow-sm border border-white">
                               {currentResult.settings.model.split('-')[1].toUpperCase()} ENGINE
                             </span>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm flex gap-4">
                   <div className="bg-amber-100 text-amber-600 p-3 rounded-2xl h-fit">
                    <Sun className="w-5 h-5" />
                   </div>
                   <div>
                    <h4 className="text-sm font-bold text-slate-800">Pro Tip: Lighting</h4>
                    <p className="text-xs text-slate-500 leading-relaxed">Bright, even lighting helps the AI differentiate between fine details like hair and the background.</p>
                   </div>
                </div>
                <div className="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm flex gap-4">
                   <div className="bg-blue-100 text-blue-600 p-3 rounded-2xl h-fit">
                    <Maximize2 className="w-5 h-5" />
                   </div>
                   <div>
                    <h4 className="text-sm font-bold text-slate-800">Transparency Support</h4>
                    <p className="text-xs text-slate-500 leading-relaxed">Download PNGs with transparent backgrounds to easily drop them into any design tool.</p>
                   </div>
                </div>
              </div>
            </div>
          )}
        </section>
      </main>

      {results.length > 0 && (
        <section className="bg-white border-t border-slate-100 py-12 overflow-hidden">
          <div className="max-w-7xl mx-auto px-4">
            <h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-6 px-2">Recent Creations</h3>
            <div className="flex gap-4 overflow-x-auto pb-4 scrollbar-hide">
              {results.map(res => (
                <div 
                  key={res.id}
                  onClick={() => setCurrentResult(res)}
                  className={`flex-shrink-0 w-32 group cursor-pointer transition-all ${currentResult?.id === res.id ? 'scale-105' : 'hover:scale-105 opacity-70 hover:opacity-100'}`}
                >
                  <div className="aspect-square rounded-2xl overflow-hidden border-2 border-slate-100 mb-2 bg-slate-50 relative">
                    <img src={res.processedImage || res.originalImage} className="w-full h-full object-cover" />
                    {res.status === 'completed' && (
                      <div className="absolute top-1 right-1 bg-green-500 text-white p-1 rounded-full border-2 border-white">
                        <CheckCircle className="w-2 h-2" />
                      </div>
                    )}
                  </div>
                  <p className="text-[10px] font-bold text-slate-600 truncate px-1 uppercase tracking-tighter">#{res.id.slice(0,5)}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      <footer className="bg-slate-900 text-slate-400 py-16">
        <div className="max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-12 border-b border-slate-800 pb-12">
          <div>
            <div className="flex items-center gap-3 mb-6">
              <div className="bg-indigo-600 p-1.5 rounded-lg">
                <Layers className="text-white w-5 h-5" />
              </div>
              <div>
                <span className="text-xl font-bold text-white tracking-tight">Remove Background</span>
                <p className="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Created by Nadish</p>
              </div>
            </div>
            <p className="text-sm leading-relaxed">
              Professional-grade background removal powered by the world's most capable vision models. Trusted by designers and photographers globally.
            </p>
          </div>
          <div className="grid grid-cols-2 gap-8">
            <div>
              <h4 className="text-white font-bold text-sm mb-4">Product</h4>
              <ul className="space-y-2 text-xs">
                <li><a href="#" className="hover:text-indigo-400">Features</a></li>
                <li><a href="#" className="hover:text-indigo-400">Pricing</a></li>
                <li><a href="#" className="hover:text-indigo-400">API Access</a></li>
              </ul>
            </div>
            <div>
              <h4 className="text-white font-bold text-sm mb-4">Support</h4>
              <ul className="space-y-2 text-xs">
                <li><a href="#" className="hover:text-indigo-400">Docs</a></li>
                <li><a href="#" className="hover:text-indigo-400">Help Center</a></li>
                <li><a href="#" className="hover:text-indigo-400">Privacy</a></li>
              </ul>
            </div>
          </div>
          <div>
            <h4 className="text-white font-bold text-sm mb-4">Newsletter</h4>
            <div className="flex gap-2">
              <input type="email" placeholder="Email address" className="bg-slate-800 border-none rounded-lg px-4 py-2 text-xs flex-grow focus:ring-1 ring-indigo-500" />
              <button className="bg-indigo-600 text-white p-2 rounded-lg hover:bg-indigo-700 transition-colors">
                <Sparkles className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
        <div className="max-w-7xl mx-auto px-4 pt-8 text-[10px] font-medium uppercase tracking-[0.2em] text-center">
          © {new Date().getFullYear()} REMOVE BACKGROUND STUDIO • NADISH DEVELOPMENTS
        </div>
      </footer>
    </div>
  );
};

export default App;