'use client';
import React, { useState, useEffect, useMemo } from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogClose,
} from '@/components/ui/dialog';
import { ReactSortable } from 'react-sortablejs';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
import { Button } from '@/components/ui/button';
import CommonImage from '@/components/common/CommonImage';
import { Checkbox } from '@/components/ui/checkbox';
import { useSelector } from 'react-redux';
import { createSelector } from '@reduxjs/toolkit';
import { UnknownRecord } from '@/types';
import { VC_FE_URL, WOSA_ADMIN_URL, WOSA_BASE_URL } from '@/config/site-config';
import Link from 'next/link';
import { store } from '@/store/store';
import { globalApiPost } from '@/services/global';
import { API_ENDPOINTS } from '@/constants';
import { setMenuItems } from '@/store/slices/menuSlice';

interface ChildItem {
  id: string;
  title: string;
  href?: string;
}
interface MenuItem {
  id: string;
  title: string;
  children?: ChildItem[];
  checked: boolean;
}

const selectSession = (state: UnknownRecord) => state.session;

const selectUser = createSelector([selectSession], (session) => session.user);

const HorizontalMenu: React.FC = () => {
  const [selectedMenu, setSelectedMenu] = useState<MenuItem[]>([]);
  const [availableMenu, setAvailableMenu] = useState<MenuItem[]>([]);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [accessibleMenuItems, setAccessibleMenuItems] = useState<
    UnknownRecord[]
  >([]);

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

  const convertedMenuItems = useMemo(() => {
    if (!accessibleMenuItems || accessibleMenuItems.length === 0) {
      return [];
    }

    return accessibleMenuItems.map(
      (group: UnknownRecord, groupIndex: number) => {
        const groupId = `group_${group.id || groupIndex}`;
        const children: ChildItem[] = [];

        group.menus?.forEach((menu: UnknownRecord) => {
          menu.actions?.forEach((action: UnknownRecord) => {
            if (action.is_visible === 1) {
              const BASEURL =
                String(action.platform) === '2' ? VC_FE_URL : WOSA_ADMIN_URL;
              const href = `${BASEURL}${menu.controller}/${action.action}`;
              children.push({
                id: `child_${action.id}`,
                title: action.title,
                href: href,
              });
            }
          });
        });

        return {
          id: groupId,
          title: group.name || `Group ${groupIndex + 1}`,
          checked: groupIndex < 8,
          children: children.length > 0 ? children : undefined,
        };
      },
    );
  }, [accessibleMenuItems]);

  useEffect(() => {
    const fetchAccessibleMenus = async () => {
      try {
        const response: any = await globalApiPost(
          API_ENDPOINTS.MENU_MANAGEMENT.USER_ACCESSIBLE_MENUS,
          { permitted },
        );
        setAccessibleMenuItems((response as UnknownRecord[]) || []);
        store.dispatch(setMenuItems(response || []));
      } catch (error) {
        console.error('Failed to fetch accessible menus:', error);
      }
    };

    if (permitted) {
      fetchAccessibleMenus();
    }
  }, [permitted]);

  useEffect(() => {
    if (convertedMenuItems.length > 0) {
      const selected = convertedMenuItems.filter((item: any) => item.checked);
      const available = convertedMenuItems.filter((item: any) => !item.checked);

      setSelectedMenu(selected);
      setAvailableMenu(available);
    }
  }, [convertedMenuItems]);

  const toggleCheckbox = (item: MenuItem) => {
    if (item.checked) {
      setSelectedMenu((p) => p.filter((i) => i.id !== item.id));
      setAvailableMenu((p) => [...p, { ...item, checked: false }]);
    } else {
      setAvailableMenu((p) => p.filter((i) => i.id !== item.id));
      setSelectedMenu((p) => [...p, { ...item, checked: true }]);
    }
  };

  const updateChildren = (parentId: string, children: ChildItem[]) => {
    setSelectedMenu((prev) =>
      prev.map((p) => (p.id === parentId ? { ...p, children } : p)),
    );
    setAvailableMenu((prev) =>
      prev.map((p) => (p.id === parentId ? { ...p, children } : p)),
    );
  };

  const removeChildFromParent = (parentId: string, childId: string) => {
    setSelectedMenu((prev) =>
      prev.map((p) =>
        p.id === parentId
          ? { ...p, children: p.children?.filter((c) => c.id !== childId) }
          : p,
      ),
    );
    setAvailableMenu((prev) =>
      prev.map((p) =>
        p.id === parentId
          ? { ...p, children: p.children?.filter((c) => c.id !== childId) }
          : p,
      ),
    );
  };

  const handleSave = () => {
    setIsDialogOpen(false);
  };

  return (
    <section className="horizontal-menu-widget">
      <ul className="direct-showing-menu">
        <li key={'menu.id'}>
          <a
            href="javascript:void(0)"
            onClick={(e) => {
              e.preventDefault();
            }}
          >
            {'Hot Links'} <i className="fa-solid fa-caret-down"></i>
          </a>
          <ul>
            <li key={'child.id-dashboard'}>
              <Link href={`${WOSA_ADMIN_URL}dashboard`} title={'Dashboard'}>
                <i className="fa-solid fa-chevron-right"></i> {'Dashboard'}
              </Link>
            </li>
            <li key={'child.id-website'}>
              <Link href={`${WOSA_BASE_URL}`} title={'Front End Website'}>
                <i className="fa-solid fa-chevron-right"></i>{' '}
                {'Front End Website'}
              </Link>
            </li>
          </ul>
        </li>
        {selectedMenu.map((menu) => (
          <li key={menu.id}>
            <a
              href="javascript:void(0)"
              onClick={(e) => {
                e.preventDefault();
              }}
            >
              {menu.title} <i className="fa-solid fa-caret-down"></i>
            </a>
            {menu.children && menu.children.length > 0 && (
              <ul>
                {menu.children.map((child) => (
                  <li key={child.id}>
                    {child.href ? (
                      <Link href={child.href} title={child.title}>
                        <i className="fa-solid fa-chevron-right"></i>{' '}
                        {child.title}
                      </Link>
                    ) : (
                      <a href="#" title={child.title}>
                        <i className="fa-solid fa-chevron-right"></i>{' '}
                        {child.title}
                      </a>
                    )}
                  </li>
                ))}
              </ul>
            )}
          </li>
        ))}
      </ul>

      {/* -- showing menu list -- */}
      {availableMenu.length > 0 && (
        <ul className="more-drop-down">
          <li>
            <a
              href="javascript:void(0)"
              onClick={(e) => {
                e.preventDefault();
              }}
            >
              More <i className="fa-solid fa-caret-down"></i>
            </a>
            <ul>
              {availableMenu.map((menu) => (
                <li key={menu.id}>
                  <span>{menu.title}</span>
                  {menu.children && menu.children.length > 0 && (
                    <ul>
                      {menu.children.map((child) => (
                        <li key={child.id}>
                          {child.href ? (
                            <Link href={child.href} title={child.title}>
                              {child.title}
                            </Link>
                          ) : (
                            <a href="#" title={child.title}>
                              {child.title}
                            </a>
                          )}
                        </li>
                      ))}
                    </ul>
                  )}
                </li>
              ))}
            </ul>
          </li>
        </ul>
      )}

      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogTrigger asChild>
          {/* <div
            className="menu-align-widget cursor-pointer"
            onClick={() => setIsDialogOpen(true)}
          >
            <i className="fa-solid fa-object-group"></i>
          </div> */}
        </DialogTrigger>
        <DialogContent
          className="modal-common-widget w-full max-w-7xl p-0 m-0 table-modal-settings state-widget menu-arrangement-dialog-widget"
          onInteractOutside={(e) => e.preventDefault()}
          onEscapeKeyDown={(e) => e.preventDefault()}
          onClick={(e) => e.stopPropagation()}
        >
          <DialogHeader className="p-5 modal-header">
            <DialogTitle className="p-5 modal-header">
              Menu Arrangement
            </DialogTitle>
          </DialogHeader>
          <DialogClose asChild>
            <button
              onClick={() => setIsDialogOpen(false)}
              className="dialog-close absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none z-[9]"
              aria-label="Close"
            >
              <CommonImage
                src="/main/cross-arrow.webp"
                width={15}
                height={15}
                alt="close"
                classname="dialog-close-img"
              />
            </button>
          </DialogClose>
          <VisuallyHidden>
            <DialogTitle>Hidden Title</DialogTitle>
          </VisuallyHidden>
          <form
            onSubmit={(e) => {
              e.preventDefault();
              handleSave();
            }}
          >
            <div className="main-scroll-widget">
              <div className="grid gap-4 ml-5 mr-4 mt-4 mb-4">
                <div className="menu-arrange-cont flex gap-8">
                  <div className="flex-1 section-widget">
                    <h4 className="mb-2 font-bold">Selected Menu</h4>
                    <ReactSortable
                      list={selectedMenu}
                      setList={(list) =>
                        setSelectedMenu(
                          list.map((i) => ({ ...i, checked: true })),
                        )
                      }
                      animation={150}
                    >
                      {selectedMenu.map((item, index) => (
                        <div
                          key={item.id}
                          className="menu-checked-list cursor-move"
                        >
                          <label>
                            <span className="mr-2 counter-num">
                              {index + 1}.
                            </span>
                            <Checkbox
                              checked={item.checked}
                              onCheckedChange={() => toggleCheckbox(item)}
                            />
                            <span className="drop-heading">{item.title}</span>
                          </label>

                          {item.children && item.children.length > 0 && (
                            <ReactSortable
                              list={item.children}
                              data-parent-id={item.id}
                              setList={(list) => updateChildren(item.id, list)}
                              group={{
                                name: 'children',
                                pull: true,
                                put: true,
                              }}
                              animation={150}
                              forceFallback
                              emptyInsertThreshold={25}
                              onAdd={(evt) => {
                                const child = (evt.item as any).__sortableData;
                                const from = evt.from.dataset.parentId;

                                if (from && from !== item.id) {
                                  removeChildFromParent(from, child.id);
                                }
                              }}
                            >
                              {item.children.map((child) => (
                                <div
                                  key={child.id}
                                  className="menu-list-drag-item mb-1 p-1 border bg-white cursor-move"
                                >
                                  <i className="fa-solid fa-chevron-circle-right"></i>{' '}
                                  {child.title}
                                </div>
                              ))}

                              {/* CRITICAL DROP ZONE */}
                              <div className="h-6 bg-transparent dropzone h-3 bg-transparent" />
                            </ReactSortable>
                          )}
                        </div>
                      ))}
                    </ReactSortable>
                  </div>

                  <div className="flex-1 section-widget">
                    <h4 className="mb-2 font-bold">Available Menu</h4>
                    <ReactSortable
                      list={availableMenu}
                      setList={setAvailableMenu}
                      animation={150}
                    >
                      {availableMenu.map((item, index) => (
                        <div
                          key={item.id}
                          className="menu-checked-list cursor-move"
                        >
                          <label>
                            <span className="mr-2 counter-num">
                              {index + 1}.
                            </span>
                            <Checkbox
                              checked={item.checked}
                              onCheckedChange={() => toggleCheckbox(item)}
                            />
                            <span className="drop-heading">{item.title}</span>
                          </label>

                          {item.children && item.children.length > 0 && (
                            <ReactSortable
                              list={item.children}
                              data-parent-id={item.id}
                              setList={(list) => updateChildren(item.id, list)}
                              group={{
                                name: 'children',
                                pull: true,
                                put: true,
                              }}
                              animation={150}
                              forceFallback
                              emptyInsertThreshold={25}
                              onAdd={(evt) => {
                                const child = (evt.item as any).__sortableData;
                                const from = evt.from.dataset.parentId;

                                if (from && from !== item.id) {
                                  removeChildFromParent(from, child.id);
                                }
                              }}
                            >
                              {item.children.map((child) => (
                                <div
                                  key={child.id}
                                  className="menu-list-drag-item mb-1 p-1 border bg-white cursor-move"
                                >
                                  <i className="fa-solid fa-chevron-circle-right"></i>{' '}
                                  {child.title}
                                </div>
                              ))}

                              {/* CRITICAL DROP ZONE */}
                              <div className="h-6 bg-transparent dropzone h-3 bg-transparent" />
                            </ReactSortable>
                          )}
                        </div>
                      ))}
                    </ReactSortable>
                  </div>
                </div>
              </div>
            </div>

            <div className="modal-footer flex justify-end gap-2 pr-4 p-2">
              <Button type="submit" className="w-40 primary-button">
                Save
              </Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>
    </section>
  );
};
export default HorizontalMenu;