"use client";

import { useQuery } from "@tanstack/react-query";
import { AppShell } from "@/components/layout/app-shell";

export default function YearlyPage() {
  const year = new Date().getFullYear();

  const { data: overview } = useQuery({
    queryKey: ["stats", "overview"],
    queryFn: async () => {
      const res = await fetch("/api/stats/overview");
      return res.json();
    },
  });

  const { data: achievements } = useQuery({
    queryKey: ["achievements"],
    queryFn: async () => {
      const res = await fetch("/api/achievements");
      return res.json();
    },
  });

  return (
    <AppShell>
      <div className="p-4 pb-20 md:pb-4 parchment-bg min-h-full">
        <div className="max-w-2xl mx-auto text-center py-12">
          <p className="text-sm text-[var(--warm-grey)] mb-2">{year}</p>
          <h1 className="serif text-4xl font-bold mb-6">Your Year in Adventure</h1>

          <div className="retro-window p-8 text-left space-y-6">
            <ScrollSection title="Total XP" value={overview?.totalXp?.toLocaleString() ?? "—"} />
            <ScrollSection title="Books Completed" value={overview?.booksCompleted ?? "—"} />
            <ScrollSection title="Pages Read" value={overview?.totalPagesRead?.toLocaleString() ?? "—"} />
            <ScrollSection
              title="Achievements Unlocked"
              value={achievements?.unlocked?.length ?? 0}
            />
            <p className="serif text-center pt-6 border-t italic">
              Another year on the long road. The adventure continues.
            </p>
          </div>
        </div>
      </div>
    </AppShell>
  );
}

function ScrollSection({ title, value }: { title: string; value: string | number }) {
  return (
    <div className="flex justify-between items-baseline border-b border-[var(--parchment-dark)] pb-3">
      <span className="font-bold">{title}</span>
      <span className="text-2xl text-[var(--gold-trim)]">{value}</span>
    </div>
  );
}