"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { ProfileForm } from "@/components/profile-form";
import { evaluationClient } from "@/clients";
import { Team, UserProfile } from "@/lib/types";
import { Code2 } from "lucide-react";

interface WelcomeEvaluationScreenProps {
  teams: Team[];
}

export function WelcomeEvaluationScreen({
  teams,
}: WelcomeEvaluationScreenProps) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const router = useRouter();

  const handleProfileSubmit = async (profile: UserProfile) => {
    setIsSubmitting(true);
    try {
      await evaluationClient.initializeEmptyEvaluation(profile);
      // Rafraîchir la page pour que le SSR prenne en compte la nouvelle évaluation
      router.refresh();
    } catch (error) {
      console.error("Failed to initialize evaluation:", error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-slate-900 to-slate-950" />
      <div className="absolute inset-0 bg-grid-white/5 bg-[size:50px_50px]" />

      <div className="relative z-10 container mx-auto py-16 px-6">
        <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">
            <Code2 className="h-4 w-4 text-blue-400" />
            <span className="text-sm font-medium text-slate-200">
              PeakSkills - Évaluation
            </span>
          </div>

          <h1 className="text-4xl font-bold mb-4 text-white">
            Commencer l'évaluation
          </h1>
          <p className="text-lg text-slate-400 mb-8">
            Renseignez vos informations pour débuter votre auto-évaluation
          </p>
        </div>

        <div className="max-w-2xl mx-auto">
          <div className="relative">
            {isSubmitting && (
              <div className="absolute inset-0 bg-black/20 backdrop-blur-sm z-10 flex items-center justify-center rounded-lg">
                <div className="text-center">
                  <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-400 mx-auto mb-2"></div>
                  <p className="text-white text-sm">
                    Initialisation de l'évaluation...
                  </p>
                </div>
              </div>
            )}
            <ProfileForm teams={teams} onSubmit={handleProfileSubmit} />
          </div>
        </div>
      </div>
    </div>
  );
}