import type { Metadata } from 'next';
import { LazyGlobe } from '@/components/globe/lazy-globe';
import { api, safe } from '@/lib/api';
import { fmtInt, num } from '@/lib/format';
import { SITE_URL } from '@/lib/site';

export const revalidate = 300;

/** "16,000+" from the live count of objects with element sets — never a hardcoded figure. */
async function trackedCount(): Promise<string | null> {
  const home = await safe(api.home());
  const n = num(home?.data.stats.with_elements);
  if (!n || n < 1000) return null;
  return `${fmtInt(Math.floor(n / 1000) * 1000)}+`;
}

export async function generateMetadata(): Promise<Metadata> {
  const count = await trackedCount();
  const title = count ? `Explore orbit — live 3D globe of ${count} tracked satellites` : 'Explore orbit — live 3D globe of tracked satellites';
  const description = count
    ? `Interactive 3D globe of ${count} satellites and objects with current element sets, propagated with SGP4 every 30 seconds. Filter by orbit class and mission type, search any satellite and follow it live.`
    : 'Interactive 3D globe of every satellite with a current element set, propagated with SGP4 every 30 seconds. Filter by orbit class and mission type, search any satellite and follow it live.';
  return {
    title,
    description,
    alternates: { canonical: '/explore' },
    openGraph: { title, description, url: `${SITE_URL}/explore`, type: 'website' },
    twitter: { card: 'summary_large_image', title, description },
  };
}

export default async function ExplorePage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const sp = await searchParams;
  const raw = Array.isArray(sp.focus) ? sp.focus[0] : sp.focus;
  const focus = raw && /^\d{1,9}$/.test(raw) ? Number(raw) : null;
  return (
    <div className="relative w-full h-[calc(100dvh-var(--header-h)-var(--tabbar-h)-env(safe-area-inset-bottom,0px))] md:h-[calc(100dvh-var(--header-h))]">
      <h1 className="sr-only">Explore orbit — live 3D globe</h1>
      <LazyGlobe variant="full" initialFocus={focus} />
    </div>
  );
}