"use client";

import { useTranslations } from "next-intl";
import { Link, usePathname } from "@/i18n/navigation";
import type { Session } from "next-auth";
import {
  LayoutDashboard,
  Users,
  UserCheck,
  Shield,
  UserCircle,
  Settings,
  Building2,
  GitBranch,
  MapPin,
  CalendarDays,
  BookOpen,
  MonitorPlay,
  X,
  PanelLeftClose,
  PanelLeftOpen,
} from "lucide-react";
import BrandLogo from "@/components/brand/BrandLogo";
import { hasEffectivePermission, usesBusinessPanelNav } from "@/lib/session-utils";

type NavLabelKey = "dashboard" | "users" | "employees" | "roles" | "profile" | "settings" | "help" | "businesses" | "businessPanel" | "businessLocations" | "businessFranchises" | "businessStaff" | "businessRoles" | "businessMenuBoards" | "businessEvents" | "businessHelp";
type SectionKey = "overview" | "administration" | "people" | "system" | "account" | "business" | "businessStructure";

interface NavItem {
  href:
    | "/dashboard"
    | "/dashboard/users"
    | "/dashboard/employees"
    | "/dashboard/roles"
    | "/dashboard/profile"
    | "/dashboard/help"
    | "/dashboard/settings"
    | "/dashboard/businesses"
    | "/dashboard/business"
    | "/dashboard/business/locations"
    | "/dashboard/business/franchises"
    | "/dashboard/business/staff"
    | "/dashboard/business/roles"
    | "/dashboard/business/menu-boards"
    | "/dashboard/business/events"
    | "/dashboard/business/help";
  labelKey: NavLabelKey;
  icon: React.ReactNode;
  permission?: string;
  businessAccess?: readonly string[];
}

interface NavGroup {
  sectionKey: SectionKey;
  items: NavItem[];
}

const NAV_GROUPS: NavGroup[] = [
  {
    sectionKey: "overview",
    items: [
      {
        href: "/dashboard",
        labelKey: "dashboard",
        icon: <LayoutDashboard className="h-[18px] w-[18px] shrink-0" />,
      },
    ],
  },
  {
    sectionKey: "administration",
    items: [
      {
        href: "/dashboard/businesses",
        labelKey: "businesses",
        icon: <Building2 className="h-[18px] w-[18px] shrink-0" />,
        permission: "BUSINESSES_VIEW",
      },
    ],
  },
  {
    sectionKey: "people",
    items: [
      {
        href: "/dashboard/employees",
        labelKey: "employees",
        icon: <UserCheck className="h-[18px] w-[18px] shrink-0" />,
        permission: "EMPLOYEES_VIEW",
      },
      {
        href: "/dashboard/users",
        labelKey: "users",
        icon: <Users className="h-[18px] w-[18px] shrink-0" />,
        permission: "USERS_VIEW",
      },
    ],
  },
  {
    sectionKey: "system",
    items: [
      {
        href: "/dashboard/roles",
        labelKey: "roles",
        icon: <Shield className="h-[18px] w-[18px] shrink-0" />,
        permission: "ROLES_VIEW",
      },
      {
        href: "/dashboard/settings",
        labelKey: "settings",
        icon: <Settings className="h-[18px] w-[18px] shrink-0" />,
        permission: "SETTINGS_VIEW",
      },
    ],
  },
  {
    sectionKey: "account",
    items: [
      {
        href: "/dashboard/help",
        labelKey: "help",
        icon: <BookOpen className="h-[18px] w-[18px] shrink-0" />,
      },
      {
        href: "/dashboard/profile",
        labelKey: "profile",
        icon: <UserCircle className="h-[18px] w-[18px] shrink-0" />,
      },
    ],
  },
];

