import React, { useState, useRef, useEffect, useCallback } from 'react';
import { 
  UploadCloud, Link as LinkIcon, Sparkles, RefreshCcw, 
  Download, Image as ImageIcon, CheckCircle, AlertCircle, 
  ChevronRight, ChevronLeft, MoveHorizontal, Trash2
} from 'lucide-react';

// --- Configuration ---
const apiKey = ""; // API key is injected by the execution environment
const MODEL_NAME = "gemini-2.5-flash-image-preview";

// --- Utility Functions ---

// Client-side image compression using Canvas
const compressImage = (fileOrUrl, isUrl = false) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = "Anonymous"; // Crucial for fetching URLs

    img.onload = () => {
      const canvas = document.createElement('canvas');
      const MAX_WIDTH = 1024;
      const MAX_HEIGHT = 1024;
      let width = img.width;
      let height = img.height;

      if (width > height) {
        if (width > MAX_WIDTH) {
          height *= MAX_WIDTH / width;
          width = MAX_WIDTH;
        }
      } else {
        if (height > MAX_HEIGHT) {
          width *= MAX_HEIGHT / height;
          height = MAX_HEIGHT;
        }
      }

      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, width, height);
      resolve(canvas.toDataURL('image/jpeg', 0.85)); // 85% quality JPEG
    };

    img.onerror = (err) => reject(new Error("Failed to load image for compression."));

    if (isUrl) {
      img.src = fileOrUrl;
    } else {
      const reader = new FileReader();
      reader.onload = (e) => { img.src = e.target.result; };
      reader.onerror = (err) => reject(err);
      reader.readAsDataURL(fileOrUrl);
    }
  });
};

const getBase64DataAndMime = (dataUrl) => {
  const [prefix, data] = dataUrl.split(',');
  const mimeType = prefix.split(';')[0].split(':')[1];
  return { mimeType, data };
};

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

// --- Components ---

// Drag and Drop Uploader Component
const ImageUploader = ({ label, hint, image, onImageChange, onClear }) => {
  const [isDragging, setIsDragging] = useState(false);
  const fileInputRef = useRef(null);

  const handleDrag = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (e.type === "dragenter" || e.type === "dragover") setIsDragging(true);
    else if (e.type === "dragleave") setIsDragging(false);
  };

  const handleDrop = async (e) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      handleFile(e.dataTransfer.files[0]);
    }
  };

  const handleFile = async (file) => {
    if (!file.type.startsWith('image/')) return;
    try {
      const compressedDataUrl = await compressImage(file);
      onImageChange(compressedDataUrl);
    } catch (err) {
      console.error("Compression failed", err);
    }
  };

  return (
    <div className="w-full flex flex-col gap-2.5">
      <div className="flex justify-between items-end px-1">
        <label className="text-sm font-semibold text-slate-700 dark:text-slate-300 tracking-tight">{label}</label>
        {hint && <span className="text-[11px] font-semibold tracking-wide text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-500/10 px-2.5 py-1 rounded-full transition-all border border-indigo-100 dark:border-indigo-500/20">{hint}</span>}
      </div>
      {image ? (
        <div className="relative w-full h-52 rounded-2xl overflow-hidden border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 shadow-inner group">
          <img src={image} alt={label} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
          <div className="absolute inset-0 bg-gradient-to-b from-black/0 via-black/0 to-black/30 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
          <div className="absolute top-3 right-3 bg-white/90 dark:bg-slate-800/90 backdrop-blur-md text-emerald-500 dark:text-emerald-400 rounded-full p-1.5 shadow-[0_4px_12px_rgba(0,0,0,0.1)] scale-0 group-hover:scale-100 transition-transform duration-300 origin-center border border-white/20 dark:border-slate-700">
            <CheckCircle size={18} strokeWidth={2.5} />
          </div>
          <button 
            onClick={onClear}
            className="absolute bottom-3 right-3 bg-rose-500/90 hover:bg-rose-500 text-white p-2.5 rounded-xl backdrop-blur-md transition-all duration-300 opacity-0 group-hover:opacity-100 shadow-[0_4px_16px_rgba(225,29,72,0.4)] hover:scale-105 border border-white/20"
          >
            <Trash2 size={18} />
          </button>
        </div>
      ) : (
        <div 
          className={`group w-full h-52 border-[1.5px] border-dashed rounded-2xl flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-hidden relative
            ${isDragging ? 'border-indigo-500 bg-indigo-50/50 dark:bg-indigo-500/10 scale-[0.98] shadow-inner' : 'border-slate-300 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/30 hover:bg-slate-100/50 dark:hover:bg-slate-800/60 hover:border-indigo-400/50 dark:hover:border-indigo-500/50'}`}
          onDragEnter={handleDrag}
          onDragLeave={handleDrag}
          onDragOver={handleDrag}
          onDrop={handleDrop}
          onClick={() => fileInputRef.current?.click()}
        >
          <div className="absolute inset-0 bg-gradient-to-b from-transparent to-slate-900/5 dark:to-white/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
          <div className={`p-4 rounded-full mb-3 transition-all duration-500 relative z-10 ${isDragging ? 'bg-indigo-100 dark:bg-indigo-900/50 scale-110' : 'bg-white dark:bg-slate-800 shadow-sm group-hover:shadow-md group-hover:-translate-y-1'}`}>
            <UploadCloud className={`transition-colors duration-300 ${isDragging ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-400 group-hover:text-indigo-500 dark:group-hover:text-indigo-400'}`} size={28} strokeWidth={2} />
          </div>
          <p className="text-sm font-semibold text-slate-600 dark:text-slate-300 relative z-10 tracking-tight">
            {isDragging ? "Drop to upload" : "Click or drag your photo"}
          </p>
          <p className="text-[13px] text-slate-400 dark:text-slate-500 mt-1.5 relative z-10 font-medium">High-res JPEG or PNG</p>
          <input 
            type="file" 
            ref={fileInputRef} 
            className="hidden" 
            accept="image/*"
            onChange={(e) => e.target.files?.[0] && handleFile(e.target.files[0])}
          />
        </div>
      )}
    </div>
  );
};

