App.tsx

import React, { useState, useCallback } from 'react';
import { Upload, Sparkles, Bookmark, RotateCcw, VibeGoLogo } from './components/Icons';
import { LoadingStatus, VibeResponse, ImageState } from './types';
import { analyzeVibeAndGenerateItinerary, findBudgetDoppelganger, performRealityCheck, refineItinerary } from './services/geminiService';
import LoadingState from './components/LoadingState';
import ResultHeader from './components/ResultHeader';
import ResultCard from './components/ResultCard';
import VibeBreakdown from './components/VibeBreakdown';
import RefineInput from './components/RefineInput';
import RealityCheckWidget from './components/RealityCheckWidget';

const App: React.FC = () => {
  const [imageState, setImageState] = useState<ImageState>({
    file: null,
    previewUrl: null,
    base64: null,
    mimeType: ''
  });
  const [status, setStatus] = useState<LoadingStatus>(LoadingStatus.IDLE);
  const [result, setResult] = useState<VibeResponse | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [view, setView] = useState<'HOME' | 'CURATED'>('HOME');
  const [isSearchingBudget, setIsSearchingBudget] = useState(false);
  const [isRefining, setIsRefining] = useState(false);

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

    if (!file.type.startsWith('image/')) {
      setError("Please upload a valid image file.");
      return;
    }

    const reader = new FileReader();
    reader.onloadend = () => {
      const result = reader.result as string;
      // split to get base64 part
      const base64Data = result.split(',')[1];
      
      setImageState({
        file,
        previewUrl: result,
        base64: base64Data,
        mimeType: file.type
      });
      setError(null);
      setResult(null); // Reset previous result
      setStatus(LoadingStatus.IDLE);
    };
    reader.readAsDataURL(file);
  }, []);

  const handleAnalyze = async () => {
    if (!imageState.base64 || !imageState.mimeType) return;

    try {
      setStatus(LoadingStatus.ANALYZING);
      
      // Simulate phases for UX (Analysis -> Grounding -> Generating)
      setTimeout(() => {
        if (status !== LoadingStatus.ERROR && status < LoadingStatus.GROUNDING) setStatus(LoadingStatus.GROUNDING);
      }, 1500);
      setTimeout(() => {
        if (status !== LoadingStatus.ERROR && status < LoadingStatus.GENERATING) setStatus(LoadingStatus.GENERATING);
      }, 3000);

      // Step 1: Generate Vibe & Itinerary
      const data = await analyzeVibeAndGenerateItinerary(imageState.base64, imageState.mimeType);
      
      // Step 2: Perform Reality Check
      setStatus(LoadingStatus.REALITY_CHECK);
      const realityData = await performRealityCheck(data.location_name, data.itinerary);
      
      // Merge results
      const finalResult = { ...data, reality_check: realityData };
      
      setResult(finalResult);
      setStatus(LoadingStatus.COMPLETE);
    } catch (err) {
      console.error(err);
      setError("Failed to interpret the vibe. Please try again or use a different image.");
      setStatus(LoadingStatus.ERROR);
    }
  };

  const handleBudgetDoppelganger = async () => {
    if (!result) return;
    
    try {
      setIsSearchingBudget(true);
      const budgetData = await findBudgetDoppelganger(result);
      
      // Perform Reality Check on the doppelganger
      const realityData = await performRealityCheck(budgetData.location_name, budgetData.itinerary);
      
      setResult({ ...budgetData, reality_check: realityData });
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } catch (err) {
      console.error("Doppelganger Error:", err);
      // We don't change global error state here to keep the current result visible
    } finally {
      setIsSearchingBudget(false);
    }
  };

  const handleRefine = async (instruction: string) => {
    if (!result) return;

    try {
      setIsRefining(true);
      
      // Call service to re-plan based on instruction
      const refinedData = await refineItinerary(result, instruction);
      
      setResult({ 
        ...refinedData, 
        reality_check: result.reality_check 
      });
      
    } catch (err) {
      console.error("Refine Error:", err);
    } finally {
      setIsRefining(false);
    }
  };

  const resetApp = () => {
    setImageState({ file: null, previewUrl: null, base64: null, mimeType: '' });
    setResult(null);
    setStatus(LoadingStatus.IDLE);
    setError(null);
    setView('HOME');
  };

  const navigateToHome = () => setView('HOME');
  const navigateToCurate = () => setView('CURATED');

  return (
    <div className="min-h-screen bg-[#F8F9FA] text-gray-900 font-sans">
      {/* Navigation */}
      <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-2 cursor-pointer group" onClick={navigateToHome}>
            <div className="group-hover:rotate-12 transition-transform duration-300">
              <VibeGoLogo className="w-9 h-9 md:w-10 md:h-10 shadow-sm" />
            </div>
            <span className="font-bold text-xl tracking-tighter text-black">VibeGo</span>
          </div>
          
          <div className="flex items-center gap-4">
            <button 
              className="bg-white text-gray-900 border border-gray-200 px-4 py-2 rounded-full text-sm font-bold hover:bg-gray-50 transition-colors shadow-sm hidden md:block"
            >
              VibeGo Ranking
            </button>
            <button 
              onClick={navigateToCurate} 
              className={`bg-white text-gray-900 border border-gray-200 px-4 py-2 rounded-full text-sm font-bold hover:bg-gray-50 transition-colors shadow-sm ${view === 'CURATED' ? 'bg-gray-100 ring-2 ring-gray-200' : ''}`}
            >
              Curate
            </button>
            <button 
              onClick={resetApp}
              className="bg-white text-gray-900 border border-gray-200 px-4 py-2 rounded-full text-sm font-bold hover:bg-gray-50 transition-colors flex items-center gap-2 shadow-sm"
            >
              <RotateCcw className="w-3 h-3" />
              <span className="hidden md:inline">New Experience</span>
              <span className="md:hidden">New</span>
            </button>
          </div>
        </div>
      </nav>

      {/* Main Content */}
      <main className={`mx-auto px-6 py-12 ${result ? 'max-w-[90rem]' : 'max-w-6xl'}`}>
        
        {view === 'CURATED' ? (
          <div className="flex flex-col items-center justify-center py-20 text-center space-y-6 animate-in fade-in duration-500">
             <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center">
                <Bookmark className="w-10 h-10 text-gray-400" />
             </div>
             <div className="space-y-2">
               <h2 className="text-3xl font-bold text-gray-900">Your Curated Vibes</h2>
               <p className="text-gray-500 max-w-md mx-auto">
                 Save your favorite generated itineraries here to build your personal travel wishlist.
               </p>
             </div>
             <button 
               onClick={navigateToHome}
               className="mt-4 px-6 py-3 bg-gray-900 text-white rounded-xl font-bold hover:bg-indigo-600 transition-colors"
             >
               Start Exploring
             </button>
          </div>
        ) : (
          <>
            {/* Hero Section (Only visible when no result) */}
            {!result && status !== LoadingStatus.COMPLETE && status !== LoadingStatus.REALITY_CHECK && (
              <div className="text-center mb-12 space-y-4 animate-in slide-in-from-bottom-4 duration-500">
                <h1 className="text-5xl md:text-6xl font-black text-gray-900 tracking-tight leading-tight">
                  Image-to-<span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600">Experience</span>
                </h1>
                <p className="text-xl text-gray-500 max-w-3xl mx-auto font-light leading-relaxed">
                  Turn any static image—movie scene, painting, or photo—into a bookable, real-world adventure using Gemini’s multimodal reasoning.
                </p>
              </div>
            )}

            {/* Interaction Area (Centered when no result) */}
            {!result && (
              <div className="flex flex-col items-center justify-center w-full max-w-2xl mx-auto">
                
                {/* Upload State */}
                {status === LoadingStatus.IDLE && (
                  <div className="w-full bg-white rounded-3xl shadow-soft border border-gray-100 overflow-hidden transition-all hover:shadow-lg">
                    
                    {imageState.previewUrl ? (
                      <div className="relative group">
                        <img 
                          src={imageState.previewUrl} 
                          alt="Preview" 
                          className="w-full h-80 object-cover"
                        />
                        <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                          <button 
                            onClick={resetApp}
                            className="bg-white text-gray-900 px-6 py-2 rounded-full font-bold hover:bg-gray-100 transition-colors"
                          >
                            Change Image
                          </button>
                        </div>
                      </div>
                    ) : (
                      <label className="flex flex-col items-center justify-center w-full h-80 cursor-pointer bg-gray-50 hover:bg-gray-100 transition-colors border-2 border-dashed border-gray-200 hover:border-indigo-400 group">
                        <div className="flex flex-col items-center justify-center pt-5 pb-6">
                          <div className="p-4 bg-white rounded-full shadow-sm mb-4 group-hover:scale-110 transition-transform duration-300">
                            <Upload className="w-8 h-8 text-indigo-600" />
                          </div>
                          <p className="mb-2 text-lg font-semibold text-gray-700">Click to upload visual inspiration</p>
                          <p className="text-sm text-gray-400">PNG, JPG, WEBP (Max 10MB)</p>
                        </div>
                        <input type="file" className="hidden" accept="image/*" onChange={handleFileChange} />
                      </label>
                    )}

                    {/* Action Bar */}
                    <div className="p-6 bg-white border-t border-gray-100 flex items-center justify-between">
                      <div className="flex items-center gap-2 text-sm text-gray-500">
                        <Sparkles className="w-4 h-4 text-indigo-500" />
                        <span>AI-Powered Vibe Matching</span>
                      </div>
                      <button
                        onClick={handleAnalyze}
                        disabled={!imageState.file}
                        className={`
                          px-8 py-3 rounded-xl font-bold text-white transition-all transform duration-200
                          ${imageState.file 
                            ? 'bg-gray-900 hover:bg-indigo-600 hover:scale-[1.02] shadow-lg hover:shadow-indigo-500/30' 
                            : 'bg-gray-200 cursor-not-allowed text-gray-400'}
                        `}
                      >
                        Scout Location
                      </button>
                    </div>
                  </div>
                )}

                {/* Loading View */}
                {status !== LoadingStatus.IDLE && status !== LoadingStatus.COMPLETE && status !== LoadingStatus.ERROR && (
                  <div className="w-full bg-white rounded-3xl shadow-soft border border-gray-100 p-8">
                     <LoadingState status={status} />
                  </div>
                )}

                {/* Error View */}
                {status === LoadingStatus.ERROR && (
                   <div className="w-full bg-red-50 rounded-3xl border border-red-100 p-8 text-center">
                      <p className="text-red-600 font-medium mb-4">{error}</p>
                      <button 
                        onClick={resetApp}
                        className="px-6 py-2 bg-white text-red-600 font-bold rounded-lg shadow-sm hover:bg-red-50 border border-red-100"
                      >
                        Try Again
                      </button>
                   </div>
                )}
              </div>
            )}

            {/* Results Grid View */}
            {result && status === LoadingStatus.COMPLETE && (
              <div className="animate-in slide-in-from-bottom-8 duration-700 space-y-8">
                
                {/* 1. Header Section */}
                <ResultHeader 
                  data={result}
                  originalImage={imageState.previewUrl}
                  onDoppelganger={handleBudgetDoppelganger}
                  isDoppelgangerLoading={isSearchingBudget}
                />

                {/* 2. Feasibility Scan (Full Width) */}
                <div className="w-full">
                  <RealityCheckWidget realityCheck={result.reality_check} />
                </div>

                {/* 3. Itinerary Cards Section (Grid containing Days + Refine) */}
                <div>
                   <ResultCard 
                      data={result} 
                      actionCard={
                        <RefineInput onRefine={handleRefine} isLoading={isRefining} />
                      }
                   />
                </div>

                {/* 4. Vibe Breakdown (Full Width) */}
                <div className="w-full">
                   <VibeBreakdown data={result} />
                </div>

              </div>
            )}
          </>
        )}
      </main>
    </div>
  );
};

export default App;