import React from 'react';
import { 
  X, 
  Tag, 
  Sparkles, 
  Save, 
  AlertCircle 
} from 'lucide-react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { cn } from '@/lib/utils';
import { formatDate, formatCurrency } from '../utils/dateUtils';
import { useToast } from '../hooks/useToast';

export function CategorizacaoDialog({ 
  transacao, 
  isOpen, 
  onOpenChange, 
  categorias = [], 
  caixas = [], 
  actions 
}) {
  const [formData, setFormData] = React.useState({
    descricao: '',
    categoria: '',
    caixa: '',
    beneficiario: '',
    tag: ''
  });
  const [isCriarRegraOpen, setIsCriarRegraOpen] = React.useState(false);
  const [regraFormData, setRegraFormData] = React.useState({
    nomeRegra: '',
    condicional: '',
    categoria: '',
    caixa: '',
    beneficiario: ''
  });
  const [isSubmitting, setIsSubmitting] = React.useState(false);
  const toast = useToast();

  // Reset form when transaction changes
  React.useEffect(() => {
    if (transacao && isOpen) {
      console.log('[CategorizacaoDialog] Inicializando form com transação:', transacao);
      const rawCaixaId = transacao.caixaId ?? transacao.caixinha ?? '0';
      const caixaId = (transacao.caixaId ?? transacao.caixinha ?? '').toString();
      
      setFormData({
        descricao: transacao.descricao || '',
        categoria: (transacao.categoriaId ?? transacao.categoria ?? '').toString(),
        caixa: (caixaId !== '' && caixaId !== '0') ? caixaId : '',
        beneficiario: transacao.beneficiario || transacao.beneficiario_pagador || '',
        tag: transacao.tag || transacao.raw?.tag || ''
      });
    }
  }, [transacao, isOpen]);

  // Handle case where transaction already has a rule
  const temRegra = !!(transacao?.regraId || transacao?.regra || (transacao?.regraName && transacao.regraName !== ''));

  const categoriasFiltradas = React.useMemo(() => {
    if (!categorias || !Array.isArray(categorias)) return [];
    if (!transacao) return categorias;
    
    const tipoTransacao = (transacao.tipo || transacao.tipoOperacao || '').toUpperCase();
    const tipoDesejado = (tipoTransacao === 'CREDITO' || tipoTransacao === 'C') ? 'entrada' : 'saida';
    
    return categorias.filter(cat => {
      const tipoCat = (cat?.tipo ?? cat?.tipoMovimento ?? '').toString().toLowerCase();
      return tipoCat === tipoDesejado;
    });
  }, [categorias, transacao]);

  const handleAbrirCriarRegra = () => {
    setRegraFormData({
      nomeRegra: '',
      condicional: formData.descricao || transacao?.descricao || '',
      categoria: formData.categoria || '',
      caixa: formData.caixa || (transacao?.caixaId ?? transacao?.caixinha ?? '').toString(),
      beneficiario: formData.beneficiario || ''
    });
    setIsCriarRegraOpen(true);
  };

  const handleCategorizar = async () => {
    if (!formData.descricao.trim() || !formData.categoria || !formData.caixa) {
      toast.notifyFields(['Descrição', 'Categoria', 'Caixa']);
      return;
    }

    setIsSubmitting(true);
    try {
      if (actions?.categorizarTransacao) {
        await actions.categorizarTransacao(transacao.id || transacao.idextrato, {
          categoriaId: parseInt(formData.categoria),
          caixaId: parseInt(formData.caixa),
          beneficiario: formData.beneficiario,
          descricao: formData.descricao,
          tag: formData.tag
        });
        toast.success('Transação categorizada com sucesso!', 'Sucesso');
        onOpenChange(false);
      }
    } catch (error) {
      toast.error('Erro ao categorizar transação', 'Erro');
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleCriarRegra = async () => {
    if (!regraFormData.nomeRegra.trim() || !regraFormData.condicional.trim() || !regraFormData.categoria) {
      toast.error('Preencha os campos obrigatórios da regra', 'Campos Obrigatórios');
      return;
    }

    setIsSubmitting(true);
    try {
      if (actions?.createRegra) {
        await actions.createRegra({
          nome: regraFormData.nomeRegra,
          condicao: regraFormData.condicional,
          categoriaId: parseInt(regraFormData.categoria),
          caixaId: regraFormData.caixa ? parseInt(regraFormData.caixa) : null,
          beneficiario: regraFormData.beneficiario || ''
        });
        toast.success('Regra criada com sucesso!', 'Sucesso');
        setIsCriarRegraOpen(false);
      }
    } catch (error) {
      toast.error('Erro ao criar regra', 'Erro');
    } finally {
      setIsSubmitting(false);
    }
  };

  function ValorDisplay({ valor, tipo }) {
    const isCredit = tipo === 'CREDITO' || tipo === 'C' || valor > 0;
    return (
      <span className={cn("text-sm font-bold", isCredit ? "text-emerald-600" : "text-rose-600")}>
        {formatCurrency(Math.abs(valor))}
      </span>
    );
  }

  return (
    <>
      <Dialog open={isOpen && !isCriarRegraOpen} onOpenChange={onOpenChange}>
        <DialogContent className="z-[9999] sm:max-w-[600px] bg-white dark:bg-[#1e293b] border-slate-200 dark:border-slate-800">
          <DialogHeader>
            <DialogTitle className="text-lg font-bold text-slate-900 dark:text-white flex items-center gap-2">
              <Tag className="w-5 h-5 text-amber-500" />
              Categorizar Transação
            </DialogTitle>
            <DialogDescription className="text-sm text-slate-600 dark:text-slate-400">
              Preencha os campos abaixo para categorizar esta transação
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4 py-4">
            {transacao && (
              <div className="p-4 bg-slate-50 dark:bg-slate-900/50 rounded-lg border border-slate-200 dark:border-slate-800 space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium text-slate-600 dark:text-slate-400">Data:</span>
                  <span className="text-sm font-bold text-slate-900 dark:text-white">{formatDate(transacao.data || transacao.dataEntrada)}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium text-slate-600 dark:text-slate-400">Valor:</span>
                  <ValorDisplay valor={transacao.valor} tipo={transacao.tipo || transacao.tipoOperacao} />
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium text-slate-600 dark:text-slate-400">Tipo:</span>
                  <Badge className={cn(
                    "text-[10px] font-bold",
                    (transacao.tipo === 'CREDITO' || transacao.tipoOperacao === 'C') 
                      ? "bg-emerald-100 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-400"
                      : "bg-rose-100 dark:bg-rose-500/10 text-rose-700 dark:text-rose-400"
                  )}>
                    {transacao.tipo || (transacao.tipoOperacao === 'C' ? 'CREDITO' : 'DEBITO')}
                  </Badge>
                </div>
              </div>
            )}

            <div className="space-y-4">
              <div className="space-y-2">
                <Label className="text-xs font-bold text-slate-700 dark:text-slate-300">Descrição / Condicional <span className="text-red-500">*</span></Label>
                <Input
                  value={formData.descricao}
                  onChange={(e) => setFormData(prev => ({ ...prev, descricao: e.target.value }))}
                  placeholder="Ex: PAGAMENTO FORNECEDOR ABC"
                  className="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white"
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label className="text-xs font-bold text-slate-700 dark:text-slate-300">Categoria <span className="text-red-500">*</span></Label>
                  <Select
                    value={formData.categoria}
                    onValueChange={(val) => setFormData(prev => ({ ...prev, categoria: val }))}
                  >
                    <SelectTrigger className="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white">
                      <SelectValue placeholder="Selecione..." />
                    </SelectTrigger>
                    <SelectContent className="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800">
                      {categoriasFiltradas.map((cat) => (
                        <SelectItem 
                          key={cat.id ?? cat.idcategoria} 
                          value={(cat.id ?? cat.idcategoria ?? '').toString()}
                          className="text-slate-900 dark:text-slate-100 focus:bg-slate-100 dark:focus:bg-slate-800 cursor-pointer"
                        >
                          {cat.nome || cat.categoria}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label className="text-xs font-bold text-slate-700 dark:text-slate-300">Caixa <span className="text-red-500">*</span></Label>
                  <Select
                    value={formData.caixa}
                    onValueChange={(val) => setFormData(prev => ({ ...prev, caixa: val }))}
                  >
                    <SelectTrigger className="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white">
                      <SelectValue placeholder="Selecione..." />
                    </SelectTrigger>
                    <SelectContent className="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800">
                      {caixas.map((caixa) => (
                        <SelectItem 
                          key={caixa.id ?? caixa.idcaixinhas_financeiro} 
                          value={(caixa.id ?? caixa.idcaixinhas_financeiro ?? '').toString()}
                          className="text-slate-900 dark:text-slate-100 focus:bg-slate-100 dark:focus:bg-slate-800 cursor-pointer"
                        >
                          {caixa.nome || caixa.caixinha}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="space-y-2">
                <Label className="text-xs font-bold text-slate-700 dark:text-slate-300">Beneficiário / Pagador</Label>
                <Input
                  value={formData.beneficiario}
                  onChange={(e) => setFormData(prev => ({ ...prev, beneficiario: e.target.value }))}
                  placeholder="Ex: Fornecedor ABC Ltda"
                  className="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white"
                />
              </div>

              <div className="space-y-2">
                <Label className="text-xs font-bold text-slate-700 dark:text-slate-300">Tag da Transação</Label>
                <Select
                  value={formData.tag}
                  onValueChange={(val) => setFormData(prev => ({ ...prev, tag: val }))}
                >
                  <SelectTrigger className="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white">
                    <SelectValue placeholder="Selecione uma tag..." />
                  </SelectTrigger>
                  <SelectContent className="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800">
                    <SelectItem value="operacional" className="text-slate-900 dark:text-slate-100 focus:bg-slate-100 dark:focus:bg-slate-800 cursor-pointer">Operacional</SelectItem>
                    <SelectItem value="avulsa" className="text-slate-900 dark:text-slate-100 focus:bg-slate-100 dark:focus:bg-slate-800 cursor-pointer">Avulsa</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>

          <div className="flex items-center justify-end gap-3 pt-4 border-t border-slate-200 dark:border-slate-800">
            <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
              <X className="w-4 h-4 mr-2" /> Cancelar
            </Button>
            {!temRegra && (
              <Button 
                variant="outline" 
                onClick={handleAbrirCriarRegra} 
                disabled={isSubmitting}
                className="border-blue-500/50 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20"
              >
                <Sparkles className="w-4 h-4 mr-2" /> Criar Regra
              </Button>
            )}
            <Button 
              onClick={handleCategorizar} 
              disabled={isSubmitting || !formData.descricao.trim() || !formData.categoria || !formData.caixa}
              className="bg-blue-600 hover:bg-blue-700 text-white"
            >
              {isSubmitting ? 'Salvando...' : <><Save className="w-4 h-4 mr-2" /> Categorizar</>}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      <Dialog open={isCriarRegraOpen} onOpenChange={setIsCriarRegraOpen}>
        <DialogContent className="sm:max-w-[600px] bg-white dark:bg-[#1e293b] border-slate-200 dark:border-slate-800">
          <DialogHeader>
            <DialogTitle className="text-lg font-bold text-slate-900 dark:text-white flex items-center gap-2">
              <Sparkles className="w-5 h-5 text-blue-500" />
              Criar Regra de Conciliação
            </DialogTitle>
            <DialogDescription className="text-sm text-slate-600 dark:text-slate-400">
              Crie uma regra automática usando os dados preenchidos
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label className="text-xs font-bold text-slate-700 dark:text-slate-300">Nome da Regra <span className="text-red-500">*</span></Label>
              <Input
                value={regraFormData.nomeRegra}
                onChange={(e) => setRegraFormData(prev => ({ ...prev, nomeRegra: e.target.value }))}
                placeholder="Ex: Conciliação Automática de Tarifas"
                className="bg-white dark:bg-slate-900"
              />
            </div>

            <div className="space-y-2">
              <Label className="text-xs font-bold text-slate-700 dark:text-slate-300">Termo Técnico de Busca (Condicional) <span className="text-red-500">*</span></Label>
              <Input
                value={regraFormData.condicional}
                onChange={(e) => setRegraFormData(prev => ({ ...prev, condicional: e.target.value }))}
                placeholder="Ex: TAR CONV"
                className="bg-white dark:bg-slate-900 font-mono text-blue-600"
              />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label className="text-xs font-bold text-slate-700 dark:text-slate-300">Categoria <span className="text-red-500">*</span></Label>
                <Select
                  value={regraFormData.categoria}
                  onValueChange={(val) => setRegraFormData(prev => ({ ...prev, categoria: val }))}
                >
                  <SelectTrigger className="bg-white dark:bg-slate-900">
                    <SelectValue placeholder="Selecione..." />
                  </SelectTrigger>
                  <SelectContent>
                    {categoriasFiltradas.map(cat => (
                      <SelectItem key={cat.id ?? cat.idcategoria} value={(cat.id ?? cat.idcategoria ?? '').toString()}>
                        {cat.nome || cat.categoria}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label className="text-xs font-bold text-slate-700 dark:text-slate-300">Caixa</Label>
                <Select
                  value={regraFormData.caixa}
                  onValueChange={(val) => setRegraFormData(prev => ({ ...prev, caixa: val }))}
                >
                  <SelectTrigger className="bg-white dark:bg-slate-900">
                    <SelectValue placeholder="Opcional" />
                  </SelectTrigger>
                  <SelectContent>
                    {caixas.map(caixa => (
                      <SelectItem key={caixa.id ?? caixa.idcaixinhas_financeiro} value={(caixa.id ?? caixa.idcaixinhas_financeiro ?? '').toString()}>
                        {caixa.nome || caixa.caixinha}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div className="space-y-2">
              <Label className="text-xs font-bold text-slate-700 dark:text-slate-300">Beneficiário / Pagador</Label>
              <Input
                value={regraFormData.beneficiario}
                onChange={(e) => setRegraFormData(prev => ({ ...prev, beneficiario: e.target.value }))}
                placeholder="Ex: Fornecedor ABC Ltda"
                className="bg-white dark:bg-slate-900"
              />
            </div>
          </div>

          <div className="flex items-center justify-end gap-3 pt-4 border-t border-slate-200 dark:border-slate-800">
            <Button variant="outline" onClick={() => setIsCriarRegraOpen(false)} disabled={isSubmitting}>
              <X className="w-4 h-4 mr-2" /> Cancelar
            </Button>
            <Button 
              onClick={handleCriarRegra} 
              disabled={isSubmitting || !regraFormData.nomeRegra.trim() || !regraFormData.condicional.trim() || !regraFormData.categoria}
              className="bg-blue-600 hover:bg-blue-700 text-white"
            >
              {isSubmitting ? 'Salvando...' : <><Save className="w-4 h-4 mr-2" /> Criar Regra</>}
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
};
