import ModalComponente from "@/components/Modal/ModalComponente";
import { Button } from "@/components/ui/button";
import { listarItenskitsDiversos } from "@/requests/CRUD/ColetaDados/listarItenskitsDiversos";
import { apagarDistribuidor } from "@/requests/CRUD/Distribuidores/apagarDistribuidor";
import { editarDistribuidor } from "@/requests/CRUD/Distribuidores/editarDistribuidor";
import {
  alterarStatusDistribuidor,
  desativarItensDistribuidor,
} from "@/requests/CRUD/Distribuidores/salvarDistribuidorCredencial";
import { listarUsuarioPeloId } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useAuth } from "@/src/contexts/authContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { FormatFields, GetForm } from "@/utils";
import { CircleUser, Clock } from "lucide-react";
import { useEffect, useState } from "react";
import { FaEdit } from "react-icons/fa";
import { FaTrash } from "react-icons/fa6";
import {
  HiOutlineIdentification,
  HiOutlineLocationMarker,
  HiOutlineMail,
  HiOutlineOfficeBuilding,
  HiOutlinePhone,
  HiOutlineUser,
} from "react-icons/hi";
import Swal from "sweetalert2";
import FormEditarDistribuidor from "./FormEditarDistribuidor";

const DistribuidoresCfg = ({
  distribuidor,
  credenciais,
  setRelistarDistribuidores,
  relistarDistribuidores,
}: any) => {
  const [isLoading, setIsLoading] = useState(false);
  const { handleSubmit, ...form } = GetForm();
  const { isMobile } = useScreenContext();
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const [openModalEdit, setOpenModalEdit] = useState(false);
  const [selectedDistribuidor, setSelectedDistribuidor] = useState<any>([]);

  const isAtivo = distribuidor.status_distribuidor == 1;
  const isFornecedor = distribuidor.isFornecedor_distribuidor == 1;
  const hasCsvOption = true; // Habilitado para todos os distribuidores
  const [usuarioAtualizador, setUsuarioAtualizador] = useState("");

  const editStatusDistribuidor = async (id: number, status: number) => {
    if (status == 1) {
      const listagem = await listarItenskitsDiversos();
      const itensAtivos = listagem.filter(
        (item: any) =>
          String(item.codDistribuidor_item) === String(id) &&
          String(item.status_item) === "1"
      );

      if (itensAtivos.length > 0) {
        const result = await Swal.fire({
          title: "Itens ativos encontrados",
          text: `Existem ${itensAtivos.length} item(ns) ativo(s) vinculados a este distribuidor. Deseja desativar os itens e o distribuidor?`,
          icon: "warning",
          showCancelButton: true,
          confirmButtonColor: "#d33",
          cancelButtonColor: "#3085d6",
          confirmButtonText: "Desativar itens e distribuidor",
          cancelButtonText: "Cancelar",
        });

        if (!result.isConfirmed) {
          Swal.fire({
            title: "Desativação cancelada",
            text: "Não é possível desativar o distribuidor mantendo itens ativos.",
            icon: "info",
            confirmButtonText: "OK",
          });
          return;
        }

        try {
          setIsLoading(true);
          await desativarItensDistribuidor({ id_distribuidor: id });
          await alterarStatusDistribuidor({ id, status: 0 });
          setRelistarDistribuidores(relistarDistribuidores + 1);
        } finally {
          setIsLoading(false);
        }
        return;
      }
    }

    Swal.fire({
      title: status == 1 ? "Desativar Distribuidor?" : "Ativar Distribuidor?",
      text: " ",
      icon: "warning",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: status == 1 ? "Desativar" : "Ativar",
      cancelButtonText: "Cancelar",
    }).then((result) => {
      if (result.isConfirmed) {
        const novoStatus = status == 1 ? 0 : 1;
        setIsLoading(true);
        alterarStatusDistribuidor({ id, status: novoStatus })
          .then(() => setRelistarDistribuidores(relistarDistribuidores + 1))
          .finally(() => setIsLoading(false));
      }
    });
  };

  const editDistribuidor = async (data: any) => {
    data["id_distribuidor"] = selectedDistribuidor;
    editarDistribuidor(data).then(() => {
      setRelistarDistribuidores(relistarDistribuidores + 1);
      setOpenModalEdit(false);
    });
  };

  const handleDeleteDistribuidor = async (distribuidor: any) => {
    const listagem = await listarItenskitsDiversos();
    const existeDistribuidor = listagem.some(
      (item: any) => item.codDistribuidor_item == distribuidor.id_distribuidor
    );

    if (existeDistribuidor) {
      Swal.fire({
        title: "Atenção!",
        text: "Exclusão não permitida pois esse distribuidor está sendo utilizado no cadastro de itens do kit manual!",
        icon: "info",
        confirmButtonText: "OK",
      });
    } else {
      Swal.fire({
        title: "Excluir " + distribuidor.nome_distribuidor,
        text: "Deseja excluir o distribuidor selecionado?",
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: "Sim",
        confirmButtonColor: "#d33",
        cancelButtonText: "Cancelar",
        cancelButtonColor: "#3085d6",
      }).then((result) => {
        if (result.isConfirmed) {
          apagarDistribuidor(distribuidor).then(() =>
            setRelistarDistribuidores(relistarDistribuidores + 1)
          );
        }
      });
    }
  };
  useEffect(() => {
    if (distribuidor?.usuario_log_distribuidor) {
      listarUsuarioPeloId(distribuidor?.usuario_log_distribuidor).then((e) => {
        setUsuarioAtualizador(e.nome_usuario);
      });
    }
  }, [distribuidor]);
  return (
    <>
      <div className="group relative bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden flex flex-col">
        <div
          className={`h-1 w-full ${isAtivo ? "bg-gradient-to-r from-emerald-400 to-teal-500" : "bg-gradient-to-r from-gray-300 to-gray-400"}`}
        />

        <div className="px-5 pt-4 pb-3 flex items-start justify-between gap-3">
          <div className="flex items-start gap-3 min-w-0">
            <div
              className={`flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center text-white font-bold text-sm ${isAtivo ? "bg-gradient-to-br from-blue-500 to-blue-700" : "bg-gradient-to-br from-gray-400 to-gray-500"}`}
            >
              {distribuidor.nome_distribuidor?.charAt(0).toUpperCase()}
            </div>
            <div className="min-w-0">
              <h2 className="text-base font-bold text-gray-800 leading-tight truncate">
                {distribuidor.nome_distribuidor}
              </h2>
              <div className="flex items-center gap-2 mt-0.5 flex-wrap">
                <span
                  className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full ${isFornecedor ? "bg-violet-50 text-violet-600" : "bg-blue-50 text-blue-600"}`}
                >
                  <HiOutlineOfficeBuilding size={11} />
                  {isFornecedor ? "Fornecedor" : "Distribuidor"}
                </span>
                <span
                  className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full ${isAtivo ? "bg-emerald-50 text-emerald-600" : "bg-red-50 text-red-500"}`}
                >
                  <span
                    className={`w-1.5 h-1.5 rounded-full ${isAtivo ? "bg-emerald-500" : "bg-red-400"}`}
                  />
                  {isAtivo ? "Ativo" : "Inativo"}
                </span>
              </div>
            </div>
          </div>

          <div className="flex items-center gap-1.5 flex-shrink-0">
            <button
              onClick={() =>
                editStatusDistribuidor(
                  distribuidor.id_distribuidor,
                  distribuidor.status_distribuidor
                )
              }
              title={isAtivo ? "Desativar" : "Ativar"}
              className={`relative w-10 h-5 rounded-full transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-1 ${isAtivo ? "bg-emerald-500 focus:ring-emerald-400" : "bg-warmGray-300 focus:ring-warmGray-400"}`}
            >
              <span
                className={`absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow-sm transition-transform duration-300 ${isAtivo ? "translate-x-5" : "translate-x-0"}`}
              />
            </button>

            {isAtivo && (
              <button
                onClick={() => {
                  setOpenModalEdit(true);
                  setSelectedDistribuidor(distribuidor.id_distribuidor);
                }}
                title="Editar"
                className="w-7 h-7 rounded-lg flex items-center justify-center text-gray-400 hover:text-blue-600 hover:bg-blue-50 transition-colors"
              >
                <FaEdit size={13} />
              </button>
            )}
            <button
              onClick={() => handleDeleteDistribuidor(distribuidor)}
              title="Excluir"
              className="w-7 h-7 rounded-lg flex items-center justify-center text-gray-400 hover:text-red-500 hover:bg-red-50 transition-colors"
            >
              <FaTrash size={13} />
            </button>
          </div>
        </div>

        <div className="mx-5 mb-3">
          <span className="inline-flex items-center gap-1.5 text-xs font-medium text-amber-700 bg-amber-50 border border-amber-200 px-2.5 py-1 rounded-lg">
            <span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
            Integração indisponível com esse{" "}
            {isFornecedor ? "Fornecedor" : "Distribuidor"}
          </span>
        </div>

        <div className="mx-5 border-t border-gray-100" />

        <div className="px-5 py-3 grid grid-cols-2 gap-x-4 gap-y-2.5 flex-1 content-start">
          <InfoRow
            icon={<HiOutlineLocationMarker size={13} />}
            label="Endereço"
            value={`${distribuidor.endereco_distribuidor}${distribuidor.numero_distribuidor ? ", " + distribuidor.numero_distribuidor : ""}`}
          />
          <InfoRow
            icon={<HiOutlineLocationMarker size={13} />}
            label="Bairro / CEP"
            value={`${distribuidor.bairro_distribuidor} · ${distribuidor.cep_distribuidor}`}
          />
          <InfoRow
            icon={<HiOutlineLocationMarker size={13} />}
            label="Cidade"
            value={`${distribuidor.cidade_distribuidor} - ${distribuidor.estado_distribuidor}`}
          />
          {distribuidor.complemento_distribuidor && (
            <InfoRow
              icon={<HiOutlineLocationMarker size={13} />}
              label="Complemento"
              value={distribuidor.complemento_distribuidor}
            />
          )}
          <InfoRow
            icon={<HiOutlineIdentification size={13} />}
            label="CNPJ"
            value={distribuidor.cnpj_distribuidor}
          />
          <InfoRow
            icon={<HiOutlinePhone size={13} />}
            label="Telefone"
            value={distribuidor.telefone1_distribuidor}
          />
          <InfoRow
            icon={<HiOutlineMail size={13} />}
            label="Email"
            value={distribuidor.email_distribuidor}
            className="col-span-2"
          />
          <InfoRow
            icon={<HiOutlineUser size={13} />}
            label="Contato"
            value={distribuidor.pessoa_contato_distribuidor}
            className="col-span-2"
          />
        </div>

        {distribuidor?.datetime_log_distribuidor ? (
          <div className="text-xs font-semibold flex flex-col p-3 text-white bg-[#10b981] rounded-b-md ">
            <span>Atualização:</span>
            <div className="flex items-center gap-2">
              <Clock size={15} className="flex-shrink-0 " />
              <span>
                {FormatFields.formatarDataHora(
                  distribuidor?.datetime_log_distribuidor
                )}
              </span>
            </div>
            <div className="flex items-center gap-2">
              <CircleUser size={15} className="flex-shrink-0 " />
              <span>{usuarioAtualizador}</span>
            </div>
          </div>
        ) : null}
      </div>

      <ModalComponente
        hasForm={false}
        defaultW="w-[800px]"
        header={"Editar Distribuidor — " + distribuidor.nome_distribuidor}
        opened={openModalEdit}
        onClose={() => setOpenModalEdit(false)}
        hasSaveButton={false}
      >
        <div className="p-2">
          <FormEditarDistribuidor
            onEditFunction={editDistribuidor}
            id_distribuidor={selectedDistribuidor}
          >
            <div className="w-full flex flex-col items-center justify-center mt-2">
              <Button className="max-sm:w-full px-8">Salvar</Button>
            </div>
          </FormEditarDistribuidor>
        </div>
      </ModalComponente>
    </>
  );
};

const InfoRow = ({
  icon,
  label,
  value,
  className = "",
}: {
  icon: React.ReactNode;
  label: string;
  value?: string;
  className?: string;
}) => {
  if (!value) return null;
  return (
    <div className={`flex items-start gap-2 min-w-0 ${className}`}>
      <span className="mt-0.5 text-gray-400 flex-shrink-0">{icon}</span>
      <div className="min-w-0">
        <p className="text-[10px] font-semibold uppercase tracking-wide text-gray-400 leading-tight">
          {label}
        </p>
        <p className="text-xs text-gray-700 truncate leading-snug">{value}</p>
      </div>
    </div>
  );
};

export default DistribuidoresCfg;