"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 { portalSidebarData } from "@/config/portal-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 PortalShellProps = {
  children: React.ReactNode;
  user: {
    email: string;
    displayName: string;
    shortName: string;
    avatarUrl: string | null;
  };
  progress?: number;
};

export function PortalShell({ children, user, progress }: PortalShellProps) {
  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} progress={progress} />
        </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}
                progress={progress}
                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">
            <Link href="/portal" 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
              />
              <span className="hidden sm:inline">Cognis Portal</span>
            </Link>
            <div className="flex items-center gap-4">
              <Button
                type="button"
                variant="outline"
                className="h-9 w-9 p-0 lg:hidden"
                onClick={() => setIsMobileSidebarOpen(true)}
              >
                <Menu className="h-4 w-4" />
              </Button>
            </div>
          </header>

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

function AppSidebar({
  pathname,
  user,
  progress = 0,
  onNavigate,
}: {
  pathname: string;
  user: PortalShellProps["user"];
  progress?: number;
  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">
        <div className="flex flex-col gap-2">
          <div className="flex items-center justify-between text-sm font-medium">
            <span className="text-muted-foreground">Aktif İlerleme</span>
            <span className="text-primary">%{progress}</span>
          </div>
          <div className="h-2 w-full bg-secondary rounded-full overflow-hidden">
            <div 
              className="h-full bg-primary transition-all duration-500" 
              style={{ width: `${progress}%` }} 
            />
          </div>
        </div>
      </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">
        {portalSidebarData.map((group, groupIndex) => (
          <div key={group.title}>
            <SidebarSection title={group.title} defaultOpen className="mb-0">
              <SidebarMenu>
                {group.items.map((item) => {
                  const isActive =
                    item.href === "/portal"
                      ? pathname === "/portal"
                      : 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 < portalSidebarData.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="/portal/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>
  );
}