"use client";

import { Layout, Menu } from "antd";
import type { MenuProps } from "antd";
import {
  ApiOutlined,
  AppstoreOutlined,
  CloudOutlined,
  DashboardOutlined,
  DatabaseOutlined,
  FileTextOutlined,
  GatewayOutlined,
  GlobalOutlined,
  KeyOutlined,
  LockOutlined,
  NodeIndexOutlined,
  PlusCircleOutlined,
  RadarChartOutlined,
  SafetyCertificateOutlined,
  SecurityScanOutlined,
  SettingOutlined,
  SyncOutlined,
  ToolOutlined,
  UnorderedListOutlined,
} from "@ant-design/icons";
import Link from "next/link";
import { usePathname } from "next/navigation";
import type { ReactNode } from "react";

import { useAuth } from "@/lib/hooks/use-auth";
import { usePlatformBranding } from "@/lib/branding/platform-branding";

const { Sider } = Layout;

type MenuItemConfig = {
  key: string;
  icon?: ReactNode;
  label: string;
  requiredPermission?: string;
  children?: MenuItemConfig[];
};

const menuItems: MenuItemConfig[] = [
  { key: "/dashboard", icon: <AppstoreOutlined />, label: "Overview" },
  {
    key: "caasm",
    icon: <CloudOutlined />,
    label: "CAASM",
    requiredPermission: "caasm:view_assets",
    children: [
      { key: "/dashboard/caasm/overview", icon: <DashboardOutlined />, label: "Overview" },
      { key: "/dashboard/caasm/assets", icon: <DatabaseOutlined />, label: "Assets" },
      { key: "/dashboard/caasm/ip-assets", icon: <NodeIndexOutlined />, label: "IP Assets", requiredPermission: "caasm:view_assets" },
      { key: "/dashboard/caasm/api-assets", icon: <ApiOutlined />, label: "API Assets", requiredPermission: "caasm:view_assets" },
      { key: "/dashboard/caasm/ports", icon: <GatewayOutlined />, label: "Ports" },
      { key: "/dashboard/caasm/domains", icon: <GlobalOutlined />, label: "Domains" },
      { key: "/dashboard/caasm/sync-jobs", icon: <SyncOutlined />, label: "Sync Jobs" },
      { key: "/dashboard/caasm/config", icon: <SettingOutlined />, label: "Configuration", requiredPermission: "caasm:manage_assets" },
    ],
  },
  {
    key: "scans",
    icon: <RadarChartOutlined />,
    label: "Scans",
    requiredPermission: "scan:view_batches",
    children: [
      {
        key: "/dashboard/scans/port-exposure",
        icon: <GatewayOutlined />,
        label: "Port Exposure",
        requiredPermission: "scan:view_batches",
      },
    ],
  },
  {
    key: "vulnerabilities",
    icon: <SecurityScanOutlined />,
    label: "Vulnerabilities",
    children: [
      {
        key: "/dashboard/vulnerabilities/list",
        icon: <UnorderedListOutlined />,
        label: "Vulnerability List",
        requiredPermission: "vuln:view_findings",
      },
      {
        key: "/dashboard/vulnerabilities/submit",
        icon: <PlusCircleOutlined />,
        label: "Submit Vulnerability",
        requiredPermission: "vuln:submit_findings",
      },
      {
        key: "/dashboard/vulnerabilities/config",
        icon: <ToolOutlined />,
        label: "Configuration",
        requiredPermission: "vuln:manage_findings",
      },
    ],
  },
  {
    key: "openapi",
    icon: <ApiOutlined />,
    label: "OpenAPI",
    requiredPermission: "agent:manage_own_keys",
    children: [
      { key: "/dashboard/api-keys", icon: <KeyOutlined />, label: "API Keys", requiredPermission: "agent:manage_own_keys" },
      { key: "/dashboard/openapi/docs", icon: <FileTextOutlined />, label: "API Docs", requiredPermission: "agent:manage_own_keys" },
    ],
  },
  { key: "/dashboard/systems/users", icon: <LockOutlined />, label: "User Access", requiredPermission: "auth:manage_users" },
  { key: "/dashboard/systems/settings", icon: <SettingOutlined />, label: "Settings", requiredPermission: "system:manage_settings" },
  { key: "/dashboard/logs/audit", icon: <RadarChartOutlined />, label: "Logs", requiredPermission: "audit:view_logs" },
];

type SidebarProps = {
  collapsed: boolean;
  onCollapse: (collapsed: boolean) => void;
};

