"use client";

import { useState, useEffect } from "react";
import { generateZip, zipSizeForDate, ZipPuzzle } from "@/lib/generators/zip";
import { todayISO } from "@/lib/rng";
import ZipBoard from "@/components/ZipBoard";
import DailyPageShell from "@/components/DailyPageShell";

export default function ZipPage() {
  const date = todayISO();
  const [puzzle, setPuzzle] = useState<ZipPuzzle | null>(null);
  useEffect(() => { setPuzzle(generateZip(date, zipSizeForDate(date))); }, [date]);

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

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