import React, { useState } from "react";
import { Dialog } from "@headlessui/react";
import { useClientes } from "../../hooks/useClientes";
import { FormSelect, FormInput } from "../forms";
import { useForm } from "react-hook-form";

interface ParteProcessoModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (data: any) => void;
  tipo: "AUTOR" | "REU";
  editingParte?: any;
}

export const ParteProcessoModal: React.FC<ParteProcessoModalProps> = ({
  isOpen,
  onClose,
  onSave,
  tipo,
  editingParte,
}) => {
  const { register, handleSubmit, setValue, watch } = useForm({
    defaultValues: editingParte || {
      tipo, // Já estava aqui, mas precisamos garantir que está sendo enviado
      principal: false,
    },
  });
  const { clientes } = useClientes();
  const [useExistingClient, setUseExistingClient] = useState(
    !!editingParte?.clienteId,
  );
  const [searchTerm, setSearchTerm] = useState("");

  const filteredClientes = clientes.filter(
    (cliente) =>
      cliente.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
      cliente.cpfCnpj.includes(searchTerm),
  );

  const onSubmit = (data: any) => {
    const parteData = {
      ...data,
      tipo, // Garantir que o tipo está sendo enviado
      nome: useExistingClient
        ? clientes.find((c) => c.id === data.clienteId)?.nome
        : data.nome,
      cpfCnpj: useExistingClient
        ? clientes.find((c) => c.id === data.clienteId)?.cpfCnpj
        : data.cpfCnpj,
      clienteId: useExistingClient ? data.clienteId : undefined,
      principal: data.principal || false,
    };

    console.log("Enviando dados:", parteData); // Debug
    onSave(parteData);
    onClose();
  };

  return (
    <Dialog open={isOpen} onClose={onClose} className="relative z-50">
      {/* ... dialog backdrop ... */}
      <div className="fixed inset-0 flex items-center justify-center p-4">
        <Dialog.Panel className="w-full max-w-md bg-white rounded-lg p-6">
          <Dialog.Title className="text-lg font-medium mb-4">
            Adicionar {tipo === "AUTOR" ? "Autor" : "Réu"}
          </Dialog.Title>

          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
            {/* Adicionar campo oculto para o tipo */}
            <input type="hidden" {...register("tipo")} value={tipo} />

            <div className="flex items-center space-x-2">
              <input
                type="checkbox"
                checked={useExistingClient}
                onChange={(e) => setUseExistingClient(e.target.checked)}
                className="rounded border-gray-300"
              />
              <label className="text-sm">Usar cliente existente</label>
            </div>

            {useExistingClient ? (
              <div className="space-y-2">
                <label className="block text-sm font-medium text-gray-700">
                  Buscar Cliente
                </label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
                  placeholder="Digite nome ou CPF/CNPJ..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
                <div className="mt-2 max-h-60 overflow-y-auto border border-gray-200 rounded-lg">
                  {filteredClientes.map((cliente) => (
                    <label
                      key={cliente.id}
                      className="flex items-center p-2 hover:bg-gray-50 cursor-pointer"
                    >
                      <input
                        type="radio"
                        {...register("clienteId")}
                        value={cliente.id}
                        className="mr-2"
                      />
                      <div>
                        <div className="font-medium">{cliente.nome}</div>
                        <div className="text-sm text-gray-500">
                          {cliente.cpfCnpj}
                        </div>
                      </div>
                    </label>
                  ))}
                </div>
              </div>
            ) : (
              <>
                <FormInput label="Nome" {...register("nome")} required />
                <FormInput label="CPF/CNPJ" {...register("cpfCnpj")} />
              </>
            )}

            <FormInput
              label="Observações"
              {...register("observacoes")}
              as="textarea"
            />

            <div className="flex justify-end space-x-2 pt-4">
              <button
                type="button"
                onClick={onClose}
                className="px-4 py-2 text-sm text-gray-600 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>
  );
};