"use client";

import Button from "@/components/Forms/Button";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import ModalReact from "@/components/Modal/ModalReact";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import {
  PredefinicaoPermissao,
  TipoPredefinicao,
  cadastrarPredefinicaoPermissao,
  editarPredefinicaoPermissao,
  excluirPredefinicaoPermissao,
  listarPredefinicoesPermissoes,
} from "@/requests/CRUD/Usuario/predefinicoesPermissoes";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";

interface PermissionConfigItem {
  id: string;
  title: string;
  description: string;
}

interface PermissionConfigCategory {
  category: string;
  permissions: PermissionConfigItem[];
}

interface GerenciarPredefinicoesProps {
  open: boolean;
  onClose: () => void;
  permissionsConfig: PermissionConfigCategory[];
  onSaved?: () => void;
  // Contexto dos grupos gerenciados: 'usuario' (default) ou 'perfil'.
  tipo?: TipoPredefinicao;
}

// Registro em edição no modal. id_predefinicao ausente => grupo novo, ainda não salvo.
interface PredefinicaoEditavel {
  id_predefinicao?: number | string;
  nome_predefinicao: string;
  descricao_predefinicao: string;
  permissoes_predefinicao: string[];
}

const GerenciarPredefinicoes = ({
  open,
  onClose,
  permissionsConfig,
  onSaved,
  tipo = "usuario",
}: GerenciarPredefinicoesProps) => {
  const [predefinicoes, setPredefinicoes] = useState<PredefinicaoEditavel[]>(
    [],
  );
  const [isLoading, setIsLoading] = useState(false);
  const [savingIndex, setSavingIndex] = useState<number | null>(null);

  const carregar = () => {
    setIsLoading(true);
    listarPredefinicoesPermissoes(tipo)
      .then((res: PredefinicaoPermissao[]) => {
        setPredefinicoes(
          (res || []).map((p) => ({
            id_predefinicao: p.id_predefinicao,
            nome_predefinicao: p.nome_predefinicao ?? "",
            descricao_predefinicao: p.descricao_predefinicao ?? "",
            permissoes_predefinicao: p.permissoes_predefinicao ?? [],
          })),
        );
      })
      .finally(() => setIsLoading(false));
  };

  useEffect(() => {
    if (open) {
      carregar();
    }
  }, [open]);

  const atualizarCampo = (
    index: number,
    campo: keyof PredefinicaoEditavel,
    valor: any,
  ) => {
    setPredefinicoes((prev) =>
      prev.map((item, i) =>
        i === index ? { ...item, [campo]: valor } : item,
      ),
    );
  };

  const togglePermissao = (index: number, permId: string) => {
    setPredefinicoes((prev) =>
      prev.map((item, i) => {
        if (i !== index) return item;
        const jaTem = item.permissoes_predefinicao.includes(permId);
        return {
          ...item,
          permissoes_predefinicao: jaTem
            ? item.permissoes_predefinicao.filter((id) => id !== permId)
            : [...item.permissoes_predefinicao, permId],
        };
      }),
    );
  };

  const toggleCategoria = (
    index: number,
    categoria: PermissionConfigCategory,
    marcar: boolean,
  ) => {
    const idsCategoria = categoria.permissions.map((p) => p.id);
    setPredefinicoes((prev) =>
      prev.map((item, i) => {
        if (i !== index) return item;
        const restante = item.permissoes_predefinicao.filter(
          (id) => !idsCategoria.includes(id),
        );
        return {
          ...item,
          permissoes_predefinicao: marcar
            ? [...restante, ...idsCategoria]
            : restante,
        };
      }),
    );
  };

  const adicionarGrupo = () => {
    setPredefinicoes((prev) => [
      ...prev,
      {
        nome_predefinicao: "",
        descricao_predefinicao: "",
        permissoes_predefinicao: [],
      },
    ]);
  };

  const salvarGrupo = async (index: number) => {
    const grupo = predefinicoes[index];
    if (!grupo.nome_predefinicao.trim()) {
      toast.error("Informe o nome da predefinição!");
      return;
    }

    setSavingIndex(index);
    try {
      if (grupo.id_predefinicao) {
        await editarPredefinicaoPermissao({
          id_predefinicao: grupo.id_predefinicao,
          nome_predefinicao: grupo.nome_predefinicao,
          descricao_predefinicao: grupo.descricao_predefinicao,
          permissoes_predefinicao: grupo.permissoes_predefinicao,
        });
      } else {
        await cadastrarPredefinicaoPermissao({
          nome_predefinicao: grupo.nome_predefinicao,
          descricao_predefinicao: grupo.descricao_predefinicao,
          permissoes_predefinicao: grupo.permissoes_predefinicao,
          tipo_predefinicao: tipo,
        });
      }
      carregar();
      onSaved?.();
    } catch (e) {
      // erro já tratado/exibido pelo serviço de API
    } finally {
      setSavingIndex(null);
    }
  };

  const excluirGrupo = (index: number) => {
    const grupo = predefinicoes[index];

    // Grupo ainda não persistido: remove apenas do estado local.
    if (!grupo.id_predefinicao) {
      setPredefinicoes((prev) => prev.filter((_, i) => i !== index));
      return;
    }

    handleSweetAlert(
      {
        icon: "warning",
        title: "Excluir Predefinição",
        html: `Tem certeza que deseja excluir a predefinição <b>${grupo.nome_predefinicao}</b>?`,
      },
      async () => {
        try {
          await excluirPredefinicaoPermissao({
            id_predefinicao: grupo.id_predefinicao as number | string,
          });
          carregar();
          onSaved?.();
        } catch (e) {
          // erro já tratado/exibido pelo serviço de API
        }
      },
    );
  };

  return (
    <ModalReact
      open={open}
      onClose={onClose}
      title="Gerenciar Predefinições Rápidas"
      className="w-[90%] max-w-[1000px]"
    >
      <div className="p-5 space-y-5">
        <p className="text-sm text-gray-600">
          Defina quais permissões cada grupo de Predefinições Rápidas aplica por
          padrão. As alterações valem para todos os cadastros de{" "}
          {tipo === "perfil" ? "perfil" : "usuário"}.
        </p>

        {isLoading ? (
          <div className="flex justify-center w-full py-10">
            <LoaderSun />
          </div>
        ) : (
          <>
            {predefinicoes.map((grupo, index) => (
              <div
                key={grupo.id_predefinicao ?? `novo-${index}`}
                className="bg-white rounded-xl border border-gray-200 p-5 shadow-sm space-y-4"
              >
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  <div>
                    <label className="block text-xs font-medium text-gray-600 mb-1">
                      Nome
                    </label>
                    <input
                      type="text"
                      value={grupo.nome_predefinicao}
                      onChange={(e) =>
                        atualizarCampo(
                          index,
                          "nome_predefinicao",
                          e.target.value,
                        )
                      }
                      placeholder="Ex.: Vendedor"
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
                    />
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-gray-600 mb-1">
                      Descrição
                    </label>
                    <input
                      type="text"
                      value={grupo.descricao_predefinicao}
                      onChange={(e) =>
                        atualizarCampo(
                          index,
                          "descricao_predefinicao",
                          e.target.value,
                        )
                      }
                      placeholder="Breve descrição do grupo"
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
                    />
                  </div>
                </div>

                <div className="space-y-4">
                  {permissionsConfig.map((categoria) => {
                    const idsCategoria = categoria.permissions.map((p) => p.id);
                    const marcados = idsCategoria.filter((id) =>
                      grupo.permissoes_predefinicao.includes(id),
                    ).length;
                    const todosMarcados = marcados === idsCategoria.length;

                    return (
                      <div
                        key={categoria.category}
                        className="border border-gray-100 rounded-lg overflow-hidden"
                      >
                        <div className="flex items-center justify-between px-4 py-2 bg-gray-50 border-b border-gray-100">
                          <span className="text-xs font-semibold text-gray-700">
                            {categoria.category}{" "}
                            <span className="text-gray-400 font-normal">
                              ({marcados}/{idsCategoria.length})
                            </span>
                          </span>
                          <label className="flex items-center gap-2 cursor-pointer">
                            <input
                              type="checkbox"
                              checked={todosMarcados}
                              onChange={(e) =>
                                toggleCategoria(
                                  index,
                                  categoria,
                                  e.target.checked,
                                )
                              }
                              className="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500 cursor-pointer"
                            />
                            <span className="text-xs text-gray-500">Todos</span>
                          </label>
                        </div>
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4">
                          {categoria.permissions.map((perm) => (
                            <label
                              key={perm.id}
                              className="flex items-start gap-2 px-4 py-2 hover:bg-gray-50 cursor-pointer"
                            >
                              <input
                                type="checkbox"
                                checked={grupo.permissoes_predefinicao.includes(
                                  perm.id,
                                )}
                                onChange={() =>
                                  togglePermissao(index, perm.id)
                                }
                                className="w-4 h-4 mt-0.5 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500 cursor-pointer flex-shrink-0"
                              />
                              <span className="text-xs text-gray-700">
                                {perm.title}
                              </span>
                            </label>
                          ))}
                        </div>
                      </div>
                    );
                  })}
                </div>

                <div className="flex justify-end gap-2">
                  <Button
                    type="button"
                    className="bg-red-500 hover:bg-red-600 text-white text-sm px-4 py-2"
                    onClick={() => excluirGrupo(index)}
                  >
                    Excluir
                  </Button>
                  <Button
                    type="button"
                    loading={savingIndex === index}
                    className="bg-primary text-white text-sm px-4 py-2"
                    onClick={() => salvarGrupo(index)}
                  >
                    Salvar
                  </Button>
                </div>
              </div>
            ))}

            {predefinicoes.length === 0 && (
              <div className="text-center py-8 text-gray-500 text-sm">
                Nenhuma predefinição cadastrada.
              </div>
            )}

            <div className="flex justify-start">
              <Button
                type="button"
                className="bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm px-4 py-2"
                onClick={adicionarGrupo}
              >
                + Nova Predefinição
              </Button>
            </div>
          </>
        )}
      </div>
    </ModalReact>
  );
};

export default GerenciarPredefinicoes;