import React, { useState } from "react";
import {
  ProfessionalForm,
  ProfessionalData,
} from "../components/ProfessionalForm";
import { useAuth } from "../contexts/AuthContext";

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

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

  const handleSubmit = async (professionalData: ProfessionalData) => {
    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: "PHOTOGRAPHER", // Role fixa para profissionais
      });

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

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

      // 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.contaPix,
        cpf_cnpj_titular: professionalData.cpfCnpj,
        endereco: `${professionalData.rua}, ${professionalData.numero} - ${professionalData.bairro}`,
        equipamentos: "", // Campo não está no form explícito, talvez observação ou outro?
        extra_por_equipamento: false, // Default
        funcao_profissional_id: professionalData.funcaoId,
        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,
        media: 0,
        tabela_free: "",
      };

      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!");
      setIsSuccess(true);
    } catch (error: any) {
      console.error("Erro ao cadastrar profissional:", error);
      alert(error.message || "Erro ao cadastrar profissional. Tente novamente.");
    }
  };

  if (isSuccess) {
    return (
      <div
        className="min-h-screen flex items-center justify-center"
        style={{ backgroundColor: "#B9CF33" }}
      >
        <div className="bg-white rounded-2xl shadow-2xl p-8 max-w-md w-full mx-4 text-center">
          <div className="w-16 h-16 bg-green-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="M5 13l4 4L19 7"
              />
            </svg>
          </div>
          <h2 className="text-2xl font-bold text-gray-900 mb-2">
            Cadastro Realizado!
          </h2>
          <p className="text-gray-600 mb-6">
            Seu cadastro de profissional foi realizado com sucesso e está
            aguardando aprovação.
          </p>
          <button
            onClick={() => onNavigate("entrar")}
            className="w-full px-6 py-3 text-white font-semibold rounded-lg transition-colors"
            style={{ backgroundColor: "#B9CF33" }}
          >
            Ir para Login
          </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")}
      />
    </div>
  );
};