import {
  BankFilled,
  BarChartOutlined,
  BellFilled,
  CarFilled,
  CheckCircleOutlined,
  ClockCircleFilled,
  DashboardFilled,
  DollarCircleFilled,
  ExportOutlined,
  FieldTimeOutlined,
  FileAddFilled,
  FileAddOutlined,
  FileFilled,
  HomeFilled,
  ImportOutlined,
  LineChartOutlined,
  PaperClipOutlined,
  PhoneOutlined,
  PlusCircleOutlined,
  QuestionCircleFilled,
  ScheduleOutlined,
  SettingOutlined,
  TeamOutlined,
  ToolFilled,
  UnorderedListOutlined,
  UserOutlined
} from "@ant-design/icons";
import { useQuery } from "@apollo/client";
import { useSplitTreatments } from "@splitsoftware/splitio-react";
import { Badge, Layout, Menu, Spin } from "antd";
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { BsKanban } from "react-icons/bs";
import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
import { FiLogOut } from "react-icons/fi";
import { GiPayMoney, GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
import { IoBusinessOutline } from "react-icons/io5";
import { RiSurveyLine } from "react-icons/ri";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js";
import { selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
import { setModalContext } from "../../redux/modals/modals.actions";
import { signOutStart } from "../../redux/user/user.actions";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
import day from "../../utils/day.js";
import InstanceRenderManager from "../../utils/instanceRenderMgr";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import LockWrapper from "../lock-wrapper/lock-wrapper.component";
import NotificationCenterContainer from "../notification-center/notification-center.container.jsx";
import { useSocket } from "../../contexts/SocketIO/useSocket.js";

// Redux mappings
const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  recentItems: selectRecentItems,
  selectedHeader: selectSelectedHeader,
  bodyshop: selectBodyshop
});

const mapDispatchToProps = (dispatch) => ({
  setBillEnterContext: (context) => dispatch(setModalContext({ context, modal: "billEnter" })),
  setTimeTicketContext: (context) => dispatch(setModalContext({ context, modal: "timeTicket" })),
  setPaymentContext: (context) => dispatch(setModalContext({ context, modal: "payment" })),
  setReportCenterContext: (context) => dispatch(setModalContext({ context, modal: "reportCenter" })),
  signOutStart: () => dispatch(signOutStart()),
  setCardPaymentContext: (context) => dispatch(setModalContext({ context, modal: "cardPayment" })),
  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
});

