import { Outlet } from "react-router-dom";
import { Search } from "lucide-react";

import { Input } from "@ump/shared";
import { SidebarProvider, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar";
import { ApplicantDashboardSidebar } from "@/components/applicant/DashboardSidebar";

/**
 * Applicant dashboard shell — sidebar + header + routed content (<Outlet/>).
 *
 * Mirrors fe0/src/layouts/DashboardLayout.tsx, but hardcodes the applicant sidebar
 * (this is the applicant app — fe0 swapped admin-vs-applicant at runtime). The header
 * is a lean inline reproduction of fe0's DashboardHeader: SidebarTrigger + search look.
 * fe0's NotificationBell / UserMenu are deferred with the deep feature pages.
 */
export function DashboardLayout() {
  return (
    <SidebarProvider>
      <div className="flex overflow-hidden h-screen w-full">
        <ApplicantDashboardSidebar />
        <SidebarInset>
          <header className="flex h-16 absolute top-0 left-0 right-0 items-center gap-4 border-b border-border bg-card px-4">
            <SidebarTrigger />
            <div className="flex-1">
              <div className="relative max-w-md">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input type="search" placeholder="Tìm kiếm..." className="pl-9 bg-background" />
              </div>
            </div>
          </header>
          <main className="flex-1 overflow-auto p-6 mt-12">
            <Outlet />
          </main>
        </SidebarInset>
      </div>
    </SidebarProvider>
  );
}
