import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import { Accordion } from "@/components/ui/accordion";
import {
  Table,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import React, { useEffect, useMemo, useState } from "react";

interface MenuItem {
  exclusivo_customax: string;
  icone_menu: string;
  id_menu: string;
  index_menu: number | null;
  menu_favorito: boolean;
  menu_pai: string;
  menus: MenuItem[];
  nome_menu: string;
  rotina_menu: string;
  tipo_icone_menu: string;
  tipo_menu: string;
}

const TabelaMenu = ({
  form,
  defaultValues,
  menus,
  storageKey,
  letra,
}: any) => {
  const [mobileView, setMobileView] = useState(false);

  // Numeração por subgrupo: as linhas exibidas (menus e submenus visíveis)
  // recebem a letra do grupo seguida do número dentro do grupo (b1, b2...).
  const numeroPorMenu = useMemo(() => {
    const mapa: Record<string, string> = {};
    if (!letra) return mapa;
    let numero = 1;
    (menus || []).forEach((menu: MenuItem) => {
      mapa[menu.id_menu] = `${letra}${numero++}`;
      menu.menus
        ?.filter((submenu: MenuItem) => submenu.menu_favorito === false)
        .forEach((submenu: MenuItem) => {
          mapa[submenu.id_menu] = `${letra}${numero++}`;
        });
    });
    return mapa;
  }, [menus, letra]);

  const nomeNumerado = (id: string, nome: string) =>
    numeroPorMenu[id]
      ? `${numeroPorMenu[id]}. Mostrar Menu ${nome}`
      : `Mostrar Menu ${nome}`;

  const [menusId, setMenusId] = useState<any[]>(() => {
    const storedMenus = localStorage.getItem(storageKey);
    if (storedMenus) {
      return JSON.parse(storedMenus);
    } else if (defaultValues && defaultValues["permissoes_perfil"]) {
      return defaultValues["permissoes_perfil"]
        .split("^")
        .filter((item: string) => item !== "");
    } else {
      return [];
    }
  });

  useEffect(() => {
    form.setValue("permissoes_perfil", menusId.join("^"));
    localStorage.setItem(storageKey, JSON.stringify(menusId));
  }, [menusId]);

  useEffect(() => {
    const windowSize = window.innerWidth;
    setMobileView(windowSize < 640);
  }, []);

  return (
    <>
      {mobileView ? (
        <Accordion type="single" collapsible>
          {/* {menusWithoutSubmenu.map((menu: any, index: number) => (
            <AccordionItem className="text-sm" key={index} value={menu.id_menu}>
              <TableRow className="">
                <TableCell className="py-2 w-[75%] text-start ">
                  {menu.nome_menu}
                </TableCell>
                <TableCell className="py-2 text-center">
                  <Input
                    name=""
                    checked={menusId.some((id) => id == menu.id_menu)}
                    type="checkbox"
                    onChange={(e) => {
                      if (e.target.checked) {
                        setMenusId((previous) => [
                          ...previous,
                          menu.id_menu,
                          ...menu.menus.map((submenu: any) => submenu.id_menu),
                        ]);
                      } else {
                        setMenusId((previous) =>
                          previous.filter(
                            (menufiltro) =>
                              menufiltro !== menu.id_menu &&
                              menu.menus.every(
                                (submenu: any) => submenu.id_menu != menufiltro
                              )
                          )
                        );
                      }
                    }}
                  />
                </TableCell>
              </TableRow>
            </AccordionItem>
          ))} */}
          {/* {menus &&
            menusWithSubmenu.map((menu: any, index: number) => (
              <AccordionItem key={index} value={menu.id_menu}>
                <AccordionTrigger className="text-sm">
                  {menu.nome_menu}
                </AccordionTrigger>
                <AccordionContent>
                  <TableRow>
                    <TableCell className="py-2 font-medium text-start">
                      Selecionar todos
                    </TableCell>
                    <TableCell className="py-2 text-start">
                      <Input
                        name=""
                        checked={menu.menus.every((submenu: any) =>
                          menusId.includes(submenu.id_menu)
                        )}
                        type="checkbox"
                        onChange={(e) => {
                          if (e.target.checked) {
                            setMenusId((previous) => [
                              ...previous,
                              menu.id_menu,
                              ...menu.menus.map(
                                (submenu: any) => submenu.id_menu
                              ),
                            ]);
                          } else {
                            setMenusId((previous) =>
                              previous.filter(
                                (menufiltro) =>
                                  menufiltro !== menu.id_menu &&
                                  menu.menus.every(
                                    (submenu: any) =>
                                      submenu.id_menu != menufiltro
                                  )
                              )
                            );
                          }
                        }}
                      />
                    </TableCell>
                  </TableRow>
                  {menu.menus?.map((submenu: MenuItem) => (
                    <TableRow key={submenu.id_menu}>
                      <TableCell className="py-2 text-start">
                        {submenu.nome_menu}
                      </TableCell>
                      <TableCell className="py-2 text-center">
                        <Input
                          name=""
                          checked={menusId.some((id) => id == submenu.id_menu)}
                          type="checkbox"
                          onChange={(e) =>
                            handleCheckboxChange(
                              menu,
                              submenu,
                              e.target.checked
                            )
                          }
                        />
                      </TableCell>
                    </TableRow>
                  ))}
                </AccordionContent>
              </AccordionItem>
            ))} */}
        </Accordion>
      ) : (
        <Table className="min-w-full bg-white dark:bg-[#1d2a39] border border-gray-300 shadow-sm">
          <TableHeader>
            <TableRow>
              <TableHead className="font-bold py-2 px-4 border-b text-center">
                Menu
              </TableHead>
              <TableHead className="w-6 font-bold">Acesso</TableHead>
            </TableRow>
          </TableHeader>
          <tbody>
            <TableRow>
              <TableCell className="py-2 text-center ">
                <div className="mx-auto flex flex-row gap-2">
                  <Button
                    type="button"
                    className="bg-meta-1 flex-1 py-1 px-2 text-sm"
                    onClick={() => {
                      setMenusId([]);
                    }}
                  >
                    Desmarcar Todos Menus
                  </Button>
                  <Button
                    type="button"
                    className="flex-1 py-1 px-2 text-sm"
                    onClick={() => {
                      setMenusId(
                        menus
                          .map((menu: any) => menu.id_menu)
                          .concat(
                            menus.map((menu: any) =>
                              menu.menus.map((submenu: any) => submenu.id_menu)
                            )
                          )
                          .flat()
                      );
                    }}
                  >
                    Marcar Todos Menus
                  </Button>
                </div>
              </TableCell>
              <TableCell className="py-2 text-center"></TableCell>
            </TableRow>
            {menus?.map((menu: MenuItem) => (
              <React.Fragment key={menu.id_menu}>
                <TableRow key={menu.id_menu}>
                  <TableCell className="py-2 text-left font-semibold">
                    {nomeNumerado(menu.id_menu, menu.nome_menu)}
                  </TableCell>
                  <TableCell className="py-2 text-center">
                    <Input
                      name=""
                      checked={menusId.some((id) => id == menu.id_menu)}
                      type="checkbox"
                      onChange={(e) => {
                        if (e.target.checked) {
                          setMenusId((previous) => [
                            ...previous,
                            menu.id_menu,
                            ...menu.menus.map(
                              (submenu: MenuItem) => submenu.id_menu
                            ),
                          ]);
                        } else {
                          setMenusId((previous) =>
                            previous.filter(
                              (menufiltro) =>
                                menufiltro !== menu.id_menu &&
                                menu.menus.every(
                                  (submenu: MenuItem) =>
                                    submenu.id_menu != menufiltro
                                )
                            )
                          );
                        }
                      }}
                    />
                  </TableCell>
                </TableRow>

                {/* Renderizar os submenus, se houver */}
                {menu.menus.length > 0 &&
                  menu.menus
                    .filter(
                      (submenu: MenuItem) => submenu.menu_favorito === false
                    ) // Filtrar apenas os submenus com menu_favorito igual a "false"
                    .map((submenu: MenuItem) => (
                      <TableRow key={submenu.id_menu} className="submenu">
                        <TableCell className="py-2 pl-8 text-left">
                          {nomeNumerado(submenu.id_menu, submenu.nome_menu)}
                        </TableCell>
                        <TableCell className="py-2 text-center">
                          <Input
                            name=""
                            checked={menusId.some(
                              (id) => id == submenu.id_menu
                            )}
                            type="checkbox"
                            onChange={(e) => {
                              if (e.target.checked) {
                                setMenusId((previous) => [
                                  ...previous,
                                  submenu.id_menu,
                                ]);
                              } else {
                                setMenusId((previous) =>
                                  previous.filter(
                                    (id) => id !== submenu.id_menu
                                  )
                                );
                              }
                            }}
                          />
                        </TableCell>
                      </TableRow>
                    ))}
              </React.Fragment>
            ))}
          </tbody>
        </Table>
      )}
    </>
  );
};

export default TabelaMenu;