import { useLocation } from "wouter";
import { useAuth } from "@/_core/hooks/useAuth";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { APP_LOGO, APP_TITLE, getLoginUrl } from "@/const";
import { KeyRound, Shield } from "lucide-react";
import { useEffect } from "react";

export default function LoginChoice() {
  const [, setLocation] = useLocation();
  const { user, loading, isAuthenticated } = useAuth();

  // Rediriger les utilisateurs déjà connectés vers le tableau de bord
  useEffect(() => {
    if (!loading && isAuthenticated && user?.role === 'admin') {
      setLocation('/admin');
    }
  }, [loading, isAuthenticated, user?.role, setLocation]);

  const handleManusLogin = () => {
    window.location.href = getLoginUrl();
  };

  const handleLocalLogin = () => {
    setLocation("/login");
  };

  // Afficher un loader pendant la vérification de l'authentification
  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  // Ne pas afficher la page si l'utilisateur est déjà connecté (redirection en cours)
  if (isAuthenticated && user?.role === 'admin') {
    return null;
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
      <Card className="w-full max-w-2xl">
        <CardHeader className="space-y-4">
          <div className="flex justify-center">
            <img src={APP_LOGO} alt="Logo" className="h-20 w-auto" />
          </div>
          <div className="text-center">
            <CardTitle className="page-title">{APP_TITLE}</CardTitle>
            <CardDescription className="mt-3 text-base">
              Choisissez votre méthode de connexion
            </CardDescription>
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Connexion Manus OAuth */}
            <Card className="border-2 hover:border-primary transition-colors cursor-pointer group" onClick={handleManusLogin}>
              <CardHeader className="text-center pb-4">
                <div className="flex justify-center mb-4">
                  <div className="p-4 bg-blue-100 rounded-full group-hover:bg-blue-200 transition-colors">
                    <Shield className="h-12 w-12 text-blue-600" />
                  </div>
                </div>
                <CardTitle className="text-xl">Connexion Manus</CardTitle>
                <CardDescription className="mt-2">
                  Utilisez votre compte Manus (Google, Microsoft, Apple)
                </CardDescription>
              </CardHeader>
              <CardContent>
                <Button 
                  className="w-full" 
                  size="lg"
                  onClick={handleManusLogin}
                >
                  Se connecter avec Manus
                </Button>
              </CardContent>
            </Card>

            {/* Connexion Locale */}
            <Card className="border-2 hover:border-primary transition-colors cursor-pointer group" onClick={handleLocalLogin}>
              <CardHeader className="text-center pb-4">
                <div className="flex justify-center mb-4">
                  <div className="p-4 bg-green-100 rounded-full group-hover:bg-green-200 transition-colors">
                    <KeyRound className="h-12 w-12 text-green-600" />
                  </div>
                </div>
                <CardTitle className="text-xl">Connexion Locale</CardTitle>
                <CardDescription className="mt-2">
                  Utilisez votre identifiant et mot de passe
                </CardDescription>
              </CardHeader>
              <CardContent>
                <Button 
                  className="w-full" 
                  variant="outline" 
                  size="lg"
                  onClick={handleLocalLogin}
                >
                  Se connecter localement
                </Button>
              </CardContent>
            </Card>
          </div>

          <div className="mt-6 text-center text-sm text-gray-600">
            <p>Vous n'avez pas de compte ?</p>
            <p className="mt-1">Contactez l'administrateur</p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}