import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import {
  Table,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Desc_Perm_Cards,
  Desc_Perm_Comissoes,
  Desc_Perm_Contratos,
  Desc_Perm_Gerais,
  Desc_Perm_Propostas,
  getOptionsFromEnumPermision,
  Perm_Cards,
  Perm_Comissoes,
  Perm_Contratos,
  Perm_Gerais,
  Perm_Propostas,
} from "@/enums/permissoesPerfil";
import { useEffect, useMemo, useState } from "react";

// Cada categoria de permissão numerada por subgrupo (a1, c1...) e a storageKey
// usada pela sua aba individual, para manter o estado sincronizado entre as
// abas e esta visão.
const CATEGORIAS = [
  {
    perm: Perm_Gerais,
    desc: Desc_Perm_Gerais,
    storageKey: "@permissoes_config_gerais",
  },
  {
    perm: Perm_Cards,
    desc: Desc_Perm_Cards,
    storageKey: "@permissoes_negocios_cards",
  },
  {
    perm: Perm_Propostas,
    desc: Desc_Perm_Propostas,
    storageKey: "@permissoes_propostas",
  },
  {
    perm: Perm_Contratos,
    desc: Desc_Perm_Contratos,
    storageKey: "@permissoes_contratos",
  },
  {
    perm: Perm_Comissoes,
    desc: Desc_Perm_Comissoes,
    storageKey: "@permissoes_comissoes",
  },
];

// permissoesExtras: permissões que não vêm de um enum fixo. Hoje são as da
// Linha de Pendências, que o FormEditPerfil monta a partir do banco já com a
// numeração por tipo de negócio ("d1. ... (Usina de Geração)"). Uma permissão
// usada em mais de um tipo aparece uma vez por tipo; como a coluna em `perfis`
// é a mesma, as linhas ficam sempre com o mesmo estado.
const TabelaGerenciarPermissoes = ({
  defaultValues,
  disabledFields,
  children,
  form,
  permissoesExtras = [],
}: any) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  const [checkedValues, setCheckedValues] = useState<Record<string, boolean>>(
    {}
  );

  // Lista única agregando todas as permissões numeradas por subgrupo,
  // guardando a storageKey da categoria de origem. O número (ex.: "a1") já
  // faz parte do label, então a busca por nome também cobre a busca por número.
  const permissoes = useMemo(
    () => [
      ...CATEGORIAS.flatMap(({ perm, desc, storageKey }) =>
        getOptionsFromEnumPermision(perm, desc).map((option) => ({
          ...option,
          storageKey,
        }))
      ),
      ...permissoesExtras,
    ],
    [permissoesExtras]
  );

  useEffect(() => {
    // Reaproveita o que já foi marcado nas abas individuais (localStorage),
    // caindo para os defaultValues do perfil quando não houver valor salvo.
    const storageKeys = Array.from(
      new Set(permissoes.map((permissao) => permissao.storageKey))
    );
    const stored = storageKeys.reduce(
      (acc, storageKey) => {
        const raw = localStorage.getItem(storageKey);
        return raw ? { ...acc, ...JSON.parse(raw) } : acc;
      },
      {} as Record<string, boolean>
    );

    const initialCheckedValues = permissoes.reduce(
      (acc, permissao) => {
        acc[permissao.value] =
          permissao.value in stored
            ? stored[permissao.value]
            : defaultValues && defaultValues[permissao.value] === "1";
        return acc;
      },
      {} as Record<string, boolean>
    );

    setCheckedValues(initialCheckedValues);
    setIsLoaded(true);
  }, [defaultValues, permissoes]);

  const filteredPermissoes = useMemo(() => {
    const query = searchQuery.trim().toLowerCase();
    if (!query) return permissoes;
    return permissoes.filter((permissao) =>
      permissao.label.toLowerCase().includes(query)
    );
  }, [searchQuery, permissoes]);

  const togglePermissao = (permissao: any, checked: boolean) => {
    form.setValue(permissao.value, checked ? "1" : "0");
    setCheckedValues((prev) => ({ ...prev, [permissao.value]: checked }));

    // Mantém a storageKey da categoria de origem sincronizada com a aba individual.
    const raw = localStorage.getItem(permissao.storageKey);
    const parsed = raw ? JSON.parse(raw) : {};
    parsed[permissao.value] = checked;
    localStorage.setItem(permissao.storageKey, JSON.stringify(parsed));

    // Permissão com detalhe por tipo de negócio (Linha de Pendências): aqui o
    // toggle é global, então o detalhe é descartado para a aba "d. Linha
    // Pendências" recalcular (ligada => todos os tipos, desligada => nenhum).
    if (!permissao.storageKeyDetalhe) return;
    const rawDetalhe = localStorage.getItem(permissao.storageKeyDetalhe);
    if (!rawDetalhe) return;
    const detalhe = JSON.parse(rawDetalhe);
    delete detalhe[permissao.value];
    localStorage.setItem(
      permissao.storageKeyDetalhe,
      JSON.stringify(detalhe)
    );
  };

  const marcarTodos = (checked: boolean) => {
    filteredPermissoes.forEach((permissao) =>
      togglePermissao(permissao, checked)
    );
  };

  if (!isLoaded) return null;

  return (
    <div>
      {/* Busca por nome ou número da permissão (padrão FormUsuario) */}
      <div className="relative mb-4">
        <svg
          className="absolute left-3 top-3 w-4 h-4 text-gray-400"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
          />
        </svg>
        <input
          type="text"
          placeholder="Buscar por nome ou número da permissão..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
        />
      </div>

      <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">
              Nome
            </TableHead>
            <TableHead className="font-bold py-2 px-4 border-b text-end">
              Acesso
            </TableHead>
          </TableRow>
        </TableHeader>
        <tbody>
          <TableRow>
            <TableCell className="py-2 text-center">
              <div className="flex justify-center gap-2">
                <Button
                  type="button"
                  className="bg-meta-1 max-sm:text-xs flex-1 py-1 px-2 text-sm"
                  onClick={() => marcarTodos(false)}
                >
                  Desmarcar Todos
                </Button>
                <Button
                  type="button"
                  className="flex-1 py-1 max-sm:text-xs px-2 text-sm"
                  onClick={() => marcarTodos(true)}
                >
                  Marcar Todos
                </Button>
              </div>
            </TableCell>
          </TableRow>
          {filteredPermissoes.map((permissao, index) => (
            <TableRow key={index}>
              <TableCell className="py-2 text-left">
                {permissao.label}
              </TableCell>
              <TableCell fullWidth={true} className="py-2 text-center">
                <Input
                  type="checkbox"
                  name={permissao.value}
                  checked={checkedValues[permissao.value] || false}
                  onChange={(e) =>
                    togglePermissao(permissao, e.target.checked)
                  }
                  disabled={disabledFields?.some(
                    (field: any) => field === permissao.value
                  )}
                />
              </TableCell>
            </TableRow>
          ))}
          {filteredPermissoes.length === 0 && (
            <TableRow>
              <TableCell colSpan={2} className="py-8 text-center text-gray-500">
                Nenhuma permissão encontrada para &quot;{searchQuery}&quot;
              </TableCell>
            </TableRow>
          )}
        </tbody>
      </Table>

      {children}
    </div>
  );
};

export default TabelaGerenciarPermissoes;