import React, { useEffect, useState } from 'react';
import { Avatar, Layout, Menu, Space } from 'antd';
import { hasPermission } from '@/utills/helper';
import { useFeatureFlag } from '@/hooks/useFeatureFlag';
import {
  DashboardOutlined,
  UsergroupAddOutlined,
  IdcardOutlined,
  OneToOneOutlined,
  SettingOutlined,
  BuildFilled,
  InsertRowBelowOutlined,
  ProfileOutlined,
  TableOutlined,
  SolutionOutlined,
  ClusterOutlined,
  PartitionOutlined,
  LineChartOutlined,
  UserOutlined,
  TeamOutlined,
  DeploymentUnitOutlined,
  PlayCircleOutlined,
  ApartmentOutlined,
  TrophyOutlined,
} from '@ant-design/icons';
import { usePathname, useRouter } from 'next/navigation';
import { useSession } from 'next-auth/react';
import { PERMISSIONS } from '@/utills/constant';
import { useRoles } from '@/hooks/useRoles';
const { Sider } = Layout;
const NavBarComponent: React.FC<{
    collapsed: boolean
    mobileView: boolean
    handleMobileMenuToggle: () => void
}> = ({ collapsed, mobileView, handleMobileMenuToggle }) => {
  const router = useRouter();
  const pathname = usePathname();
  const [activeKey, setActiveKey] = useState<string>(pathname);

  const { data: session } = useSession();
  const user = session?.user;
  const { getRoleByName } = useRoles();
  const designation = user?.designations?.map((d) => d.designation_name).join(', ');
  // Don't re-dispatch fetchFeatureControls here - AuthProvider already does it once, and
  // re-dispatching on every mount of this component caused a feedback loop with a gate that
  // mounts and removes this same component based on a flag's transient loading state.
  const promotionEnabled = useFeatureFlag('promotion-module');
  const leaderboardEnabled = useFeatureFlag('leaderboard');

  const urlPartsSplit = pathname.split('/');
  const trimmedPathName = urlPartsSplit.length >= 3 ? `/${urlPartsSplit[1]}` : pathname;

  useEffect(() => {
    setActiveKey(trimmedPathName);
  }, [pathname]);

  const handleMenuClick = (e: { key: string }) => {
    router.push(`${e.key}`);
    setActiveKey(e.key);
    handleMobileMenuToggle();
  };

  return (
    <Sider
      trigger={null}
      collapsible
      collapsed={collapsed}
      theme="light"
      width={220}
      className={`custom-sidebar ${mobileView ? 'hide' : 'show'}`}>
      <Space className="sider-user-info">
        <Avatar size={40} src={user?.profile_photo ? `${process.env.BUCKET_URL}${user.profile_photo}` : undefined} icon={<UserOutlined />} className="user-avatar">
          {user?.name}
        </Avatar>
        <div className="ml-2 leading-5 user-dropdown-content">
          <span className="user-name font-bold text-gray-700 text-sm" title={user?.name}>
            {user?.name}
          </span>
          <br />
          <span
            className="user-email-designation text-gray-500 text-xs"
            title={`${user?.email} ${designation ? `- ${designation}` : ''}`}>
            {user?.email} <br />
            {designation ? `- ${designation}` : ''}
          </span>
        </div>
      </Space>
      <Menu
        mode="inline"
        defaultSelectedKeys={[pathname]}
        defaultOpenKeys={['Master']}
        className="sidebar-menu"
        onClick={(e) => handleMenuClick(e)}
        selectedKeys={[activeKey]}>
        {user?.role?.id !== getRoleByName('human_resources')?.id && (
          <>
            <Menu.Item key="/dashboard" icon={<DashboardOutlined />}>
                            Dashboard
            </Menu.Item>

            <Menu.Item key="/analytics" icon={<LineChartOutlined />}>
              Analytics
            </Menu.Item>

            {leaderboardEnabled && (
              <Menu.Item key="/leaderboard" icon={<TrophyOutlined />}>
                Leaderboard
              </Menu.Item>
            )}

            {/* <Menu.Item key="/performance-analytics" icon={<LineChartOutlined />}>
                            Performance Analytics
            </Menu.Item> */}
          </>
        )}

        

        {hasPermission(user, PERMISSIONS.EMPLOYEE_VIEW_ACCOUNT.name) && (
          <Menu.Item key="/employees" icon={<UsergroupAddOutlined />}>
                        Employees
          </Menu.Item>
        )}
        {hasPermission(user, PERMISSIONS.LAUNCH_VIEW.name) && (
          <Menu.Item key="/launches" icon={<BuildFilled />}>
                        Launches & Projects
          </Menu.Item>
        )}
        {hasPermission(user, PERMISSIONS.MODULE_LEADS.name) && (
          <Menu.Item key="/enquiries" icon={<ClusterOutlined />}>
                    Enquiries
          </Menu.Item>
        )}
        {hasPermission(user, PERMISSIONS.MODULE_LEADS.name) && (
          <Menu.Item key="/super-hot-leads" icon={<ClusterOutlined />}>
                    Super Hot Leads
          </Menu.Item>
        )}
        {hasPermission(user, PERMISSIONS.MODULE_LEADS_REQUEST.name) && (
          <Menu.Item key="/lead-requests" icon={<PartitionOutlined />}>
                        Lead Requests
          </Menu.Item>
        )}
        {/* {hasPermission(user, PERMISSIONS.EARNING_MODELS.name) && (
          <Menu.Item key="/earning-models" icon={<DollarOutlined />}>
                        Earning Models
          </Menu.Item>
        )} */}
        {user?.role?.id === getRoleByName('super_admin')?.id && (
          <Menu.Item key="/lead-routing" icon={<ApartmentOutlined />}>
                        Lead Routing
          </Menu.Item>
        )}
        {user?.role?.id === getRoleByName('super_admin')?.id && (
          <Menu.Item key="/dissociation" icon={<UserOutlined />}>
                        Dissociation
          </Menu.Item>
        )}
        {(user?.role?.id === getRoleByName('super_admin')?.id || user?.role?.id === getRoleByName('city_head')?.id) && (
          <Menu.Item key="/lead-transfer" icon={<UserOutlined />}>
                        Lead Transfer
          </Menu.Item>
        )}
        {promotionEnabled &&
          (user?.role?.id === getRoleByName('super_admin')?.id || user?.role?.id === getRoleByName('city_head')?.id) && (
          <Menu.Item key="/promotions" icon={<TeamOutlined />}>
                        Promotions
          </Menu.Item>
        )}

        {/* eslint-disable-next-line spellcheck/spell-checker */}
        <Menu.Item key="/onboarding" icon={<PlayCircleOutlined />}>
                    Onboarding
        </Menu.Item>
        
        {hasPermission(user, PERMISSIONS.MODULE_MASTER.name) && (
          <Menu.SubMenu title="Master" key={'Master'}>
            {/* <Menu.Item key="/customer" icon={<TeamOutlined />}>
                            Customers
                        </Menu.Item> */}
            <Menu.Item key="/builders" icon={<ProfileOutlined />}>
                            Builders
            </Menu.Item>

            <Menu.Item key="/cities" icon={<InsertRowBelowOutlined />}>
                            Cities
            </Menu.Item>

            <Menu.Item key="/region" icon={<TableOutlined />}>
                            Regions
            </Menu.Item>

            <Menu.Item key="/configuration" icon={<SettingOutlined />}>
                            Configurations
            </Menu.Item>

            <Menu.Item key="/role" icon={<IdcardOutlined />}>
                            Role
            </Menu.Item>

            <Menu.Item key="/role-mapping" icon={<OneToOneOutlined />}>
                            Roles Mapping
            </Menu.Item>

            <Menu.Item key="/designations" icon={<SolutionOutlined />}>
                            Designations
            </Menu.Item>

            {user?.role?.name === 'super_admin' && (
              <Menu.Item key="/feature-control" icon={<DeploymentUnitOutlined   />}>
                                Feature Control
              </Menu.Item>
            )}
          </Menu.SubMenu>
        )}
      </Menu>
      <div className="build-version">
                Version: <span>{process.env.BUILD_VERSION}</span>
      </div>
    </Sider>
  );
};

export default NavBarComponent;