got-gaming/components/AdminPanel.tsx

"use client";

import { useState } from "react";
import UserManagement from "@/components/UserManagement";
import EventManagement from "@/components/EventManagement";
import FeedbackManagement from "@/components/FeedbackManagement";
import BackgroundPreferences from "@/components/BackgroundPreferences";

interface SitePreferences {
  id: string;
  homeBackground: string | null;
  eventsBackground: string | null;
  leaderboardBackground: string | null;
}

interface AdminPanelProps {
  initialPreferences: SitePreferences;
}

type AdminSection = "preferences" | "users" | "events" | "feedbacks";

export default function AdminPanel({ initialPreferences }: AdminPanelProps) {
  const [activeSection, setActiveSection] =
    useState<AdminSection>("preferences");

  return (
    <section className="relative w-full min-h-screen flex flex-col items-center overflow-hidden pt-24 pb-16">
      <div className="relative z-10 w-full max-w-6xl mx-auto px-8 py-16">
        <h1 className="text-4xl font-gaming font-black mb-8 text-center">
          <span className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent">
            ADMIN
          </span>
        </h1>

        {/* Navigation Tabs */}
        <div className="flex gap-4 mb-8 justify-center">
          <button
            onClick={() => setActiveSection("preferences")}
            className={`px-6 py-3 border uppercase text-xs tracking-widest rounded transition ${
              activeSection === "preferences"
                ? "border-pixel-gold bg-pixel-gold/10 text-pixel-gold"
                : "border-pixel-gold/30 bg-black/60 text-gray-400 hover:border-pixel-gold/50"
            }`}
          >
            Préférences UI
          </button>
          <button
            onClick={() => setActiveSection("users")}
            className={`px-6 py-3 border uppercase text-xs tracking-widest rounded transition ${
              activeSection === "users"
                ? "border-pixel-gold bg-pixel-gold/10 text-pixel-gold"
                : "border-pixel-gold/30 bg-black/60 text-gray-400 hover:border-pixel-gold/50"
            }`}
          >
            Utilisateurs
          </button>
          <button
            onClick={() => setActiveSection("events")}
            className={`px-6 py-3 border uppercase text-xs tracking-widest rounded transition ${
              activeSection === "events"
                ? "border-pixel-gold bg-pixel-gold/10 text-pixel-gold"
                : "border-pixel-gold/30 bg-black/60 text-gray-400 hover:border-pixel-gold/50"
            }`}
          >
            Événements
          </button>
          <button
            onClick={() => setActiveSection("feedbacks")}
            className={`px-6 py-3 border uppercase text-xs tracking-widest rounded transition ${
              activeSection === "feedbacks"
                ? "border-pixel-gold bg-pixel-gold/10 text-pixel-gold"
                : "border-pixel-gold/30 bg-black/60 text-gray-400 hover:border-pixel-gold/50"
            }`}
          >
            Feedbacks
          </button>
        </div>

        {activeSection === "preferences" && (
          <div className="bg-black/80 border border-pixel-gold/30 rounded-lg p-4 sm:p-6 backdrop-blur-sm">
            <h2 className="text-xl sm:text-2xl font-gaming font-bold mb-6 text-pixel-gold break-words">
              Préférences UI Globales
            </h2>
            <div className="space-y-4">
              <BackgroundPreferences initialPreferences={initialPreferences} />
            </div>
          </div>
        )}

        {activeSection === "users" && (
          <div className="bg-black/80 border border-pixel-gold/30 rounded-lg p-6 backdrop-blur-sm">
            <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
              Gestion des Utilisateurs
            </h2>
            <UserManagement />
          </div>
        )}

        {activeSection === "events" && (
          <div className="bg-black/80 border border-pixel-gold/30 rounded-lg p-6 backdrop-blur-sm">
            <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
              Gestion des Événements
            </h2>
            <EventManagement />
          </div>
        )}

        {activeSection === "feedbacks" && (
          <div className="bg-black/80 border border-pixel-gold/30 rounded-lg p-6 backdrop-blur-sm">
            <h2 className="text-2xl font-gaming font-bold mb-6 text-pixel-gold">
              Gestion des Feedbacks
            </h2>
            <FeedbackManagement />
          </div>
        )}
      </div>
    </section>
  );
}