src/components/AppShell.tsx

import { useState, useEffect } from "react";
import { Loader2 } from "lucide-react";

import { useLLM } from "../hooks/useLLM";
import { ChatApp } from "./ChatApp";

export function AppShell() {
  const { status } = useLLM();
  const isReady = status.state === "ready";
  const [showChat, setShowChat] = useState(false);

  useEffect(() => {
    if (isReady) {
      const timeoutId = setTimeout(() => setShowChat(true), 300);
      return () => clearTimeout(timeoutId);
    }
  }, [isReady]);

  return (
    <>
      <div
        className={`absolute inset-0 z-20 flex flex-col items-center justify-center transition-opacity duration-1000 ease-in-out ${
          showChat ? "opacity-0 pointer-events-none" : "opacity-100"
        }`}
      >
        {/* Vexorium logo while loading */}
        <img
          src="/vexorium_logo.svg"
          alt="Vexorium"
          className="w-20 h-20 mb-6"
          style={{ filter: "drop-shadow(0 0 20px rgba(0,255,255,0.5))" }}
        />
        <Loader2 className="h-8 w-8 animate-spin" style={{ color: "#00ffff" }} />
        <p className="mt-4 text-base" style={{ color: "rgba(224,224,240,0.8)", fontFamily: "'Exo 2', sans-serif" }}>
          {status.state === "loading"
            ? (status.message ?? "Loading model…")
            : status.state === "error"
              ? "Error"
              : "Initializing Nemotron-3-Nano…"}
        </p>
        <div className="mt-3 h-1 w-72 overflow-hidden rounded-full" style={{ background: "rgba(0,255,255,0.1)" }}>
          <div
            className="h-full rounded-full transition-[width] duration-300 ease-out"
            style={{
              background: "linear-gradient(90deg, #00ffff, #ff00ff)",
              boxShadow: "0 0 8px rgba(0,255,255,0.6)",
              width: `${
                status.state === "ready"
                  ? 100
                  : status.state === "loading"
                    ? (status.progress ?? 0)
                    : 0
              }%`,
            }}
          />
        </div>
        {status.state === "error" && (
          <p className="mt-2 text-sm" style={{ color: "#ff6688" }}>{status.error}</p>
        )}
      </div>

      <div
        className={`absolute inset-0 z-30 transition-opacity duration-1000 ease-in-out ${
          showChat ? "opacity-100" : "opacity-0 pointer-events-none"
        }`}
        style={{ background: "#050515" }}
      >
        <ChatApp />
      </div>
    </>
  );
}