import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { X, Loader2 } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { toast } from 'sonner';

/**
 * Formulário de criação e edição de favorecidos
 * Suporta modos PIX e TED com campos dinâmicos baseados na configuração JSON
 */
const FavorecidoForm = ({ 
  isOpen, 
  onClose, 
  initialData = null, 
  paymentMode = 'PIX',
  onSubmit 
}) => {
  const isEditMode = !!initialData;
  
  // Configuração de campos baseada no modo (PIX ou TED)
  const getFormConfig = () => {
    if (paymentMode === 'TED') {
      return {
        fields: [
          { 
            id: 'NOME_FAVORECIDO', 
            label: 'Nome:', 
            type: 'text', 
            backend: 'NOME_FAVORECIDO',
            maxLength: 250,
            required: true
          },
          { 
            id: 'BANCO_FAVORECIDO', 
            label: 'Banco:', 
            type: 'select', 
            backend: 'BANCO_FAVORECIDO',
            options: {
              '001': 'Banco do Brasil',
              '033': 'Santander',
              '104': 'Caixa Econômica Federal',
              '237': 'Bradesco',
              '341': 'Itaú',
              '356': 'Banco Real',
              '422': 'Safra',
              '748': 'Sicredi',
              '756': 'Sicoob'
            },
            required: true
          },
          { 
            id: 'AGENCIA_FAVORECIDA', 
            label: 'Agência:', 
            type: 'text', 
            backend: 'AGENCIA_FAVORECIDA',
            maxLength: 250,
            required: true
          },
          { 
            id: 'DIGITO_AGENCIA_FAVORECIDA', 
            label: 'Dígito Agência:', 
            type: 'text', 
            backend: 'DIGITO_AGENCIA_FAVORECIDA',
            maxLength: 1,
            required: false
          },
          { 
            id: 'CONTA_FAVORECIDA', 
            label: 'Conta:', 
            type: 'text', 
            backend: 'CONTA_FAVORECIDA',
            maxLength: 250,
            required: true
          },
          { 
            id: 'DIGITO_CONTA_FAVORECIDA', 
            label: 'Dígito Conta Favorecida:', 
            type: 'text', 
            backend: 'DIGITO_CONTA_FAVORECIDA',
            maxLength: 1,
            required: true
          },
          { 
            id: 'TIPO_CONTA_FAVORECIDA', 
            label: 'Tipo Conta Favorecida:', 
            type: 'select', 
            backend: 'TIPO_CONTA_FAVORECIDA',
            options: {
              'C': 'Conta Corrente',
              'P': 'Conta Poupança'
            },
            required: false
          },
          { 
            id: 'FINALIDADE_TED', 
            label: 'Finalidade:', 
            type: 'text', 
            backend: 'FINALIDADE_TED',
            maxLength: 250,
            required: false
          },
          { 
            id: 'INFORMACAO', 
            label: 'Informação:', 
            type: 'text', 
            backend: 'INFORMACAO',
            maxLength: 250,
            required: false
          },
          { 
            id: 'DATA_PAGAMENTO', 
            label: 'Data Pagamento:', 
            type: 'date', 
            backend: 'DATA_PAGAMENTO',
            required: false
          },
          { 
            id: 'VALOR_PAGAMENTO', 
            label: 'Pagamento:', 
            type: 'text', 
            backend: 'VALOR_PAGAMENTO',
            maxLength: 250,
            required: false
          }
        ],
        idField: 'idfavorecido'
      };
    } else {
      // PIX - Backend espera campos em minúsculas
      return {
        fields: [
          { 
            id: 'nome_favorecido', 
            label: 'Nome:', 
            type: 'text', 
            backend: 'nome_favorecido',
            maxLength: 250,
            required: true
          },
          { 
            id: 'chave_pix', 
            label: 'Chave pix:', 
            type: 'text', 
            backend: 'chave_pix',
            maxLength: 250,
            required: true
          },
          { 
            id: 'tipo_chave_pix', 
            label: 'Tipo de chave:', 
            type: 'select', 
            backend: 'tipo_chave_pix',
            options: {
              '1': 'Telefone',
              '2': 'E-mail',
              '3': 'CPF/CNPJ',
              '4': 'Chave Aleatória',
              '5': 'Dados bancários'
            },
            required: true
          },
          { 
            id: 'cpf_cnpj_favorecido', 
            label: 'Documento:', 
            type: 'text', 
            backend: 'cpf_cnpj_favorecido',
            maxLength: 250,
            required: true
          },
          { 
            id: 'valor_pagamento', 
            label: 'Pagamento:', 
            type: 'text', 
            backend: 'valor_pagamento',
            maxLength: 250,
            required: false
          }
        ],
        idField: 'idcnab_pralog'
      };
    }
  };

  const config = getFormConfig();
  const [formData, setFormData] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  // Inicializa o formulário com dados existentes ou valores vazios
  useEffect(() => {
    if (isOpen) {
      if (initialData) {
        // Mapeia os dados do backend para o formato do formulário
        const mappedData = {};
        config.fields.forEach(field => {
          // Tenta diferentes variações de nomes de campos
          // Para PIX (minúsculas) e TED (maiúsculas)
          let value = 
            initialData[field.backend] || 
            initialData[field.backend.toUpperCase()] ||
            initialData[field.backend.toLowerCase()] ||
            initialData[field.id] ||
            initialData[field.id.toUpperCase()] ||
            initialData[field.id.toLowerCase()] ||
            '';
          
          // Para valor de pagamento, converte para centavos (formato interno)
          if ((field.id === 'VALOR_PAGAMENTO' || field.id === 'valor_pagamento') && value) {
            const numValue = parseFloat(value);
            if (!isNaN(numValue)) {
              value = Math.round(numValue * 100).toString(); // Converte para centavos
            }
          }
          
          // Para data, formata para YYYY-MM-DD se necessário
          if (field.type === 'date' && value) {
            // Se a data vem em formato brasileiro (DD/MM/YYYY), converte
            if (typeof value === 'string' && value.includes('/')) {
              const [day, month, year] = value.split('/');
              value = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
            }
            // Se já está em formato ISO, mantém
            if (value.length === 10 && value.includes('-')) {
              value = value.split('T')[0]; // Remove hora se houver
            }
          }
          
          mappedData[field.id] = value;
        });
        // Adiciona o ID se existir
        if (initialData[config.idField] || initialData.id || initialData.idfavorecido || initialData.idcnab_pralog) {
          mappedData[config.idField] = initialData[config.idField] || initialData.id || initialData.idfavorecido || initialData.idcnab_pralog;
        }
        setFormData(mappedData);
      } else {
        // Inicializa com valores vazios (undefined para selects)
        const emptyData = {};
        config.fields.forEach(field => {
          emptyData[field.id] = field.type === 'select' ? undefined : '';
        });
        setFormData(emptyData);
      }
    }
  }, [isOpen, initialData, paymentMode]);

  /**
   * Remove caracteres especiais de documentos (CPF/CNPJ)
   * CPF/CNPJ sempre precisa ser sanitizado (sem caracteres especiais)
   */
  const sanitizeDocumentValue = (value) => {
    if (!value || typeof value !== 'string') return value;
    // Remove todos os caracteres especiais, mantendo apenas números
    return value.replace(/[^0-9]/g, '');
  };

  /**
   * Remove caracteres especiais de chave PIX
   * Apenas para tipos 1 (Telefone) ou 3 (CPF/CNPJ)
   */
  const sanitizeChavePix = (value, tipoChavePix) => {
    if (!value || typeof value !== 'string') return value;
    
    // Converte para string para comparação
    const tipo = String(tipoChavePix);
    
    // Apenas tipos 1 (Telefone) ou 3 (CPF/CNPJ) precisam de sanitização
    if (tipo === '1' || tipo === '3') {
      // Remove todos os caracteres especiais, mantendo apenas números e letras
      return value.replace(/[^a-zA-Z0-9]/g, '');
    }
    
    // Para outros tipos (2 - E-mail, 4 - Chave Aleatória, 5 - Dados bancários)
    // Mantém como está (pode ter caracteres especiais como @, -, etc.)
    return value;
  };

  const handleInputChange = (fieldId, value) => {
    let sanitizedValue = value;
    
    // CPF/CNPJ sempre precisa ser sanitizado
    if (fieldId === 'CPF_CNPJ_FAVORECIDO' || fieldId === 'cpf_cnpj_favorecido') {
      sanitizedValue = sanitizeDocumentValue(value);
    } 
    // Chave PIX: só sanitiza se tipo for 1 ou 3
    else if (fieldId === 'CHAVE_PIX' || fieldId === 'chave_pix') {
      const tipoChavePix = formData.tipo_chave_pix || formData.TIPO_CHAVE_PIX;
      sanitizedValue = sanitizeChavePix(value, tipoChavePix);
    }
    
    setFormData(prev => ({
      ...prev,
      [fieldId]: sanitizedValue
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // Validação básica - verifica campos obrigatórios
    const requiredFields = config.fields.filter(f => f.required);
    const missingFields = requiredFields.filter(f => {
      const value = formData[f.id];
      // Verifica se o campo está vazio, null, undefined ou string vazia
      return !value || (typeof value === 'string' && value.trim() === '');
    });
    
    if (missingFields.length > 0) {
      toast.error('Preencha todos os campos obrigatórios', {
        description: `Campos obrigatórios: ${missingFields.map(f => f.label).join(', ')}`
      });
      return;
    }

    setIsSubmitting(true);
    
    try {
      // Prepara o payload no formato esperado pelo backend
      const payload = {};
      config.fields.forEach(field => {
        const value = formData[field.id];
        // Inclui o valor se não for undefined, null ou string vazia
        if (value !== undefined && value !== null && value !== '') {
          // Para valor de pagamento, converte de centavos para número decimal
          if ((field.id === 'VALOR_PAGAMENTO' || field.id === 'valor_pagamento') && typeof value === 'string') {
            const numValue = parseFloat(value.replace(/\D/g, '')) / 100;
            payload[field.backend] = numValue.toFixed(2);
          } else {
            payload[field.backend] = value;
          }
        }
      });
      
      // Adiciona o ID se estiver em modo de edição
      if (isEditMode && formData[config.idField]) {
        payload[config.idField] = formData[config.idField];
      }

      console.log('📤 [FavorecidoForm] Enviando payload:', payload);
      console.log('📤 [FavorecidoForm] Modo:', paymentMode);
      console.log('📤 [FavorecidoForm] É edição?', isEditMode);

      await onSubmit(payload, isEditMode);
      
      toast.success(
        isEditMode ? 'Favorecido atualizado com sucesso!' : 'Favorecido criado com sucesso!'
      );
      
      onClose();
      // Limpa o formulário
      const emptyData = {};
      config.fields.forEach(field => {
        emptyData[field.id] = '';
      });
      setFormData(emptyData);
    } catch (error) {
      console.error('❌ [FavorecidoForm] Erro ao salvar favorecido:', error);
      toast.error('Erro ao salvar favorecido', {
        description: error.message || 'Tente novamente mais tarde'
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  const formatCurrency = (value) => {
    if (!value) return '';
    // Se já é uma string formatada, retorna
    if (typeof value === 'string' && value.includes(',')) return value;
    // Se é número, formata
    const numValue = typeof value === 'string' ? parseFloat(value.replace(/\D/g, '')) / 100 : parseFloat(value);
    if (isNaN(numValue)) return '';
    return new Intl.NumberFormat('pt-BR', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    }).format(numValue);
  };

  const handleCurrencyChange = (fieldId, value) => {
    // Remove formatação e mantém apenas números
    const numbers = value.replace(/\D/g, '');
    // Salva como string de números (será convertido no backend)
    setFormData(prev => ({
      ...prev,
      [fieldId]: numbers || ''
    }));
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto bg-white dark:bg-[#1b1b1b] border-slate-200 dark:border-zinc-800 text-slate-900 dark:text-white">
        <DialogHeader>
          <DialogTitle className="text-[clamp(1rem,1.5vw,1.375rem)] font-bold text-slate-900 dark:text-white">
            {isEditMode ? 'Editar Favorecido' : 'Novo Favorecido'}
            <span className="ml-3 text-[clamp(0.75rem,0.9vw,0.8125rem)] bg-slate-200 dark:bg-zinc-800 text-slate-600 dark:text-zinc-400 px-3 py-1 rounded-full border border-slate-300 dark:border-zinc-700 font-mono uppercase tracking-widest">
              {paymentMode}
            </span>
          </DialogTitle>
          <DialogDescription className="text-slate-600 dark:text-zinc-400 text-[clamp(0.875rem,1vw,0.9375rem)]">
            {isEditMode 
              ? 'Atualize os dados do favorecido abaixo.' 
              : 'Preencha os dados do novo favorecido para cadastro.'}
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="space-y-6 mt-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {config.fields.map((field) => (
              <div 
                key={field.id} 
                className={cn(
                  "space-y-2",
                  field.type === 'date' && "md:col-span-2"
                )}
              >
                <Label 
                  htmlFor={field.id} 
                  className="text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold text-slate-600 dark:text-zinc-400 uppercase tracking-wider"
                >
                  {field.label}
                  {field.required && <span className="text-rose-500 ml-1">*</span>}
                </Label>
                
                {field.type === 'select' ? (
                  <Select
                    value={formData[field.id] || undefined}
                    onValueChange={(value) => handleInputChange(field.id, value)}
                    required={field.required}
                  >
                    <SelectTrigger className="bg-slate-50 dark:bg-[#151515] border-slate-200 dark:border-zinc-800 text-slate-900 dark:text-white focus:border-emerald-600">
                      <SelectValue placeholder={`Selecione ${field.label.toLowerCase()}`} />
                    </SelectTrigger>
                    <SelectContent 
                      className="bg-white dark:bg-[#1b1b1b] border-slate-200 dark:border-zinc-800 z-[250]"
                      position="popper"
                    >
                      {Object.entries(field.options || {}).map(([key, label]) => (
                        <SelectItem 
                          key={key} 
                          value={key}
                          className="text-slate-900 dark:text-white focus:bg-emerald-600/20 cursor-pointer"
                        >
                          {label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                ) : (field.id === 'VALOR_PAGAMENTO' || field.id === 'valor_pagamento') ? (
                  <div className="relative">
                    <span className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-600 dark:text-zinc-500 text-[clamp(0.875rem,1vw,0.9375rem)]">R$</span>
                    <Input
                      id={field.id}
                      type="text"
                      value={formData[field.id] ? formatCurrency(formData[field.id]) : ''}
                      onChange={(e) => handleCurrencyChange(field.id, e.target.value)}
                      placeholder="0,00"
                      maxLength={field.maxLength}
                      className="bg-slate-50 dark:bg-[#151515] border-slate-200 dark:border-zinc-800 text-slate-900 dark:text-white placeholder:text-slate-500 dark:placeholder:text-zinc-600 focus:border-emerald-600 pl-10"
                    />
                  </div>
                ) : (
                  <Input
                    id={field.id}
                    type={field.type}
                    value={formData[field.id] || ''}
                    onChange={(e) => handleInputChange(field.id, e.target.value)}
                    placeholder={field.placeholder || ''}
                    maxLength={field.maxLength}
                    required={field.required}
                    className="bg-slate-50 dark:bg-[#151515] border-slate-200 dark:border-zinc-800 text-slate-900 dark:text-white placeholder:text-slate-500 dark:placeholder:text-zinc-600 focus:border-emerald-600"
                  />
                )}
              </div>
            ))}
          </div>

          {isEditMode && formData[config.idField] && (
            <div className="bg-emerald-500/10 p-3 rounded-xl border border-emerald-500/20">
              <p className="text-[clamp(0.75rem,0.9vw,0.8125rem)] uppercase font-bold text-emerald-500/60 tracking-widest">
                ID do Registro
              </p>
              <p className="text-[clamp(1rem,1.5vw,1.375rem)] font-bold text-emerald-500">
                {formData[config.idField]}
              </p>
            </div>
          )}

          <DialogFooter className="flex gap-3 pt-4 border-t border-slate-200 dark:border-zinc-800">
            <Button
              type="button"
              variant="outline"
              onClick={onClose}
              disabled={isSubmitting}
              className="bg-slate-200 dark:bg-zinc-800 border-slate-300 dark:border-zinc-700 text-slate-700 dark:text-zinc-300 hover:bg-slate-300 dark:hover:bg-zinc-700"
            >
              Cancelar
            </Button>
            <Button
              type="submit"
              disabled={isSubmitting}
              className="bg-emerald-600 hover:bg-emerald-500 text-white"
            >
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Salvando...
                </>
              ) : (
                isEditMode ? 'Atualizar' : 'Criar'
              )}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
};

export default FavorecidoForm;
