import { useState, useCallback } from "react";
import LoadingScreen from "./components/LoadingScreen";
import ImageUpload from "./components/ImageUpload";
import ImageAnalysisView from "./components/ImageAnalysisView";
import type { AppState } from "./types";

export default function App() {
  const [appState, setAppState] = useState<AppState>("upload");
  const [uploadedImages, setUploadedImages] = useState<File[]>([]);

  const handleImagesUploaded = useCallback((files: File[]) => {
    setUploadedImages(files);
    setAppState("loading");
  }, []);

  const handleLoadingComplete = useCallback(() => {
    setAppState("analyzing");
  }, []);

  const handleBackToUpload = useCallback(() => {
    setUploadedImages([]);
    setAppState("upload");
  }, []);

  return (
    <div className="App relative h-screen overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-blue-900/20 to-purple-900/20" />

      {appState !== "analyzing" && <div className="absolute inset-0 bg-gray-900/80 backdrop-blur-sm" />}

      {appState === "upload" && (
        <ImageUpload
          onImagesUploaded={handleImagesUploaded}
          isAnalyzing={false}
        />
      )}

      {appState === "loading" && <LoadingScreen onComplete={handleLoadingComplete} />}

      {appState === "analyzing" && (
        <ImageAnalysisView
          images={uploadedImages}
          onBackToUpload={handleBackToUpload}
        />
      )}
    </div>
  );
}