import { Link } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import type { ReactNode } from "react";
import { supabase } from "@/integrations/supabase/client";

export function useIsAdmin() {
  return useQuery({
    queryKey: ["is-admin"],
    queryFn: async () => {
      const { data: u } = await supabase.auth.getUser();
      if (!u.user) return false;
      return (await supabase.rpc("has_role", { _user_id: u.user.id, _role: "admin" })).data === true;
    },
  });
}

const tabs = [
  { to: "/dashboard", label: "Dashboard" },
  { to: "/admin-orders", label: "Orders" },
  { to: "/admin-inventory", label: "Inventory" },
  { to: "/admin", label: "Wholesale applications" },
] as const;

export function AdminShell({ title, children }: { title: ReactNode; children: ReactNode }) {
  const isAdmin = useIsAdmin();
  if (isAdmin.isLoading) return <p className="py-24 text-center text-muted-foreground">Loading…</p>;
  if (!isAdmin.data) return (
    <div className="mx-auto max-w-xl px-5 py-24 text-center">
      <h1 className="text-4xl font-semibold">Admins only</h1>
      <p className="mt-3 text-muted-foreground">This account doesn't have admin access.</p>
    </div>
  );
  return (
    <div className="mx-auto max-w-6xl px-5 py-10">
      <nav className="mb-8 flex flex-wrap gap-2">
        {tabs.map((t) => (
          <Link key={t.to} to={t.to} className="rounded-full border bg-card px-4 py-1.5 text-sm font-medium" activeProps={{ className: "rounded-full border border-primary bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground" }} activeOptions={{ exact: true }}>
            {t.label}
          </Link>
        ))}
      </nav>
      <h1 className="text-4xl font-semibold md:text-5xl">{title}</h1>
      <div className="mt-8">{children}</div>
    </div>
  );
}