import type { Metadata } from 'next'
import { changelogEntriesQuery, roadmapItemsQuery } from '@/lib/sanity'
import { sanityFetch } from '@/lib/sanityFetch'
import { ChangelogTabs } from '@/components/ChangelogTabs'
import type { ChangelogEntry, RoadmapItemData } from '@/types/changelog'

export const revalidate = 60

export const metadata: Metadata = {
  title: "What's New — Battl Builders",
  description:
    'Release notes, upcoming features, and product updates from Battl Builders.',
}

export default async function ChangelogPage() {
  let entries: ChangelogEntry[] = []
  let roadmapItems: RoadmapItemData[] = []

  try {
    entries = await sanityFetch<ChangelogEntry[]>(changelogEntriesQuery)
  } catch (err) {
    console.error('[Changelog] entries fetch failed:', err)
  }

  try {
    roadmapItems = await sanityFetch<RoadmapItemData[]>(roadmapItemsQuery)
  } catch (err) {
    console.error('[Changelog] roadmap fetch failed:', err)
  }

  return (
    <main className="mx-auto max-w-4xl px-4 py-10">
      <header className="mb-10">
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-zinc-500">
          Battl Builders
        </p>
        <h1 className="mt-2 text-3xl font-semibold tracking-tight">Updates</h1>
        <p className="mt-2 text-sm text-zinc-400">
          What we&apos;ve shipped and what&apos;s coming next.
        </p>
      </header>
      <ChangelogTabs entries={entries} roadmapItems={roadmapItems} />
    </main>
  )
}