"use client";

import { signOut } from "@/app/login/actions";
import { Button } from "poyraz-ui/atoms";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "poyraz-ui/molecules";
import {
  Sidebar,
  SidebarBranding,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuItem,
  SidebarSection,
  SidebarSeparator,
  SidebarTrigger,
  SidebarUserProfile,
} from "poyraz-ui/organisms";
import { sidebarData } from "@/config/sidebar";
import { cn } from "@/lib/utils";
import { ChevronUp, LogOut, Menu, Settings } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";

type DashboardShellProps = {
  children: React.ReactNode;
  user: {
    email: string;
    displayName: string;
    shortName: string;
    avatarUrl: string | null;
  };
};

export function DashboardShell({ children, user }: DashboardShellProps) {
  const pathname = usePathname();
  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);

  return (
    <div className="min-h-screen bg-background text-foreground">
      <div className="flex min-h-screen">
        <aside className="sticky top-0 hidden h-dvh shrink-0 self-start border-r border-border bg-background lg:block">
          <AppSidebar pathname={pathname} user={user} />
        </aside>

        {isMobileSidebarOpen ? (
          <div className="fixed inset-0 z-50 lg:hidden">
            <button
              type="button"
              aria-label="Menuyu kapat"
              className="absolute inset-0 bg-overlay"
              onClick={() => setIsMobileSidebarOpen(false)}
            />
            <aside className="relative h-dvh border-r border-border bg-background">
              <AppSidebar
                pathname={pathname}
                user={user}
                onNavigate={() => setIsMobileSidebarOpen(false)}
              />
            </aside>
          </div>
        ) : null}

        <div className="flex flex-1 flex-col min-w-0">
          <header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-background/95 px-4 backdrop-blur lg:hidden">
            <Link href="/" className="flex items-center gap-2 font-semibold">
              <Image
                src="/logo/LogoWithBg.png"
                alt="Cognis"
                width={32}
                height={32}
                className="rounded-sm object-cover"
                priority
              />
              Cognis
            </Link>
            <Button
              type="button"
              variant="outline"
              className="h-9 w-9 p-0"
              onClick={() => setIsMobileSidebarOpen(true)}
            >
              <Menu className="h-4 w-4" />
            </Button>
          </header>

          <main className="flex-1 p-4 lg:p-8 min-w-0">{children}</main>
        </div>
      </div>
    </div>
  );
}

function AppSidebar({
  pathname,
  user,
  onNavigate,
}: {
  pathname: string;
  user: DashboardShellProps["user"];
  onNavigate?: () => void;
}) {
  return (
    <Sidebar
      variant="bordered"
      className="flex h-dvh max-h-dvh flex-col overflow-hidden rounded-none border-0"
    >
      <SidebarHeader className="shrink-0 border-b-0 px-6 py-6">
        <SidebarBranding
          title="Cognis"
          subtitle="Freelancer OS"
          logo={
            <Image
              src="/logo/LogoWithBg.png"
              alt="Cognis"
              width={36}
              height={36}
              className="h-9 w-9 rounded-sm object-cover"
              priority
            />
          }
        />
      </SidebarHeader>

      <SidebarSeparator className="mx-0 my-0 w-full" />

      <SidebarContent className="tiny-scrollbar min-h-0 flex-1 overflow-y-auto px-6 py-6">
        {sidebarData.map((group, groupIndex) => (
          <div key={group.title}>
            <SidebarSection title={group.title} defaultOpen className="mb-0">
              <SidebarMenu>
                {group.items.map((item) => {
                  const isActive =
                    item.href === "/"
                      ? pathname === "/"
                      : item.href
                        ? pathname === item.href || pathname.startsWith(item.href + "/")
                        : false;
                  const Icon = item.icon;

                  return (
                    <SidebarMenuItem
                      key={item.href || item.title}
                      active={isActive}
                      icon={Icon ? <Icon className="h-4 w-4" /> : undefined}
                      className={cn(isActive && "font-semibold")}
                    >
                      <Link
                        href={item.href || "#"}
                        onClick={onNavigate}
                        className="block w-full"
                      >
                        {item.title}
                      </Link>
                    </SidebarMenuItem>
                  );
                })}
              </SidebarMenu>
            </SidebarSection>
            {groupIndex < sidebarData.length - 1 ? (
              <SidebarSeparator className="-mx-6 my-5 w-[calc(100%+3rem)]" />
            ) : null}
          </div>
        ))}
      </SidebarContent>

      <SidebarSeparator className="mx-0 my-0 w-full" />

      <SidebarFooter className="shrink-0 border-t-0 px-6 py-5">
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button
              type="button"
              className="w-full rounded-sm text-left outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
            >
              <div className="flex items-center gap-2">
                <SidebarUserProfile
                  name={user.displayName}
                  role={user.email}
                  avatarUrl={user.avatarUrl || undefined}
                  initials={user.shortName}
                  className="min-w-0 flex-1"
                />
                <ChevronUp className="mr-3 h-4 w-4 shrink-0 text-muted-foreground" />
              </div>
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            align="end"
            side="right"
            sideOffset={8}
            className="w-64"
          >
            <DropdownMenuLabel className="font-normal">
              <div className="flex flex-col gap-1">
                <span className="truncate text-sm font-medium text-foreground">
                  {user.displayName}
                </span>
                <span className="truncate text-xs text-muted-foreground">
                  {user.email}
                </span>
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem asChild>
              <Link href="/settings" onClick={onNavigate} className="gap-2">
                <Settings className="h-4 w-4" />
                Ayarlar
              </Link>
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <form action={signOut}>
              <DropdownMenuItem asChild>
                <button type="submit" className="w-full gap-2">
                  <LogOut className="h-4 w-4" />
                  Çıkış yap
                </button>
              </DropdownMenuItem>
            </form>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarFooter>

      <SidebarTrigger className="hidden" />
    </Sidebar>
  );
}