const BUSINESS_PANEL_GROUPS: NavGroup[] = [
  {
    sectionKey: "overview",
    items: [
      {
        href: "/dashboard/business",
        labelKey: "businessPanel",
        icon: <LayoutDashboard className="h-[18px] w-[18px] shrink-0" />,
      },
    ],
  },
  {
    sectionKey: "businessStructure",
    items: [
      {
        href: "/dashboard/business/menu-boards",
        labelKey: "businessMenuBoards",
        icon: <MonitorPlay className="h-[18px] w-[18px] shrink-0" />,
        businessAccess: ["VIEW_MENU_BOARDS", "MANAGE_MENU_BOARDS"],
      },
      {
        href: "/dashboard/business/locations",
        labelKey: "businessLocations",
        icon: <MapPin className="h-[18px] w-[18px] shrink-0" />,
        businessAccess: ["VIEW_LOCATIONS", "MANAGE_LOCATIONS"],
      },
      {
        href: "/dashboard/business/franchises",
        labelKey: "businessFranchises",
        icon: <GitBranch className="h-[18px] w-[18px] shrink-0" />,
        businessAccess: ["VIEW_FRANCHISE", "MANAGE_FRANCHISE"],
      },
      {
        href: "/dashboard/business/events",
        labelKey: "businessEvents",
        icon: <CalendarDays className="h-[18px] w-[18px] shrink-0" />,
        businessAccess: ["VIEW_EVENTS", "MANAGE_EVENTS"],
      },
    ],
  },
  {
    sectionKey: "people",
    items: [
      {
        href: "/dashboard/business/staff",
        labelKey: "businessStaff",
        icon: <Users className="h-[18px] w-[18px] shrink-0" />,
        businessAccess: ["VIEW_STAFF", "MANAGE_STAFF"],
      },
      {
        href: "/dashboard/business/roles",
        labelKey: "businessRoles",
        icon: <Shield className="h-[18px] w-[18px] shrink-0" />,
        businessAccess: ["VIEW_ROLES", "MANAGE_ROLES"],
      },
    ],
  },
  {
    sectionKey: "account",
    items: [
      {
        href: "/dashboard/business/help",
        labelKey: "businessHelp",
        icon: <BookOpen className="h-[18px] w-[18px] shrink-0" />,
      },
      {
        href: "/dashboard/profile",
        labelKey: "profile",
        icon: <UserCircle className="h-[18px] w-[18px] shrink-0" />,
      },
    ],
  },
];

interface SidebarProps {
  session: Session;
  collapsed?: boolean;
  onToggleCollapse?: () => void;
  mobileOpen?: boolean;
  onMobileClose?: () => void;
}

function useVisibleGroups(session: Session) {
  const user = session.user as {
    permissions?: string[];
    impersonatingBusiness?: boolean;
    businessContext?: { permissions: string[] };
  };

  if (usesBusinessPanelNav(session)) {
    const perms = user.businessContext?.permissions ?? [];
    const canSeeBusiness = (item: NavItem) => {
      if (!item.businessAccess?.length) return true;
      return item.businessAccess.some((perm) => perms.includes(perm));
    };

    return BUSINESS_PANEL_GROUPS.map((group) => ({
      ...group,
      items: group.items.filter(canSeeBusiness),
    })).filter((group) => group.items.length > 0);
  }

  const canSee = (item: NavItem) => {
    if (!item.permission) return true;
    return hasEffectivePermission(session, item.permission);
  };

  return NAV_GROUPS.map((group) => ({
    ...group,
    items: group.items.filter(canSee),
  })).filter((group) => group.items.length > 0);
}

function SidebarBrand({ session, collapsed }: { session: Session; collapsed?: boolean }) {
  const t = useTranslations("businessPanel");
  const businessContext = (session.user as {
    impersonatingBusiness?: boolean;
    businessContext?: { name: string; logo: string | null };
  }).businessContext;

  if (businessContext) {
    return (
      <div
        className={`flex shrink-0 items-center border-b border-[var(--border)] ${
          collapsed ? "h-14 justify-center px-2" : "gap-3 px-4 py-3"
        }`}
      >
        <div className="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-sky-500/10 text-sky-400">
          {businessContext.logo ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={businessContext.logo} alt="" className="h-full w-full object-cover" />
          ) : (
            <Building2 className="h-4 w-4" />
          )}
        </div>
        {!collapsed && (
          <div className="min-w-0">
            <p className="truncate text-sm font-semibold text-[var(--text)]">{businessContext.name}</p>
            <p className="truncate text-[10px] text-[var(--text-faint)]">{t("panelLabel")}</p>
          </div>
        )}
      </div>
    );
  }

  return (
    <div
      className={`flex h-14 shrink-0 items-center border-b border-[var(--border)] ${
        collapsed ? "justify-center px-2" : "justify-center px-2"
      }`}
    >
      <BrandLogo size="sidebar" compact={collapsed} />
    </div>
  );
}

function NavLink({
  item,
  collapsed,
  onNavigate,
}: {
  item: NavItem;
  collapsed?: boolean;
  onNavigate?: () => void;
}) {
  const t = useTranslations("nav");
  const pathname = usePathname();
  const EXACT_MATCH_HREFS = ["/dashboard", "/dashboard/business"] as const;
  const isActive =
    pathname === item.href ||
    (!EXACT_MATCH_HREFS.includes(item.href as (typeof EXACT_MATCH_HREFS)[number]) &&
      pathname.startsWith(item.href));
  const label = t(item.labelKey);

  return (
    <Link
      href={item.href}
      onClick={onNavigate}
      title={collapsed ? label : undefined}
      aria-label={label}
      className={`group relative flex cursor-pointer items-center rounded-lg text-sm font-medium transition-colors duration-150 ${
        collapsed ? "justify-center px-2 py-2.5" : "gap-3 px-3 py-2.5"
      } ${
        isActive
          ? "bg-[var(--bg-hover)] text-[var(--text)]"
          : "text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text)]"
      }`}
    >
      {isActive && (
        <span
          className={`absolute rounded-full bg-[var(--accent)] ${
            collapsed
              ? "inset-x-2 bottom-0 h-0.5"
              : "inset-y-1.5 start-0 w-0.5"
          }`}
          aria-hidden
        />
      )}
      {item.icon}
      {!collapsed && <span className="truncate">{label}</span>}
    </Link>
  );
}