function filterByPermission(items: MenuItemConfig[], hasPermission: (perm: string) => boolean): MenuItemConfig[] {
  return items
    .map((item) => {
      if (item.children) {
        const children = filterByPermission(item.children, hasPermission);
        return { ...item, children };
      }
      return item;
    })
    .filter((item) => {
      if (item.children && item.children.length > 0) {
        return !item.requiredPermission || hasPermission(item.requiredPermission);
      }
      return !item.requiredPermission || hasPermission(item.requiredPermission);
    })
    .map((item) => {
      if (item.children) {
        return {
          ...item,
          children: item.children.filter((child) => !child.requiredPermission || hasPermission(child.requiredPermission)),
        };
      }
      return item;
    })
    .filter((item) => (item.children ? item.children.length > 0 || (!item.requiredPermission || hasPermission(item.requiredPermission)) : true));
}

function flatten(items: MenuItemConfig[]): MenuItemConfig[] {
  return items.flatMap((item) => (item.children ? flatten(item.children) : item));
}

function toMenuItems(items: MenuItemConfig[]): Required<MenuProps>["items"] {
  return items.map((item) => {
    if (item.children && item.children.length > 0) {
      return {
        key: item.key,
        icon: item.icon,
        label: item.label,
        children: toMenuItems(item.children),
      };
    }
    return {
      key: item.key,
      icon: item.icon,
      label: <Link href={item.key}>{item.label}</Link>,
    };
  });
}

