import { useEffect, useState } from "react";
import { Link, useLocation } from "react-router-dom";
import {
  LayoutDashboard,
  Building2,
  Users,
  Package,
  FileText,
  Settings,
  HelpCircle,
  X,
  Shield,
  BadgeCheck,
  GitBranch,
  ChevronDown,
  ChevronRight,
  Bell,
  Paperclip,
} from "lucide-react";

import { cn } from "@/lib/utils";
import { useAppSelector } from "@/hooks/redux-hooks";
import { useAppTheme } from "@/hooks/useAppTheme";
import { AuthenticatedImage } from "@/components/shared";

interface MenuItem {
  icon: React.ComponentType<{ className?: string; strokeWidth?: number }>;
  label: string;
  path?: string;
  isGroup?: boolean;
  children?: Array<{
    label: string;
    path: string;
    requiredPermission?: {
      resource: string;
      action?: string;
    };
  }>;
  requiredPermission?: {
    resource: string;
    action?: string; // If not provided, checks for '*' or 'read'
  };
}

interface SidebarProps {
  isOpen: boolean;
  onClose: () => void;
}

// Super Admin menu items
const superAdminPlatformMenu: MenuItem[] = [
  { icon: LayoutDashboard, label: "Dashboard", path: "/dashboard" },
  { icon: Building2, label: "Tenants", path: "/tenants" },
  // { icon: Users, label: 'User Management', path: '/users' },
  // { icon: Shield, label: 'Roles', path: '/roles' },
  { icon: Package, label: "Modules", path: "/modules" },
];

const superAdminSystemMenu: MenuItem[] = [
  {
    icon: Bell,
    label: "Notifications",
    isGroup: true,
    children: [
      { label: "Notifications List", path: "/notifications" },
      { label: "Master Management", path: "/notification-master" },
      { label: "Global Templates", path: "/notification-templates" },
    ],
  },
  { icon: FileText, label: "Audit Logs", path: "/audit-logs" },
  { icon: Shield, label: "Audit Resources", path: "/audit-resource-types" },
  {
    icon: Settings,
    label: "Settings",
    isGroup: true,
    children: [
      { label: "SMTP Config", path: "/settings/smtp" },
      { label: "Failed Emails", path: "/settings/failed-emails" },
    ],
  },
];

// Tenant Admin menu items
const tenantAdminPlatformMenu: MenuItem[] = [
  { icon: LayoutDashboard, label: "Dashboard", path: "/tenant" },
  {
    icon: Shield,
    label: "Roles",
    path: "/tenant/roles",
    requiredPermission: { resource: "roles" },
  },
  {
    icon: Building2,
    label: "Departments",
    path: "/tenant/departments",
    requiredPermission: { resource: "departments" },
  },
  {
    icon: BadgeCheck,
    label: "Designations",
    path: "/tenant/designations",
    requiredPermission: { resource: "designations" },
  },
  {
    icon: Users,
    label: "Suppliers",
    path: "/tenant/suppliers",
    requiredPermission: { resource: "supplier" },
  },
  {
    icon: Users,
    label: "Users",
    path: "/tenant/users",
    requiredPermission: { resource: "users" },
  },
];

const tenantAdminPlatformServiceMenu: MenuItem[] = [
  {
    icon: Paperclip,
    label: "File Attachments",
    isGroup: true,
    children: [
      {
        label: "Files List",
        path: "/tenant/files",
        requiredPermission: { resource: "files" },
      },
      {
        label: "Storage Dashboard",
        path: "/tenant/files/storage-dashboard",
        requiredPermission: { resource: "files" },
      },
    ],
    requiredPermission: { resource: "files" },
  },
  {
    icon: GitBranch,
    label: "Workflows",
    isGroup: true,
    children: [
      {
        label: "Definitions",
        path: "/tenant/workflows/definitions",
        requiredPermission: { resource: "workflow" },
      },
      {
        label: "Tasks",
        path: "/tenant/workflows/tasks",
        requiredPermission: { resource: "workflow" },
      },
    ],
    requiredPermission: { resource: "workflow" },
  },
  {
    icon: FileText,
    label: "Documents",
    isGroup: true,
    children: [
      {
        label: "Document Lists",
        path: "/tenant/documents",
        requiredPermission: { resource: "document" },
      },
      {
        label: "Create Document",
        path: "/tenant/documents/create",
        requiredPermission: { resource: "document", action: "create" },
      },
      {
        label: "Categories",
        path: "/tenant/documents/categories",
        requiredPermission: { resource: "document" },
      },
      {
        label: "Due for Review",
        path: "/tenant/documents/due-for-review",
        requiredPermission: { resource: "document" },
      },
    ],
    requiredPermission: { resource: "document" },
  },
  { icon: Package, label: "Modules", path: "/tenant/modules" },
];

