import { useState } from "react";

import { LLMProvider } from "./hooks/LLMProvider";
import { LandingPage } from "./components/LandingPage";
import { AppShell } from "./components/AppShell";
import { MODEL_CONFIG } from "./model-config";

type Stage = "landing" | "loading" | "ready";

function App() {
  const [stage, setStage] = useState<Stage>("landing");
  const [landingFading, setLandingFading] = useState(false);
  const [modelId, setModelId] = useState(MODEL_CONFIG.defaultModelId);

  const handleStart = (selectedModelId: string) => {
    setModelId(selectedModelId);
    setLandingFading(true);
    setTimeout(() => setStage("loading"), 500);
  };

  return (
    <div className="relative h-screen w-screen bg-bg">
      <div
        className={`absolute inset-0 z-10 transition-[opacity,transform] duration-500 ease-in-out ${
          landingFading || stage !== "landing" ? "opacity-0 pointer-events-none" : ""
        }`}
      >
        <LandingPage onStart={handleStart} />
      </div>

      {(stage === "loading" || stage === "ready") && (
        <LLMProvider modelId={modelId} onReady={() => setStage("ready")}>
          <AppShell />
        </LLMProvider>
      )}
    </div>
  );
}

export default App;