"use client";
import { useState, useEffect, useRef } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import {
  formatElapsedTime,
  getHuntTimer,
  syncTimerWithServer,
} from "@/utils/timerService";
import Link from "next/link";
import dynamic from "next/dynamic";
import { use } from "react";

// Dynamically import the QR scanner component with no SSR
const EnhancedQRScanner = dynamic(
  () => import("@/components/EnhancedQRScanner"),
  {
    ssr: false,
    loading: () => <div className="scanner-loading">Loading scanner...</div>,
  }
);

export default function CluePage({ params }) {
  // Unwrap params properly using use() from React
  const unwrappedParams = use(params);
  const clueId = unwrappedParams.clueId;

  const [clue, setClue] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [elapsedTime, setElapsedTime] = useState("00:00:00");
  const [scanMessage, setScanMessage] = useState(null);
  const [lastRefresh, setLastRefresh] = useState(0);
  const [clueFound, setClueFound] = useState(false);
  const [allClues, setAllClues] = useState([]);
  const [nextClueId, setNextClueId] = useState(null);
  const [huntActive, setHuntActive] = useState(true);
  const [previousHuntState, setPreviousHuntState] = useState(true);
  const [showSuccessNotification, setShowSuccessNotification] = useState(false);
  const [teamData, setTeamData] = useState(null);
  const router = useRouter();
  const { data: session, status } = useSession();
  const notificationTimeoutRef = useRef(null);

  // Check if user is admin
  const isAdmin = session?.user?.role === "admin";

  // This effect handles authentication and initial clue data fetch
  useEffect(() => {
    let isMounted = true;
    const now = Date.now();
    const minRefreshInterval = isAdmin ? 30000 : 10000;

    // Skip if we refreshed too recently and this isn't the first load
    if (loading === false && now - lastRefresh < minRefreshInterval) {
      return;
    }

    if (status === "unauthenticated") {
      router.push("/login");
      return;
    }

    if (status === "loading") {
      return;
    }

    // Fetch all clues to get navigation context
    const fetchAllClues = async () => {
      try {
        const response = await fetch("/api/clues");
        if (!response.ok) return [];

        const data = await response.json();
        if (isMounted) {
          setAllClues(data);

          // Find next clue for navigation
          const currentIndex = data.findIndex((c) => c.id === parseInt(clueId));
          if (currentIndex !== -1 && currentIndex < data.length - 1) {
            setNextClueId(data[currentIndex + 1].id);
          }
        }
        return data;
      } catch (err) {
        console.error("Error fetching all clues:", err);
        return [];
      }
    };

    // Fetch current clue details
    async function fetchClue() {
      try {
        setLoading(true);
        await fetchAllClues();

        // Add timestamp to avoid browser caching
        const timestamp = Date.now();
        const response = await fetch(`/api/clues/${clueId}?t=${timestamp}`, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            "Cache-Control": "no-cache, no-store, must-revalidate",
          },
          credentials: "include",
        });

        if (!response.ok) {
          if (response.status === 404) {
            throw new Error("Clue not found");
          } else {
            const data = await response.json();
            throw new Error(data.error || "Failed to fetch clue");
          }
        }

        const data = await response.json();
        if (isMounted) {
          setClue(data);
          setClueFound(data.found);
          setLoading(false);
          setLastRefresh(Date.now());
        }
      } catch (err) {
        console.error("Error fetching clue:", err);
        if (isMounted) {
          setError(err.message);
          setLoading(false);
        }
      }
    }

    fetchClue();

    return () => {
      isMounted = false;
    };
  }, [clueId, router, status, lastRefresh, loading, isAdmin]);

  // Add a new effect to check hunt status periodically
  useEffect(() => {
    // Check hunt status every 5 seconds
    const checkHuntStatus = async () => {
      try {
        // First check locally if timer indicates hunt has ended
        const timerData = getHuntTimer();
        let isActive = timerData?.isActive ?? true;

        // Only make API call if local data suggests the hunt is active
        // This reduces unnecessary API calls
        if (isActive) {
          // Also sync with server occasionally
          const result = await syncTimerWithServer();

          if (result.success) {
            isActive = result.data?.active ?? false;
          }
        }

        // Update hunt active state
        setHuntActive(isActive);

        // If hunt was active before but is not active now, it just ended
        if (previousHuntState && !isActive) {
          console.log("Hunt has ended! Redirecting to leaderboard...");
          router.push("/leaderboard?huntEnded=true");
        }

        // Update previous state for next comparison
        setPreviousHuntState(isActive);
      } catch (err) {
        console.error("Error checking hunt status:", err);
      }
    };

    // Check immediately on mount and after any hunt state change
    checkHuntStatus();

    // Also set up interval for periodic checks
    const intervalId = setInterval(checkHuntStatus, 5000);

    return () => {
      clearInterval(intervalId);
    };
  }, [router, previousHuntState]);

  // Separate effect to handle timer updates
  useEffect(() => {
    let timerId;
    const timerData = getHuntTimer();
    if (!timerData || !timerData.isActive) {
      return;
    }

    // Initial set
    setElapsedTime(formatElapsedTime(timerData.startTime));

    // Update timer every second
    timerId = setInterval(() => {
      setElapsedTime(formatElapsedTime(timerData.startTime));

      // Check if timer has ended (if there's an endTime)
      if (timerData.endTime) {
        const now = Date.now();
        const endTime = new Date(timerData.endTime).getTime();

        // If current time is past the end time, hunt has ended
        if (now >= endTime) {
          setHuntActive(false);
          clearInterval(timerId);

          // Redirect to leaderboard with huntEnded flag
          console.log("Hunt end time reached! Redirecting to leaderboard...");
          router.push("/leaderboard?huntEnded=true");
        }
      }
    }, 1000);

    return () => {
      if (timerId) clearInterval(timerId);
    };
  }, [router]);

  // Fetch team data on component mount
  useEffect(() => {
    if (status === "authenticated") {
      fetchTeamData();
    }
  }, [status]);

  // Add function to fetch team data
  const fetchTeamData = async () => {
    if (!session) return;

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

      if (response.ok) {
        const data = await response.json();
        setTeamData(data);
      }
    } catch (err) {
      console.error("Failed to fetch team data:", err);
    }
  };

  // Handle QR scan result
  const handleScan = (data) => {
    // Only update message if we have data
    if (data) {
      setScanMessage(`QR Code scanned: ${data}`);
    }

    try {
      // Handle multiple QR code formats: "QR123", "123", or even "Clue 123"
      let scannedClueId;
      // Try regex patterns
      const qrPattern = /^QR[^0-9]*(\d+)$/i;
      const cluePattern = /^clue[^0-9]*(\d+)$/i;
      const numberPattern = /^(\d+)$/;

      let match =
        data.match(qrPattern) ||
        data.match(cluePattern) ||
        data.match(numberPattern);

      if (match) {
        scannedClueId = parseInt(match[1], 10);
      } else {
        // Try direct parsing as a last resort
        scannedClueId = parseInt(data, 10);
      }

      if (!isNaN(scannedClueId) && scannedClueId === parseInt(clueId)) {
        // Correct QR code scanned, mark as found
        setScanMessage("✓ Correct QR code found!");
        markClueAsFound(clueId);
      } else if (!isNaN(scannedClueId)) {
        setScanMessage(
          `QR code for clue ${scannedClueId} scanned, but you need clue ${clueId}. Please scan the correct code.`
        );
      } else {
        setScanMessage(
          "Couldn't recognize this QR code. Please scan the correct code for this clue."
        );
      }
    } catch (err) {
      console.error("Error processing scan result:", err);
      setScanMessage("Invalid QR code format. Please try again.");
    }
  };

  // Function to mark clue as found via API
  const markClueAsFound = async (currentClueId) => {
    try {
      // Only proceed if the clue isn't already found
      if (clueFound) {
        setScanMessage("You've already found this clue!");
        return;
      }

      // Mark the clue as found via API
      const response = await fetch("/api/mark-clue", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ clueId: currentClueId }),
      });

      if (response.ok) {
        // Update local state to show clue is found
        setClueFound(true);
        setScanMessage(
          "✅ Clue verified! You can now proceed to the next clue."
        );

        // Show success notification
        setShowSuccessNotification(true);

        // Clear previous timeout if it exists
        if (notificationTimeoutRef.current) {
          clearTimeout(notificationTimeoutRef.current);
        }

        // Auto-hide the notification after 5 seconds
        notificationTimeoutRef.current = setTimeout(() => {
          setShowSuccessNotification(false);
        }, 5000);
      } else {
        setScanMessage("Error verifying clue. Please try again.");
      }
    } catch (err) {
      console.error("Error marking clue as found:", err);
      setScanMessage("Error verifying clue. Please try again.");
    }
  };

  // Clear notification timeout on component unmount
  useEffect(() => {
    return () => {
      if (notificationTimeoutRef.current) {
        clearTimeout(notificationTimeoutRef.current);
      }
    };
  }, []);

  // Navigate to the next clue
  const handleNextClue = () => {
    if (nextClueId) {
      router.push(`/clue/${nextClueId}`);
    } else {
      router.push("/map");
    }
  };

  // Navigate to the previous clue
  const handlePrevClue = () => {
    if (allClues.length > 0) {
      const currentIndex = allClues.findIndex((c) => c.id === parseInt(clueId));
      if (currentIndex > 0) {
        router.push(`/clue/${allClues[currentIndex - 1].id}`);
      } else {
        router.push("/map");
      }
    } else {
      router.push("/map");
    }
  };

  // Function for manual refresh - for admins to test without waiting
  const handleManualRefresh = () => {
    setLastRefresh(0);
  };

  // Rendering states
  if (loading) {
    return (
      <div className="clue-container">
        <div className="loading">
          <div className="loading-spinner"></div>
          <p>Loading clue...</p>
        </div>
      </div>
    );
  }

  if (!huntActive) {
    // Display temporary message before redirecting
    return (
      <div className="clue-container">
        <div className="hunt-ended">
          <div className="hunt-ended-icon">🏁</div>
          <h2>Hunt Has Ended!</h2>
          <p>The treasure hunt has concluded. Redirecting to results page...</p>
          <div className="loading-spinner"></div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="clue-container">
        <div className="error">Error: {error}</div>
        <div className="nav-buttons">
          <button onClick={() => router.push("/map")} className="map-button">
            Back to Map
          </button>
          <button onClick={() => router.push("/")} className="home-button">
            Back to Home
          </button>
        </div>
      </div>
    );
  }

  if (!clue) {
    return (
      <div className="clue-container">
        <div className="not-found">Clue not found</div>
        <div className="nav-buttons">
          <button onClick={() => router.push("/map")} className="map-button">
            Back to Map
          </button>
          <button onClick={() => router.push("/")} className="home-button">
            Back to Home
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="clue-container">
      {/* Map Banner with team info and timer */}
      <div className="map-banner">
        <div className="team-name">
          <span className="team-label">Team Name: </span>
          {teamData?.team?.name || "Loading..."}
        </div>
        <div className="elapsed-time">
          <span className="time-value">{elapsedTime}</span>
        </div>
        <div className="team-code">{teamData?.team?.code || ""}</div>
      </div>

      {showSuccessNotification && (
        <div className="success-notification">
          <div className="success-notification-content">
            <div className="success-icon">🎉</div>
            <div className="success-text">
              <h3>Clue Found!</h3>
              <p>Great work! You've found this clue.</p>
            </div>
          </div>
        </div>
      )}

      <div className="clue-content-wrapper">
        {/* Admin tools section - only visible to admins */}
        {isAdmin && (
          <div className="admin-tools">
            <div className="admin-badge">Admin View</div>
            <button
              onClick={handleManualRefresh}
              className="admin-refresh-button"
            >
              Refresh Clue Data
            </button>
          </div>
        )}

        {/* QR Scanner Section */}
        <div className="scanner-section">
          <h2>Scan QR Code</h2>
          <EnhancedQRScanner onScan={handleScan} width={280} height={280} />
          {scanMessage && (
            <div className={`scan-message ${clueFound ? "success" : ""}`}>
              {scanMessage}
            </div>
          )}
          {/* QR Code helper removed as requested */}
        </div>

        {/* Clue Information Section */}
        <div className="clue-scroll">
          <h1 className="clue-title">{clue?.title}</h1>
          <div className="clue-content">
            <h2>Description</h2>
            <p className="clue-description">{clue?.description}</p>
            {clue?.location && (
              <div className="clue-location">
                <h2>Location Hint</h2>
                <p>{clue.location}</p>
              </div>
            )}
          </div>
        </div>

        {/* Navigation Buttons */}
        <div className="navigation-buttons">
          <button onClick={handlePrevClue} className="nav-button prev-button">
            Previous Clue
          </button>
          <button
            onClick={() => router.push("/map")}
            className="nav-button map-button"
          >
            Back to Map
          </button>
          <button onClick={handleNextClue} className="nav-button next-button">
            Next Clue
          </button>
        </div>
      </div>

      {/* Bottom Navigation */}
      <div className="nav-bar">
        <Link href="/map" className="nav-item">
          <div className="nav-icon">🗺️</div>
          <div className="nav-label">Map</div>
        </Link>
        <Link href="/stats" className="nav-item">
          <div className="nav-icon">📊</div>
          <div className="nav-label">Stats</div>
        </Link>
        <Link href="/team-selection" className="nav-item">
          <div className="nav-icon">👥</div>
          <div className="nav-label">Team</div>
        </Link>
        <Link href="/leaderboard" className="nav-item">
          <div className="nav-icon">🏆</div>
          <div className="nav-label">Leaderboard</div>
        </Link>
      </div>

      <style jsx>{`
        .clue-container {
          display: flex;
          flex-direction: column;
          min-height: 100vh;
          background-color: #f4f1ea;
          padding-bottom: 70px; /* Space for bottom navbar */
          position: relative;
        }

        .success-notification {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          padding: 20px;
          background-color: rgba(0, 0, 0, 0.7);
          z-index: 1000;
          display: flex;
          justify-content: center;
          animation: slide-down 0.5s ease-out;
        }

        .success-notification-content {
          display: flex;
          align-items: center;
          background-color: #4caf50;
          color: white;
          padding: 15px 25px;
          border-radius: 10px;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
          max-width: 400px;
        }

        .success-icon {
          font-size: 2rem;
          margin-right: 15px;
        }

        .success-text h3 {
          margin: 0 0 5px 0;
          font-size: 1.2rem;
        }

        .success-text p {
          margin: 0;
        }

        @keyframes slide-down {
          0% {
            transform: translateY(-100%);
          }
          100% {
            transform: translateY(0);
          }
        }

        .hunt-ended {
          text-align: center;
          padding: 30px;
          background-color: white;
          border-radius: 10px;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          margin: auto;
          max-width: 500px;
        }

        .hunt-ended-icon {
          font-size: 48px;
          margin-bottom: 20px;
        }

        .hunt-ended h2 {
          color: #68543c;
          margin-bottom: 15px;
        }

        .hunt-ended p {
          margin-bottom: 20px;
        }

        .clue-content-wrapper {
          padding: 0 20px;
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          max-width: 600px;
          margin: 0 auto;
        }

        .scanner-section {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 20px;
          background-color: white;
          border-radius: 10px;
          padding: 15px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .scanner-section h2 {
          margin-top: 0;
          margin-bottom: 15px;
          color: #68543c;
        }

        .scan-message {
          margin-top: 10px;
          padding: 8px;
          background-color: #e8f5e9;
          border-radius: 4px;
          text-align: center;
          width: 100%;
        }

        .scan-message.success {
          background-color: #c8e6c9;
          color: #2e7d32;
          font-weight: bold;
        }

        .clue-scroll {
          background-color: #f8f3e3;
          border-radius: 10px;
          padding: 20px;
          width: 100%;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          position: relative;
          margin-bottom: 20px;
          border: 1px dashed #9c6b30;
        }

        h2 {
          color: #9c6b30;
          font-size: 1.5rem;
          margin-top: 10px;
          margin-bottom: 15px;
        }

        .clue-description {
          font-size: 1.1rem;
          line-height: 1.5;
          color: #5d4037;
          margin-bottom: 20px;
        }

        .clue-location {
          margin-top: 20px;
          padding-top: 15px;
          border-top: 1px dashed #9c6b30;
        }

        .navigation-buttons {
          display: flex;
          justify-content: space-between;
          width: 100%;
          margin-top: 20px;
          margin-bottom: 20px;
          flex-wrap: wrap; /* Allow buttons to wrap on small screens */
          gap: 10px;
        }

        .nav-button {
          padding: 12px 15px;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          font-weight: bold;
          transition: all 0.2s;
          font-size: 14px;
          flex: 1;
          min-width: 120px;
        }

        .prev-button {
          background-color: #a98467;
          color: white;
        }

        .map-button {
          background-color: #607d8b;
          color: white;
        }

        .next-button {
          background-color: #68543c;
          color: white;
        }

        .nav-button:hover {
          opacity: 0.9;
          transform: translateY(-2px);
        }

        .loading,
        .error,
        .not-found {
          text-align: center;
          padding: 30px;
        }

        .loading-spinner {
          border: 4px solid #f3f3f3;
          border-top: 4px solid #9c6b30;
          border-radius: 50%;
          width: 40px;
          height: 40px;
          animation: spin 1s linear infinite;
          margin: 0 auto 20px;
        }

        @keyframes spin {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }

        .error {
          color: #d32f2f;
        }

        .clue-title {
          color: #68543c;
          font-size: 1.8rem;
          text-align: center;
          margin-bottom: 20px;
          border-bottom: 2px solid #9c6b30;
          padding-bottom: 10px;
        }

        .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%;
          z-index: 10;
        }

        .nav-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-decoration: none;
          color: #666;
          flex: 1;
        }

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

        .nav-label {
          font-size: 12px;
        }

        .admin-tools {
          background-color: #f8d7da;
          border: 2px dashed #d9534f;
          border-radius: 8px;
          padding: 12px;
          margin-bottom: 15px;
          text-align: center;
          width: 100%;
        }

        .admin-badge {
          font-weight: bold;
          margin-bottom: 8px;
          color: #d9534f;
        }

        .admin-refresh-button {
          background-color: #d9534f;
          color: white;
          border: none;
          border-radius: 4px;
          padding: 8px 16px;
          cursor: pointer;
          font-size: 14px;
        }

        .admin-refresh-button:hover {
          background-color: #c9302c;
        }

        /* Map Banner Styles */
        .map-banner {
          background-color: #68543c;
          color: white;
          padding: 15px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 2px solid #4a3c2a;
          z-index: 10;
          flex-shrink: 0;
          margin-bottom: 20px;
        }

        .team-name {
          font-size: 18px;
          font-weight: bold;
          flex: 1;
          text-align: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding-right: 5px;
        }

        .team-label {
          font-weight: normal;
          opacity: 0.9;
        }

        .elapsed-time {
          text-align: center;
          padding: 5px 10px;
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 8px;
          flex: 0 0 auto;
          margin: 0 10px;
        }

        .time-value {
          font-size: 18px;
          font-weight: bold;
        }

        .team-code {
          font-size: 18px; /* Increased from 16px to 18px */
          font-weight: bold;
          flex: 1;
          text-align: right;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding-left: 5px;
        }
      `}</style>
    </div>
  );
}