const tenantAdminSystemMenu: MenuItem[] = [
  {
    icon: Bell,
    label: "Notifications",
    path: "/tenant/notifications",
    requiredPermission: { resource: "notifications" },
  },
  {
    icon: FileText,
    label: "Audit Logs",
    path: "/tenant/audit-logs",
  },
  {
    icon: Settings,
    label: "Settings",
    isGroup: true,
    children: [
      {
        label: "General Settings",
        path: "/tenant/settings",
      },
      {
        label: "Notification Settings",
        path: "/tenant/settings/notifications",
      },
      {
        label: "Notification Templates",
        path: "/tenant/settings/notification-templates",
      },
      {
        label: "SMTP Settings",
        path: "/tenant/settings/smtp",
      },
      {
        label: "Failed Emails",
        path: "/tenant/settings/failed-emails",
      }
    ],
    requiredPermission: { resource: "tenants" },
  },
];

const GroupMenuItem = ({
  item,
  childrenItems,
  location,
  primaryColor,
  secondaryColor,
  onClose,
}: {
  item: MenuItem;
  childrenItems: any[];
  location: any;
  primaryColor: string;
  secondaryColor: string;
  onClose: () => void;
}) => {
  const isChildActive = (path: string) => {
    // Special handling for Document Lists to NOT show as active when sub-actions are active
    if (path === "/tenant/documents") {
      const subActions = ["/create", "/categories", "/due-for-review", "/edit"];
      const isSubActionActive = subActions.some((sub) =>
        location.pathname.startsWith(path + sub),
      );
      if (isSubActionActive) return false;
    }

    // Special handling for Files List to NOT show as active when Storage Dashboard is active
    if (path === "/tenant/files") {
      if (location.pathname.startsWith("/tenant/files/storage-dashboard")) {
        return false;
      }
    }

    return (
      location.pathname === path || location.pathname.startsWith(`${path}/`)
    );
  };
  const isAnyChildActive = childrenItems.some((child) =>
    isChildActive(child.path),
  );
  const [isExpanded, setIsExpanded] = useState(isAnyChildActive);

  useEffect(() => {
    if (isAnyChildActive) setIsExpanded(true);
  }, [isAnyChildActive]);

  const Icon = item.icon;

  return (
    <div className="flex flex-col">
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className={cn(
          "flex items-center justify-between gap-2.5 px-3 py-2 rounded-md transition-all min-h-[44px]",
          isAnyChildActive
            ? "shadow-[0px_2px_8px_0px_rgba(15,23,42,0.15)]"
            : "text-[#0f1724] hover:bg-gray-50",
        )}
        style={
          isAnyChildActive
            ? {
                backgroundColor: primaryColor,
                color: secondaryColor,
              }
            : undefined
        }
      >
        <div className="flex items-center gap-2.5">
          <Icon className="w-4 h-4 shrink-0" />
          <span
            className="text-xs md:text-xs lg:text-[13px] font-medium truncate"
            title={item.label}
          >
            {item.label}
          </span>
        </div>
        {isExpanded ? (
          <ChevronDown className="w-3.5 h-3.5" />
        ) : (
          <ChevronRight className="w-3.5 h-3.5" />
        )}
      </button>

      {isExpanded && (
        <div className="flex flex-col mt-1 mb-1 border-l-2 border-[rgba(0,0,0,0.08)] ml-5 py-1 gap-0.5">
          {childrenItems.map((child) => {
            const isActive = isChildActive(child.path);
            return (
              <Link
                key={child.path}
                to={child.path}
                onClick={() => {
                  if (window.innerWidth < 768) {
                    onClose();
                  }
                }}
                className={cn(
                  "flex items-center px-4 py-2 rounded-r-md text-[13px] font-medium transition-all",
                  isActive
                    ? "text-[#112868] font-bold bg-gray-50"
                    : "text-[#475569] hover:text-[#0f1724] hover:bg-gray-50",
                )}
                style={
                  isActive
                    ? {
                        color: primaryColor,
                      }
                    : undefined
                }
              >
                <span className="truncate" title={child.label}>
                  {child.label}
                </span>
              </Link>
            );
          })}
        </div>
      )}
    </div>
  );
};

