import { useEffect, useState } from "react";
import { GemmaIntro } from "./components/GemmaIntro";
import { LoadingScreen } from "./components/LoadingScreen";
import { DetectionApp } from "./components/DetectionApp";
import { useLLM } from "./hooks/useLLM";

function App() {
  const { status, loadModel } = useLLM();

  const [stage, setStage] = useState<"intro" | "loading" | "app">("intro");

  const isReady = status.state === "ready";

  // Move from loading → app once ready
  useEffect(() => {
    if (stage === "loading" && isReady) {
      setStage("app");
    }
  }, [stage, isReady]);

  const handleEnterFromIntro = () => {
    setStage("loading");
    loadModel();
  };

  return (
    <div className="relative h-screen w-screen bg-[#0a0a0a] text-white">
      {stage === "intro" && <GemmaIntro onEnter={handleEnterFromIntro} />}

      {stage === "loading" && <LoadingScreen status={status} />}

      {stage === "app" && <DetectionApp />}
    </div>
  );
}

export default App;