'use client';

import React, { useEffect, useMemo } from 'react';
import Link from 'next/link';
import { Text } from '@/components/ui/text';
import { useSelector } from 'react-redux';
import { usePathname } from 'next/navigation';
import { createSelector } from '@reduxjs/toolkit';
import UserProfile from './user/UserProfile';
import CommonImage from '@/components/common/CommonImage';
import BookmarkDialog from '@/components/header/BookmarkDialog';
import Notifications from './notifications/Notifications';
import { findPageTitle, icons } from './top-bar-functions';
import HorizontalMenu from '../menu-bar/HorizontalMenu';
import VerticalMenu from '../menu-bar/VerticalMenu';
import { ApiError, UnknownRecord } from '@/types';
import { API_ENDPOINTS } from '@/constants';
import { setMenuItems } from '@/store/slices/menuSlice';
import { globalApiPost } from '@/services/global';
import { store } from '@/store/store';

const selectSession = (state: any) => state.session;
const selectMenusState = (state: any) => state.menus;

const selectMenuBookmarks = createSelector([selectSession], (session) =>
  Array.isArray(session?.menuBookmarks) ? session.menuBookmarks : [],
);

const selectMenus = createSelector(
  [selectMenusState],
  (menus) => menus?.items || [],
);

const selectUser = createSelector(
  [selectSession],
  (session) => session?.user || {},
);

const TopBar: React.FC = () => {
  const pathname = usePathname();
  const menuBookmarks = useSelector(selectMenuBookmarks);
  const menus = useSelector(selectMenus);
  const user = useSelector(selectUser);

  const permitted = useMemo(
    () => user?.role_permissions ?? {},
    [user?.role_permissions],
  );

  const hasPermissions = useMemo(
    () => Object.keys(permitted).length > 0,
    [permitted],
  );

  const currentPathBookmark = useMemo(() => {
    const currentPath = pathname.replace(/^\/+/, '');
    const bookmark = menuBookmarks.find(
      (page: any) => page.menu_link === currentPath,
    );

    if (bookmark) return bookmark;

    const title = findPageTitle(menus, pathname, 'title');
    return {
      href: currentPath,
      menu_name: title,
      title,
      menu_link: currentPath,
      id: 0,
    };
  }, [menuBookmarks, pathname, menus]);

  useEffect(() => {
    if (!hasPermissions) return;

    const fetchAccessibleMenus = async () => {
      try {
        const response: ApiError | UnknownRecord[] = await globalApiPost(
          API_ENDPOINTS.MENU_MANAGEMENT.USER_ACCESSIBLE_MENUS,
          { permitted },
        );

        store.dispatch(setMenuItems(response || []));
      } catch (error) {
        console.error('Failed to fetch accessible menus:', error);
      }
    };

    fetchAccessibleMenus();
  }, [hasPermissions, permitted]);

  const renderedIcons = useMemo(
    () =>
      icons.map((icon) => {
        if (icon.className === 'dashboard-menu-left') {
          return (
            (user.menu_type === null || user.menu_type === '1') && (
              <VerticalMenu key={icon.id} />
            )
          );
        }

        if (icon.isToggleable) {
          if (user.menu_type !== null && user.menu_type !== '1') return null;
          return <BookmarkDialog key={icon.id} props={currentPathBookmark} />;
        }

        const content = (
          <CommonImage
            src={icon.src}
            classname={`icon-${icon.id}`}
            alt={icon.alt}
            width={icon.width}
            height={icon.height}
          />
        );

        return icon.link ? (
          <Link
            key={icon.id}
            href={icon.link}
            rel="noopener noreferrer"
            className={`icon-${icon.id}`}
          >
            {content}
          </Link>
        ) : (
          <React.Fragment key={icon.id}>{content}</React.Fragment>
        );
      }),
    [currentPathBookmark, user],
  );

  return (
    <>
      <header className="main_header">
        <Text className="container-widget mx-auto flex items-center justify-between">
          <Text className="header_left_side flex items-center gap-3">
            {renderedIcons}
          </Text>
          <Text className="header_right_side flex items-center">
            <Notifications />
            <UserProfile />
          </Text>
        </Text>
      </header>

      {user.menu_type === '2' && <HorizontalMenu />}
    </>
  );
};

export default TopBar;