export function AppSidebar({ collapsed, onCollapse }: SidebarProps) {
  const pathname = usePathname();
  const { hasPermission } = useAuth();
  const { branding } = usePlatformBranding();

  const displayName = branding?.display_name?.trim() || "Cloud Security Center";
  const logoUrl = branding?.logo_url?.trim();
  const brandTitle = displayName;
  const brandSubtitle = "Security Workspace";

  const initials = displayName
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((part) => part[0]?.toUpperCase())
    .join("") || "SC";

  const visibleItems = filterByPermission(menuItems, hasPermission);
  const flattenedItems = flatten(visibleItems);
  const selectedLeaf = flattenedItems
    .filter((item) => pathname?.startsWith(item.key))
    .sort((a, b) => b.key.length - a.key.length)[0];

  const selectedKeys = selectedLeaf ? [selectedLeaf.key] : [];
  const openKeys = visibleItems
    .filter((item) => item.children?.some((child) => selectedLeaf && child.key === selectedLeaf.key))
    .map((item) => item.key);

  return (
    <Sider
      className="app-sidebar"
      width={280}
      theme="light"
      breakpoint="lg"
      collapsedWidth={80}
      collapsible
      collapsed={collapsed}
      onCollapse={(value) => onCollapse(value)}
      onBreakpoint={(broken) => onCollapse(broken)}
      style={{
        display: "flex",
        flexDirection: "column",
        height: "100vh",
        background:
          "linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%)",
        borderRight: "1px solid rgba(15, 23, 42, 0.08)",
      }}
    >
      <div
        className="app-sidebar__brand"
        style={{
          minHeight: 76,
          display: "flex",
          alignItems: "center",
          padding: collapsed ? "16px 12px 12px" : "16px 12px 12px",
          gap: 14,
          flexShrink: 0,
          flexDirection: "column",
        }}
      >
        <div
          style={{
            width: "100%",
            display: "flex",
            alignItems: "center",
            gap: 14,
            minWidth: 0,
          }}
        >
          {logoUrl ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={logoUrl}
              alt={displayName}
              style={{
                width: 36,
                height: 36,
                objectFit: "contain",
                borderRadius: 12,
                flexShrink: 0,
                background: "rgba(255, 255, 255, 0.92)",
                border: "1px solid rgba(59, 130, 246, 0.14)",
                padding: 6,
                boxShadow: "0 10px 24px rgba(15, 23, 42, 0.08)",
              }}
            />
          ) : (
            <span
              className="app-sidebar__brand-badge"
              aria-hidden
              style={{
                width: 36,
                height: 36,
                display: "inline-flex",
                alignItems: "center",
                justifyContent: "center",
                borderRadius: 12,
                background: "linear-gradient(145deg, #2284f6 0%, #35c5c7 100%)",
                color: "#fff",
                fontWeight: 700,
                fontSize: 13,
                letterSpacing: "0.02em",
                flexShrink: 0,
                position: "relative",
                boxShadow: "0 12px 24px rgba(34, 132, 246, 0.22)",
                border: "1px solid rgba(255,255,255,0.22)",
              }}
            >
              <SafetyCertificateOutlined
                style={{
                  position: "absolute",
                  top: -5,
                  right: -5,
                  fontSize: 11,
                  color: "#0f172a",
                  background: "#f8fafc",
                  borderRadius: "50%",
                  padding: 2,
                  boxShadow: "0 4px 10px rgba(15, 23, 42, 0.12)",
                }}
              />
              {initials}
            </span>
          )}
          {collapsed ? null : (
            <div
              style={{
                flex: 1,
                minWidth: 0,
              }}
            >
              <div
                title={brandTitle}
                style={{
                  fontSize: 14,
                  lineHeight: 1.2,
                  fontWeight: 700,
                  color: "#111827",
                  whiteSpace: "nowrap",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                }}
              >
                {brandTitle}
              </div>
              <div
                style={{
                  marginTop: 4,
                  fontSize: 11,
                  lineHeight: 1.2,
                  fontWeight: 600,
                  letterSpacing: "0.06em",
                  textTransform: "uppercase",
                  color: "#64748b",
                  whiteSpace: "nowrap",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                }}
              >
                {brandSubtitle}
              </div>
            </div>
          )}
        </div>
        <div
          aria-hidden
          style={{
            width: "100%",
            height: 1,
            background: "rgba(15, 23, 42, 0.06)",
            borderRadius: 999,
          }}
        />
      </div>
      <div
        style={{
          flex: 1,
          minHeight: 0,
          overflowY: "auto",
          overflowX: "hidden",
          padding: collapsed ? "8px 10px 56px" : "10px 12px 56px",
        }}
      >
        <Menu
          className="app-sidebar__menu"
          mode="inline"
          inlineIndent={20}
          selectedKeys={selectedKeys}
          defaultOpenKeys={openKeys}
          items={toMenuItems(visibleItems)}
          style={{ background: "transparent", borderInlineEnd: "none" }}
        />
      </div>
      <style jsx global>{`
        .app-sidebar .ant-layout-sider-children {
          display: flex;
          min-height: 0;
          flex-direction: column;
        }

        .app-sidebar .ant-layout-sider-trigger {
          height: 48px;
          border-top: 1px solid rgba(15, 23, 42, 0.06);
          background: rgba(248, 250, 252, 0.96);
          color: #475569;
          backdrop-filter: blur(8px);
        }

        .app-sidebar__menu {
          background: transparent !important;
        }

        .app-sidebar__menu .ant-menu-item,
        .app-sidebar__menu .ant-menu-submenu-title {
          height: 44px;
          margin: 4px 0;
          border-radius: 12px;
          padding-inline: 14px !important;
          color: #334155;
          font-weight: 500;
        }

        .app-sidebar__menu .ant-menu-item .ant-menu-item-icon,
        .app-sidebar__menu .ant-menu-submenu-title .ant-menu-item-icon,
        .app-sidebar__menu .ant-menu-submenu-title .anticon {
          min-width: 18px;
          font-size: 16px;
          color: #475569;
        }

        .app-sidebar__menu .ant-menu-item:hover,
        .app-sidebar__menu .ant-menu-submenu-title:hover {
          background: rgba(37, 99, 235, 0.08);
          color: #0f172a;
        }

        .app-sidebar__menu .ant-menu-item-selected {
          background: linear-gradient(90deg, rgba(37, 99, 235, 0.14) 0%, rgba(37, 99, 235, 0.08) 100%);
          color: #0f172a;
          box-shadow: inset 3px 0 0 #2563eb;
        }

        .app-sidebar__menu .ant-menu-item-selected .ant-menu-item-icon,
        .app-sidebar__menu .ant-menu-item-selected a,
        .app-sidebar__menu .ant-menu-item-selected .anticon {
          color: #0f172a;
        }

        .app-sidebar__menu .ant-menu-item a {
          color: inherit;
        }

        .app-sidebar__menu .ant-menu-sub.ant-menu-inline {
          background: transparent;
        }

        .app-sidebar__menu .ant-menu-sub.ant-menu-inline .ant-menu-item {
          margin-left: 10px;
          padding-inline: 18px 14px !important;
          background: rgba(148, 163, 184, 0.08);
        }

        .app-sidebar__menu .ant-menu-sub.ant-menu-inline .ant-menu-item:hover {
          background: rgba(37, 99, 235, 0.12);
        }

        .app-sidebar__menu .ant-menu-sub.ant-menu-inline .ant-menu-item-selected {
          background: linear-gradient(90deg, rgba(37, 99, 235, 0.18) 0%, rgba(37, 99, 235, 0.1) 100%);
        }

        .app-sidebar__menu .ant-menu-submenu-selected > .ant-menu-submenu-title {
          color: #0f172a;
        }

        .app-sidebar__menu .ant-menu-inline-collapsed > .ant-menu-item,
        .app-sidebar__menu .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
          padding-inline: calc(50% - 18px) !important;
        }

        .app-sidebar__menu::-webkit-scrollbar {
          width: 8px;
        }

        .app-sidebar__menu::-webkit-scrollbar-thumb {
          background: rgba(148, 163, 184, 0.3);
          border-radius: 999px;
        }
      `}</style>
    </Sider>
  );
}