import { TeamReviewService } from "@/services/team-review-service";
import { AuthService } from "@/services/auth-service";
import { redirect } from "next/navigation";
import { TeamOverview } from "@/components/team-review/team-overview";
import { SkillMatrix } from "@/components/team-review/skill-matrix";
import { TeamInsights } from "@/components/team-review/team-insights";
import { MentorshipSection } from "@/components/team-review/mentorship-section";
import { LearningSection } from "@/components/team-review/learning-section";
import { TeamStats } from "@/components/team-review/team-stats";
import { Users } from "lucide-react";

export const dynamic = "force-dynamic";

async function TeamReviewPage() {
  try {
    const { userProfile } = await AuthService.requireAuthenticatedUser();

    const teamData = await TeamReviewService.getTeamReviewData(
      userProfile.teamId
    );

    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
        {/* Background Effects */}
        <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="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent" />

        <div className="relative z-10 container mx-auto px-6 py-8 max-w-7xl space-y-8">
          {/* Header */}
          <div className="text-center space-y-4 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">
              <Users className="h-4 w-4 text-blue-400" />
              <span className="text-sm font-medium text-slate-200">
                Vue d'équipe
              </span>
            </div>

            <h1 className="text-4xl font-bold text-white">
              {teamData.team.name}
            </h1>

            <p className="text-slate-400 max-w-2xl mx-auto leading-relaxed">
              Vue d'ensemble et analyse des compétences de l'équipe{" "}
              {teamData.team.direction}
            </p>
          </div>

          {/* Main Content */}
          <div className="space-y-8">
            <TeamOverview
              team={teamData.team}
              stats={teamData.stats}
              members={teamData.members}
              categoryCoverage={teamData.categoryCoverage}
              skillGaps={teamData.skillGaps}
            />

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <TeamStats
                stats={teamData.stats}
                members={teamData.members}
                skillGaps={teamData.skillGaps}
                categoryCoverage={teamData.categoryCoverage}
              />
              <TeamInsights
                recommendations={teamData.recommendations}
                categoryCoverage={teamData.categoryCoverage}
              />
            </div>

            <SkillMatrix
              members={teamData.members}
              skillGaps={teamData.skillGaps}
            />

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <MentorshipSection
                members={teamData.members}
                skillGaps={teamData.skillGaps}
              />
              <LearningSection
                members={teamData.members}
                skillGaps={teamData.skillGaps}
              />
            </div>
          </div>
        </div>
      </div>
    );
  } catch (error: any) {
    if (error.status === 401) {
      redirect("/login");
    }
    throw error;
  }
}

export default function Page() {
  return <TeamReviewPage />;
}