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,
  getOptionsFromEnumPermision,
  Perm_Cards,
} from "@/enums/permissoesPerfil";
import { useEffect, useState } from "react";

// Menu "c. Negócio/Card": só as permissões gerais do card (c1..c11). As
// permissões de realizar / estornar pendência ficam no menu
// "d. Linha Pendências" (TabelaLinhaPendencias), agrupadas por tipo de negócio.
const TabelaCard = ({
  defaultValues,
  disabledFields,
  children,
  form,
  storageKey,
}: any) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [checkedValues, setCheckedValues] = useState<Record<string, boolean>>(
    {},
  );

  const perfis = getOptionsFromEnumPermision(Perm_Cards, Desc_Perm_Cards);

  useEffect(() => {
    // Carrega valores do localStorage se disponíveis, caso contrário, usa defaultValues
    const storedValues = localStorage.getItem(storageKey);
    const initialCheckedValues = storedValues
      ? JSON.parse(storedValues)
      : perfis.reduce(
        (acc, perfil) => {
          acc[perfil.value] =
            defaultValues && defaultValues[perfil.value] === "1";
          return acc;
        },
        {} as Record<string, boolean>,
      );
    setCheckedValues(initialCheckedValues);
    setIsLoaded(true);
  }, [defaultValues]);

  useEffect(() => {
    if (!isLoaded) return;
    localStorage.setItem(storageKey, JSON.stringify(checkedValues));
  }, [checkedValues, isLoaded]);

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

  const marcarTodos = (marcado: boolean) => {
    perfis.forEach((perfil) =>
      form.setValue(perfil.value, marcado ? "1" : "0"),
    );
    setCheckedValues(
      perfis.reduce(
        (acc, perfil) => {
          acc[perfil.value] = marcado;
          return acc;
        },
        {} as Record<string, boolean>,
      ),
    );
  };

  return (
    <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 flex-1 py-1 px-2 text-sm"
                  onClick={() => marcarTodos(false)}
                >
                  Desmarcar Todos
                </Button>
                <Button
                  type="button"
                  className="flex-1 py-1 px-2 text-sm"
                  onClick={() => marcarTodos(true)}
                >
                  Marcar Todos
                </Button>
              </div>
            </TableCell>
          </TableRow>

          {perfis.map((perfil, index) => (
            <TableRow key={index}>
              <TableCell className="py-2 text-left">{perfil.label}</TableCell>
              <TableCell fullWidth={true} className="py-2 text-center">
                <Input
                  type="checkbox"
                  name={perfil.value}
                  checked={checkedValues[perfil.value] || false}
                  onChange={(e) =>
                    setPermissaoValue(perfil.value, e.target.checked)
                  }
                  disabled={disabledFields?.some(
                    (field: any) => field === perfil.value,
                  )}
                />
              </TableCell>
            </TableRow>
          ))}
        </tbody>
      </Table>

      {children}
    </div>
  );
};

export default TabelaCard;