import { createFileRoute, Outlet, useRouterState, useNavigate } from "@tanstack/react-router";
import { useEffect } from "react";
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/app-sidebar";
import { WalletBadge } from "@/components/wallet-badge";
import { HeaderPnl } from "@/components/header-pnl";
import { Toaster } from "@/components/ui/sonner";
import { AlertsRunner } from "@/components/alerts-runner";
import { AutoExitRunner } from "@/components/auto-exit-runner";
import { useAuth, displayName } from "@/lib/auth";
import { Button } from "@/components/ui/button";
import { LogOut, ShieldAlert } from "lucide-react";

export const Route = createFileRoute("/_app")({
  component: AppLayout,
});

const labels: Record<string, { title: string; subtitle: string }> = {
  "/dashboard": { title: "Live Trading Dashboard", subtitle: "Realtime multi-coin terminal" },
  "/positions": { title: "Open Positions", subtitle: "Live PnL · manual close · order lifecycle" },
  "/screener": { title: "Multi-Coin Screener", subtitle: "Signals, indicators & trend rank" },
  "/signals": { title: "Signals History", subtitle: "Outcome tracking · hit-rate · filters" },
  "/activity": { title: "Auto-Exit Activity", subtitle: "Trend-reversal closes · trailing-SL adjustments" },
  "/settings": { title: "Settings & API Profiles", subtitle: "Delta credentials · sizing · execution" },
  "/reports": { title: "Performance & Balance Sheet", subtitle: "NAV growth · win rate · exports" },
  "/admin": { title: "Admin Panel", subtitle: "Manage users · impersonate accounts" },
};

function AppLayout() {
  const path = useRouterState({ select: (r) => r.location.pathname });
  const meta = labels[path] ?? { title: "Terminal", subtitle: "" };
  const { user, loading, signOut, stopImpersonation } = useAuth();
  const nav = useNavigate();

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

  if (loading || !user) {
    return (
      <div className="grid min-h-dvh place-items-center text-sm text-muted-foreground">
        Loading session…
      </div>
    );
  }

  return (
    <SidebarProvider>
      <div className="flex min-h-dvh w-full">
        <AppSidebar />
        <div className="flex min-w-0 flex-1 flex-col">
          {user.impersonating && (
            <div className="flex items-center gap-2 border-b border-amber-500/40 bg-amber-500/10 px-4 py-2 text-xs text-amber-200">
              <ShieldAlert className="h-4 w-4" />
              <span className="min-w-0 flex-1 truncate">
                Viewing as <strong>{displayName(user)}</strong> · admin <strong>{displayName(user.impersonating)}</strong>
              </span>
              <Button size="sm" variant="outline" className="h-7" onClick={stopImpersonation}>
                Exit impersonation
              </Button>
            </div>
          )}
          <header className="glass-strong sticky top-0 z-30 flex h-16 items-center gap-3 border-b px-3 sm:px-4">
            <SidebarTrigger aria-label="Toggle navigation" className="min-h-9 min-w-9" />
            <div className="min-w-0 flex-1">
              <h1 className="truncate font-display text-sm font-semibold tracking-wide sm:text-base">
                {meta.title}
              </h1>
              {meta.subtitle && (
                <p className="hidden truncate text-[11px] uppercase tracking-widest text-muted-foreground sm:block">
                  {meta.subtitle}
                </p>
              )}
            </div>
            <HeaderPnl />
            <WalletBadge />

            <div className="hidden items-center gap-2 rounded-md border border-border bg-secondary/40 px-2 py-1 text-xs sm:flex">
              <span className="truncate max-w-[12rem]" title={user.email}>{displayName(user)}</span>
              {user.role === "admin" && !user.impersonating && (
                <span className="rounded bg-primary/20 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-primary">
                  Admin
                </span>
              )}
            </div>
            <button
              onClick={() => {
                signOut();
                nav({ to: "/login" });
              }}
              className="inline-flex min-h-9 items-center gap-1 rounded-md border border-border bg-secondary/40 px-3 py-1.5 text-xs font-medium transition hover:bg-secondary hover:border-primary/40"
              aria-label="Sign out"
            >
              <LogOut className="h-3.5 w-3.5" />
              <span className="hidden sm:inline">Sign out</span>
            </button>
          </header>
          <main className="min-w-0 flex-1 p-3 sm:p-4 md:p-6">
            <div className="rise-in">
              <Outlet />
            </div>
          </main>
        </div>
        <Toaster position="top-right" theme="dark" />
        <AlertsRunner />
        <AutoExitRunner />
      </div>
    </SidebarProvider>
  );
}