"use client";

import { validarProcedimento } from "@/actions/pageApproveProcedures";
import React, { useState } from "react";
import { FaCheckCircle } from "react-icons/fa";
import { IoMdCloseCircle } from "react-icons/io";
import { toast } from "react-toastify";
import ModalAction from "../ModalActionProcedimentos";

interface CardProcedureProps {
  procedure: string;
  atendimentoAValidar: any;
  itemProcedimento: any;
  latitude: number | null;
  longitude: number | null;
  onProcedimentoFinalizado: (id: number) => void;
}

const ModalResult = ({ onClose, aprovado, onProcedimentoFinalizado, itemProcedimentoId }: any) => {
  const handleVoltar = () => {
    if (onProcedimentoFinalizado && itemProcedimentoId) {
      onProcedimentoFinalizado(itemProcedimentoId);
    }
    onClose();
  };

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
      <div className="bg-white p-6 rounded-2xl shadow-lg w-[90%] max-w-sm text-center h-[222px]">

        <button
          onClick={onClose}
          className="absolute top-3 right-3 text-gray-500 hover:text-gray-700 text-xl font-bold"
          aria-label="Fechar modal"
        >
          &times;
        </button>

        <h2 className="text-lg font-bold text-plamev-blue-500 mb-4">{aprovado === 'aprovado' ? 'Procedimento autorizado' : 'Procedimento não autorizado'}</h2>
        <p className="text-sm mb-4">{aprovado === 'aprovado' ? 'Este procedimento foi autorizado com sua aprovação prévia. Agradecemos pelo feedback!' : 'Este procedimento não foi autorizado e será cancelado. Agradecemos pelo feedback!'}</p>

        <div className="flex flex-col items-center gap-3 mt-10 w-full">
          <button
            onClick={handleVoltar}
            className="bg-[#1DA1C2] text-white rounded-lg p-4 transition-colors h-[50px] w-[200px]"
          >
            Voltar ao início
          </button>
        </div>
      </div>
    </div>
  );
};

const CardProcedureApprove: React.FC<CardProcedureProps> = ({
  procedure,
  atendimentoAValidar,
  itemProcedimento,
  latitude,
  longitude,
  onProcedimentoFinalizado
}) => {
  const [modalType, setModalType] = useState<"authorize" | "reject" | "result" | null>(null);
  const [procedimentosNome, setProcedimentosNome] = useState<string | null>("");
  const [statusAprovacao, setStatusAprovacao] = useState<"aprovado" | "reprovado" | null>(null);
  const [ocultarButton, setOcultarButton] = useState<boolean>(false);

  const handleValidar = async (aprovado: boolean, justificativa = "") => {

    setStatusAprovacao(aprovado ? "aprovado" : "reprovado");

    if (!aprovado && !justificativa) {
      toast.error('Informe o motivo da não autorização.')
      return;
    }

    const payload = {
      PetsId: atendimentoAValidar.Pets.Id,
      AtendimentosId: atendimentoAValidar.Atendimentos.Id,
      Latitude: latitude ?? itemProcedimento.Latitude,
      Longitude: longitude ?? itemProcedimento.Longitude,
      DadosProcedimentos: [
        {
          AtendimentosProcedimentosId: itemProcedimento.Id,
          Validado: aprovado ? 1 : 2,
          JustificativaValidarProcedimentos: justificativa,
          Latitude: latitude ?? itemProcedimento.Latitude,
          Longitude: longitude ?? itemProcedimento.Longitude,
        },
      ],
    };

    try {
      let response = await validarProcedimento(payload);

      if (response.erro) {
        toast.error(response.mensagem)
      }

      if (response.Id) {
        setOcultarButton(true);
        setModalType("result");
      }
    } catch (err) {
      setOcultarButton(false);
      toast.error("Ocorreu um erro ao validar o procedimento.");
    }
  };

  const handleOpenModal = (typeModal: "authorize" | "reject" | "result" | null, nomeProcedimentos: string | null) => {
    setModalType(typeModal);
    setProcedimentosNome(nomeProcedimentos);
  }

  return (
    <>
      <div className="bg-[#FFFBF4] border border-[#F0E8D9] rounded-2xl shadow-sm p-4 w-full min-h-[279.9px]">
        <div className="flex flex-col gap-2">
          <div className="items-center min-h-[60px]">
            <p className="text-sm text-gray-500 font-medium">Procedimento:</p>
            <p className="text-sm font-semibold text-gray-800 leading-snug">{procedure}</p>
          </div>

          <hr className="border-dashed border-t border-gray-300 my-2" />

          <div>
            <p className="text-sm text-gray-500 font-medium">Status:</p>
            <p className="text-sm text-gray-700">{statusAprovacao === "aprovado" ? 'Procedimento autorizado com sucesso.' : "Este procedimento ainda não foi autorizado"}</p>
          </div>

          {!ocultarButton && (
            <div className="flex flex-col gap-3 mt-3">
              <button
                onClick={() => handleOpenModal("authorize", procedure)}
                className="bg-[#B7D99E] hover:bg-[#A4C78D] text-gray-800 font-semibold rounded-lg py-2 transition-colors h-[50px]"
              >
                Autorizar este procedimento
              </button>
              <button
                onClick={() => handleOpenModal("reject", procedure)}
                className="border border-[#0083CA] text-[#0083CA] hover:bg-[#F0F8F5] font-semibold rounded-lg py-2 transition-colors h-[50px]"
              >
                Não autorizar
              </button>
            </div>
          )}

          {ocultarButton && (
            <div className="mt-16 text-center">
              {statusAprovacao === "aprovado" ? (
                <p className="flex items-center gap-2 text-green-600 font-semibold">
                  <FaCheckCircle className="text-[#26d466]" />
                  Procedimento autorizado
                </p>

              ) : (
                <p className="flex items-center gap-2 text-red-600 font-semibold"><IoMdCloseCircle className="text-[#dc2626]" style={{ fontSize: '19px' }} /> Procedimento não autorizado</p>
              )}
            </div>
          )}
        </div>
      </div >

      {modalType === "authorize" && (
        <ModalAction
          title="Atenção"
          text="Se os procedimentos listados estiverem corretos e alinhados com os realizados pela clínica, confirme a autorização."
          confirmLabel="Autorizar Procedimento"
          procedimentoNome={procedimentosNome}
          disablebutton={ocultarButton}
          onConfirm={() => handleValidar(true)}
          onClose={() => setModalType(null)}
        />
      )}

      {modalType === "reject" && (
        <ModalAction
          title="Atenção"
          text="Caso os procedimentos listados não estejam de acordo com os procedimentos realizados pela clínica, cancele e informe os responsáveis."
          confirmLabel="Cancelar Procedimento"
          procedimentoNome={procedimentosNome}
          typeModal={modalType}
          onConfirm={(justificativa: string) => handleValidar(false, justificativa)}
          onClose={() => setModalType(null)}
          hideButton={ocultarButton}
        />
      )}

      {modalType === "result" && (
        <ModalResult
          onClose={() => setModalType(null)}
          aprovado={statusAprovacao}
          onProcedimentoFinalizado={onProcedimentoFinalizado} // função que você já tem
          itemProcedimentoId={itemProcedimento.Id} // passa o ID correto aqui
        />
      )}

    </>
  );
};

export default CardProcedureApprove;