import { createFileRoute, Link, Outlet, useRouterState, useNavigate } from "@tanstack/react-router";
import { Home, History, User, LogOut } from "lucide-react";
import { useLang } from "@/lib/language";
import { LangSwitch } from "@/components/shared/LangSwitch";
import { DemoBanner } from "@/components/shared/DemoBanner";

export const Route = createFileRoute("/app")({
  head: () => ({
    meta: [
      { title: "Espace utilisateur — Al-Arabat" },
      { name: "description", content: "Demandez une dépanneuse, suivez vos courses, gérez vos véhicules." },
    ],
  }),
  component: AppLayout,
});

function AppLayout() {
  const { t } = useLang();
  const navigate = useNavigate();
  const pathname = useRouterState({ select: (s) => s.location.pathname });

  const handleSignOut = () => {
    try {
      localStorage.removeItem("al-arabat-role");
      localStorage.removeItem("al-arabat-user-name");
    } catch {}
    navigate({ to: "/login" });
  };

  const tabs: { to: "/app" | "/app/history" | "/app/profile"; label: string; icon: typeof Home; exact?: boolean }[] = [
    { to: "/app", label: t("Accueil", "الرئيسية"), icon: Home, exact: true },
    { to: "/app/history", label: t("Historique", "السجل"), icon: History },
    { to: "/app/profile", label: t("Profil", "الملف"), icon: User },
  ];

  return (
    <div className="flex min-h-screen flex-col bg-sand font-body text-ink">
      <DemoBanner />
      <header className="sticky top-0 z-40 flex items-center justify-between border-b border-ink/15 bg-sand/95 px-4 py-3 backdrop-blur md:px-8">
        <Link to="/app" className="flex flex-col leading-none">
          <span className="font-display text-xl uppercase tracking-tight md:text-2xl">Al-Arabat</span>
          <span className="text-[10px] font-bold uppercase tracking-[0.2em] text-terracotta">
            {t("Espace utilisateur", "فضاء المستخدم")}
          </span>
        </Link>
        <div className="flex items-center gap-3">
          <LangSwitch />
          <button
            onClick={handleSignOut}
            className="hidden text-xs font-bold uppercase tracking-widest text-ink/70 hover:text-terracotta md:inline"
          >
            {t("Se déconnecter", "تسجيل الخروج")}
          </button>
          <div className="grid size-9 place-items-center rounded-full bg-ink text-brand font-display">A</div>
        </div>
      </header>
      <main className="flex-1 pb-24">
        <Outlet />
      </main>
      <nav className="fixed inset-x-0 bottom-0 z-40 border-t-2 border-ink bg-sand">
        <div className="mx-auto grid max-w-md grid-cols-4">
          {tabs.map((tb) => {
            const active = tb.exact ? pathname === tb.to : pathname.startsWith(tb.to);
            return (
              <Link
                key={tb.to}
                to={tb.to}
                className={`flex flex-col items-center justify-center gap-1 py-3 text-[10px] font-bold uppercase tracking-widest ${
                  active ? "bg-brand text-ink" : "text-ink/60 hover:text-ink"
                }`}
              >
                <tb.icon className="h-5 w-5" />
                {tb.label}
              </Link>
            );
          })}
          <button
            onClick={handleSignOut}
            className="flex flex-col items-center justify-center gap-1 py-3 text-[10px] font-bold uppercase tracking-widest text-ink/60 hover:text-terracotta"
          >
            <LogOut className="h-5 w-5" />
            {t("Quitter", "خروج")}
          </button>
        </div>
      </nav>
    </div>
  );
}