// Interactive Before/After Slider Component
const CompareSlider = ({ original, generated }) => {
  const [sliderPosition, setSliderPosition] = useState(50);
  const [isDragging, setIsDragging] = useState(false);
  const containerRef = useRef(null);

  const handleMove = useCallback((clientX) => {
    if (!containerRef.current || !isDragging) return;
    const rect = containerRef.current.getBoundingClientRect();
    const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
    const percentage = (x / rect.width) * 100;
    setSliderPosition(percentage);
  }, [isDragging]);

  const onMouseMove = (e) => handleMove(e.clientX);
  const onTouchMove = (e) => handleMove(e.touches[0].clientX);

  useEffect(() => {
    if (isDragging) {
      window.addEventListener('mousemove', onMouseMove);
      window.addEventListener('touchmove', onTouchMove);
      window.addEventListener('mouseup', () => setIsDragging(false));
      window.addEventListener('touchend', () => setIsDragging(false));
    }
    return () => {
      window.removeEventListener('mousemove', onMouseMove);
      window.removeEventListener('touchmove', onTouchMove);
      window.removeEventListener('mouseup', () => setIsDragging(false));
      window.removeEventListener('touchend', () => setIsDragging(false));
    };
  }, [isDragging, handleMove]);

  return (
    <div 
      ref={containerRef}
      className="relative w-full h-full min-h-[400px] sm:min-h-[500px] bg-gray-200 dark:bg-gray-800 rounded-2xl overflow-hidden select-none cursor-crosshair"
      onMouseDown={(e) => { setIsDragging(true); handleMove(e.clientX); }}
      onTouchStart={(e) => { setIsDragging(true); handleMove(e.touches[0].clientX); }}
    >
      {/* Base Image (Generated) */}
      <img src={generated} alt="Generated result" className="absolute inset-0 w-full h-full object-cover" draggable={false} />
      
      {/* Overlay Image (Original) with Clip Path */}
      <img 
        src={original} 
        alt="Original model" 
        className="absolute inset-0 w-full h-full object-cover" 
        style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)` }}
        draggable={false}
      />

      {/* Slider Handle */}
      <div 
        className="absolute top-0 bottom-0 w-[2px] bg-white/80 shadow-[0_0_20px_rgba(255,255,255,0.8)] cursor-ew-resize z-10 transition-colors hover:bg-white"
        style={{ left: `${sliderPosition}%`, transform: 'translateX(-50%)' }}
      >
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-12 bg-white/90 dark:bg-slate-800/90 text-indigo-600 dark:text-indigo-400 rounded-full flex items-center justify-center shadow-[0_8px_32px_rgba(0,0,0,0.3)] border border-white/50 dark:border-slate-600 hover:scale-110 active:scale-95 transition-transform duration-200 cursor-ew-resize backdrop-blur-md">
          <MoveHorizontal size={18} strokeWidth={2.5} />
        </div>
      </div>

      <div className="absolute top-4 left-4 bg-black/40 backdrop-blur-xl text-white px-4 py-2 rounded-xl text-xs font-bold tracking-widest uppercase z-20 shadow-[0_4px_12px_rgba(0,0,0,0.2)] border border-white/10">Original</div>
      <div className="absolute top-4 right-4 bg-indigo-600/80 backdrop-blur-xl text-white px-4 py-2 rounded-xl text-xs font-bold tracking-widest uppercase z-20 shadow-[0_4px_12px_rgba(79,70,229,0.3)] border border-white/20">Generated</div>
    </div>
  );
};

// Main Application Component
export default function App() {
  // --- State ---
  const [userImage, setUserImage] = useState(null);
  const [clothingImage, setClothingImage] = useState(null);
  const [clothingUrl, setClothingUrl] = useState("");
  const [clothingInputMode, setClothingInputMode] = useState("upload"); // 'upload' or 'url'
  const [instructions, setInstructions] = useState("");
  
  const [isGenerating, setIsGenerating] = useState(false);
  const [loadingStep, setLoadingStep] = useState("");
  const [errorMsg, setErrorMsg] = useState("");
  
  const [generatedImage, setGeneratedImage] = useState(null);
  const [viewMode, setViewMode] = useState("result"); // 'result' or 'compare'
  
  const [sessionHistory, setSessionHistory] = useState([]);

  // --- Handlers ---
  const handleUrlFetch = async () => {
    if (!clothingUrl) return;
    setLoadingStep("Fetching image from URL...");
    setIsGenerating(true);
    setErrorMsg("");
    try {
      const dataUrl = await compressImage(clothingUrl, true);
      setClothingImage(dataUrl);
    } catch (err) {
      setErrorMsg("Failed to fetch image. The site might block direct access (CORS). Try downloading and uploading it manually.");
    } finally {
      setIsGenerating(false);
      setLoadingStep("");
    }
  };

  const handleReset = () => {
    if (window.confirm("Clear all inputs and start over?")) {
      setUserImage(null);
      setClothingImage(null);
      setClothingUrl("");
      setInstructions("");
      setGeneratedImage(null);
      setErrorMsg("");
    }
  };

  const downloadImage = () => {
    if (!generatedImage) return;
    const a = document.createElement("a");
    a.href = generatedImage;
    a.download = `tishka-tryon-${Date.now()}.png`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

  // --- Core API Logic ---
  const generateTryOn = async () => {
    if (!userImage || !clothingImage) {
      setErrorMsg("Please provide both a user photo and a clothing item.");
      return;
    }

    setIsGenerating(true);
    setErrorMsg("");
    setGeneratedImage(null);
    setViewMode("result");

    try {
      setLoadingStep("Preparing image payload...");
      const userImgData = getBase64DataAndMime(userImage);
      const clothingImgData = getBase64DataAndMime(clothingImage);

      const systemPrompt = `You are a world-class AI fashion stylist and photorealistic image editor.
Task: Realistically dress the person in the provided user photo (Image 1) with the provided clothing item (Image 2).
Requirements:
1. Seamlessly integrate the garment onto the user's body.
2. Respect the original body pose, lighting, skin tone, and background.
3. Adapt the clothing to natural folds and shadows based on the pose.
4. CRUCIAL: Ensure the generated image contains NO watermarks, logos, text overlays, or any other identifying marks.
User specific instructions: ${instructions || "Make it look as natural and photorealistic as possible."}`;

      const payload = {
        contents: [
          {
            parts: [
              { text: systemPrompt },
              { inlineData: { mimeType: userImgData.mimeType, data: userImgData.data } },
              { inlineData: { mimeType: clothingImgData.mimeType, data: clothingImgData.data } }
            ]
          }
        ],
        generationConfig: {
          responseModalities: ["IMAGE"]
        }
      };

      setLoadingStep("AI is rendering your virtual try-on (this may take up to 20s)...");
      
      const MAX_RETRIES = 3;
      const BASE_DELAY = 1000;
      let resultData = null;

      for (let i = 0; i <= MAX_RETRIES; i++) {
        try {
          const response = await fetch(
            `https://generativelanguage.googleapis.com/v1beta/models/${MODEL_NAME}:generateContent?key=${apiKey}`,
            {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(payload)
            }
          );

          if (!response.ok) {
            const errData = await response.json();
            throw new Error(errData.error?.message || `API Error: ${response.status}`);
          }

          const result = await response.json();
          const candidateParts = result.candidates?.[0]?.content?.parts;
          const imagePart = candidateParts?.find(p => p.inlineData);

          if (imagePart && imagePart.inlineData) {
            resultData = `data:${imagePart.inlineData.mimeType};base64,${imagePart.inlineData.data}`;
            break; // Success, exit retry loop
          } else {
            throw new Error("No image data returned from API.");
          }

        } catch (err) {
          if (i === MAX_RETRIES) throw err;
          setLoadingStep(`Network issue, retrying attempt ${i + 1}/${MAX_RETRIES}...`);
          await delay(BASE_DELAY * Math.pow(2, i));
        }
      }

      setLoadingStep("Finalizing masterpiece...");
      await delay(500); // UI polish

      setGeneratedImage(resultData);
      
      // Save to history
      setSessionHistory(prev => [{
        id: Date.now(),
        userImg: userImage,
        clothingImg: clothingImage,
        resultImg: resultData
      }, ...prev]);

    } catch (err) {
      console.error(err);
      setErrorMsg(`Generation failed: ${err.message}. Please try again.`);
    } finally {
      setIsGenerating(false);
      setLoadingStep("");
    }
  };


  return (
    <div className="relative min-h-screen bg-slate-50 dark:bg-[#09090b] text-slate-900 dark:text-slate-100 font-sans selection:bg-indigo-200 dark:selection:bg-indigo-900 overflow-x-hidden">
      
      {/* Ambient Background Glows */}
      <div className="fixed top-[-20%] left-[-10%] w-[50%] h-[50%] rounded-full bg-indigo-400/10 dark:bg-indigo-600/10 blur-[120px] pointer-events-none" />
      <div className="fixed bottom-[-20%] right-[-10%] w-[50%] h-[50%] rounded-full bg-blue-400/10 dark:bg-blue-600/10 blur-[120px] pointer-events-none" />
      <div className="fixed top-[40%] right-[20%] w-[30%] h-[30%] rounded-full bg-purple-400/5 dark:bg-purple-600/10 blur-[100px] pointer-events-none" />

      {/* Header - Floating Glassmorphism */}
      <header className="sticky top-4 z-40 mx-4 sm:mx-8 md:mx-auto max-w-7xl bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl border border-white/50 dark:border-slate-800/50 rounded-2xl px-6 py-4 flex items-center justify-between shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.2)] transition-all">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 bg-gradient-to-br from-indigo-500 via-purple-500 to-blue-500 rounded-xl flex items-center justify-center text-white shadow-lg shadow-indigo-500/20 border border-white/20">
            <Sparkles size={20} strokeWidth={2.5} />
          </div>
          <h1 className="text-xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-slate-900 to-slate-600 dark:from-white dark:to-slate-400">
            Tishka <span className="text-slate-400 dark:text-slate-500 font-semibold text-sm hidden sm:inline-block ml-1">Studio</span>
          </h1>
        </div>
        <button onClick={handleReset} className="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white bg-slate-100/50 dark:bg-slate-800/50 hover:bg-slate-200/50 dark:hover:bg-slate-700/50 rounded-lg transition-all border border-transparent hover:border-slate-200 dark:hover:border-slate-600">
          <RefreshCcw size={16} strokeWidth={2.5} />
          <span className="hidden sm:inline">Reset Workspace</span>
        </button>
      </header>

      <main className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 py-10 flex flex-col lg:flex-row gap-8">
        
        {/* Left Column: Inputs */}
        <div className="w-full lg:w-5/12 flex flex-col gap-6">
          
          {/* User Photo Panel */}
          <div className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl rounded-3xl p-7 shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.1)] border border-white/60 dark:border-slate-800/60 transition-all hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)]">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-8 h-8 flex items-center justify-center bg-indigo-100 dark:bg-indigo-500/20 text-indigo-600 dark:text-indigo-400 rounded-lg shadow-sm border border-indigo-200/50 dark:border-indigo-500/20">
                <span className="font-bold text-sm">1</span>
              </div>
              <h2 className="text-xl font-bold tracking-tight text-slate-800 dark:text-slate-200">Your Photo</h2>
            </div>
            <ImageUploader 
              label="Subject Image"
              hint="Front-facing is best"
              image={userImage} 
              onImageChange={setUserImage} 
              onClear={() => setUserImage(null)}
            />
          </div>

          {/* Clothing Panel */}
          <div className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl rounded-3xl p-7 shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.1)] border border-white/60 dark:border-slate-800/60 transition-all hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)]">
            <div className="flex items-center justify-between mb-6">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 flex items-center justify-center bg-purple-100 dark:bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-lg shadow-sm border border-purple-200/50 dark:border-purple-500/20">
                  <span className="font-bold text-sm">2</span>
                </div>
                <h2 className="text-xl font-bold tracking-tight text-slate-800 dark:text-slate-200">Garment</h2>
              </div>
              
              {/* Toggle Input Mode */}
              <div className="flex bg-slate-100/80 dark:bg-slate-800/80 p-1 rounded-xl shadow-inner border border-slate-200/50 dark:border-slate-700/50">
                <button 
                  onClick={() => setClothingInputMode("upload")}
                  className={`px-4 py-1.5 text-xs font-bold tracking-wide rounded-lg transition-all ${clothingInputMode === "upload" ? "bg-white dark:bg-slate-700 shadow-[0_2px_8px_rgba(0,0,0,0.08)] text-slate-900 dark:text-white" : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"}`}
                >
                  Upload
                </button>
                <button 
                  onClick={() => setClothingInputMode("url")}
                  className={`px-4 py-1.5 text-xs font-bold tracking-wide rounded-lg transition-all ${clothingInputMode === "url" ? "bg-white dark:bg-slate-700 shadow-[0_2px_8px_rgba(0,0,0,0.08)] text-slate-900 dark:text-white" : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"}`}
                >
                  URL Link
                </button>
              </div>
            </div>

            {clothingInputMode === "upload" ? (
              <ImageUploader 
                label="Target Clothing"
                hint="Bright & clear works best"
                image={clothingImage} 
                onImageChange={setClothingImage} 
                onClear={() => setClothingImage(null)}
              />
            ) : (
              <div className="flex flex-col gap-4">
                <label className="text-sm font-semibold text-slate-700 dark:text-slate-300 tracking-tight">Paste an image URL</label>
                <div className="flex gap-2">
                  <div className="relative flex-1 group">
                    <LinkIcon className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-500 transition-colors" size={18} />
                    <input 
                      type="url" 
                      placeholder="https://example.com/shirt.jpg" 
                      value={clothingUrl}
                      onChange={(e) => setClothingUrl(e.target.value)}
                      className="w-full pl-10 pr-4 py-3 bg-white dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 rounded-xl focus:ring-4 focus:ring-indigo-500/20 focus:border-indigo-500 dark:focus:border-indigo-500 outline-none transition-all text-sm shadow-sm"
                    />
                  </div>
                  <button 
                    onClick={handleUrlFetch}
                    disabled={!clothingUrl || isGenerating}
                    className="px-5 py-3 bg-slate-900 hover:bg-slate-800 dark:bg-indigo-600 dark:hover:bg-indigo-500 disabled:bg-slate-300 dark:disabled:bg-slate-800 text-white rounded-xl font-bold text-sm transition-all flex items-center justify-center min-w-[90px] shadow-md hover:shadow-lg disabled:shadow-none"
                  >
                    {isGenerating && loadingStep.includes("Fetching") ? <RefreshCcw size={18} className="animate-spin" /> : "Fetch"}
                  </button>
                </div>
                {clothingImage && (
                  <div className="mt-2 relative w-24 h-24 rounded-xl overflow-hidden border-2 border-emerald-500 shadow-lg group">
                    <img src={clothingImage} alt="Fetched garment" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
                    <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity" />
                    <button onClick={() => setClothingImage(null)} className="absolute top-1.5 right-1.5 bg-rose-500 hover:bg-rose-600 text-white p-1.5 rounded-lg backdrop-blur-md transition-transform hover:scale-105"><Trash2 size={14}/></button>
                  </div>
                )}
              </div>
            )}
          </div>

          {/* Advanced Options */}
          <div className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl rounded-3xl p-7 shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.1)] border border-white/60 dark:border-slate-800/60 transition-all hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)]">
             <div className="flex items-center gap-3 mb-4">
               <h2 className="text-lg font-bold tracking-tight text-slate-800 dark:text-slate-200">Styling Notes <span className="text-slate-400 font-medium text-sm ml-1">(Optional)</span></h2>
             </div>
            <textarea 
              value={instructions}
              onChange={(e) => setInstructions(e.target.value)}
              placeholder="E.g., Tuck the shirt in, roll up the sleeves, make the fit slightly oversized..."
              className="w-full p-4 bg-white dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 rounded-2xl focus:ring-4 focus:ring-indigo-500/20 focus:border-indigo-500 dark:focus:border-indigo-500 outline-none transition-all text-sm resize-none h-28 shadow-sm placeholder:text-slate-400"
            />
          </div>

          {/* Action Button */}
          <div className="relative group">
            <div className={`absolute -inset-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-blue-500 rounded-3xl blur-lg transition-all duration-500 opacity-60 group-hover:opacity-100 ${(!userImage || !clothingImage || isGenerating) && "hidden"}`}></div>
            <button 
              onClick={generateTryOn}
              disabled={!userImage || !clothingImage || isGenerating}
              className="relative w-full py-5 px-6 bg-slate-900 hover:bg-slate-800 dark:bg-slate-100 dark:hover:bg-white disabled:bg-slate-200 dark:disabled:bg-slate-800 text-white dark:text-slate-900 disabled:text-slate-400 dark:disabled:text-slate-600 rounded-2xl font-extrabold text-lg shadow-xl hover:shadow-2xl disabled:shadow-none transition-all duration-300 flex items-center justify-center gap-3 overflow-hidden border border-slate-800 dark:border-white/20 disabled:border-transparent active:scale-[0.98]"
            >
              {isGenerating ? (
                <>
                  <RefreshCcw size={22} className="animate-spin text-indigo-500 dark:text-indigo-600" />
                  <span className="bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-purple-500 dark:from-indigo-600 dark:to-purple-600">Processing Magic...</span>
                </>
              ) : (
                <>
                  Start Virtual Try-On
                  <Sparkles size={20} className="group-hover:text-indigo-400 group-hover:scale-125 transition-all duration-300" />
                </>
              )}
              {/* Shimmer effect inside button */}
              {!isGenerating && userImage && clothingImage && (
                <div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/10 dark:via-black/10 to-transparent group-hover:animate-[shimmer_1.5s_infinite]" />
              )}
            </button>
          </div>

          {errorMsg && (
            <div className="p-4 bg-rose-50/80 dark:bg-rose-900/20 backdrop-blur-md text-rose-600 dark:text-rose-400 text-sm font-medium rounded-2xl flex items-start gap-3 border border-rose-200 dark:border-rose-900/50 shadow-sm animate-in fade-in slide-in-from-top-2">
              <AlertCircle size={20} className="shrink-0 mt-0.5" />
              <p>{errorMsg}</p>
            </div>
          )}

        </div>

        {/* Right Column: Output Gallery */}
        <div className="w-full lg:w-7/12 flex flex-col gap-6">
          <div className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl rounded-3xl p-6 sm:p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.1)] border border-white/60 dark:border-slate-800/60 flex-1 flex flex-col min-h-[500px] relative overflow-hidden transition-all">
            
            <div className="flex items-center justify-between mb-6 z-10">
              <h2 className="text-xl font-bold tracking-tight text-slate-800 dark:text-slate-200">Result Canvas</h2>
              
              {generatedImage && (
                <div className="flex items-center gap-4">
                  <div className="flex bg-slate-100/80 dark:bg-slate-800/80 p-1 rounded-xl shadow-inner border border-slate-200/50 dark:border-slate-700/50">
                    <button 
                      onClick={() => setViewMode("result")}
                      className={`px-4 py-1.5 text-xs font-bold tracking-wide rounded-lg transition-all ${viewMode === "result" ? "bg-white dark:bg-slate-700 shadow-[0_2px_8px_rgba(0,0,0,0.08)] text-slate-900 dark:text-white" : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"}`}
                    >
                      Output
                    </button>
                    <button 
                      onClick={() => setViewMode("compare")}
                      className={`px-4 py-1.5 text-xs font-bold tracking-wide rounded-lg transition-all ${viewMode === "compare" ? "bg-white dark:bg-slate-700 shadow-[0_2px_8px_rgba(0,0,0,0.08)] text-slate-900 dark:text-white" : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"}`}
                    >
                      Compare
                    </button>
                  </div>
                  <button 
                    onClick={downloadImage}
                    className="p-2.5 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl transition-all shadow-sm border border-slate-200/50 dark:border-slate-700/50 hover:scale-105 active:scale-95"
                    title="Download High-Res"
                  >
                    <Download size={18} strokeWidth={2.5} />
                  </button>
                </div>
              )}
            </div>

            {/* Display Area */}
            <div className="flex-1 w-full flex items-center justify-center relative rounded-2xl overflow-hidden bg-slate-50/50 dark:bg-slate-950/50 border border-slate-200/50 dark:border-slate-800/80 shadow-inner group/display transition-all">
              
              {/* Subtle Grid Pattern */}
              <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjEiIGZpbGw9InJnYmEoMTQ4LCAxNjMsIDE4NCwgMC4xNSkiLz48L3N2Zz4=')] dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjEiIGZpbGw9InJnYmEoMTQ4LCAxNjMsIDE4NCwgMC4wNSkiLz48L3N2Zz4=')] [mask-image:linear-gradient(to_bottom,white,transparent)] pointer-events-none"></div>

              {/* Loading Overlay */}
              {isGenerating && (
                <div className="absolute inset-0 z-20 overflow-hidden bg-white/60 dark:bg-slate-950/80 backdrop-blur-md transition-all duration-500">
                  {/* Context Background */}
                  {userImage && <img src={userImage} alt="scanning context" className="absolute inset-0 w-full h-full object-contain opacity-30 grayscale blur-[8px] scale-105" />}
                  
                  {/* Scanner Laser */}
                  <div className="absolute inset-x-0 h-[2px] bg-indigo-500 shadow-[0_0_30px_8px_rgba(99,102,241,0.6)] animate-[scan_2s_ease-in-out_infinite_alternate] z-30"></div>
                  
                  {/* Content */}
                  <div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-center z-40">
                    <div className="relative w-20 h-20 mb-8">
                      <div className="absolute inset-0 border-4 border-indigo-200/30 dark:border-indigo-900/50 rounded-full shadow-[inset_0_0_20px_rgba(99,102,241,0.2)]"></div>
                      <div className="absolute inset-0 border-4 border-indigo-600 dark:border-indigo-400 rounded-full border-t-transparent animate-[spin_1.5s_linear_infinite]"></div>
                      <Sparkles className="absolute inset-0 m-auto text-indigo-600 dark:text-indigo-400 animate-pulse drop-shadow-[0_0_15px_rgba(99,102,241,0.8)]" size={28} />
                    </div>
                    <div className="bg-white/90 dark:bg-slate-900/90 px-8 py-5 rounded-2xl backdrop-blur-xl shadow-2xl border border-white/50 dark:border-slate-700/50 transform transition-all ring-1 ring-indigo-500/10">
                      <h3 className="text-xl font-extrabold text-slate-900 dark:text-white mb-2 tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-purple-600 dark:from-indigo-400 dark:to-purple-400">Tailoring your fit...</h3>
                      <p className="text-sm font-semibold text-slate-500 dark:text-slate-400 max-w-xs">{loadingStep}</p>
                    </div>
                  </div>
                </div>
              )}

              {/* Content */}
              {!generatedImage && !isGenerating ? (
                <div className="text-center p-8 flex flex-col items-center opacity-60 hover:opacity-100 transition-opacity duration-500 z-10">
                  <div className="w-24 h-24 bg-white dark:bg-slate-800 rounded-3xl flex items-center justify-center mb-6 shadow-sm ring-1 ring-slate-200 dark:ring-slate-700 rotate-3 hover:rotate-0 transition-transform duration-500">
                    <ImageIcon size={36} className="text-slate-400 dark:text-slate-500" strokeWidth={1.5} />
                  </div>
                  <h3 className="text-2xl font-bold text-slate-800 dark:text-slate-200 mb-3 tracking-tight">Studio Canvas</h3>
                  <p className="text-[15px] font-medium text-slate-500 dark:text-slate-400 max-w-[300px] leading-relaxed">Upload your photo and garment on the left, then ignite the <strong className="text-indigo-600 dark:text-indigo-400">magic</strong>.</p>
                </div>
              ) : generatedImage && !isGenerating ? (
                viewMode === "result" ? (
                  <img src={generatedImage} alt="Generated Try-On" className="w-full h-full object-contain" />
                ) : (
                  <CompareSlider original={userImage} generated={generatedImage} />
                )
              ) : null}

            </div>
          </div>
        </div>
      </main>

      {/* Session History Footer Gallery */}
      {sessionHistory.length > 0 && (
        <section className="relative z-10 mt-12 bg-white/40 dark:bg-slate-900/40 backdrop-blur-xl border-t border-white/50 dark:border-slate-800/50 py-10 shadow-[0_-10px_40px_rgba(0,0,0,0.02)]">
          <div className="max-w-7xl mx-auto px-4 sm:px-6">
            <h3 className="text-sm font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-6 flex items-center gap-3">
              <RefreshCcw size={16} strokeWidth={2.5} /> Session History
            </h3>
            <div className="flex gap-5 overflow-x-auto pb-6 custom-scrollbar snap-x px-1">
              {sessionHistory.map((item) => (
                <div 
                  key={item.id} 
                  onClick={() => {
                    setUserImage(item.userImg);
                    setClothingImage(item.clothingImg);
                    setGeneratedImage(item.resultImg);
                    setViewMode("result");
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                  }}
                  className="relative shrink-0 w-36 h-48 rounded-2xl overflow-hidden cursor-pointer group shadow-md hover:shadow-xl border-2 border-white/50 dark:border-slate-700 snap-start transition-all hover:-translate-y-2"
                >
                  {/* Generated Image Thumbnail */}
                  <img src={item.resultImg} alt="History Result" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
                  
                  {/* Overlay overlay of original garment */}
                  <div className="absolute bottom-2 right-2 w-10 h-10 rounded-full border-[2.5px] border-white dark:border-slate-800 overflow-hidden shadow-lg z-10 bg-slate-100">
                    <img src={item.clothingImg} alt="Garment used" className="w-full h-full object-cover" />
                  </div>
                  
                  {/* Hover State overlay */}
                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/0 to-black/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-[2px]">
                    <Sparkles className="text-white drop-shadow-md scale-50 group-hover:scale-100 transition-transform duration-300 delay-100" size={28} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Tailwind Custom Utilities (normally in css) */}
      <style dangerouslySetInnerHTML={{__html: `
        @keyframes shimmer {
          100% { transform: translateX(100%); }
        }
        @keyframes scan {
          0% { top: -5%; opacity: 0; }
          10% { opacity: 1; }
          90% { opacity: 1; }
          100% { top: 105%; opacity: 0; }
        }
        .custom-scrollbar::-webkit-scrollbar { height: 8px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 20px; }
        .dark .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #475569; }
      `}} />
    </div>
  );
}