peworkshop/app/(main)/admin/leaderboard/page.js

"use client";
import { useState, useEffect } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";

export default function AdminLeaderboardPage() {
  const { data: session, status } = useSession();
  const [teams, setTeams] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const router = useRouter();

  // Check if user is admin
  useEffect(() => {
    if (status === "authenticated") {
      if (session?.user?.role !== "admin") {
        router.push("/team-selection");
      } else {
        fetchLeaderboardData();
      }
    } else if (status === "unauthenticated") {
      router.push("/login");
    }
  }, [session, status, router]);

  // Fetch leaderboard data
  const fetchLeaderboardData = async () => {
    try {
      setLoading(true);
      setError("");

      const response = await fetch("/api/admin/leaderboard", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          "Cache-Control": "no-cache, no-store, must-revalidate",
        },
        credentials: "include",
      });

      if (!response.ok) {
        throw new Error("Failed to fetch leaderboard data");
      }

      const data = await response.json();
      setTeams(data);
    } catch (err) {
      console.error("Error fetching leaderboard data:", err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  // Handle resetting a team's progress
  const handleResetTeamProgress = async (teamId, teamName) => {
    if (
      !confirm(
        `Are you sure you want to reset progress for team "${teamName}"?`
      )
    ) {
      return;
    }

    try {
      setLoading(true);

      const response = await fetch(
        `/api/admin/teams/${teamId}/reset-progress`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          credentials: "include",
        }
      );

      if (!response.ok) {
        throw new Error("Failed to reset team progress");
      }

      // Refresh the data after successful reset
      fetchLeaderboardData();
    } catch (err) {
      console.error("Error resetting team progress:", err);
      setError(err.message);
      setLoading(false);
    }
  };

  // Auto refresh data every 30 seconds
  useEffect(() => {
    if (session?.user?.role === "admin") {
      const interval = setInterval(() => {
        fetchLeaderboardData();
      }, 30000);

      return () => clearInterval(interval);
    }
  }, [session]);

  if (status === "loading" || loading) {
    return <div className="admin-page loading">Loading...</div>;
  }

  if (status === "unauthenticated") {
    return null; // Will redirect via useEffect
  }

  return (
    <div className="admin-page">
      <div className="page-header">
        <div className="page-title">Admin Leaderboard</div>
        <div className="placeholder"></div>
      </div>

      <div className="admin-content">
        {error && <p className="error-message">{error}</p>}

        <div className="admin-card">
          <h2>Team Progress</h2>

          <button
            className="refresh-button"
            onClick={fetchLeaderboardData}
            disabled={loading}
          >
            🔄 Refresh Data
          </button>

          {teams.length === 0 ? (
            <p className="no-data">No teams currently participating.</p>
          ) : (
            <div className="leaderboard-table-container">
              <table className="leaderboard-table">
                <thead>
                  <tr>
                    <th>Rank</th>
                    <th>Team Name</th>
                    <th>Members</th>
                    <th>Progress</th>
                    <th>Last Activity</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {teams.map((team, index) => (
                    <tr key={team.id}>
                      <td>{index + 1}</td>
                      <td>
                        {team.name} ({team.code})
                      </td>
                      <td>{team.memberCount}</td>
                      <td>
                        <div className="progress-container">
                          <div
                            className="progress-bar"
                            style={{ width: `${team.progress}%` }}
                          ></div>
                          <span className="progress-text">
                            {team.cluesFound} / {team.totalClues} (
                            {team.progress}%)
                          </span>
                        </div>
                      </td>
                      <td>
                        {team.lastActivity
                          ? new Date(team.lastActivity).toLocaleString()
                          : "Never"}
                      </td>
                      <td>
                        <button
                          className="reset-button"
                          onClick={() =>
                            handleResetTeamProgress(team.id, team.name)
                          }
                        >
                          Reset Progress
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>

      {/* Admin Navigation Bar */}
      <div className="admin-nav-bar">
        <button
          className="admin-nav-button"
          onClick={() => router.push("/admin")}
        >
          <div className="admin-nav-icon">⏱️</div>
          <div className="admin-nav-label">Timer</div>
        </button>
        <button
          className="admin-nav-button"
          onClick={() => router.push("/admin/clues")}
        >
          <div className="admin-nav-icon">📝</div>
          <div className="admin-nav-label">Clues</div>
        </button>
        <button
          className="admin-nav-button active"
          onClick={() => router.push("/admin/leaderboard")}
        >
          <div className="admin-nav-icon">🏆</div>
          <div className="admin-nav-label">Leaderboard</div>
        </button>
      </div>

      <style jsx>{`
        .admin-page {
          display: flex;
          flex-direction: column;
          min-height: 100vh;
          background-color: #f4e9dc;
        }

        .page-header {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 1rem;
          background-color: #68543c;
          color: white;
        }

        .page-title {
          font-size: 1.2rem;
          font-weight: 600;
        }

        .admin-content {
          flex: 1;
          padding: 1rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-bottom: 70px; /* Space for navbar */
        }

        .admin-card {
          width: 100%;
          max-width: 900px;
          background-color: white;
          border-radius: 8px;
          padding: 1.5rem;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          position: relative;
        }

        h2 {
          margin-top: 0;
          margin-bottom: 1.5rem;
        }

        .refresh-button {
          position: absolute;
          top: 1.5rem;
          right: 1.5rem;
          background-color: #4caf50;
          color: white;
          border: none;
          border-radius: 4px;
          padding: 0.5rem 0.75rem;
          cursor: pointer;
        }

        .refresh-button:disabled {
          background-color: #a5d6a7;
          cursor: not-allowed;
        }

        .leaderboard-table-container {
          width: 100%;
          overflow-x: auto;
        }

        .leaderboard-table {
          width: 100%;
          border-collapse: collapse;
        }

        .leaderboard-table th,
        .leaderboard-table td {
          padding: 0.75rem;
          text-align: left;
          border-bottom: 1px solid #eee;
        }

        .leaderboard-table th {
          background-color: #f5f5f5;
          font-weight: 600;
        }

        .leaderboard-table tr:hover {
          background-color: #f9f9f9;
        }

        .reset-button {
          background-color: #f44336;
          color: white;
          border: none;
          border-radius: 4px;
          padding: 0.4rem 0.6rem;
          cursor: pointer;
          font-size: 0.9rem;
        }

        .error-message {
          color: red;
          margin-bottom: 1rem;
          padding: 0.5rem;
          border-radius: 4px;
          background-color: #ffebee;
          width: 100%;
          max-width: 900px;
          text-align: center;
        }

        .no-data {
          text-align: center;
          color: #666;
          padding: 2rem 0;
        }

        /* Admin Navigation Bar Styles */
        .admin-nav-bar {
          display: flex;
          justify-content: space-around;
          background-color: white;
          border-top: 1px solid #ddd;
          padding: 10px 0;
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
          z-index: 100;
        }

        .admin-nav-button {
          display: flex;
          flex-direction: column;
          align-items: center;
          background: transparent;
          border: none;
          padding: 8px 0;
          flex: 1;
          cursor: pointer;
          color: #666;
          transition: all 0.2s ease;
        }

        .admin-nav-button.active {
          color: #68543c;
          font-weight: bold;
        }

        .admin-nav-button:hover {
          background-color: rgba(104, 84, 60, 0.1);
        }

        .admin-nav-icon {
          font-size: 24px;
          margin-bottom: 4px;
        }

        .admin-nav-label {
          font-size: 13px;
        }

        .progress-container {
          width: 100%;
          background-color: #f0f0f0;
          border-radius: 4px;
          height: 20px;
          position: relative;
          overflow: hidden;
        }

        .progress-bar {
          height: 100%;
          background-color: #4caf50;
          transition: width 0.3s ease;
        }

        .progress-text {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          text-align: center;
          line-height: 20px;
          color: #333;
          font-size: 0.8rem;
          text-shadow: 0 0 2px rgba(255, 255, 255, 0.7);
        }
      `}</style>
    </div>
  );
}