WikiRush/lib/useDailyGame.ts

"use client";

import { useState, useCallback, useRef, useEffect } from "react";
import { fetchArticle, normalizeTitle } from "./wiki";
import { useTimer } from "./useTimer";

export type DailyPhase = "loading" | "playing" | "won" | "gave_up" | "already_played";

export type DailyPuzzleInfo = {
  id: string;
  date: string;
  startArticle: string;
  targetArticle: string;
};

export type DailyResult = {
  clicks: number;
  timeSeconds: number;
  won: boolean;
  path: string[];
};

export function useDailyGame() {
  const timer = useTimer();
  const [phase, setPhase] = useState<DailyPhase>("loading");
  const [puzzle, setPuzzle] = useState<DailyPuzzleInfo | null>(null);
  const [myResult, setMyResult] = useState<DailyResult | null>(null);

  const [html, setHtml] = useState("");
  const [title, setTitle] = useState("");
  const [loading, setLoading] = useState(false);
  const [loadError, setLoadError] = useState<string | null>(null);

  const clicksRef = useRef(0);
  const [clicks, setClicks] = useState(0);
  const pathRef = useRef<string[]>([]);
  const [history, setHistory] = useState<string[]>([]);
  const timerStartedRef = useRef(false);
  const gameEndedRef = useRef(false);
  const loadingRef = useRef(false);

  useEffect(() => {
    fetch("/api/daily")
      .then((r) => r.json())
      .then(async (data: { puzzle: DailyPuzzleInfo; alreadyPlayed: boolean; myResult: DailyResult | null }) => {
        setPuzzle(data.puzzle);
        if (data.alreadyPlayed && data.myResult) {
          setMyResult(data.myResult);
          setPhase("already_played");
          return;
        }
        // Charger l'article de départ
        const art = await fetchArticle(data.puzzle.startArticle);
        if (!art) { setLoadError("Impossible de charger l'article de départ."); return; }
        setHtml(art.html);
        setTitle(art.title);
        pathRef.current = [art.title];
        setHistory([art.title]);
        setPhase("playing");
      })
      .catch(() => setLoadError("Impossible de charger le défi du jour."));
  }, []);

  async function loadArticle(t: string) {
    setLoadError(null);
    setLoading(true);
    loadingRef.current = true;
    const art = await fetchArticle(t);
    setLoading(false);
    loadingRef.current = false;
    if (!art) { setLoadError(`Impossible de charger "${t}".`); return null; }
    setHtml(art.html);
    setTitle(art.title);
    return art.title;
  }

  async function submitResult(won: boolean) {
    if (!puzzle) return;
    const result: DailyResult = {
      clicks: clicksRef.current,
      timeSeconds: timer.elapsed,
      won,
      path: pathRef.current,
    };
    setMyResult(result);
    await fetch("/api/daily", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ puzzleId: puzzle.id, ...result, path: result.path }),
    }).catch(() => {});
  }

  const navigate = useCallback(async (t: string) => {
    if (loadingRef.current || gameEndedRef.current) return;
    clicksRef.current += 1;
    setClicks(clicksRef.current);
    if (!timerStartedRef.current) { timer.start(); timerStartedRef.current = true; }

    const canonical = await loadArticle(t);
    if (!canonical) return;
    const newPath = [...pathRef.current, canonical];
    pathRef.current = newPath;
    setHistory(newPath);
    window.scrollTo({ top: 0, behavior: "smooth" });

    if (puzzle && normalizeTitle(canonical) === normalizeTitle(puzzle.targetArticle)) {
      timer.stop();
      gameEndedRef.current = true;
      setPhase("won");
      await submitResult(true);
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [puzzle]);

  const goBack = useCallback(async () => {
    if (loadingRef.current || gameEndedRef.current || pathRef.current.length <= 1) return;
    clicksRef.current += 1;
    setClicks(clicksRef.current);
    if (!timerStartedRef.current) { timer.start(); timerStartedRef.current = true; }
    const newPath = pathRef.current.slice(0, -1);
    const canonical = await loadArticle(newPath[newPath.length - 1]);
    if (!canonical) return;
    pathRef.current = newPath;
    setHistory(newPath);
    window.scrollTo({ top: 0, behavior: "smooth" });
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  async function giveUp() {
    timer.stop();
    gameEndedRef.current = true;
    setPhase("gave_up");
    await submitResult(false);
  }

  return {
    phase, puzzle, myResult,
    html, title, loading, loadError,
    history, clicks, elapsed: timer.elapsed,
    canGoBack: pathRef.current.length > 1,
    navigate, goBack, giveUp,
    retryLoad: () => title && loadArticle(title),
  };
}