import React, { useState, useEffect } from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Loader2, Save } from 'lucide-react';

/**
 * Modal para criar uma regra a partir dos dados de uma transação
 * Preenche automaticamente os campos com os dados da transação categorizada
 */
export const CriarRegraModal = ({
  isOpen,
  onClose,
  transaction,
  formData: prefillData = null,
  categories = [],
  caixinhas = [],
  onSubmit,
  isLoading = false
}) => {
  const [formData, setFormData] = useState({
    regra: '',
    condicional: '',
    categoria: '',
    caixinha: '0',
    beneficiario_pagador: '0'
  });

  useEffect(() => {
    // Se temos dados preenchidos do formulário de categorização, usa eles
    if (prefillData) {
      setFormData({
        regra: '',
        condicional: prefillData.descricao || prefillData.condicional || '',
        categoria: prefillData.categoria || '',
        caixinha: prefillData.caixinha || '0',
        beneficiario_pagador: prefillData.beneficiario_pagador || '0'
      });
    } else if (transaction) {
      // Caso contrário, usa os dados da transação
      setFormData({
        regra: '',
        condicional: transaction.descricao || '',
        categoria: transaction.categoriaId || transaction.categoria || '',
        caixinha: transaction.caixaId || transaction.caixinha || '0',
        beneficiario_pagador: transaction.beneficiario || transaction.beneficiario_pagador || '0'
      });
    }
  }, [transaction, prefillData]);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!formData.regra.trim() || !formData.condicional.trim() || !formData.categoria) {
      return;
    }
    onSubmit(formData);
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle className="text-xl font-bold uppercase tracking-tight">
            Criar Regra de Conciliação
          </DialogTitle>
          <DialogDescription className="text-sm text-slate-500">
            Crie uma regra automática usando os dados preenchidos sobre esta transação
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="space-y-6 mt-4">
          {/* Nome da Regra */}
          <div className="space-y-2">
            <label className="text-[10px] font-bold text-slate-600 dark:text-stone-400 uppercase tracking-[0.2em] px-1">
              Nome da Regra *
            </label>
            <Input
              value={formData.regra}
              onChange={(e) => setFormData(prev => ({ ...prev, regra: e.target.value }))}
              className="rounded-xl h-12 bg-white dark:bg-[#252525] border-slate-200 dark:border-white/10 text-slate-900 dark:text-stone-300 font-medium focus:border-[#26b1c7] transition-all shadow-sm"
              placeholder="Ex: Conciliação Automática de Tarifas"
              required
            />
          </div>

          {/* Termo Técnico de Busca (Condicional) */}
          <div className="space-y-2">
            <label className="text-[10px] font-bold text-slate-600 dark:text-stone-400 uppercase tracking-[0.2em] px-1">
              Termo Técnico de Busca (Condicional) *
            </label>
            <Input
              value={formData.condicional}
              onChange={(e) => setFormData(prev => ({ ...prev, condicional: e.target.value }))}
              className="rounded-xl h-12 bg-white dark:bg-[#252525] border-slate-200 dark:border-white/10 text-slate-900 dark:text-stone-300 font-mono text-[#26b1c7] focus:border-[#26b1c7] transition-all shadow-sm"
              placeholder="Ex: TAR CONV ou parte da descrição"
              required
            />
            <p className="text-xs text-slate-500 dark:text-stone-500">
              Este termo será usado para identificar transações similares automaticamente
            </p>
          </div>

          {/* Categoria e Caixa */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <label className="text-[10px] font-bold text-slate-600 dark:text-stone-400 uppercase tracking-[0.2em] px-1">
                Categoria *
              </label>
              <select
                value={formData.categoria}
                onChange={(e) => setFormData(prev => ({ ...prev, categoria: e.target.value }))}
                className="w-full rounded-xl border border-slate-200 dark:border-white/10 bg-white dark:bg-[#252525] h-12 px-3 text-sm text-slate-900 dark:text-stone-300 outline-none focus:border-[#26b1c7] transition-all font-medium shadow-sm"
                required
              >
                <option value="" className="text-slate-400">Selecione uma categoria</option>
                {categories.map(cat => (
                  <option key={cat.id} value={cat.id}>{cat.name}</option>
                ))}
              </select>
            </div>
            <div className="space-y-2">
              <label className="text-[10px] font-bold text-slate-600 dark:text-stone-400 uppercase tracking-[0.2em] px-1">
                Caixa
              </label>
              <select
                value={formData.caixinha}
                onChange={(e) => setFormData(prev => ({ ...prev, caixinha: e.target.value }))}
                className="w-full rounded-xl border border-slate-200 dark:border-white/10 bg-white dark:bg-[#252525] h-12 px-3 text-sm text-slate-900 dark:text-stone-300 outline-none focus:border-[#26b1c7] transition-all font-medium shadow-sm"
              >
                <option value="0" className="text-slate-400">Nenhum</option>
                {caixinhas.map(c => (
                  <option key={c.id} value={c.id}>{c.name}</option>
                ))}
              </select>
            </div>
          </div>

          {/* Beneficiário / Pagador */}
          <div className="space-y-2">
            <label className="text-[10px] font-bold text-slate-600 dark:text-stone-400 uppercase tracking-[0.2em] px-1">
              Beneficiário / Pagador
            </label>
            <Input
              value={formData.beneficiario_pagador === '0' ? '' : formData.beneficiario_pagador}
              onChange={(e) => setFormData(prev => ({ ...prev, beneficiario_pagador: e.target.value || '0' }))}
              className="rounded-xl h-12 bg-white dark:bg-[#252525] border-slate-200 dark:border-white/10 text-slate-900 dark:text-stone-300 font-medium focus:border-[#26b1c7] transition-all shadow-sm"
              placeholder="Ex: Fornecedor ABC Ltda (opcional)"
            />
          </div>

          {/* Botões */}
          <div className="flex gap-3 pt-4">
            <Button
              type="button"
              variant="outline"
              onClick={onClose}
              className="flex-1 rounded-xl h-12 font-bold uppercase tracking-widest text-[10px] border-slate-200 dark:border-white/10 text-slate-600 dark:text-stone-400 hover:bg-slate-50 dark:hover:bg-[#1e1e1e]"
              disabled={isLoading}
            >
              X Cancelar
            </Button>
            <Button
              type="submit"
              className="flex-1 rounded-xl bg-[#26b1c7] hover:bg-[#1f9fb3] text-white font-bold uppercase tracking-widest text-[10px] shadow-lg shadow-[#26b1c7]/20 gap-2"
              disabled={isLoading || !formData.regra.trim() || !formData.condicional.trim() || !formData.categoria}
            >
              {isLoading ? (
                <Loader2 className="w-4 h-4 animate-spin" />
              ) : (
                <Save className="w-4 h-4" />
              )}
              Criar Regra
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
};
