import React, { useState, useEffect } from 'react';
import { X, Save, RefreshCw } from 'lucide-react';

interface EmpresaModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (empresa: any) => Promise<void>;
  empresa?: any;
  loading?: boolean;
}

const EmpresaModal: React.FC<EmpresaModalProps> = ({
    isOpen,
    onClose,
    onSave,
    empresa,
    loading = false
}) => {
    const [formData, setFormData] = useState({
        cnpj: '',
        razaoSocial: '',
        nomeFantasia: ''
    });

    // Carregar dados da empresa quando for edição
    useEffect(() => {
        if (empresa) {
            setFormData({
                cnpj: (empresa as any).cnpj || '',
                razaoSocial: (empresa as any)['razao-social'] || '',
                nomeFantasia: (empresa as any)['nome-fantasia'] || ''
            });
        } else {
            setFormData({
                cnpj: '',
                razaoSocial: '',
                nomeFantasia: ''
            });
        }
    }, [empresa]);

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        await onSave(formData);
    };

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value
        }));
    };

    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-50"
            onClick={onClose}>
            <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto"
                onClick={(e) => e.stopPropagation()}>
                {/* Header do Modal */}
                <div className="flex items-center justify-between p-6 border-b border-gray-200">
                    <h2 className="text-xl font-semibold text-gray-900">
                        {empresa ? 'Editar Empresa' : 'Nova Empresa'}
                    </h2>
                    <button
                        onClick={onClose}
                        className="text-gray-400 hover:text-gray-600 transition-colors"
                        disabled={loading}
                    >
                        <X className="w-6 h-6" />
                    </button>
                </div>

                {/* Conteúdo do Modal */}
                <form onSubmit={handleSubmit} className="p-6 space-y-4">
                    <p className="text-gray-600 text-sm mb-6">
                        {empresa ? 'Atualize os dados da empresa.' : 'Cadastre uma nova empresa na plataforma.'}
                    </p>

                    {/* Campo CNPJ */}
                    <div>
                        <label htmlFor="cnpj" className="block text-sm font-medium text-gray-700 mb-2">
                            CNPJ *
                        </label>
                        <input
                            type="text"
                            id="cnpj"
                            name="cnpj"
                            value={formData.cnpj}
                            onChange={handleChange}
                            placeholder="00.000.000/0001-00"
                            maxLength={18}
                            required
                            disabled={loading}
                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors disabled:bg-gray-50 disabled:opacity-50"
                        />
                    </div>

                    {/* Campo Razão Social */}
                    <div>
                        <label htmlFor="razaoSocial" className="block text-sm font-medium text-gray-700 mb-2">
                            Razão Social *
                        </label>
                        <input
                            type="text"
                            id="razaoSocial"
                            name="razaoSocial"
                            value={formData.razaoSocial}
                            onChange={handleChange}
                            placeholder="Razão Social da Empresa"
                            required
                            disabled={loading}
                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors disabled:bg-gray-50 disabled:opacity-50"
                        />
                    </div>

                    {/* Campo Nome Fantasia */}
                    <div>
                        <label htmlFor="nomeFantasia" className="block text-sm font-medium text-gray-700 mb-2">
                            Nome Fantasia *
                        </label>
                        <input
                            type="text"
                            id="nomeFantasia"
                            name="nomeFantasia"
                            value={formData.nomeFantasia}
                            onChange={handleChange}
                            placeholder="Nome Fantasia da Empresa"
                            required
                            disabled={loading}
                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors disabled:bg-gray-50 disabled:opacity-50"
                        />
                    </div>

                    {/* Botões */}
                    <div className="flex space-x-3 pt-4">
                        <button
                            type="submit"
                            disabled={loading}
                            className="flex-1 bg-gradient-to-r from-blue-600 to-green-600 text-white py-2.5 px-4 rounded-lg font-medium hover:from-blue-700 hover:to-green-700 disabled:opacity-50 transition-all duration-200 flex items-center justify-center gap-2"
                        >
                            {loading ? (
                                <>
                                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                                    Processando...
                                </>
                            ) : (
                                <>
                                    {empresa ? (
                                        <>
                                            <RefreshCw className="w-4 h-4" />
                                            Atualizar
                                        </>
                                    ) : (
                                        <>
                                            <Save className="w-4 h-4" />
                                            Salvar
                                        </>
                                    )}
                                </>
                            )}
                        </button>

                        <button
                            type="button"
                            onClick={onClose}
                            disabled={loading}
                            className="px-4 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
                        >
                            Cancelar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default EmpresaModal;