"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { formatCPF, removeNonNumeric, validateCPF } from "@/lib/masks";
import { translateError } from "@/lib/error-translator";

interface DadosPessoaisData {
  nomeCivil: string;
  nomeSocial: string;
  cpf: string;
  email: string;
}

interface EnderecoData {
  titulo: string;
  cep: string;
  logradouro: string;
  bairro: string;
  numero: string;
  complemento: string;
  cidade: string;
  estado: string;
  pais: string;
  latitude?: number;
  longitude?: number;
}

interface EmpresaData {
  cnpj: string;
  razaoSocial: string;
  nomeFantasia: string;
  dataAbertura: string;
  telefone: string;
  email: string;
  atividadePrincipalCodigo: string;
  atividadePrincipalDesc: string;
  tipoFrete: 'gratis' | 'fixo' | 'por_km' | '';
  raioEntregaKm: string;
  taxaEntrega: string;
  valorFreteKm: string;
}

const CompletarRegistroPage = () => {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [checkingAuth, setCheckingAuth] = useState(true);
  const [loadingUserData, setLoadingUserData] = useState(true);
  const [hasUserData, setHasUserData] = useState(false);
  const [userId, setUserId] = useState<string>("");
  const [progressMessage, setProgressMessage] = useState("");
  const [error, setError] = useState("");
  const [success, setSuccess] = useState("");
  const [showPendingModal, setShowPendingModal] = useState(false); // Modal de cadastro pendente

  // Estados para controlar quais seções mostrar
  const [precisaCadastrarUsuario, setPrecisaCadastrarUsuario] = useState(false);
  const [precisaCadastrarEndereco, setPrecisaCadastrarEndereco] =
    useState(false);
  const [precisaCadastrarEmpresa, setPrecisaCadastrarEmpresa] = useState(false);

  const [dadosPessoais, setDadosPessoais] = useState<
    DadosPessoaisData & { ativo?: boolean }
  >({
    nomeCivil: "",
    nomeSocial: "",
    cpf: "",
    email: "",
    ativo: false,
  });

  const [enderecoData, setEnderecoData] = useState<EnderecoData>({
    titulo: "",
    cep: "",
    logradouro: "",
    bairro: "",
    numero: "",
    complemento: "",
    cidade: "",
    estado: "",
    pais: "Brasil",
    latitude: 0,
    longitude: 0,
  });

  const [empresaData, setEmpresaData] = useState<EmpresaData>({
    cnpj: "",
    razaoSocial: "",
    nomeFantasia: "",
    dataAbertura: "",
    telefone: "",
    email: "",
    atividadePrincipalCodigo: "",
    atividadePrincipalDesc: "",
    tipoFrete: "",
    raioEntregaKm: "",
    taxaEntrega: "",
    valorFreteKm: "",
  });

  const [cepError, setCepError] = useState<string | null>(null);
  const [lastCepFetched, setLastCepFetched] = useState<string>("");
  const [cepLoading, setCepLoading] = useState(false);

  useEffect(() => {
    const loadUserData = async () => {
      setLoadingUserData(true);
      try {
        // Verificar se há parâmetros de URL com dados pré-preenchidos
        const searchParams = new URLSearchParams(window.location.search);
        const nomeFromUrl = searchParams.get('nome');
        const emailFromUrl = searchParams.get('email');

        if (nomeFromUrl || emailFromUrl) {
          console.log("📝 Pré-preenchendo dados da URL...");
          setDadosPessoais(prev => ({
            ...prev,
            nomeCivil: nomeFromUrl || prev.nomeCivil,
            email: emailFromUrl || prev.email,
          }));
          setHasUserData(true);
        }

        // Verificar se há token de acesso
        const storedToken = localStorage.getItem('access_token');

        if (storedToken) {
          console.log("🔍 Carregando dados do usuário...");

          // Buscar dados do usuário via BFF
          const userResponse = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/auth/me`, {
            method: "GET",
            headers: {
              "accept": "application/json",
              "Authorization": `Bearer ${storedToken}`,
            },
          });

          if (userResponse.ok) {
            const userData = await userResponse.json();
            console.log("✅ Dados do usuário carregados:", userData);
            setHasUserData(true);

            // Capturar ID do usuário
            const userIdFromData = userData.id || userData._id || userData.userId;
            if (userIdFromData) {
              setUserId(userIdFromData);
              console.log("👤 ID do usuário capturado:", userIdFromData);
            }

            // Pré-preencher campos pessoais com dados disponíveis (não sobrescrever dados da URL)
            setDadosPessoais(prev => ({
              ...prev,
              nomeCivil: prev.nomeCivil || userData.nome || userData.name || userData.nomeCivil,
              email: prev.email || userData.email,
              // CPF pode vir de diferentes campos
              cpf: userData.cpf || userData.documento || prev.cpf,
            }));

            // Pré-preencher dados da empresa se disponíveis
            setEmpresaData(prev => ({
              ...prev,
              telefone: userData.telefone || userData.phone || prev.telefone,
              email: userData.emailEmpresa || userData.email || prev.email,
              // Se há dados específicos da empresa
              cnpj: userData.cnpj || prev.cnpj,
              razaoSocial: userData.razaoSocial || userData.empresa || prev.razaoSocial,
              nomeFantasia: userData.nomeFantasia || userData.empresa || prev.nomeFantasia,
            }));

            // Se há endereço nos dados do usuário
            if (userData.endereco || userData.enderecos) {
              const endereco = userData.endereco || userData.enderecos[0];
              if (endereco) {
                setEnderecoData(prev => ({
                  ...prev,
                  titulo: endereco.titulo || "Endereço Principal",
                  cep: endereco.cep || prev.cep,
                  logradouro: endereco.logradouro || endereco.rua || prev.logradouro,
                  bairro: endereco.bairro || prev.bairro,
                  numero: endereco.numero || prev.numero,
                  complemento: endereco.complemento || prev.complemento,
                  cidade: endereco.cidade || prev.cidade,
                  estado: endereco.estado || endereco.uf || prev.estado,
                  pais: endereco.pais || prev.pais,
                }));
              }
            }

            console.log("📝 Campos pré-preenchidos com dados do usuário");
          } else {
            console.log("ℹ️ Não foi possível carregar dados do usuário");
          }
        } else {
          console.log("ℹ️ Nenhum token encontrado, formulário será preenchido manualmente");
        }
      } catch (error) {
        console.log("ℹ️ Erro ao carregar dados do usuário:", error);
      } finally {
        setLoadingUserData(false);
      }
    };

    // Página livre - não fazer verificações de autenticação
    setCheckingAuth(false);

    // Configurar estados padrão para mostrar todos os campos
    setPrecisaCadastrarUsuario(true);
    setPrecisaCadastrarEndereco(true);
    setPrecisaCadastrarEmpresa(true);

    // Tentar carregar dados do usuário se disponível
    loadUserData();
  }, []);

  // Busca automática de CEP
  useEffect(() => {
    const digits = enderecoData.cep.replace(/\D/g, "");
    if (digits.length === 8 && digits !== lastCepFetched) {
      const fetchData = async () => {
        setCepLoading(true);
        setCepError(null);
        try {
          const res = await fetch(`/api/cep/${digits}`);
          if (!res.ok) {
            throw new Error("CEP inválido");
          }
          const data = await res.json();
          setEnderecoData((prev) => ({
            ...prev,
            logradouro: data.logradouro || "",
            bairro: data.bairro || "",
            cidade: data.localidade || "",
            estado: data.uf || "",
            latitude: data.lat ? parseFloat(data.lat) : 0,
            longitude: data.lng ? parseFloat(data.lng) : 0,
          }));
          setLastCepFetched(digits);
          setCepError(null);
        } catch (err) {
          console.error("Erro ao buscar CEP:", err);
          setCepError("CEP não encontrado.");
        } finally {
          setCepLoading(false);
        }
      };
      fetchData();
    }
  }, [enderecoData.cep, lastCepFetched]);

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

  const handleCPFChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const formatted = formatCPF(e.target.value);
    setDadosPessoais((prev) => ({ ...prev, cpf: formatted }));
  };

  const handleEnderecoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    let newValue = value;

    if (name === "cep") {
      const digits = value.replace(/\D/g, "").slice(0, 8);
      newValue =
        digits.length > 5 ? `${digits.slice(0, 5)}-${digits.slice(5)}` : digits;
    }

    setEnderecoData((prev) => ({
      ...prev,
      [name]: newValue,
    }));
  };

  const handleEmpresaChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    let newValue = value;

    if (name === "cnpj") {
      // Formatar CNPJ: 00.000.000/0000-00
      const digits = value.replace(/\D/g, "").slice(0, 14);
      if (digits.length <= 2) {
        newValue = digits;
      } else if (digits.length <= 5) {
        newValue = `${digits.slice(0, 2)}.${digits.slice(2)}`;
      } else if (digits.length <= 8) {
        newValue = `${digits.slice(0, 2)}.${digits.slice(2, 5)}.${digits.slice(
          5
        )}`;
      } else if (digits.length <= 12) {
        newValue = `${digits.slice(0, 2)}.${digits.slice(2, 5)}.${digits.slice(
          5,
          8
        )}/${digits.slice(8)}`;
      } else {
        newValue = `${digits.slice(0, 2)}.${digits.slice(2, 5)}.${digits.slice(
          5,
          8
        )}/${digits.slice(8, 12)}-${digits.slice(12)}`;
      }
    } else if (name === "telefone") {
      // Formatar telefone: (11) 99999-9999
      const digits = value.replace(/\D/g, "").slice(0, 11);
      if (digits.length <= 2) {
        newValue = digits;
      } else if (digits.length <= 7) {
        newValue = `(${digits.slice(0, 2)}) ${digits.slice(2)}`;
      } else {
        newValue = `(${digits.slice(0, 2)}) ${digits.slice(2, 7)}-${digits.slice(7)}`;
      }
    }

    setEmpresaData((prev) => ({ ...prev, [name]: newValue }));
  };

  /**
   * Função para notificar administrador sobre novo cadastro completo
   */
  const notifyAdmin = async (userData: { nome: string, email: string, identificador: string }) => {
    try {
      // Enviar notificações via API (usando Resend para emails reais)
      await fetch('/api/notify-admin-resend', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(userData)
      });
      console.log("✅ Notificações enviadas com sucesso!");
    } catch (error) {
      console.error("❌ Erro ao enviar notificações:", error);
      // Não bloquear o cadastro por erro de notificação
    }
  };

  /**
   * Função para fechar modal de cadastro pendente
   */
  const handlePendingModalClose = () => {
    setShowPendingModal(false);
    // Fazer logout para limpar dados do usuário
    localStorage.removeItem('access_token');
    localStorage.removeItem('user');
    // Redirecionar para página inicial
    router.push('/');
  };

  const handleFormSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError("");
    setSuccess("");
    setProgressMessage("");

    try {
      // Validações básicas
      if (precisaCadastrarUsuario) {
        if (!dadosPessoais.nomeCivil.trim()) {
          throw new Error("Nome civil é obrigatório");
        }
        if (!dadosPessoais.email.trim()) {
          throw new Error("Email é obrigatório");
        }
        if (!dadosPessoais.cpf.trim()) {
          throw new Error("CPF é obrigatório");
        }
        if (!validateCPF(dadosPessoais.cpf)) {
          throw new Error("CPF inválido");
        }
      }

      if (precisaCadastrarEndereco) {
        if (!enderecoData.titulo.trim()) {
          throw new Error("Título do endereço é obrigatório");
        }
        if (!enderecoData.cep.trim()) {
          throw new Error("CEP é obrigatório");
        }
        if (!enderecoData.logradouro.trim()) {
          throw new Error("Logradouro é obrigatório");
        }
        if (!enderecoData.numero.trim()) {
          throw new Error("Número é obrigatório");
        }
        if (!enderecoData.cidade.trim()) {
          throw new Error("Cidade é obrigatória");
        }
        if (!enderecoData.estado.trim()) {
          throw new Error("Estado é obrigatório");
        }
      }

      if (precisaCadastrarEmpresa) {
        if (!empresaData.cnpj.trim()) {
          throw new Error("CNPJ é obrigatório");
        }
        if (!empresaData.razaoSocial.trim()) {
          throw new Error("Razão social é obrigatória");
        }
        if (!empresaData.nomeFantasia.trim()) {
          throw new Error("Nome fantasia é obrigatório");
        }
        if (!empresaData.email.trim()) {
          throw new Error("Email da empresa é obrigatório");
        }
        if (!empresaData.telefone.trim()) {
          throw new Error("Telefone da empresa é obrigatório");
        }
      }

      // Obter token de autenticação
      const storedToken = localStorage.getItem('access_token');
      if (!storedToken) {
        throw new Error("Token de autenticação não encontrado. Faça login novamente.");
      }

      const headers = {
        "accept": "application/json",
        "Content-Type": "application/json",
        "Authorization": `Bearer ${storedToken}`,
      };

      let enderecoId = "";
      let empresaId = "";

      // 1. Criar endereço primeiro (se necessário)
      if (precisaCadastrarEndereco) {
        setProgressMessage("📍 Criando endereço...");
        console.log("📍 Criando endereço...");

        const enderecoPayload = {
          titulo: enderecoData.titulo,
          cep: enderecoData.cep.replace(/\D/g, ""), // Remove formatação
          logradouro: enderecoData.logradouro,
          numero: enderecoData.numero,
          complemento: enderecoData.complemento,
          cidade: enderecoData.cidade,
          estado: enderecoData.estado,
          pais: enderecoData.pais,
          bairro: enderecoData.bairro,
        };

        console.log("Payload endereço:", enderecoPayload);

        const enderecoResponse = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/enderecos`, {
          method: "POST",
          headers,
          body: JSON.stringify(enderecoPayload),
        });

        if (!enderecoResponse.ok) {
          const errorData = await enderecoResponse.json().catch(() => ({}));
          console.error("Erro endereço:", errorData);
          throw new Error(errorData.message || `Erro ao criar endereço: ${enderecoResponse.status}`);
        }

        const enderecoResult = await enderecoResponse.json();
        enderecoId = enderecoResult.id || enderecoResult._id;
        console.log("✅ Endereço criado com ID:", enderecoId);
      }

      // 2. Criar empresa (se necessário) com o ID do endereço
      if (precisaCadastrarEmpresa) {
        setProgressMessage("🏢 Criando dados da empresa...");
        console.log("🏢 Criando empresa...");

        // Formatação correta da data de abertura (YYYY-MM-DD)
        let dataAberturaFormatada = "";
        if (empresaData.dataAbertura) {
          // Se está no formato dd/mm/aaaa, converter para aaaa-mm-dd
          if (empresaData.dataAbertura.includes("/")) {
            const parts = empresaData.dataAbertura.split("/");
            if (parts.length === 3) {
              dataAberturaFormatada = `${parts[2]}-${parts[1].padStart(2, '0')}-${parts[0].padStart(2, '0')}`;
            } else {
              dataAberturaFormatada = "2000-01-01";
            }
          } else {
            dataAberturaFormatada = empresaData.dataAbertura;
          }
        } else {
          dataAberturaFormatada = "2000-01-01";
        }

        const empresaPayload = {
          "cnpj": empresaData.cnpj.replace(/\D/g, ""),
          "razao-social": empresaData.razaoSocial,
          "nome-fantasia": empresaData.nomeFantasia,
          "situacao": "Ativa",
          "natureza-juridica": "Sociedade Anonima",
          "porte": "ME",
          "telefone": empresaData.telefone.replace(/\D/g, ""),
          "atividade-principal-codigo": empresaData.atividadePrincipalCodigo || "4711-3-02",
          "atividade-principal-desc": empresaData.atividadePrincipalDesc || "Comércio varejista de mercadorias em geral",
          "email": empresaData.email,
          "capital-social": 500000,
          "data-abertura": dataAberturaFormatada,
          "latitude": enderecoData.latitude || 0,
          "longitude": enderecoData.longitude || 0,
          "tipoFrete": empresaData.tipoFrete,
          "raioEntregaKm": empresaData.raioEntregaKm ? parseFloat(empresaData.raioEntregaKm) : 0,
          "taxaEntrega": empresaData.taxaEntrega ? parseFloat(empresaData.taxaEntrega) : 0,
          "valorFreteKm": empresaData.valorFreteKm ? parseFloat(empresaData.valorFreteKm) : 0,
          "enderecoID": enderecoId
        };

        console.log("Payload empresa:", empresaPayload);

        const empresaResponse = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/empresas`, {
          method: "POST",
          headers,
          body: JSON.stringify(empresaPayload),
        });

        console.log("Response status:", empresaResponse.status);
        console.log("Response headers:", Object.fromEntries(empresaResponse.headers.entries()));

        if (!empresaResponse.ok) {
          const errorText = await empresaResponse.text();
          console.error("Erro empresa - response text:", errorText);

          let errorData: any = {};
          try {
            errorData = JSON.parse(errorText);
          } catch (e) {
            console.error("Erro ao parsear resposta de erro:", e);
          }

          throw new Error(errorData.message || errorText || `Erro ao criar empresa: ${empresaResponse.status}`);
        }

        const empresaResult = await empresaResponse.json();
        empresaId = empresaResult.id || empresaResult._id;
        console.log("✅ Empresa criada com ID:", empresaId);
      }

      // 3. Atualizar dados do usuário com PATCH (se necessário)
      if (precisaCadastrarUsuario) {
        setProgressMessage("👤 Finalizando cadastro do usuário...");
        console.log("👤 Atualizando dados do usuário...");

        // Verificar se temos o ID do usuário
        if (!userId) {
          throw new Error("ID do usuário não encontrado. Faça login novamente.");
        }

        // Buscar dados atuais do usuário para preservar campos existentes
        const userDataResponse = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/auth/me`, {
          method: "GET",
          headers,
        });

        let currentUserData: any = {};
        if (userDataResponse.ok) {
          currentUserData = await userDataResponse.json();
        }

        const usuarioPayload: any = {
          ...currentUserData, // Preservar dados existentes
          nome: dadosPessoais.nomeCivil,
          email: dadosPessoais.email,
          ativo: false, // valor estático
          cpf: dadosPessoais.cpf.replace(/\D/g, ""), // Remove formatação - deve ter 11 dígitos
          "nome-social": dadosPessoais.nomeSocial || "N/A", // API exige pelo menos 1 caractere
          "registro-completo": true,
          enderecos: [],
          nivel: "admin",
          empresasDados: [],
        };

        // Gerenciar arrays de endereços e empresas - garantir que enviamos apenas IDs
        const enderecosExistentes = currentUserData.enderecos || [];
        const empresasExistentes = currentUserData.empresasDados || [];

        // Extrair apenas os IDs dos endereços existentes (filtrar apenas strings)
        const enderecosIds = enderecosExistentes
          .map((endereco: any) => {
            if (typeof endereco === 'string') {
              return endereco; // Já é um ID
            }
            return endereco.$id || endereco.id; // Extrair ID do objeto
          })
          .filter((id: any) => typeof id === 'string' && id.length > 0); // Manter apenas IDs válidos

        // Extrair apenas os IDs das empresas existentes (filtrar apenas strings)
        const empresasIds = empresasExistentes
          .map((empresa: any) => {
            if (typeof empresa === 'string') {
              return empresa; // Já é um ID
            }
            return empresa.$id || empresa.id; // Extrair ID do objeto
          })
          .filter((id: any) => typeof id === 'string' && id.length > 0); // Manter apenas IDs válidos

        // Adicionar novo endereço se criado
        if (enderecoId) {
          usuarioPayload.enderecos = [...enderecosIds, enderecoId];
        } else {
          usuarioPayload.enderecos = enderecosIds;
        }

        // Adicionar nova empresa se criada
        if (empresaId) {
          usuarioPayload.empresasDados = [...empresasIds, empresaId];
        } else {
          usuarioPayload.empresasDados = empresasIds;
        }

        console.log("IDs de endereços que serão enviados:", usuarioPayload.enderecos);
        console.log("IDs de empresas que serão enviados:", usuarioPayload.empresasDados);
        console.log("Tipos dos IDs endereços:", usuarioPayload.enderecos.map((id: any) => typeof id));
        console.log("Tipos dos IDs empresas:", usuarioPayload.empresasDados.map((id: any) => typeof id));

        console.log("Payload usuário completo:", JSON.stringify(usuarioPayload, null, 2));

        // NOTA TÉCNICA: A API aceita IDs como strings e funciona corretamente para operações CRUD
        // Porém, o Appwrite retorna os campos de relacionamento como objetos serializados (strings)
        // em vez de referências adequadas. Isso é um problema de configuração no backend/Appwrite.
        // O frontend envia corretamente arrays de IDs como strings conforme especificado pela API.

        // Usar PATCH para atualizar o usuário
        const usuarioResponse = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/usuarios/${userId}`, {
          method: "PATCH",
          headers,
          body: JSON.stringify(usuarioPayload),
        });

        if (!usuarioResponse.ok) {
          const errorData = await usuarioResponse.json().catch(() => ({}));
          console.error("Erro usuário:", errorData);
          throw new Error(errorData.message || `Erro ao atualizar usuário: ${usuarioResponse.status}`);
        }

        console.log("✅ Dados do usuário atualizados");
      }

      setProgressMessage("✅ Processamento concluído!");

      // Enviar notificações para o administrador após finalizar o registro
      if (precisaCadastrarUsuario && precisaCadastrarEndereco && precisaCadastrarEmpresa) {
        await notifyAdmin({
          nome: dadosPessoais.nomeCivil,
          email: dadosPessoais.email,
          identificador: dadosPessoais.email
        });
      }

      setSuccess("Registro completado com sucesso! Todos os dados foram salvos e as notificações foram enviadas.");

      // Mostrar modal de cadastro pendente após sucesso
      setTimeout(() => {
        setShowPendingModal(true);
      }, 2000);

    } catch (error: any) {
      console.error("Erro no registro:", error);
      setError(translateError(error.message) || "Erro ao processar registro");
      setProgressMessage("");
    } finally {
      setLoading(false);
    }
  };

  if (checkingAuth) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-gray-600">Verificando autenticação...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-4xl mx-auto">
        <div className="bg-white shadow-xl rounded-lg p-8">
          <div className="text-center mb-8">
            <h1 className="text-3xl font-bold text-gray-900 mb-2">
              Complete seu Registro
            </h1>

            {/* Indicador de carregamento dos dados do usuário */}
            {loadingUserData && (
              <div className="flex items-center justify-center mb-4">
                <div className="w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mr-2"></div>
                <span className="text-blue-600 text-sm">Carregando seus dados...</span>
              </div>
            )}

            {/* Mensagem informativa quando dados foram carregados */}
            {!loadingUserData && hasUserData && (
              <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-md">
                <p className="text-blue-700 text-sm">
                  ✅ Alguns campos foram pré-preenchidos com seus dados. Verifique e complete as informações necessárias.
                </p>
              </div>
            )}

            <p className="text-gray-600">
              {precisaCadastrarUsuario &&
                precisaCadastrarEndereco &&
                precisaCadastrarEmpresa
                ? "Preencha todos os dados obrigatórios para finalizar seu cadastro e acessar a plataforma"
                : precisaCadastrarUsuario && precisaCadastrarEndereco
                  ? "Complete seus dados pessoais e endereço para continuar"
                  : precisaCadastrarUsuario && precisaCadastrarEmpresa
                    ? "Complete seus dados pessoais e da empresa para continuar"
                    : precisaCadastrarEndereco && precisaCadastrarEmpresa
                      ? "Complete seu endereço e dados da empresa para continuar"
                      : precisaCadastrarUsuario
                        ? "Complete seus dados pessoais para continuar"
                        : precisaCadastrarEndereco
                          ? "Complete seu endereço para continuar"
                          : precisaCadastrarEmpresa
                            ? "Complete os dados da sua empresa para continuar"
                            : "Seu cadastro está completo!"}
            </p>
          </div>

          {/* Formulário de Cadastro */}
          <form onSubmit={handleFormSubmit} className="space-y-8">
            {/* Seção: Dados Pessoais - Exibir apenas se precisar cadastrar usuário */}
            {precisaCadastrarUsuario && (
              <div className="border-b border-gray-200 pb-8">
                <h2 className="text-xl font-semibold text-gray-900 mb-6">
                  Dados Pessoais
                </h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Nome Civil *
                    </label>
                    <input
                      type="text"
                      name="nomeCivil"
                      value={dadosPessoais.nomeCivil}
                      onChange={handleDadosPessoaisChange}
                      required={precisaCadastrarUsuario}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="Digite seu nome civil"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Nome Social
                    </label>
                    <input
                      type="text"
                      name="nomeSocial"
                      value={dadosPessoais.nomeSocial}
                      onChange={handleDadosPessoaisChange}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="Digite seu nome social (opcional)"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      CPF *
                    </label>
                    <input
                      type="text"
                      name="cpf"
                      value={dadosPessoais.cpf}
                      onChange={handleCPFChange}
                      maxLength={14}
                      required={precisaCadastrarUsuario}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="000.000.000-00"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Email *
                    </label>
                    <input
                      type="email"
                      name="email"
                      value={dadosPessoais.email}
                      onChange={handleDadosPessoaisChange}
                      required={precisaCadastrarUsuario}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="seu@email.com"
                    />
                  </div>
                </div>
              </div>
            )}

            {/* Seção: Endereço - Exibir apenas se precisar cadastrar endereço */}
            {precisaCadastrarEndereco && (
              <div className="border-b border-gray-200 pb-8">
                <h2 className="text-xl font-semibold text-gray-900 mb-6">
                  Endereço
                </h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Título do Endereço *
                    </label>
                    <input
                      type="text"
                      name="titulo"
                      value={enderecoData.titulo}
                      onChange={handleEnderecoChange}
                      required={precisaCadastrarEndereco}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="Ex: Residencial, Comercial"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      CEP *
                    </label>
                    <div className="relative">
                      <input
                        type="text"
                        name="cep"
                        value={enderecoData.cep}
                        onChange={handleEnderecoChange}
                        maxLength={9}
                        required={precisaCadastrarEndereco}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white pr-10"
                        placeholder="00000-000"
                      />
                      {cepLoading && (
                        <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                          <div className="w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
                        </div>
                      )}
                    </div>
                    {cepLoading && (
                      <p className="text-blue-600 text-sm mt-1">
                        Buscando informações do CEP...
                      </p>
                    )}
                    {cepError && (
                      <p className="text-red-600 text-sm mt-1">{cepError}</p>
                    )}
                  </div>

                  <div className="md:col-span-2">
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Logradouro *
                    </label>
                    <input
                      type="text"
                      name="logradouro"
                      value={enderecoData.logradouro}
                      onChange={handleEnderecoChange}
                      required={precisaCadastrarEndereco}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="Rua das Flores"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Número *
                    </label>
                    <input
                      type="text"
                      name="numero"
                      value={enderecoData.numero}
                      onChange={handleEnderecoChange}
                      required={precisaCadastrarEndereco}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="123"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Complemento
                    </label>
                    <input
                      type="text"
                      name="complemento"
                      value={enderecoData.complemento}
                      onChange={handleEnderecoChange}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="Apto 45"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Cidade *
                    </label>
                    <input
                      type="text"
                      name="cidade"
                      value={enderecoData.cidade}
                      onChange={handleEnderecoChange}
                      required={precisaCadastrarEndereco}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="Goiânia"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Estado *
                    </label>
                    <input
                      type="text"
                      name="estado"
                      value={enderecoData.estado}
                      onChange={handleEnderecoChange}
                      required={precisaCadastrarEndereco}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="GO"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Bairro *
                    </label>
                    <input
                      type="text"
                      name="bairro"
                      value={enderecoData.bairro}
                      onChange={handleEnderecoChange}
                      required={precisaCadastrarEndereco}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="Centro"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      País *
                    </label>
                    <input
                      type="text"
                      name="pais"
                      value={enderecoData.pais}
                      onChange={handleEnderecoChange}
                      required={precisaCadastrarEndereco}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="Brasil"
                    />
                  </div>
                </div>
              </div>
            )}

            {/* Seção: Empresa - Exibir apenas se precisar cadastrar empresa */}
            {precisaCadastrarEmpresa && (
              <div className="border-b border-gray-200 pb-8">
                <h2 className="text-xl font-semibold text-gray-900 mb-6">
                  Dados da Empresa
                </h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      CNPJ *
                    </label>
                    <input
                      type="text"
                      name="cnpj"
                      value={empresaData.cnpj}
                      onChange={handleEmpresaChange}
                      maxLength={18}
                      required={precisaCadastrarEmpresa}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="00.000.000/0000-00"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Nome Fantasia *
                    </label>
                    <input
                      type="text"
                      name="nomeFantasia"
                      value={empresaData.nomeFantasia}
                      onChange={handleEmpresaChange}
                      required={precisaCadastrarEmpresa}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="Exemplo"
                    />
                  </div>

                  <div className="md:col-span-2">
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Razão Social *
                    </label>
                    <input
                      type="text"
                      name="razaoSocial"
                      value={empresaData.razaoSocial}
                      onChange={handleEmpresaChange}
                      required={precisaCadastrarEmpresa}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="Empresa Exemplo Ltda"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Data de Abertura *
                    </label>
                    <input
                      type="date"
                      name="dataAbertura"
                      value={empresaData.dataAbertura}
                      onChange={handleEmpresaChange}
                      required={precisaCadastrarEmpresa}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                    />
                  </div>


                  {/* Natureza Jurídica removida conforme solicitação */}



                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Telefone *
                    </label>
                    <input
                      type="tel"
                      name="telefone"
                      value={empresaData.telefone}
                      onChange={handleEmpresaChange}
                      required={precisaCadastrarEmpresa}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="(11) 99999-9999"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Email *
                    </label>
                    <input
                      type="email"
                      name="email"
                      value={empresaData.email}
                      onChange={handleEmpresaChange}
                      required={precisaCadastrarEmpresa}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="empresa@exemplo.com"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Código Atividade Principal *
                    </label>
                    <input
                      type="text"
                      name="atividadePrincipalCodigo"
                      value={empresaData.atividadePrincipalCodigo}
                      onChange={handleEmpresaChange}
                      required={precisaCadastrarEmpresa}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="Ex: 47.11-3-02"
                    />
                  </div>

                  <div className="md:col-span-2">
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Descrição Atividade Principal *
                    </label>
                    <input
                      type="text"
                      name="atividadePrincipalDesc"
                      value={empresaData.atividadePrincipalDesc}
                      onChange={handleEmpresaChange}
                      required={precisaCadastrarEmpresa}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                      placeholder="Ex: Comércio varejista de mercadorias em geral"
                    />
                  </div>

                  {/* Configuração de Frete */}
                  <div className="md:col-span-2 border-t border-gray-200 pt-6 mt-2">
                    <h3 className="text-lg font-medium text-gray-900 mb-4">Configuração de Frete</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                          Tipo de Frete
                        </label>
                        <select
                          name="tipoFrete"
                          value={empresaData.tipoFrete}
                          onChange={handleEmpresaChange}
                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                        >
                          <option value="">Selecione...</option>
                          <option value="gratis">Grátis</option>
                          <option value="fixo">Fixo</option>
                          <option value="por_km">Por KM</option>
                        </select>
                        <p className="text-xs text-gray-500 mt-1">
                          Defina como será calculado o custo de envio para seus clientes.
                        </p>
                      </div>

                      {empresaData.tipoFrete && (
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-2">
                            Raio de Entrega (km)
                          </label>
                          <input
                            type="number"
                            name="raioEntregaKm"
                            value={empresaData.raioEntregaKm}
                            onChange={handleEmpresaChange}
                            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                            placeholder="0.00"
                            step="0.01"
                          />
                          <p className="text-xs text-gray-500 mt-1">
                            Distância máxima em quilômetros que sua empresa atende.
                          </p>
                        </div>
                      )}

                      {(empresaData.tipoFrete === 'fixo' || empresaData.tipoFrete === 'por_km') && (
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-2">
                            Taxa de Entrega (R$)
                          </label>
                          <input
                            type="number"
                            name="taxaEntrega"
                            value={empresaData.taxaEntrega}
                            onChange={handleEmpresaChange}
                            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                            placeholder="0.00"
                            step="0.01"
                          />
                          <p className="text-xs text-gray-500 mt-1">
                            {empresaData.tipoFrete === 'fixo'
                              ? "Valor único cobrado por entrega dentro do raio."
                              : "Valor base inicial da entrega."}
                          </p>
                        </div>
                      )}

                      {empresaData.tipoFrete === 'por_km' && (
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-2">
                            Valor do Frete por KM (R$)
                          </label>
                          <input
                            type="number"
                            name="valorFreteKm"
                            value={empresaData.valorFreteKm}
                            onChange={handleEmpresaChange}
                            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 bg-white"
                            placeholder="0.00"
                            step="0.01"
                          />
                          <p className="text-xs text-gray-500 mt-1">
                            Valor adicional cobrado a cada quilômetro de distância.
                          </p>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Mensagem de progresso */}
            {loading && progressMessage && (
              <div className="bg-blue-50 border border-blue-200 rounded-md p-4 mb-4">
                <div className="flex items-center">
                  <div className="w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mr-3"></div>
                  <p className="text-blue-600 text-sm">{progressMessage}</p>
                </div>
              </div>
            )}

            {/* Mensagens */}
            {error && (
              <div className="bg-red-50 border border-red-200 rounded-md p-4">
                <p className="text-red-600 text-sm">{error}</p>
              </div>
            )}

            {success && (
              <div className="bg-green-50 border border-green-200 rounded-md p-4">
                <p className="text-green-600 text-sm">{success}</p>
              </div>
            )}

            {/* Botão */}
            <div className="flex justify-center">
              <button
                type="submit"
                disabled={loading}
                className="w-full max-w-md bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center cursor-pointer"
              >
                {loading ? (
                  <>
                    <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
                    Finalizando...
                  </>
                ) : precisaCadastrarUsuario &&
                  precisaCadastrarEndereco &&
                  precisaCadastrarEmpresa ? (
                  "Finalizar Registro"
                ) : (
                  "Completar Cadastro"
                )}
              </button>
            </div>
          </form>
        </div>
      </div>

      {/* Modal de Cadastro Pendente */}
      {showPendingModal && (
        <div className="fixed inset-0 bg-white bg-opacity-95 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4 animate-in fade-in slide-in-from-bottom-4 duration-300">
            {/* Header do Modal */}
            <div className="bg-gradient-to-r from-blue-600 to-green-600 p-6 rounded-t-2xl text-center">
              <div className="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
                <Image
                  src="/logo.png"
                  alt="SaveInMed Logo"
                  width={40}
                  height={40}
                  className="h-10 w-10"
                />
              </div>
              <h2 className="text-2xl font-bold text-white">
                Cadastro Pendente
              </h2>
            </div>

            {/* Conteúdo do Modal */}
            <div className="p-6 text-center">
              <div className="mb-6">
                <p className="text-gray-700 text-lg leading-relaxed">
                  Seu cadastro foi <strong>enviado com sucesso</strong>!
                </p>
                <p className="text-gray-600 mt-3">
                  Agora está pendente de <strong>validação pela nossa equipe</strong>.
                </p>
                <p className="text-gray-600 mt-2">
                  Você receberá uma confirmação por email quando seu acesso estiver liberado.
                </p>
              </div>

              {/* Ícone decorativo */}
              <div className="flex justify-center mb-6">
                <div className="flex space-x-2">
                  <div className="w-3 h-3 bg-blue-500 rounded-full animate-pulse"></div>
                  <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse delay-100"></div>
                  <div className="w-3 h-3 bg-blue-400 rounded-full animate-pulse delay-200"></div>
                </div>
              </div>

              {/* Botão de OK */}
              <button
                onClick={handlePendingModalClose}
                className="w-full bg-gradient-to-r from-blue-600 to-green-600 hover:from-blue-700 hover:to-green-700 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-200"
              >
                Entendi, obrigado!
              </button>
            </div>
          </div>
        </div>
      )}

    </div>
  );
};

export default CompletarRegistroPage;