function Header({
  handleMenuClick,
  currentUser,
  bodyshop,
  selectedHeader,
  signOutStart,
  setBillEnterContext,
  setTimeTicketContext,
  setPaymentContext,
  setReportCenterContext,
  recentItems,
  setCardPaymentContext,
  setTaskUpsertContext
}) {
  const {
    treatments: { ImEXPay, DmsAp, Simple_Inventory }
  } = useSplitTreatments({
    attributes: {},
    names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
    splitKey: bodyshop && bodyshop.imexshopid
  });

  const { t } = useTranslation();
  const { isConnected, scenarioNotificationsOn } = useSocket();
  const [notificationVisible, setNotificationVisible] = useState(false);
  const baseTitleRef = useRef(document.title || "");
  const lastSetTitleRef = useRef("");
  const userAssociationId = bodyshop?.associations?.[0]?.id;

  const {
    data: unreadData,
    refetch: refetchUnread,
    loading: unreadLoading
  } = useQuery(GET_UNREAD_COUNT, {
    variables: { associationid: userAssociationId },
    fetchPolicy: "network-only",
    pollInterval: isConnected ? 0 : day.duration(60, "seconds").asMilliseconds(),
    skip: !userAssociationId || !scenarioNotificationsOn
  });

  const unreadCount = unreadData?.notifications_aggregate?.aggregate?.count ?? 0;

  useEffect(() => {
    if (userAssociationId) {
      refetchUnread().catch((e) => console.error(`Error fetching unread notifications: ${e?.message}`));
    }
  }, [refetchUnread, userAssociationId]);

  useEffect(() => {
    if (!isConnected && !unreadLoading && userAssociationId) {
      refetchUnread().catch((e) => console.error(`Error fetching unread notifications: ${e?.message}`));
    }
  }, [isConnected, unreadLoading, refetchUnread, userAssociationId]);

  // Keep The unread count in the title.
  useEffect(() => {
    const updateTitle = () => {
      const currentTitle = document.title;
      // Check if the current title differs from what we last set
      if (currentTitle !== lastSetTitleRef.current) {
        // Extract base title by removing any unread count prefix
        const baseTitleMatch = currentTitle.match(/^\(\d+\)\s*(.*)$/);
        baseTitleRef.current = baseTitleMatch ? baseTitleMatch[1] : currentTitle;
      }

      // Apply unread count to the base title
      const newTitle = unreadCount > 0 ? `(${unreadCount}) ${baseTitleRef.current}` : baseTitleRef.current;

      // Only update if the title has changed to avoid unnecessary DOM writes
      if (document.title !== newTitle) {
        document.title = newTitle;
        lastSetTitleRef.current = newTitle; // Store what we set
      }
    };

    // Initial update
    updateTitle();

    // Poll every 100ms to catch child component changes
    const interval = setInterval(updateTitle, 100);

    // Cleanup
    return () => {
      clearInterval(interval);
      document.title = baseTitleRef.current; // Reset to base title on unmount
    };
  }, [unreadCount]); // Re-run when unreadCount changes

  const handleNotificationClick = (e) => {
    setNotificationVisible(!notificationVisible);
    if (handleMenuClick) handleMenuClick(e);
  };

  const accountingChildren = [
    {
      key: "bills",
      id: "header-accounting-bills",
      icon: <FaFileInvoiceDollar />,
      label: (
        <Link to="/manage/bills">
          <LockWrapper featureName="bills" bodyshop={bodyshop}>
            {t("menus.header.bills")}
          </LockWrapper>
        </Link>
      )
    },
    {
      key: "enterbills",
      id: "header-accounting-enterbills",
      icon: <GiPayMoney />,
      label: (
        <LockWrapper featureName="bills" bodyshop={bodyshop}>
          {t("menus.header.enterbills")}
        </LockWrapper>
      ),
      onClick: () =>
        HasFeatureAccess({ featureName: "bills", bodyshop }) &&
        setBillEnterContext({
          actions: {},
          context: {}
        })
    },
    ...(Simple_Inventory.treatment === "on"
      ? [
          { type: "divider" },
          {
            key: "inventory",
            id: "header-accounting-inventory",
            icon: <FaFileInvoiceDollar />,
            label: <Link to="/manage/inventory">{t("menus.header.inventory")}</Link>
          }
        ]
      : []),
    { type: "divider" },
    {
      key: "allpayments",
      id: "header-accounting-allpayments",
      icon: <BankFilled />,
      label: <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
    },
    {
      key: "enterpayments",
      id: "header-accounting-enterpayments",
      icon: <FaCreditCard />,
      label: t("menus.header.enterpayment"),
      onClick: () =>
        setPaymentContext({
          actions: {},
          context: null
        })
    },
    ...(ImEXPay.treatment === "on"
      ? [
          {
            key: "entercardpayments",
            id: "header-accounting-entercardpayments",
            icon: <FaCreditCard />,
            label: t("menus.header.entercardpayment"),
            onClick: () => setCardPaymentContext({ actions: {}, context: {} })
          }
        ]
      : []),
    { type: "divider" },
    {
      key: "timetickets",
      id: "header-accounting-timetickets",
      icon: <FieldTimeOutlined />,
      label: (
        <Link to="/manage/timetickets">
          <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
            {t("menus.header.timetickets")}
          </LockWrapper>
        </Link>
      )
    },
    ...(bodyshop?.md_tasks_presets?.use_approvals
      ? [
          {
            key: "ttapprovals",
            id: "header-accounting-ttapprovals",
            icon: <FieldTimeOutlined />,
            label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
          }
        ]
      : []),
    {
      key: "entertimetickets",
      id: "header-accounting-entertimetickets",
      icon: <GiPlayerTime />,
      label: (
        <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
          {t("menus.header.entertimeticket")}
        </LockWrapper>
      ),
      onClick: () =>
        HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
        setTimeTicketContext({
          actions: {},
          context: {
            created_by: currentUser.displayName
              ? `${currentUser.email} | ${currentUser.displayName}`
              : currentUser.email
          }
        })
    },
    { type: "divider" },
    {
      key: "accountingexport",
      id: "header-accounting-export",
      icon: <ExportOutlined />,
      label: (
        <LockWrapper featureName="export" bodyshop={bodyshop}>
          {t("menus.header.export")}
        </LockWrapper>
      ),
      children: [
        {
          key: "receivables",
          id: "header-accounting-receivables",
          label: (
            <Link to="/manage/accounting/receivables">
              <LockWrapper featureName="export" bodyshop={bodyshop}>
                {t("menus.header.accounting-receivables")}
              </LockWrapper>
            </Link>
          )
        },
        ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) ||
        DmsAp.treatment === "on"
          ? [
              {
                key: "payables",
                id: "header-accounting-payables",
                label: (
                  <Link to="/manage/accounting/payables">
                    <LockWrapper featureName="export" bodyshop={bodyshop}>
                      {t("menus.header.accounting-payables")}
                    </LockWrapper>
                  </Link>
                )
              }
            ]
          : []),
        ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber))
          ? [
              {
                key: "payments",
                id: "header-accounting-payments",
                label: (
                  <Link to="/manage/accounting/payments">
                    <LockWrapper featureName="export" bodyshop={bodyshop}>
                      {t("menus.header.accounting-payments")}
                    </LockWrapper>
                  </Link>
                )
              }
            ]
          : []),
        { type: "divider" },
        {
          key: "exportlogs",
          id: "header-accounting-exportlogs",
          label: (
            <Link to="/manage/accounting/exportlogs">
              <LockWrapper featureName="export" bodyshop={bodyshop}>
                {t("menus.header.export-logs")}
              </LockWrapper>
            </Link>
          )
        }
      ]
    }
  ];

  // Left menu items (includes original navigation items)
  const leftMenuItems = [
    {
      key: "home",
      id: "header-home",
      icon: <HomeFilled />,
      label: <Link to="/manage/">{t("menus.header.home")}</Link>
    },
    {
      key: "schedule",
      id: "header-schedule",
      icon: <FaCalendarAlt />,
      label: <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
    },
    {
      key: "jobssubmenu",
      id: "header-jobs",
      icon: <FaCarCrash />,
      label: t("menus.header.jobs"),
      children: [
        {
          key: "activejobs",
          id: "header-active-jobs",
          icon: <FileFilled />,
          label: <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
        },
        {
          key: "readyjobs",
          id: "header-ready-jobs",
          icon: <CheckCircleOutlined />,
          label: <Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>
        },
        {
          key: "parts-queue",
          id: "header-parts-queue",
          icon: <ToolFilled />,
          label: <Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>
        },
        {
          key: "availablejobs",
          id: "header-jobs-available",
          icon: <ImportOutlined />,
          label: <Link to="/manage/available">{t("menus.header.availablejobs")}</Link>
        },
        {
          key: "newjob",
          id: "header-new-job",
          icon: <FileAddOutlined />,
          label: <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
        },
        { type: "divider" },
        {
          key: "alljobs",
          id: "header-all-jobs",
          icon: <UnorderedListOutlined />,
          label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
        },
        { type: "divider" },
        {
          key: "productionlist",
          id: "header-production-list",
          icon: <ScheduleOutlined />,
          label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
        },
        {
          key: "productionboard",
          id: "header-production-board",
          icon: <BsKanban />,
          label: (
            <Link to="/manage/production/board">
              <LockWrapper featureName="visualboard" bodyshop={bodyshop}>
                {t("menus.header.productionboard")}
              </LockWrapper>
            </Link>
          )
        },
        { type: "divider" },
        {
          key: "scoreboard",
          id: "header-scoreboard",
          icon: <LineChartOutlined />,
          label: (
            <Link to="/manage/scoreboard">
              <LockWrapper featureName="scoreboard" bodyshop={bodyshop}>
                {t("menus.header.scoreboard")}
              </LockWrapper>
            </Link>
          )
        }
      ]
    },
    {
      key: "customers",
      id: "header-customers",
      icon: <UserOutlined />,
      label: t("menus.header.customers"),
      children: [
        {
          key: "owners",
          id: "header-owners",
          icon: <TeamOutlined />,
          label: <Link to="/manage/owners">{t("menus.header.owners")}</Link>
        },
        {
          key: "vehicles",
          id: "header-vehicles",
          icon: <CarFilled />,
          label: <Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>
        }
      ]
    },
    {
      key: "ccs",
      id: "header-css",
      icon: <CarFilled />,
      label: (
        <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
          {t("menus.header.courtesycars")}
        </LockWrapper>
      ),
      children: [
        {
          key: "courtesycarsall",
          id: "header-courtesycars-all",
          icon: <CarFilled />,
          label: (
            <Link to="/manage/courtesycars">
              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
                {t("menus.header.courtesycars-all")}
              </LockWrapper>
            </Link>
          )
        },
        {
          key: "contracts",
          id: "header-contracts",
          icon: <FileFilled />,
          label: (
            <Link to="/manage/courtesycars/contracts">
              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
                {t("menus.header.courtesycars-contracts")}
              </LockWrapper>
            </Link>
          )
        },
        {
          key: "newcontract",
          id: "header-newcontract",
          icon: <FileAddFilled />,
          label: (
            <Link to="/manage/courtesycars/contracts/new">
              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
                {t("menus.header.courtesycars-newcontract")}
              </LockWrapper>
            </Link>
          )
        }
      ]
    },
    ...(accountingChildren.length > 0
      ? [
          {
            key: "accounting",
            id: "header-accounting",
            icon: <DollarCircleFilled />,
            label: t("menus.header.accounting"),
            children: accountingChildren
          }
        ]
      : []),
    {
      key: "phonebook",
      id: "header-phonebook",
      icon: <PhoneOutlined />,
      label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
    },
    {
      key: "temporarydocs",
      id: "header-temporarydocs",
      icon: <PaperClipOutlined />,
      label: (
        <Link to="/manage/temporarydocs">
          <LockWrapper featureName="media" bodyshop={bodyshop}>
            {t("menus.header.temporarydocs")}
          </LockWrapper>
        </Link>
      )
    },
    {
      key: "tasks",
      id: "tasks",
      icon: <FaTasks />,
      label: t("menus.header.tasks"),
      children: [
        {
          key: "createTask",
          id: "header-create-task",
          icon: <PlusCircleOutlined />,
          label: t("menus.header.create_task"),
          onClick: () => setTaskUpsertContext({ actions: {}, context: {} })
        },
        {
          key: "mytasks",
          id: "header-my-tasks",
          icon: <FaTasks />,
          label: <Link to="/manage/tasks/mytasks">{t("menus.header.my_tasks")}</Link>
        },
        {
          key: "all_tasks",
          id: "header-all-tasks",
          icon: <FaTasks />,
          label: <Link to="/manage/tasks/alltasks">{t("menus.header.all_tasks")}</Link>
        }
      ]
    },
    {
      key: "shopsubmenu",
      id: "header-shopsubmenu",
      icon: <SettingOutlined />,
      label: t("menus.header.shop"),
      children: [
        {
          key: "shop",
          id: "header-shop",
          icon: <GiSettingsKnobs />,
          label: <Link to="/manage/shop?tab=info">{t("menus.header.shop_config")}</Link>
        },
        {
          key: "dashboard",
          id: "header-dashboard",
          icon: <DashboardFilled />,
          label: (
            <Link to="/manage/dashboard">
              <LockWrapper featureName="bills">{t("menus.header.dashboard")}</LockWrapper>
            </Link>
          )
        },
        {
          key: "reportcenter",
          id: "header-reportcenter",
          icon: <BarChartOutlined />,
          label: t("menus.header.reportcenter"),
          onClick: () => setReportCenterContext({ actions: {}, context: {} })
        },
        {
          key: "shop-vendors",
          id: "header-shop-vendors",
          icon: <IoBusinessOutline />,
          label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
        },
        {
          key: "shop-csi",
          id: "header-shop-csi",
          icon: <RiSurveyLine />,
          label: (
            <Link to="/manage/shop/csi">
              <LockWrapper featureName="export" bodyshop={bodyshop}>
                {t("menus.header.shop_csi")}
              </LockWrapper>
            </Link>
          )
        }
      ]
    },
    {
      key: "recent",
      id: "header-recent",
      icon: <ClockCircleFilled />,
      label: t("menus.header.recent"),
      children: recentItems.map((i, idx) => ({
        key: idx,
        id: `header-recent-${idx}`,
        label: <Link to={i.url}>{i.label}</Link>
      }))
    },
    {
      key: "user",
      id: "header-user",
      icon: <UserOutlined />,
      label: t("menus.currentuser.profile"),
      children: [
        {
          key: "signout",
          id: "header-signout",
          icon: <FiLogOut />,
          danger: true,
          label: t("user.actions.signout"),
          onClick: () => signOutStart()
        },
        {
          key: "help",
          id: "header-help",
          icon: <QuestionCircleFilled />,
          label: t("menus.header.help"),
          onClick: () => window.open("https://help.imex.online/", "_blank")
        },
        ...(InstanceRenderManager({ imex: true, rome: false })
          ? [
              {
                key: "rescue",
                id: "header-rescue",
                icon: <CarFilled />,
                label: t("menus.header.rescueme"),
                onClick: () => window.open("https://imexrescue.com/", "_blank")
              }
            ]
          : []),
        {
          key: "shiftclock",
          id: "header-shiftclock",
          icon: <GiPlayerTime />,
          label: (
            <Link to="/manage/shiftclock">
              <LockWrapper featureName="export" bodyshop={bodyshop}>
                {t("menus.header.shiftclock")}
              </LockWrapper>
            </Link>
          )
        },
        {
          key: "profile",
          id: "header-profile",
          icon: <UserOutlined />,
          label: <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
        }
      ]
    }
  ];

  // Notifications item (always on the right)
  const notificationItem = scenarioNotificationsOn
    ? [
        {
          key: "notifications",
          id: "header-notifications",
          icon: unreadLoading ? (
            <Spin size="small" />
          ) : (
            <Badge offset={[8, 0]} size="small" count={unreadCount}>
              <BellFilled />
            </Badge>
          ),
          onClick: handleNotificationClick
        }
      ]
    : [];

  return (
    <Layout.Header style={{ padding: 0, background: "#001529" }}>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          height: "100%",
          overflow: "hidden"
        }}
      >
        <Menu
          mode="horizontal"
          theme="dark"
          selectedKeys={[selectedHeader]}
          onClick={handleMenuClick}
          subMenuCloseDelay={0.3}
          items={leftMenuItems}
          style={{
            flex: "1 1 auto",
            minWidth: 0,
            overflowX: "auto",
            borderBottom: "none",
            background: "transparent"
          }}
        />
        {scenarioNotificationsOn && (
          <Menu
            mode="horizontal"
            theme="dark"
            selectedKeys={[selectedHeader]}
            onClick={handleMenuClick}
            subMenuCloseDelay={0.3}
            items={notificationItem}
            style={{ flex: "0 0 auto", minWidth: 0, borderBottom: "none", background: "transparent" }}
          />
        )}
      </div>
      {scenarioNotificationsOn && (
        <NotificationCenterContainer
          visible={notificationVisible}
          onClose={() => setNotificationVisible(false)}
          unreadCount={unreadCount}
        />
      )}
    </Layout.Header>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);