'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';

interface RegistroIncompletoModalProps {
  isOpen: boolean;
  onClose: () => void;
  dadosFaltantes: string[];
}

const RegistroIncompletoModal: React.FC<RegistroIncompletoModalProps> = ({
  isOpen,
  onClose,
  dadosFaltantes
}) => {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  if (!isOpen) return null;

  const handleCompletarRegistro = async () => {
    setLoading(true);
    try {
      router.push('/completar-registro');
      // Removido onClose para evitar fechamento prematuro do modal
    } catch (error) {
      console.error('Erro ao navegar:', error);
    } finally {
      setLoading(false);
    }
  };

  // Remover função handleFecharTemporariamente - modal agora é obrigatório

  return (
    <>
      {/* Overlay - remover onClick para impedir fechamento */}
      <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        {/* Modal */}
        <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 transform transition-all">
          {/* Header - remover botão X de fechar */}
          <div className="bg-gradient-to-r from-red-600 to-orange-600 text-white p-6 rounded-t-lg">
            <div className="flex items-center">
              <div className="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
                </svg>
              </div>
              <div>
                <h3 className="text-xl font-bold">⚠️ Cadastro Obrigatório</h3>
                <p className="text-red-100 text-sm">Complete seu perfil para acessar a plataforma</p>
              </div>
            </div>
          </div>

          {/* Content */}
          <div className="p-6">
            <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
              <p className="text-red-800 font-medium">
                🚫 Acesso Restrito: Seu cadastro não foi encontrado em nossa base de dados.
              </p>
            </div>
            
            <p className="text-gray-600 mb-4">
              Para ter acesso à plataforma SaveInMed, você deve completar obrigatoriamente as seguintes informações:
            </p>
            
            <ul className="space-y-2 mb-6">
              {dadosFaltantes.map((item, index) => (
                <li key={index} className="flex items-center text-gray-700">
                  <div className="w-2 h-2 bg-red-500 rounded-full mr-3"></div>
                  <span className="font-medium">{item}</span>
                </li>
              ))}
            </ul>

            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
              <div className="flex items-start">
                <svg className="w-5 h-5 text-yellow-600 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
                </svg>
                <div className="text-sm text-yellow-800">
                  <p className="font-medium mb-1">⚠️ Atenção:</p>
                  <p>Este cadastro é obrigatório. Você não poderá acessar outras funcionalidades até completá-lo.</p>
                </div>
              </div>
            </div>
          </div>

          {/* Footer - apenas botão de completar cadastro */}
          <div className="bg-gray-50 px-6 py-4 rounded-b-lg">
            <button
              onClick={handleCompletarRegistro}
              disabled={loading}
              className="w-full bg-gradient-to-r from-red-600 to-orange-600 text-white py-3 px-4 rounded-md hover:from-red-700 hover:to-orange-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center font-medium"
            >
              {loading ? (
                <>
                  <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
                  Redirecionando...
                </>
              ) : (
                <>
                  <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  Completar Cadastro Obrigatório
                </>
              )}
            </button>
          </div>
        </div>
      </div>
    </>
  );
};

export default RegistroIncompletoModal;