function SidebarNav({
  session,
  collapsed,
  onNavigate,
}: {
  session: Session;
  collapsed?: boolean;
  onNavigate?: () => void;
}) {
  const t = useTranslations("nav");
  const groups = useVisibleGroups(session);

  return (
    <nav className="flex flex-1 flex-col overflow-y-auto p-2 sm:p-3">
      <div className="flex-1 space-y-4">
        {groups.map((group, groupIndex) => (
          <div key={group.sectionKey}>
            {!collapsed && (
              <p className="mb-1.5 px-3 text-[10px] font-semibold uppercase tracking-widest text-[var(--text-faint)]">
                {t(`sections.${group.sectionKey}`)}
              </p>
            )}
            {collapsed && groupIndex > 0 && (
              <div className="mx-2 mb-1.5 border-t border-[var(--border-subtle)]" aria-hidden />
            )}
            <div className="space-y-0.5">
              {group.items.map((item) => (
                <NavLink
                  key={item.href}
                  item={item}
                  collapsed={collapsed}
                  onNavigate={onNavigate}
                />
              ))}
            </div>
          </div>
        ))}
      </div>
    </nav>
  );
}

function SidebarCollapseToggle({
  collapsed,
  onToggle,
}: {
  collapsed: boolean;
  onToggle: () => void;
}) {
  const tc = useTranslations("common");

  return (
    <div className="shrink-0 border-t border-[var(--border)] p-2">
      <button
        type="button"
        onClick={onToggle}
        aria-label={collapsed ? tc("expandSidebar") : tc("collapseSidebar")}
        title={collapsed ? tc("expandSidebar") : tc("collapseSidebar")}
        className={`flex w-full cursor-pointer items-center rounded-lg text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text)] ${
          collapsed ? "justify-center px-2 py-2.5" : "gap-3 px-3 py-2.5"
        }`}
      >
        {collapsed ? (
          <PanelLeftOpen className="h-[18px] w-[18px] shrink-0" />
        ) : (
          <>
            <PanelLeftClose className="h-[18px] w-[18px] shrink-0" />
            <span className="truncate text-sm font-medium">{tc("collapseSidebar")}</span>
          </>
        )}
      </button>
    </div>
  );
}

function DesktopSidebar({
  session,
  collapsed,
  onToggleCollapse,
}: {
  session: Session;
  collapsed: boolean;
  onToggleCollapse: () => void;
}) {
  return (
    <aside
      className={`hidden shrink-0 flex-col border-e border-[var(--border)] bg-[var(--bg-elevated)] transition-[width] duration-200 ease-out lg:flex ${
        collapsed ? "w-[68px]" : "w-[240px]"
      }`}
    >
      <SidebarBrand session={session} collapsed={collapsed} />
      <SidebarNav session={session} collapsed={collapsed} />
      <SidebarCollapseToggle collapsed={collapsed} onToggle={onToggleCollapse} />
    </aside>
  );
}

function MobileSidebar({
  session,
  open,
  onClose,
}: {
  session: Session;
  open: boolean;
  onClose: () => void;
}) {
  const tc = useTranslations("common");

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-50 lg:hidden">
      <button
        type="button"
        aria-label={tc("closeMenu")}
        className="absolute inset-0 cursor-pointer bg-black/60 backdrop-blur-[2px]"
        onClick={onClose}
      />
      <aside className="animate-slide-in-start absolute inset-y-0 start-0 flex w-[min(280px,85vw)] max-w-full flex-col border-e border-[var(--border)] bg-[var(--bg-elevated)] shadow-2xl">
        <div className="flex h-14 shrink-0 items-center justify-between gap-3 border-b border-[var(--border)] px-4">
          <div className="flex min-w-0 flex-1 items-center justify-center px-1">
            <BrandLogo size="sidebar" />
          </div>
          <button
            type="button"
            onClick={onClose}
            aria-label={tc("closeMenu")}
            className="flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-md text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text)]"
          >
            <X className="h-5 w-5" />
          </button>
        </div>
        <SidebarNav session={session} onNavigate={onClose} />
      </aside>
    </div>
  );
}

export default function Sidebar({
  session,
  collapsed = false,
  onToggleCollapse,
  mobileOpen = false,
  onMobileClose,
}: SidebarProps) {
  return (
    <>
      <DesktopSidebar
        session={session}
        collapsed={collapsed}
        onToggleCollapse={onToggleCollapse ?? (() => {})}
      />
      <MobileSidebar session={session} open={mobileOpen} onClose={onMobileClose ?? (() => {})} />
    </>
  );
}