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 {
      // Aqui você pode fazer a chamada para o backend para cadastrar o profissional
      // Por enquanto, vamos apenas mostrar mensagem de sucesso
      console.log("Dados do profissional:", professionalData);
      setIsSuccess(true);
    } catch (error) {
      console.error("Erro ao cadastrar profissional:", error);
      alert("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>
  );
};