import { createFileRoute, Link, Outlet, useRouterState } from "@tanstack/react-router";
import { LayoutDashboard, ListOrdered, Truck, Users, LifeBuoy, Settings, Search } from "lucide-react";
import { useLang } from "@/lib/language";
import { LangSwitch } from "@/components/shared/LangSwitch";
import { DemoBanner } from "@/components/shared/DemoBanner";

export const Route = createFileRoute("/admin")({
  head: () => ({
    meta: [
      { title: "Administration — Al-Arabat" },
      { name: "description", content: "Supervisez les demandes, chauffeurs, utilisateurs et support." },
    ],
  }),
  component: AdminLayout,
});

function AdminLayout() {
  const { t } = useLang();
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  type AdminLink = { to: "/admin" | "/admin/requests" | "/admin/drivers" | "/admin/users" | "/admin/support" | "/admin/settings"; label: string; icon: typeof LayoutDashboard; exact?: boolean };
  const links: AdminLink[] = [
    { to: "/admin", label: t("Aperçu", "نظرة"), icon: LayoutDashboard, exact: true },
    { to: "/admin/requests", label: t("Demandes", "الطلبات"), icon: ListOrdered },
    { to: "/admin/drivers", label: t("Chauffeurs", "السائقون"), icon: Truck },
    { to: "/admin/users", label: t("Utilisateurs", "المستخدمون"), icon: Users },
    { to: "/admin/support", label: t("Support", "الدعم"), icon: LifeBuoy },
    { to: "/admin/settings", label: t("Réglages", "الإعدادات"), icon: Settings },
  ];
  return (
    <div className="flex min-h-screen flex-col bg-sand font-body text-ink">
      <DemoBanner />
      <div className="flex flex-1">
        <aside className="hidden w-60 shrink-0 border-r-2 border-ink bg-ink text-sand md:block">
          <Link to="/admin" className="block border-b border-sand/15 px-5 py-5">
            <div className="font-display text-2xl uppercase text-brand">Al-Arabat</div>
            <div className="text-[10px] font-bold uppercase tracking-[0.2em] text-sand/60">
              {t("Admin", "الإدارة")}
            </div>
          </Link>
          <nav className="p-3">
            {links.map((l) => {
              const active = l.exact ? pathname === l.to : pathname.startsWith(l.to);
              return (
                <Link
                  key={l.to}
                  to={l.to}
                  className={`mb-1 flex items-center gap-3 px-3 py-2 text-sm font-bold uppercase tracking-widest ${
                    active ? "bg-brand text-ink" : "text-sand/70 hover:bg-sand/10 hover:text-sand"
                  }`}
                >
                  <l.icon className="h-4 w-4" />
                  {l.label}
                </Link>
              );
            })}
          </nav>
        </aside>
        <div className="flex min-w-0 flex-1 flex-col">
          <header className="sticky top-0 z-30 flex items-center justify-between gap-4 border-b border-ink/15 bg-sand/95 px-4 py-3 backdrop-blur md:px-8">
            <div className="flex flex-1 items-center gap-2 border-2 border-ink bg-white px-3 py-2 md:max-w-md">
              <Search className="h-4 w-4 text-ink/50" />
              <input placeholder={t("Rechercher…", "بحث…")} className="w-full bg-transparent text-sm outline-none" />
            </div>
            <div className="flex items-center gap-3">
              <LangSwitch />
              <Link to="/login" className="hidden text-xs font-bold uppercase tracking-widest hover:text-terracotta md:inline">
                {t("Quitter", "خروج")}
              </Link>
            </div>
          </header>
          <nav className="flex gap-1 overflow-x-auto border-b border-ink/15 bg-white px-2 py-2 md:hidden">
            {links.map((l) => {
              const active = l.exact ? pathname === l.to : pathname.startsWith(l.to);
              return (
                <Link key={l.to} to={l.to} className={`whitespace-nowrap px-3 py-1 text-xs font-bold uppercase tracking-widest ${active ? "bg-ink text-brand" : "text-ink/60"}`}>
                  {l.label}
                </Link>
              );
            })}
          </nav>
          <main className="flex-1 overflow-x-auto">
            <Outlet />
          </main>
        </div>
      </div>
    </div>
  );
}