"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";
import NavBar from "@/components/NavBar";

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 [huntActive, setHuntActive] = useState(null);
  const router = useRouter();

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

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

  // Check hunt status but don't redirect
  const checkHuntStatus = async () => {
    try {
      const timestamp = Date.now();
      const response = await fetch(`/api/hunt-status?t=${timestamp}`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          "Cache-Control": "no-store, no-cache, must-revalidate",
          Pragma: "no-cache",
        },
        credentials: "include",
      });

      if (response.ok) {
        const data = await response.json();
        setHuntActive(data.active);
        // We're just checking status, no redirect needed for stats page
      }
    } catch (err) {
      console.error("Failed to check hunt status:", err);
    }
  };

  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>

      {!huntActive && teamStats && (
        <div className="hunt-inactive-banner">
          <p>The treasure hunt is not currently active. Team progress will be visible here once the hunt begins.</p>
        </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>

      {/* Replace hardcoded navbar with NavBar component */}
      <NavBar activeLink="stats" teamData={teamStats.team} />

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

        .clue-icon.skipped {
          background-color: #1976d2;
        }
        
        .hunt-inactive-banner {
          background-color: #fff3cd;
          color: #856404;
          padding: 12px 15px;
          margin: 15px 20px 0;
          border-radius: 4px;
          text-align: center;
          font-size: 0.9rem;
        }
      `}</style>
    </div>
  );
}