import React from 'react';
import { useForm } from 'react-hook-form';
import { Processo } from '../../types/entities';

interface ProcessoFormProps {
  onSubmit: (data: Partial<Processo>) => void;
  initialData?: Partial<Processo>;
}

const resultadoOptions = [
  { value: 'NAO_JULGADO', label: 'Não Julgado' },
  { value: 'PROCEDENTE', label: 'Procedente' },
  { value: 'PARCIALMENTE_PROCEDENTE', label: 'Parcialmente Procedente' },
  { value: 'IMPROCEDENTE', label: 'Improcedente' },
  { value: 'SEM_ANALISE_MERITO', label: 'Sem Análise de Mérito' }
];

export const ProcessoForm: React.FC<ProcessoFormProps> = ({ onSubmit, initialData }) => {
  const { register, handleSubmit, reset } = useForm<Partial<Processo>>({
    defaultValues: initialData,
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Número do Processo
          </label>
          <input
            {...register('numero')}
            className="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Natureza
          </label>
          <select
            {...register('natureza')}
            className="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700"
          >
            <option value="CIVEL">Cível</option>
            <option value="CRIMINAL">Criminal</option>
            <option value="PREVIDENCIARIO">Previdenciário</option>
            <option value="TRABALHISTA">Trabalhista</option>
            <option value="FAMILIA">Família</option>
            <option value="TRIBUTARIO">Tributário</option>
            <option value="ADMINISTRATIVO">Administrativo</option>
          </select>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Status
          </label>
          <select
            {...register('status')}
            className="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700"
          >
            <option value="INICIAL">Inicial</option>
            <option value="EM_ANDAMENTO">Em Andamento</option>
            <option value="SUSPENSO">Suspenso</option>
            <option value="RECURSO">Recurso</option>
            <option value="CONCLUSO">Concluso</option>
            <option value="ARQUIVADO">Arquivado</option>
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Resultado do Julgamento
          </label>
          <select
            {...register('resultado')}
            className="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700"
          >
            {resultadoOptions.map(option => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Cliente
          </label>
          <input
            {...register('clienteId')}
            className="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Valor da Causa
          </label>
          <input
            type="number"
            {...register('valorCausa')}
            className="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700"
          />
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Órgão Julgador
          </label>
          <input
            {...register('orgaoJulgador')}
            className="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Nome da Contraparte
          </label>
          <input
            {...register('nomeContraparte')}
            className="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700"
          />
        </div>
      </div>

      <div className="flex justify-end space-x-3">
        <button
          type="button"
          onClick={() => reset()}
          className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
        >
          Cancelar
        </button>
        <button
          type="submit"
          className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg"
        >
          Salvar
        </button>
      </div>
    </form>
  );
};