export const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
  const { primaryColor, secondaryColor, accentColor, logoUrl } = useAppTheme();
  const location = useLocation();
  const { roles, permissions } = useAppSelector((state) => state.auth);

  // Fetch theme for tenant admin
  const isSuperAdminCheck = () => {
    let rolesArray: string[] = [];
    if (Array.isArray(roles)) {
      rolesArray = roles;
    } else if (typeof roles === "string") {
      try {
        rolesArray = JSON.parse(roles);
      } catch {
        rolesArray = [];
      }
    }
    return rolesArray.includes("super_admin");
  };

  const isSuperAdmin = isSuperAdminCheck();

  // Get role name for display
  const getRoleName = (): string => {
    if (isSuperAdmin) {
      return "Super Admin";
    }
    let rolesArray: string[] = [];
    if (Array.isArray(roles)) {
      rolesArray = roles;
    } else if (typeof roles === "string") {
      try {
        rolesArray = JSON.parse(roles);
      } catch {
        rolesArray = [];
      }
    }
    // Get the first role and format it
    if (rolesArray.length > 0) {
      const role = rolesArray[0];
      // Convert snake_case to Title Case
      return role
        .split("_")
        .map(
          (word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(),
        )
        .join(" ");
    }
    return "User";
  };

  const roleName = getRoleName();

  // Fetch theme if tenant admin
  // if (!isSuperAdmin) {
  //   useTenantTheme();
  // }

  // Helper function to check if user has permission for a resource
  const hasPermission = (
    resource: string,
    requiredAction?: string,
  ): boolean => {
    if (isSuperAdmin) {
      return true; // Super admin has all permissions
    }

    const allowedActions = requiredAction ? [requiredAction] : ["*", "read"];

    return permissions.some((perm) => {
      // Check if resource matches (exact match or wildcard)
      const resourceMatches =
        perm.resource === resource || perm.resource === "*";

      // Check if action matches (exact match or wildcard)
      const actionMatches = allowedActions.some(
        (allowedAction) => perm.action === allowedAction || perm.action === "*",
      );

      return resourceMatches && actionMatches;
    });
  };

  const filterMenuItems = (items: MenuItem[]): MenuItem[] => {
    if (isSuperAdmin) {
      return items;
    }

    return items.filter((item) => {
      if (!item.requiredPermission) {
        return true;
      }

      const hasParentPermission = hasPermission(
        item.requiredPermission.resource,
        item.requiredPermission.action,
      );

      if (!hasParentPermission) return false;

      if (item.isGroup && item.children) {
        // Deep copy children to avoid mutating original menu arrays
        const filteredChildren = item.children.filter((child) => {
          if (!child.requiredPermission) return true;
          return hasPermission(
            child.requiredPermission.resource,
            child.requiredPermission.action,
          );
        });

        // We need to return a new object to avoid issues
        if (filteredChildren.length > 0) {
          (item as any)._filteredChildren = filteredChildren;
          return true;
        }
        return false;
      }

      return true;
    });
  };

  // Select and filter menu items based on role and permissions
  const platformMenu = filterMenuItems(
    isSuperAdmin ? superAdminPlatformMenu : tenantAdminPlatformMenu,
  );
  const platformServiceMenu = filterMenuItems(
    isSuperAdmin ? [] : tenantAdminPlatformServiceMenu,
  );
  const systemMenu = filterMenuItems(
    isSuperAdmin ? superAdminSystemMenu : tenantAdminSystemMenu,
  );

  const MenuSection = ({
    title,
    items,
  }: {
    title: string;
    items: MenuItem[];
  }) => (
    <div className="w-full">
      <div className="flex flex-col gap-1">
        <div className="pb-1 px-2 md:px-2 lg:px-3">
          <div className="text-[10px] md:text-[10px] lg:text-[11px] font-semibold text-[#6b7280] uppercase tracking-[0.88px]">
            {title}
          </div>
        </div>
        <div className="flex flex-col gap-1 mt-1">
          {items.map((item) => {
            if (item.isGroup) {
              const children =
                (item as any)._filteredChildren || item.children || [];
              return (
                <GroupMenuItem
                  key={item.label}
                  item={item}
                  childrenItems={children}
                  location={location}
                  primaryColor={primaryColor}
                  secondaryColor={secondaryColor}
                  onClose={onClose}
                />
              );
            }

            const Icon = item.icon;
            const isTenantDashboardPath = item.path === "/tenant";
            const isActive = isTenantDashboardPath
              ? location.pathname === "/tenant"
              : item.path &&
                (location.pathname === item.path ||
                  location.pathname.startsWith(`${item.path}/`));
            return (
              <Link
                key={item.path}
                to={item.path || "#"}
                onClick={() => {
                  // Close sidebar on mobile when navigating
                  if (window.innerWidth < 768) {
                    onClose();
                  }
                }}
                className={cn(
                  "flex items-center gap-2 md:gap-2 lg:gap-2.5 px-2 md:px-2 lg:px-3 py-2 rounded-md transition-colors min-h-[44px]",
                  isActive
                    ? "shadow-[0px_2px_8px_0px_rgba(15,23,42,0.15)]"
                    : "text-[#0f1724] hover:bg-gray-50",
                )}
                style={
                  isActive
                    ? {
                        backgroundColor: primaryColor,
                        color: secondaryColor,
                      }
                    : undefined
                }
              >
                <Icon className="w-4 h-4 shrink-0" />
                <span
                  className="text-xs md:text-xs lg:text-[13px] font-medium truncate"
                  title={item.label}
                >
                  {item.label}
                </span>
              </Link>
            );
          })}
        </div>
      </div>
    </div>
  );

  return (
    <>
      {/* Mobile Sidebar */}
      <aside
        className={cn(
          "fixed top-0 left-0 h-full bg-white border-r border-[rgba(0,0,0,0.08)] z-50 flex flex-col gap-6 p-4 transition-transform duration-300 ease-in-out md:hidden",
          isOpen ? "translate-x-0" : "-translate-x-full",
        )}
        style={{ width: "280px" }}
      >
        {/* Mobile Header with Close Button */}
        <div className="flex items-center justify-between mb-2">
          <div className="flex gap-3 items-center">
            {!isSuperAdmin && logoUrl ? (
              <AuthenticatedImage
                src={logoUrl}
                alt="Logo"
                className="h-9 w-auto max-w-[180px] object-contain"
              />
            ) : null}
            <div
              className="w-9 h-9 rounded-[10px] flex items-center justify-center shadow-[0px_4px_12px_0px_rgba(15,23,42,0.1)] shrink-0"
              style={{
                display: !isSuperAdmin && logoUrl ? "none" : "flex",
                backgroundColor: primaryColor,
              }}
            >
              <Shield className="w-6 h-6 text-white" strokeWidth={1.67} />
            </div>
            <div className="flex flex-col">
              <div className="text-[18px] font-bold text-[#0f1724] tracking-[-0.36px]">
                {!isSuperAdmin && logoUrl ? "" : "QAssure"}
              </div>
              {!isSuperAdmin && logoUrl ? null : (
                <div
                  className="text-[12px] font-semibold capitalize mt-[7px] -translate-y-1/2"
                  style={{
                    color: accentColor
                  }}
                >
                  {roleName}
                </div>
              )}
            </div>
          </div>
          <button
            onClick={onClose}
            className="w-8 h-8 flex items-center justify-center rounded-md hover:bg-gray-100 transition-colors"
            aria-label="Close menu"
          >
            <X className="w-5 h-5 text-[#0f1724]" />
          </button>
        </div>

        {/* Menu Sections (Only this part should scroll) */}
        <div className="flex-1 overflow-y-auto pr-1 flex flex-col gap-6 custom-scrollbar">
          {/* Platform Menu */}
          <MenuSection title="Platform" items={platformMenu} />
          <MenuSection title="Platform Services" items={platformServiceMenu} />

          {/* System Menu */}
          <MenuSection title="System" items={systemMenu} />
        </div>

        {/* Support Center */}
        <div className="mt-auto">
          <button className="w-full bg-white border border-[rgba(0,0,0,0.08)] rounded-md px-[13px] py-[9px] flex gap-2.5 items-center hover:bg-gray-50 transition-colors min-h-[44px]">
            <HelpCircle className="w-4 h-4 shrink-0 text-[#0f1724]" />
            <span className="text-[13px] font-medium text-[#0f1724]">
              Support Center
            </span>
          </button>
        </div>

        {/* Powered by LTTS */}
        <div className="w-full flex flex-col items-center justify-center gap-0 px-2">
          <p className="text-[10px] font-medium text-[#9ca3af] capitalize leading-normal">
            Powered by
          </p>
          <img
            src="/LTTS.svg"
            alt="L&T Technology Services"
            className="h-6 w-auto max-w-[150px] object-contain"
          />
        </div>
      </aside>

      {/* Desktop Sidebar */}
      <aside className="hidden md:flex bg-white border border-[rgba(0,0,0,0.08)] rounded-xl p-2 md:p-2.5 lg:p-3 xl:p-[17px] w-[160px] md:w-[160px] lg:w-[180px] xl:w-[240px] h-full max-h-screen flex-col gap-3 md:gap-3.5 lg:gap-4 xl:gap-6 shrink-0 overflow-hidden">
        {/* Logo */}
        <div className="w-full md:w-[140px] lg:w-[160px] xl:w-[206px] shrink-0">
          <div className="flex gap-3 items-center px-2">
            {!isSuperAdmin && logoUrl ? (
              <AuthenticatedImage
                src={logoUrl}
                alt="Logo"
                className="h-9 w-auto max-w-[180px] object-contain"
                fallback={
                  <div 
                    className="w-9 h-9 rounded-[10px] flex items-center justify-center shadow-[0px_4px_12px_0px_rgba(15,23,42,0.1)] shrink-0"
                    style={{ backgroundColor: primaryColor }}
                  >
                    <Shield className="w-6 h-6 text-white" strokeWidth={1.67} />
                  </div>
                }
              />
            ) : null}
            <div
              className="w-9 h-9 rounded-[10px] flex items-center justify-center shadow-[0px_4px_12px_0px_rgba(15,23,42,0.1)] shrink-0"
              style={{
                display: !isSuperAdmin && logoUrl ? "none" : "flex",
                backgroundColor: primaryColor,
              }}
            >
              <Shield className="w-6 h-6 text-white" strokeWidth={1.67} />
            </div>
            <div className="flex flex-col">
              <div className="text-base md:text-base lg:text-base xl:text-[18px] font-bold text-[#0f1724] tracking-[-0.36px]">
                {!isSuperAdmin && logoUrl ? "" : "QAssure"}
              </div>
              {!isSuperAdmin && logoUrl ? null : (
                <div
                  className="text-[12px] font-semibold capitalize mt-[7px] -translate-y-1/2"
                  style={{
                    color: accentColor
                  }}
                >
                  {roleName}
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Menu Sections (Only this part should scroll) */}
        <div className="flex-1 overflow-y-auto pr-1 flex flex-col gap-3.5 md:gap-3.5 lg:gap-4 xl:gap-6 custom-scrollbar">
          {/* Platform Menu */}
          {platformMenu.length > 0 && (
            <MenuSection title="Platform" items={platformMenu} />
          )}
          {platformServiceMenu.length > 0 && (
            <MenuSection title="Platform Services" items={platformServiceMenu} />
          )}

          {/* System Menu */}
          {systemMenu.length > 0 && (
            <MenuSection title="System" items={systemMenu} />
          )}
        </div>

        {/* Support Center */}
        <div className="mt-auto w-full">
          <button className="w-full bg-white border border-[rgba(0,0,0,0.08)] rounded-md px-2 md:px-2.5 lg:px-[13px] py-[9px] flex gap-2 md:gap-2 lg:gap-2.5 items-center hover:bg-gray-50 transition-colors">
            <HelpCircle className="w-4 h-4 shrink-0 text-[#0f1724]" />
            <span className="text-xs md:text-xs lg:text-[13px] font-medium text-[#0f1724]">
              Support Center
            </span>
          </button>
        </div>

        {/* Powered by LTTS */}
        <div className="w-full flex flex-col items-center justify-center gap-0 px-2">
          <p className="text-[10px] font-medium text-[#9ca3af] capitalize leading-normal">
            Powered by
          </p>
          <img
            src="/LTTS.svg"
            alt="L&T Technology Services"
            className="h-6 w-auto max-w-[150px] object-contain"
          />
        </div>
      </aside>
    </>
  );
};