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 handleStart = () => {
    setLandingFading(true);
    setTimeout(() => setStage("loading"), 500);
  };

  return (
    <div className="relative h-screen w-screen bg-[#000000]">
      <div
        className="pointer-events-none absolute inset-0"
        style={{
          backgroundImage: [
            `repeating-linear-gradient(0deg, transparent, transparent 39.6px, rgba(255,255,255,0.06) 39.6px, rgba(255,255,255,0.06) 40px)`,
            `repeating-linear-gradient(60deg, transparent, transparent 39.6px, rgba(255,255,255,0.06) 39.6px, rgba(255,255,255,0.06) 40px)`,
            `repeating-linear-gradient(-60deg, transparent, transparent 39.6px, rgba(255,255,255,0.06) 39.6px, rgba(255,255,255,0.06) 40px)`,
          ].join(", "),
        }}
      />
      <div
        className={`absolute inset-0 z-10 transition-all duration-500 ${
          landingFading || stage !== "landing"
            ? "opacity-0 translate-y-4 pointer-events-none"
            : "opacity-100"
        }`}
      >
        <LandingPage onStart={handleStart} />
      </div>

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

export default App;
