"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LogOut,
  PanelLeftClose,
  PanelLeftOpen,
  Truck,
  X,
} from "lucide-react";
import { useNavItems, type NavItem } from "@/features/navigation";
import { useSession } from "@/features/auth/session";
import { useI18n, useT } from "@/i18n";
import { cn } from "@/lib/cn";

function GroupLabel({ label, collapsed }: { label: string; collapsed?: boolean }) {
  if (collapsed) return null;
  return (
    <li className="mt-5 mb-1 px-3 text-[11px] font-semibold uppercase tracking-wider text-white/40">
      {label}
    </li>
  );
}

function KapitanoMark({ className }: { className?: string }) {
  return (
    <span
      aria-hidden
      className={cn(
        "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary-hover text-primary-foreground shadow-sm",
        className,
      )}
    >
      <Truck className="h-4.5 w-4.5" strokeWidth={2.2} />
    </span>
  );
}

export function Sidebar({
  collapsed = false,
  onToggleCollapsed,
}: {
  collapsed?: boolean;
  onToggleCollapsed?: () => void;
}) {
  const t = useT();
  const { dir } = useI18n();
  const pathname = usePathname();
  const { signOut } = useSession();
  const groups = useNavItems();

  const isActive = (item: NavItem) =>
    item.exact ? pathname === item.href : pathname.startsWith(item.href);

  const runPrefetch = (item: NavItem) => item.prefetch?.();

  const renderItems = (items: NavItem[]) =>
    items
      .filter((item) => item.visible())
      .map((item) => {
        const active = isActive(item);
        const Icon = item.icon;
        return (
          <li key={item.href}>
            <Link
              href={item.href}
              title={collapsed ? item.label : undefined}
              onMouseEnter={() => runPrefetch(item)}
              onFocus={() => runPrefetch(item)}
              className={cn(
                "group flex items-center rounded-lg py-2 text-sm font-medium transition-colors",
                collapsed ? "justify-center" : "gap-3 px-3",
                active
                  ? "bg-white/10 text-white shadow-inner"
                  : "text-white/70 hover:bg-white/[0.06] hover:text-white",
              )}
              aria-current={active ? "page" : undefined}
            >
              <Icon
                className={cn(
                  "h-[18px] w-[18px] transition-transform group-hover:scale-105",
                  active ? "text-accent" : "text-inherit",
                )}
                aria-hidden
              />
              <span className={cn(collapsed && "sr-only")}>{item.label}</span>
            </Link>
          </li>
        );
      });

  return (
    <div
      className={cn(
        "flex h-full flex-col bg-gradient-to-b from-[#120e3c] via-[#1b1255] to-[#0d0a2e] text-white transition-[width] duration-200",
        collapsed ? "w-[68px]" : "w-[260px]",
      )}
      dir={dir}
    >
      <div className={cn("flex shrink-0 items-center gap-2.5 pt-6 pb-5", collapsed ? "justify-center px-0" : "px-5")}>
        <KapitanoMark />
        {!collapsed ? (
          <div className="leading-tight">
            <p className="text-sm font-bold tracking-wide">{t("common.appName")}</p>
            <p className="text-[11px] text-white/50">{t("common.appTagline")}</p>
          </div>
        ) : null}
      </div>
      <nav className="flex-1 overflow-y-auto px-3 pb-6" aria-label="Primary">
        <ul className="list-none space-y-0.5">
          <li
            className={cn(
              "mb-1 mt-1 px-3 text-[11px] font-semibold uppercase tracking-wider text-white/40",
              collapsed && "sr-only",
            )}
          >
            {groups[0]?.label ?? t("nav.operations")}
          </li>
          {renderItems(groups[0]?.items ?? [])}
          <GroupLabel label={groups[1]?.label ?? t("nav.administration")} collapsed={collapsed} />
          {renderItems(groups[1]?.items ?? [])}
        </ul>
      </nav>
      {onToggleCollapsed ? (
        <div className="shrink-0 space-y-1 border-t border-white/10 p-3">
          <button
            type="button"
            onClick={onToggleCollapsed}
            aria-expanded={!collapsed}
            aria-label={collapsed ? t("nav.expand") : t("nav.collapse")}
            title={collapsed ? t("nav.expand") : t("nav.collapse")}
            className={cn(
              "flex w-full items-center rounded-lg py-2 text-sm font-medium text-white/70 transition-colors hover:bg-white/[0.06] hover:text-white",
              collapsed ? "justify-center px-0" : "justify-start px-3",
            )}
          >
            {collapsed ? (
              <PanelLeftOpen className="h-[18px] w-[18px]" aria-hidden />
            ) : (
              <PanelLeftClose className="h-[18px] w-[18px]" aria-hidden />
            )}
          </button>
          <button
            type="button"
            onClick={() => void signOut()}
            title={collapsed ? t("auth.signOut") : undefined}
            className={cn(
              "group flex items-center rounded-lg py-2 text-sm font-medium text-white/70 transition-colors hover:bg-white/[0.06] hover:text-white",
              collapsed ? "justify-center px-0" : "gap-3 px-3",
            )}
          >
            <LogOut className="h-[18px] w-[18px] transition-transform group-hover:scale-105" aria-hidden />
            <span className={cn(collapsed && "sr-only")}>{t("auth.signOut")}</span>
          </button>
        </div>
      ) : null}
    </div>
  );
}

export function MobileSidebar({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) {
  const t = useT();
  return (
    <div
      className={cn(
        "fixed inset-0 z-40 lg:hidden",
        open ? "" : "pointer-events-none",
      )}
      aria-hidden={!open}
    >
      <div
        className={cn(
          "absolute inset-0 bg-[#120e3c]/60 backdrop-blur-sm transition-opacity",
          open ? "opacity-100" : "opacity-0",
        )}
        onClick={onClose}
      />
      <aside
        className={cn(
          "absolute inset-y-0 start-0 w-[280px] transition-transform duration-200",
          open ? "translate-x-0 rtl:translate-x-0" : "-translate-x-full rtl:translate-x-full",
        )}
      >
        <Sidebar />
        <button
          type="button"
          onClick={onClose}
          className="absolute end-3 top-4 rounded-md p-1.5 text-white/70 hover:bg-white/10 hover:text-white"
          aria-label={t("common.close")}
        >
          <X className="h-5 w-5" />
        </button>
      </aside>
    </div>
  );
}