"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { LoginForm, RegisterForm } from "./index";
import { authClient } from "@/clients";
import { useToast } from "@/hooks/use-toast";
import { UserProfile } from "@/lib/types";

interface AuthWrapperProps {
  teams: any[];
  initialUser?: UserProfile | null;
}

export function AuthWrapper({ teams, initialUser }: AuthWrapperProps) {
  const [isLogin, setIsLogin] = useState(true);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const router = useRouter();
  const { toast } = useToast();

  // Rediriger si l'utilisateur est déjà connecté
  useEffect(() => {
    // Temporairement désactivé pour éviter la boucle
    // if (initialUser) {
    //   router.push("/");
    // }
  }, [initialUser, router]);

  const handleLogin = async (email: string, password: string) => {
    setLoading(true);
    setError(null);
    try {
      const response = await authClient.login({ email, password });

      toast({
        title: "Connexion réussie",
        description: response.message,
      });

      // Rediriger vers l'accueil après connexion
      router.push("/");
    } catch (error: any) {
      console.error("Login failed:", error);

      const errorMessage = error.response?.data?.error || "Erreur de connexion";

      setError(errorMessage);
      toast({
        title: "Erreur de connexion",
        description: errorMessage,
        variant: "destructive",
      });
    } finally {
      setLoading(false);
    }
  };

  const handleRegister = async (data: {
    firstName: string;
    lastName: string;
    email: string;
    password: string;
    teamId: string;
  }) => {
    setLoading(true);
    setError(null);
    try {
      const response = await authClient.register(data);

      toast({
        title: "Compte créé",
        description: response.message,
      });

      // Basculer vers le login après inscription réussie
      setIsLogin(true);
    } catch (error: any) {
      console.error("Register failed:", error);

      const errorMessage =
        error.response?.data?.error || "Erreur lors de la création du compte";

      setError(errorMessage);
      toast({
        title: "Erreur d'inscription",
        description: errorMessage,
        variant: "destructive",
      });
    } finally {
      setLoading(false);
    }
  };

  const handleLogout = async () => {
    try {
      await authClient.logout();
      // Rediriger vers la page de login après déconnexion
      window.location.href = "/login";
    } catch (error) {
      console.error("Logout failed:", error);
      // En cas d'erreur, forcer le rechargement pour nettoyer l'état
      window.location.reload();
    }
  };

  // Si l'utilisateur est déjà connecté, afficher un message au lieu de rediriger
  if (initialUser) {
    return (
      <div className="text-center mb-12">
        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm mb-6">
          <span className="text-sm font-medium text-slate-200">PeakSkills</span>
        </div>

        <h1 className="text-4xl font-bold mb-4 text-white">
          Vous êtes déjà connecté
        </h1>
        <p className="text-lg text-slate-400 mb-8">
          Bonjour {initialUser.firstName} {initialUser.lastName}
        </p>

        <div className="max-w-2xl mx-auto space-y-6">
          <div className="flex gap-4 justify-center">
            <button
              onClick={() => (window.location.href = "/")}
              className="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg"
            >
              Aller à l'accueil
            </button>
            <button
              onClick={handleLogout}
              className="px-6 py-3 bg-gray-500 hover:bg-gray-600 text-white rounded-lg"
            >
              Se déconnecter
            </button>
          </div>
        </div>
      </div>
    );
  }

  if (isLogin) {
    return (
      <LoginForm
        onSubmit={handleLogin}
        onSwitchToRegister={() => setIsLogin(false)}
        loading={loading}
        error={error}
      />
    );
  }

  return (
    <RegisterForm
      teams={teams}
      onSubmit={handleRegister}
      onSwitchToLogin={() => setIsLogin(true)}
      loading={loading}
      error={error}
    />
  );
}