"use client";

import { useEffect, useState } from "react";
import { usePathname, useRouter } from "next/navigation";
import { Loader2 } from "lucide-react";

export function InstallCheck({ children }: { children: React.ReactNode }) {
  const [checking, setChecking] = useState(true);
  const [installed, setInstalled] = useState(false);
  const pathname = usePathname();
  const router = useRouter();

  useEffect(() => {
    // Skip check for install pages
    if (pathname?.startsWith("/install") || pathname?.startsWith("/api/install")) {
      setChecking(false);
      setInstalled(true);
      return;
    }

    // Check installation status
    fetch("/api/install/check")
      .then((res) => res.json())
      .then((data) => {
        if (!data.installed) {
          router.push("/install");
        } else {
          setInstalled(true);
        }
      })
      .catch(() => {
        setInstalled(true);
      })
      .finally(() => {
        setChecking(false);
      });
  }, [pathname, router]);

  if (checking) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Loader2 className="w-8 h-8 animate-spin text-primary" />
      </div>
    );
  }

  return <>{children}</>;
}