import { createFileRoute, Link, useNavigate, Outlet, redirect } from "@tanstack/react-router";
import { useEffect } from "react";
import { useAuth } from "@/hooks/useAuth";
import { Logo } from "@/components/Logo";
import { supabase } from "@/integrations/supabase/client";
import { LayoutDashboard, Package, Tag, LogOut, ExternalLink, Inbox } from "lucide-react";

export const Route = createFileRoute("/admin")({
  head: () => ({ meta: [{ title: "Admin — ORIS" }, { name: "robots", content: "noindex" }] }),
  component: AdminLayout,
});

function AdminLayout() {
  const { user, isAdmin, loading } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (!loading && !user) navigate({ to: "/auth" });
  }, [user, loading, navigate]);

  if (loading) return <div className="min-h-screen grid place-items-center text-muted-foreground">Chargement…</div>;
  if (!user) return null;

  if (!isAdmin) {
    return (
      <div className="min-h-screen grid place-items-center px-6">
        <div className="max-w-md text-center rounded-2xl border border-border bg-card/60 p-8 backdrop-blur">
          <h1 className="font-display text-2xl font-bold">Accès restreint</h1>
          <p className="mt-3 text-sm text-muted-foreground">
            Votre compte ({user.email}) n'a pas les droits administrateur.
            Pour devenir admin, lancez cette commande SQL dans Lovable Cloud :
          </p>
          <pre className="mt-4 text-xs bg-background p-3 rounded-lg text-left overflow-auto border border-border">
{`INSERT INTO user_roles (user_id, role)
VALUES ('${user.id}', 'admin');`}
          </pre>
          <button onClick={() => supabase.auth.signOut().then(() => navigate({ to: "/auth" }))} className="mt-6 text-xs text-muted-foreground hover:text-foreground">
            Se déconnecter
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex">
      <aside className="w-64 border-r border-border bg-card/30 backdrop-blur flex flex-col">
        <div className="p-6 border-b border-border">
          <Logo showTagline={false} />
        </div>
        <nav className="flex-1 p-4 space-y-1">
          <NavItem to="/admin" exact icon={LayoutDashboard} label="Vue d'ensemble" />
          <NavItem to="/admin/messages" icon={Inbox} label="Messages" />
          <NavItem to="/admin/services" icon={Package} label="Prestations" />
          <NavItem to="/admin/categories" icon={Tag} label="Catégories" />
        </nav>
        <div className="p-4 border-t border-border space-y-1">
          <Link to="/" className="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-muted-foreground hover:bg-secondary">
            <ExternalLink className="size-4" /> Voir le site
          </Link>
          <button onClick={() => supabase.auth.signOut().then(() => navigate({ to: "/auth" }))} className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-muted-foreground hover:bg-secondary">
            <LogOut className="size-4" /> Déconnexion
          </button>
        </div>
      </aside>
      <main className="flex-1 overflow-auto"><Outlet /></main>
    </div>
  );
}

function NavItem({ to, icon: Icon, label, exact }: { to: string; icon: any; label: string; exact?: boolean }) {
  return (
    <Link to={to} activeOptions={{ exact }} className="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-muted-foreground hover:bg-secondary" activeProps={{ className: "flex items-center gap-3 px-3 py-2 rounded-lg text-sm bg-primary/15 text-primary font-medium" }}>
      <Icon className="size-4" /> {label}
    </Link>
  );
}