import { Outlet, useLocation } from "react-router-dom";
import { DynamicBreadcrumb } from "@/shared/components/ui/DynamicBreadcrumb";
import { TopBar } from "@/layout/TopBar";
import { useState } from "react";
import { PerformanceMenuTabls } from "../layout/performanceMenuLayout";
import { Button } from "@/shared/common/ui/button";
import { ChevronLeft, ChevronRight, Menu } from "lucide-react";
import { Sheet, SheetContent, SheetTrigger } from "@/shared/common/ui/sheet";
import { PositionSelect } from "@/record-management/components/positionSelection";

export const PerformanceAppLayout = () => {
  const { pathname } = useLocation();
  const isAuthPage = pathname === "/";
  const [sidebarOpen, setSidebarOpen] = useState(true);

  const toggleSidebar = () => setSidebarOpen((prev) => !prev);

  if (isAuthPage) {
    return (
      <div className="min-h-screen w-full bg-gray-50">
        <Outlet />
      </div>
    );
  }

  return (
    <div className="min-h-screen flex flex-col bg-background text-foreground">
      {/* TOP BAR */}
      <TopBar />

      {/* CONTENT AREA */}
      <div className="flex flex-1 pt-16">
        {/* SIDEBAR */}
        <div
          className={`hidden md:flex flex-col h-[calc(100vh-4rem)] fixed left-0 top-16 transition-all duration-300 bg-white dark:bg-gray-900 border-r dark:border-gray-800 z-20 ${
            sidebarOpen ? "w-64" : "w-16"
          }`}>
          {/* Sidebar content */}
          <PerformanceMenuTabls
            collapsed={!sidebarOpen}
            toggleSidebar={toggleSidebar}
          />

          {/* Sidebar toggle button */}
          <div className="p-3 border-t dark:border-gray-800 mt-auto">
            <Button
              variant="ghost"
              size="icon"
              onClick={toggleSidebar}
              className="w-full flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
              {sidebarOpen ? (
                <>
                  <ChevronLeft className="h-4 w-4" />
                  {!sidebarOpen && (
                    <span className="sr-only">Expand sidebar</span>
                  )}
                </>
              ) : (
                <>
                  <ChevronRight className="h-4 w-4" />
                  {sidebarOpen && (
                    <span className="sr-only">Collapse sidebar</span>
                  )}
                </>
              )}
            </Button>
          </div>
        </div>

        {/* MOBILE SIDEBAR TRIGGER */}
        <div className="md:hidden fixed bottom-6 right-6 z-40">
          <Sheet>
            <SheetTrigger asChild>
              <Button
                size="icon"
                className="h-12 w-12 rounded-full shadow-lg bg-[#A043F0] hover:bg-[#8a36d0]">
                <Menu className="h-6 w-6 text-white" />
              </Button>
            </SheetTrigger>
            <SheetContent side="left" className="w-64 p-0">
              <div className="flex flex-col h-full">
                <div className="p-4 border-b">
                  <h2 className="text-lg font-semibold">Menu</h2>
                </div>
                <div className="flex-1 p-2">
                  <PerformanceMenuTabls />
                </div>
              </div>
            </SheetContent>
          </Sheet>
        </div>

        {/* MAIN CONTENT */}
        <div
          className={`flex-1 transition-all duration-300 min-h-[calc(100vh-4rem)] w-full ${
            sidebarOpen ? "md:ml-64" : "md:ml-16"
          }`}>
          <div className="p-4 md:p-6">
            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-6">
              <DynamicBreadcrumb />
              <PositionSelect />
            </div>
            <div className="w-full">
              <Outlet />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
