peworkshop/app/(main)/stats/page.js

"use client";
import { useState, useEffect } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import styles from "./stats.module.css";

export default function StatsPage() {
  const { data: session, status } = useSession();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [teamStats, setTeamStats] = useState(null);
  const [expanded, setExpanded] = useState(false);
  const router = useRouter();

  useEffect(() => {
    // Redirect to login if not authenticated
    if (status === "unauthenticated") {
      router.push("/login");
      return;
    }

    if (status === "authenticated") {
      fetchTeamStats();
    }
  }, [status, router]);

  const fetchTeamStats = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await fetch("/api/team-stats", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          "Cache-Control": "no-cache, no-store, must-revalidate",
        },
        credentials: "include",
      });

      if (!response.ok) {
        // Handle specific error cases
        const errorData = await response.json().catch(() => ({}));

        if (response.status === 401) {
          throw new Error("Authentication error: Not logged in");
        } else if (
          response.status === 404 ||
          errorData.error?.includes("not part of a team")
        ) {
          throw new Error("You need to join a team before viewing stats");
        } else {
          throw new Error(errorData.error || "Failed to fetch team stats");
        }
      }

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

  const toggleExpanded = () => {
    setExpanded(!expanded);
  };

  // Format timestamp to a more readable format
  const formatTimestamp = (timestamp) => {
    const date = new Date(timestamp);
    return date.toLocaleString(undefined, {
      month: "short",
      day: "numeric",
      hour: "numeric",
      minute: "2-digit",
    });
  };

  const renderCluesList = () => {
    if (!teamStats) return null;

    const { foundClues, skippedClues } = teamStats;

    return (
      <div className="clues-section">
        <h3 className="section-title">
          Found Clues ({foundClues?.length || 0})
        </h3>
        <ul className="clue-list">
          {foundClues?.length > 0 ? (
            foundClues.map((clue) => (
              <li key={clue.id} className="clue-item">
                <div className="clue-icon found">✓</div>
                <div className="clue-details">
                  <div className="clue-title">
                    {clue.title || `Clue #${clue.id}`}
                  </div>
                  <div className="clue-time">
                    {new Date(clue.found_at).toLocaleTimeString()}
                  </div>
                </div>
              </li>
            ))
          ) : (
            <li className="empty-state">No clues found yet</li>
          )}
        </ul>

        <h3 className="section-title">
          Skipped Clues ({skippedClues?.length || 0})
        </h3>
        <ul className="clue-list">
          {skippedClues?.length > 0 ? (
            skippedClues.map((clue) => (
              <li key={clue.id} className="clue-item">
                <div className="clue-icon skipped">↷</div>
                <div className="clue-details">
                  <div className="clue-title">
                    {clue.title || `Clue #${clue.id}`}
                  </div>
                  <div className="clue-time">
                    Skipped at {new Date(clue.found_at).toLocaleTimeString()}
                  </div>
                </div>
              </li>
            ))
          ) : (
            <li className="empty-state">No clues skipped</li>
          )}
        </ul>
      </div>
    );
  };

  if (loading) {
    return (
      <div className={styles.container}>
        <div className={styles.loadingSpinner}></div>
        <p className={styles.loadingText}>Loading team stats...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className={styles.container}>
        <div className={styles.errorContainer}>
          <h2 className={styles.errorTitle}>Error</h2>
          <p className={styles.errorMessage}>{error}</p>
          <div className={styles.buttonContainer}>
            <button onClick={fetchTeamStats} className={styles.retryButton}>
              Retry
            </button>
            <button
              onClick={() => router.push("/team-selection")}
              className={styles.teamButton}
            >
              Join a Team
            </button>
          </div>
        </div>
      </div>
    );
  }

  if (!teamStats) {
    return (
      <div className={styles.container}>
        <p className={styles.noData}>No team stats available.</p>
      </div>
    );
  }

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <h1 className={styles.title}>Team Stats</h1>
        <h2 className={styles.teamName}>{teamStats.team.name}</h2>
      </div>

      <div className={styles.statsCard}>
        <div className={styles.summaryStats}>
          <div className={styles.statItem}>
            <span className={styles.statLabel}>Total Clues:</span>
            <span className={styles.statValue}>{teamStats.totalClues}</span>
          </div>
          <div className={styles.statItem}>
            <span className={styles.statLabel}>Clues Found:</span>
            <span className={styles.statValue}>
              {teamStats.foundClues.length} of {teamStats.totalClues}
            </span>
          </div>
          <div className={styles.statItem}>
            <span className={styles.statLabel}>Clues Remaining:</span>
            <span className={styles.statValue}>{teamStats.remainingClues}</span>
          </div>
          <div className={styles.statItem}>
            <span className={styles.statLabel}>Clues Skipped:</span>
            <span className={styles.statValue}>
              {teamStats.skippedCluesCount}
            </span>
          </div>
          <div className={`${styles.statItem} ${styles.rankItem}`}>
            <span className={styles.statLabel}>Current Rank:</span>
            <span className={styles.statValue}>{teamStats.currentRank}</span>
          </div>
        </div>

        <div className={styles.collapsibleSection}>
          <button
            className={styles.collapsibleButton}
            onClick={toggleExpanded}
            aria-expanded={expanded}
          >
            <span className={styles.collapsibleTitle}>
              Clues Found: {teamStats.foundClues.length}
            </span>
            <span className={styles.collapsibleIcon}>
              {expanded ? "▼" : "►"}
            </span>
          </button>

          {expanded && (
            <div className={styles.cluesList}>{renderCluesList()}</div>
          )}
        </div>
      </div>

      <div className={styles.navBar}>
        <Link href="/map" className={styles.navItem}>
          <div className={styles.navIcon}>🗺️</div>
          <div className={styles.navLabel}>Map</div>
        </Link>
        <Link href="/stats" className={`${styles.navItem} ${styles.active}`}>
          <div className={styles.navIcon}>📊</div>
          <div className={styles.navLabel}>Stats</div>
        </Link>
        <Link
          href={teamStats?.team ? `/${teamStats.team.id}` : "/team-selection"}
          className={styles.navItem}
        >
          <div className={styles.navIcon}>👥</div>
          <div className={styles.navLabel}>Team</div>
        </Link>
        <Link href="/leaderboard" className={styles.navItem}>
          <div className={styles.navIcon}>🏆</div>
          <div className={styles.navLabel}>Leaderboard</div>
        </Link>
      </div>

      <style jsx>{`
        .clue-icon.found {
          background-color: #2e7d32;
        }

        .clue-icon.skipped {
          background-color: #1976d2;
        }
      `}</style>
    </div>
  );
}