photum/frontend/pages/ProfessionalRegister.tsx

import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import {
  ProfessionalForm,
  ProfessionalData,
} from "../components/ProfessionalForm";
import { useAuth } from "../contexts/AuthContext";
import { toast } from "react-hot-toast";

interface ProfessionalRegisterProps {
  onNavigate: (page: string) => void;
}

export const ProfessionalRegister: React.FC<ProfessionalRegisterProps> = ({
  onNavigate,
}) => {
  const navigate = useNavigate();
  const { register } = useAuth();
  const [isSuccess, setIsSuccess] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);

  // Removed access code logic as per requirement

  const handleSubmit = async (professionalData: ProfessionalData) => {
    setIsSubmitting(true);
    try {
      // 1. Cadastrar Usuário (Auth) e Logar Automaticamente
      const authResult = await register({
        nome: professionalData.nome,
        email: professionalData.email,
        senha: professionalData.senha,
        telefone: professionalData.whatsapp,
        role: professionalData.funcaoLabel?.toUpperCase().includes("PESQUISA") ? "RESEARCHER" : "PHOTOGRAPHER",
        tipo_profissional: professionalData.funcaoLabel || "", // Envia o nome da função (ex: Cinegrafista)
        regiao: professionalData.regiao, // Pass region
      }, false, true); // autoLogin = false, skipLoading = true to prevent global loading & form flash

      if (!authResult.success) {
        throw new Error("Falha no cadastro de usuário.");
      }

      // IMPORTANTE: Definir a região no localStorage para que o createProfessional (apiService) use o cabeçalho correto
      localStorage.setItem("photum_selected_region", professionalData.regiao);

      // 2. Criar Perfil Profissional (autenticado)
      const { createProfessional, getUploadURL, uploadFileToSignedUrl } = await import("../services/apiService");

      let avatarUrl = "";
      // Upload de Avatar (obrigatório)
      if (!professionalData.avatar) {
        throw new Error("A foto de perfil é obrigatória.");
      }

      try {
        console.log("Iniciando upload do avatar...");
        const uploadRes = await getUploadURL(professionalData.avatar.name, professionalData.avatar.type);

        if (uploadRes.error || !uploadRes.data) {
          throw new Error(uploadRes.error || "Erro ao obter URL de upload");
        }

        await uploadFileToSignedUrl(uploadRes.data.upload_url, professionalData.avatar);
        avatarUrl = uploadRes.data.public_url;
        console.log("Upload concluído. URL:", avatarUrl);
      } catch (err) {
        console.error("Erro no upload do avatar:", err);
        // Não trava o cadastro, apenas avisa
        toast.error("Não foi possível enviar a foto de perfil. O cadastro seguirá sem foto.", {
            duration: 5000,
            icon: '⚠️'
        });
        // Mantém avatarUrl vazio e prossegue
      }

      // Mapear dados do formulário para o payload esperado pelo backend

      // Mapear dados do formulário para o payload esperado pelo backend
      // O curl fornecido pelo usuário mostra campos underscore (snake_case)
      const payload: any = {
        nome: professionalData.nome,
        agencia: professionalData.agencia,
        banco: professionalData.banco,
        carro_disponivel: professionalData.carroDisponivel === "sim",
        cidade: professionalData.cidade,
        conta_pix: professionalData.pix, // Usando o campo PIX separado
        cpf_cnpj_titular: professionalData.cpfCnpj,
        endereco: `${professionalData.cep}, ${professionalData.rua}, ${professionalData.numero} - ${professionalData.bairro}`,
        equipamentos: professionalData.equipamentos,
        extra_por_equipamento: false, // Default
        funcao_profissional_id: professionalData.funcaoId,
        funcoes_ids: professionalData.funcoesIds, // Pass multi-select IDs
        observacao: professionalData.observacao,
        qtd_estudio: parseInt(professionalData.qtdEstudios) || 0,
        tem_estudio: professionalData.possuiEstudio === "sim",
        tipo_cartao: professionalData.tipoCartao,
        uf: professionalData.uf,
        whatsapp: professionalData.whatsapp,

        // Campos numéricos default
        desempenho_evento: 0,
        disp_horario: 0,
        educacao_simpatia: 0,
        qual_tec: 0,
        tabela_free: "",
        avatar_url: avatarUrl,
      };

      const profResult = await createProfessional(payload, authResult.token);

      if (profResult.error) {
        // Se falhar o perfil, o usuário foi criado :/ 
        // Idealmente limparíamos ou avisaríamos para completar perfil depois
        throw new Error("Usuário criado, mas erro ao salvar dados profissionais: " + profResult.error);
      }

      console.log("Profissional cadastrado com sucesso!");
      // Limpar dados de sessão após cadastro bem-sucedido
      // Agora feito na página de sucesso
      navigate("/cadastro-sucesso", { replace: true });
    } catch (error: any) {
      console.error("Erro ao cadastrar profissional:", error);
      alert(error.message || "Erro ao cadastrar profissional. Tente novamente.");
      setIsSubmitting(false);
    }
  };

  if (isSuccess) {
    return (
      <div
        className="min-h-screen flex items-center justify-center"
        style={{ backgroundColor: "#B9CF33" }}
      >
        <div className="text-center fade-in max-w-md px-4 py-8 bg-white rounded-2xl shadow-xl">
          <div className="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg
              className="w-8 h-8 text-white"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </div>
          <h2 className="text-2xl font-bold text-gray-900 mb-2">
            Cadastro Pendente de Aprovação
          </h2>
          <p className="text-gray-600 mb-4">
            Seu cadastro foi realizado com sucesso e está aguardando aprovação.
          </p>
          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
            <p className="text-sm text-yellow-800">
              <strong>Atenção:</strong> Enquanto seu cadastro não for aprovado,
              você não terá acesso ao sistema.
            </p>
          </div>
          <button
            onClick={() => {
              window.location.href = "/";
            }}
            className="w-full px-6 py-2 text-white font-semibold rounded-lg hover:bg-opacity-90 transition-colors"
            style={{ backgroundColor: "#B9CF33" }}
          >
            OK
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-white p-4 py-8 pt-24">
        <ProfessionalForm
          onSubmit={handleSubmit}
          onCancel={() => onNavigate("cadastro")}
          onNavigate={onNavigate} 
          isLoading={isSubmitting}
        />
    </div>
  );
};