"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();
  // Add state for expanded team details
  const [expandedTeam, setExpandedTeam] = useState(null);
  const [teamDetails, setTeamDetails] = useState({});
  const [loadingDetails, setLoadingDetails] = useState(false);

  // 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]);

  // New function to toggle team details dropdown and fetch data
  const toggleTeamDetails = async (teamId) => {
    if (expandedTeam === teamId) {
      // Close dropdown if already open
      setExpandedTeam(null);
    } else {
      // Open dropdown for this team
      setExpandedTeam(teamId);

      // Only fetch if we don't already have data for this team
      if (!teamDetails[teamId]) {
        setLoadingDetails(true);
        try {
          const response = await fetch(`/api/admin/teams/${teamId}/stats`, {
            headers: {
              "Content-Type": "application/json",
              "Cache-Control": "no-cache, no-store, must-revalidate",
            },
            credentials: "include",
          });

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

          const data = await response.json();
          setTeamDetails((prev) => ({
            ...prev,
            [teamId]: data,
          }));
        } catch (err) {
          console.error("Error fetching team details:", err);
        } finally {
          setLoadingDetails(false);
        }
      }
    }
  };

  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>
                          <div className="action-buttons">
                            <button
                              className="reset-button"
                              onClick={() =>
                                handleResetTeamProgress(team.id, team.name)
                              }
                            >
                              Reset
                            </button>
                            <button
                              className="details-button"
                              onClick={() => toggleTeamDetails(team.id)}
                            >
                              {expandedTeam === team.id
                                ? "Hide Details"
                                : "View Details"}
                            </button>
                          </div>
                        </td>
                      </tr>
                      {/* Team details dropdown */}
                      {expandedTeam === team.id && (
                        <tr
                          key={`details-${team.id}`}
                          className="team-details-row"
                        >
                          <td colSpan={6}>
                            <div className="team-details-container">
                              {loadingDetails && !teamDetails[team.id] ? (
                                <div className="details-loading">
                                  Loading team details...
                                </div>
                              ) : teamDetails[team.id] ? (
                                <>
                                  <h3>Team Stats for {team.name}</h3>

                                  {/* Found clues section */}
                                  <div className="details-section">
                                    <h4>
                                      Found Clues (
                                      {teamDetails[team.id].foundClues.length})
                                    </h4>
                                    {teamDetails[team.id].foundClues.length >
                                    0 ? (
                                      <table className="details-table">
                                        <thead>
                                          <tr>
                                            <th>Title</th>
                                            <th>Found At</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                          {teamDetails[team.id].foundClues.map(
                                            (clue) => (
                                              <tr key={`found-${clue.id}`}>
                                                <td>{clue.title}</td>
                                                <td>
                                                  {new Date(
                                                    clue.found_at
                                                  ).toLocaleString()}
                                                </td>
                                              </tr>
                                            )
                                          )}
                                        </tbody>
                                      </table>
                                    ) : (
                                      <p className="no-data-message">
                                        No clues found yet
                                      </p>
                                    )}
                                  </div>

                                  {/* Skipped clues section */}
                                  <div className="details-section">
                                    <h4>
                                      Skipped Clues (
                                      {teamDetails[team.id].skippedClues.length}
                                      )
                                    </h4>
                                    {teamDetails[team.id].skippedClues.length >
                                    0 ? (
                                      <table className="details-table">
                                        <thead>
                                          <tr>
                                            <th>Title</th>
                                            <th>Skipped At</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                          {teamDetails[
                                            team.id
                                          ].skippedClues.map((clue) => (
                                            <tr key={`skipped-${clue.id}`}>
                                              <td>{clue.title}</td>
                                              <td>
                                                {new Date(
                                                  clue.found_at
                                                ).toLocaleString()}
                                              </td>
                                            </tr>
                                          ))}
                                        </tbody>
                                      </table>
                                    ) : (
                                      <p className="no-data-message">
                                        No clues skipped
                                      </p>
                                    )}
                                  </div>
                                </>
                              ) : (
                                <div className="details-error">
                                  Error loading team details
                                </div>
                              )}
                            </div>
                          </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);
        }

        .action-buttons {
          display: flex;
          gap: 0.5rem;
        }

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

        .details-button:hover {
          background-color: #303f9f;
        }

        .team-details-row {
          background-color: #f9f9f9;
        }

        .team-details-container {
          padding: 1.5rem;
          margin: 0.5rem 0;
          border: 1px solid #e0e0e0;
          border-radius: 4px;
          background-color: white;
        }

        .team-details-container h3 {
          color: #3f51b5;
          margin-top: 0;
          margin-bottom: 1rem;
          border-bottom: 1px solid #e0e0e0;
          padding-bottom: 0.5rem;
        }

        .details-section {
          margin-bottom: 1.5rem;
        }

        .details-section h4 {
          color: #68543c;
          margin-bottom: 0.75rem;
        }

        .details-table {
          width: 100%;
          border-collapse: collapse;
          margin-bottom: 1rem;
          font-size: 0.9rem;
        }

        .details-table th {
          background-color: #f5f5f5;
          font-weight: 600;
          text-align: left;
          padding: 0.6rem;
          border-bottom: 1px solid #ddd;
        }

        .details-table td {
          padding: 0.6rem;
          border-bottom: 1px solid #eee;
        }

        .details-table tr:nth-child(even) {
          background-color: #fafafa;
        }

        .details-loading {
          padding: 1rem;
          text-align: center;
          color: #666;
        }

        .details-error {
          padding: 1rem;
          text-align: center;
          color: #d32f2f;
          background-color: #ffebee;
          border-radius: 4px;
        }

        .no-data-message {
          font-style: italic;
          color: #666;
        }
      `}</style>
    </div>
  );
}