import type { Metadata } from 'next';
import { LatestLaunches, RecentEvents, RecentReentries } from '@/components/home/activity';
import { OrbitalDensity } from '@/components/home/density';
import { FeaturedObjects } from '@/components/home/featured';
import { HomeHero } from '@/components/home/hero';
import { HeadlineMetrics } from '@/components/home/metrics';
import { TopConstellations, TopCountries, TopOperators } from '@/components/home/rankings';
import { ApiTeaser, DataSources } from '@/components/home/sources';
import { Container } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { api, safe } from '@/lib/api';
import { fmtAgo, fmtDateTime } from '@/lib/format';
import { DESCRIPTION, SITE_NAME, SITE_URL, TAGLINE } from '@/lib/site';

export const revalidate = 120;

export const metadata: Metadata = {
  title: { absolute: `${SITE_NAME} — ${TAGLINE}` },
  description: DESCRIPTION,
  alternates: { canonical: '/' },
  openGraph: { title: `${SITE_NAME} — ${TAGLINE}`, description: DESCRIPTION, url: SITE_URL, type: 'website' },
  twitter: { card: 'summary_large_image', title: `${SITE_NAME} — ${TAGLINE}`, description: DESCRIPTION },
};

export default async function HomePage() {
  const res = await safe(api.home());
  const home = res?.data ?? null;

  return (
    <>
      <HomeHero home={home} />
      <Container>
        {!home ? (
          <div className="py-12">
            <Unavailable what="Catalogue statistics" />
          </div>
        ) : (
          <>
            <HeadlineMetrics home={home} />

            <div className="grid grid-cols-[minmax(0,1fr)] gap-12 py-12 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)] lg:gap-16">
              <FeaturedObjects items={home.trending} />
              <TopConstellations items={home.top_constellations} />
            </div>

            <div className="grid grid-cols-[minmax(0,1fr)] gap-12 border-t border-rule py-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:gap-16">
              <LatestLaunches items={home.latest_launches} />
              <RecentEvents items={home.events} />
            </div>

            <div className="grid grid-cols-[minmax(0,1fr)] gap-12 border-t border-rule py-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:gap-16">
              <TopCountries items={home.top_countries} />
              <TopOperators items={home.top_operators} />
            </div>

            <div className="border-t border-rule py-12">
              <OrbitalDensity buckets={home.orbital_buckets} />
            </div>

            <div className="border-t border-rule py-12">
              <RecentReentries items={home.reentries} />
            </div>

            <div className="grid grid-cols-[minmax(0,1fr)] gap-12 border-t border-rule py-12 lg:grid-cols-[minmax(0,6fr)_minmax(0,6fr)] lg:gap-16">
              <DataSources sources={home.sources} />
              <ApiTeaser />
            </div>

            <p className="mono border-t border-rule py-6 text-2xs text-ink-3">
              Statistics snapshot computed {fmtAgo(home.computed_at)} · {fmtDateTime(home.computed_at)} · page refreshes every 2 min
            </p>
          </>
        )}
      </Container>
    </>
  );
}