"use client";

import { useState, useEffect } from "react";
import { generateSudoku, SudokuPuzzle } from "@/lib/generators/sudoku";
import { todayISO } from "@/lib/rng";
import SudokuBoard from "@/components/SudokuBoard";
import DailyPageShell from "@/components/DailyPageShell";

export default function SudokuPage() {
  const date = todayISO();
  const [puzzle, setPuzzle] = useState<SudokuPuzzle | null>(null);
  useEffect(() => { setPuzzle(generateSudoku(date)); }, [date]);

  const dateLabel = new Date(date + "T00:00:00").toLocaleDateString("fr-FR", {
    weekday: "long", day: "numeric", month: "long",
  });

  return (
    <DailyPageShell game="sudoku" date={date} dateLabel={dateLabel}>
      {puzzle ? (
        <SudokuBoard puzzle={puzzle} date={date} />
      ) : (
        <div className="py-20 text-gray-300 text-sm">Chargement…</div>
      )}
    </DailyPageShell>
  );
}