import { Dialog } from "@headlessui/react";
import { useForm } from "react-hook-form";
import { ProcessoAdministrativo, StatusProcessoAdministrativo } from "../../types/processoAdministrativo";
import { useProcessosAdministrativos } from "../../hooks/useProcessosAdministrativos";
import { useClientes } from "../../hooks/useClientes";
import { FormInput, FormSelect } from "../forms";
import { TipoParte } from "../../types/entities";
import { useState, useEffect } from "react";

interface ProcessoAdminModalProps {
  isOpen: boolean;
  onClose: () => void;
  processo?: ProcessoAdministrativo;
  onSuccess?: () => void;
}

export function ProcessoAdminModal({ 
  isOpen, 
  onClose, 
  processo, 
  onSuccess 
}: ProcessoAdminModalProps) {
  const { register, handleSubmit, setValue, reset } = useForm();
  const { createProcesso, updateProcesso } = useProcessosAdministrativos();
  const { clientes } = useClientes();
  const [clienteSearch, setClienteSearch] = useState("");

  // Reset form quando modal abrir/fechar
  useEffect(() => {
    if (isOpen && processo) {
      Object.keys(processo).forEach((key) => {
        if (key !== "id" && key !== "dataCriacao" && key !== "dataAtualizacao") {
          setValue(key, processo[key]);
        }
      });
    } else {
      reset({
        numero: "",
        descricao: "",
        orgao: "",
        clienteId: "",
        tipoParteCliente: TipoParte.AUTOR,
        valorPretensao: "",
        status: StatusProcessoAdministrativo.INICIAL,
        observacoes: "",
      });
    }
  }, [isOpen, processo, setValue, reset]);

  const onSubmit = async (data: any) => {
    try {
      console.log("Dados do formulário:", data); // Adicionar log
      const processData = {
        ...data,
        valorPretensao: data.valorPretensao ? Number(data.valorPretensao) : null,
      };

      if (processo) {
        await updateProcesso.mutateAsync({ 
          id: processo.id, 
          data: processData 
        });
      } else {
        await createProcesso.mutateAsync(processData);
      }

      onSuccess?.();
      onClose();
    } catch (error) {
      console.error("Erro detalhado ao salvar processo:", error); // Melhorar log de erro
    }
  };

  return (
    <Dialog open={isOpen} onClose={onClose} className="relative z-50">
      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />

      <div className="fixed inset-0 flex items-center justify-center p-4">
        <Dialog.Panel className="mx-auto max-w-2xl w-full bg-white rounded-xl p-6">
          <Dialog.Title className="text-lg font-semibold mb-4">
            {processo ? "Editar Processo Administrativo" : "Novo Processo Administrativo"}
          </Dialog.Title>

          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <FormInput
                label="Número/Protocolo"
                required
                {...register("numero")}
              />

              <FormSelect
                label="Cliente"
                required
                {...register("clienteId")}
                options={clientes.map(c => ({
                  value: c.id,
                  label: `${c.nome} (${c.cpfCnpj})`
                }))}
              />

              <FormSelect
                label="Tipo de Parte"
                required
                {...register("tipoParteCliente")}
                options={[
                  { value: TipoParte.AUTOR, label: "Autor" },
                  { value: TipoParte.REU, label: "Réu" }
                ]}
              />

              <FormInput
                label="Órgão"
                required
                {...register("orgao")}
              />

              <div className="col-span-2">
                <FormInput
                  label="Descrição"
                  required
                  multiline
                  rows={3}
                  {...register("descricao")}
                />
              </div>

              <FormInput
                label="Valor da Pretensão"
                type="number"
                step="0.01"
                {...register("valorPretensao")}
              />

              <FormSelect
                label="Status"
                required
                {...register("status")}
                options={Object.values(StatusProcessoAdministrativo).map(status => ({
                  value: status,
                  label: status.replace(/_/g, " ")
                }))}
              />

              <div className="col-span-2">
                <FormInput
                  label="Observações"
                  multiline
                  rows={3}
                  {...register("observacoes")}
                />
              </div>
            </div>

            <div className="flex justify-end gap-2 pt-4">
              <button
                type="button"
                onClick={onClose}
                className="px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg"
              >
                Cancelar
              </button>
              <button
                type="submit"
                className="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg"
              >
                Salvar
              </button>
            </div>
          </form>
        </Dialog.Panel>
      </div>
    </Dialog>
  );
}