import { createFileRoute, Outlet, Link, useNavigate, useRouterState, redirect } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { Bell, Search } from "lucide-react";

import { AppSidebar } from "@/components/app-sidebar";
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Toaster } from "@/components/ui/sonner";
import { getSessionFn } from "@/lib/auth.functions";

export const Route = createFileRoute("/_admin")({
  beforeLoad: async ({ location }) => {
    const session = await getSessionFn();
    if (!session.isAuthenticated) {
      throw redirect({
        to: "/login",
        search: { redirect: location.href },
      });
    }
  },
  component: AdminLayout,
});

function AdminLayout() {
  const navigate = useNavigate();
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  const searchObj = useRouterState({ select: (s) => s.location.search }) as {
    q?: string;
  };
  const [value, setValue] = useState<string>(searchObj?.q ?? "");

  // Sync input quando a URL muda externamente (ex.: navegação direta).
  useEffect(() => {
    if (pathname === "/propostas") {
      setValue(searchObj?.q ?? "");
    }
  }, [pathname, searchObj?.q]);

  // Debounce leve: ao digitar, navega para /propostas com ?q=
  useEffect(() => {
    const handle = setTimeout(() => {
      const current = searchObj?.q ?? "";
      if (pathname === "/propostas") {
        if (value === current) return;
        navigate({
          to: "/propostas",
          search: value ? { q: value } : {},
          replace: true,
        });
      } else if (value.length > 0) {
        navigate({ to: "/propostas", search: { q: value } });
      }
    }, 250);
    return () => clearTimeout(handle);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value]);

  return (
    <SidebarProvider>
      <div className="flex min-h-screen w-full bg-background">
        <AppSidebar />
        <div className="flex flex-1 flex-col">
          <header className="sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-border/60 bg-background/80 px-3 backdrop-blur sm:px-6">
            <SidebarTrigger />
            <form
              className="relative hidden flex-1 max-w-md md:block"
              onSubmit={(e) => {
                e.preventDefault();
                navigate({
                  to: "/propostas",
                  search: value ? { q: value } : {},
                });
              }}
            >
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                value={value}
                onChange={(e) => setValue(e.target.value)}
                placeholder="Buscar propostas por cliente, título, status, serviço ou valor..."
                className="h-9 pl-9 bg-muted/40 border-transparent focus-visible:bg-background"
              />
            </form>
            <div className="ml-auto flex items-center gap-2">
              <Button variant="ghost" size="icon" className="h-9 w-9">
                <Bell className="h-4 w-4" />
              </Button>
              <Button
                asChild
                size="sm"
                className="bg-gradient-brand text-white shadow-soft hover:opacity-95"
              >
                <Link to="/propostas/nova">Nova proposta</Link>
              </Button>
            </div>
          </header>
          <main className="flex-1 px-4 py-6 sm:px-6 lg:px-10 lg:py-10">
            <Outlet />
          </main>
        </div>
        <Toaster richColors position="top-right" />
      </div>
    </SidebarProvider>
  );
}