import Link from 'next/link';
import { cn } from '@/lib/cn';
import { routes } from '@/lib/site';

/** Immediate shell while the 3D bundle loads: a dark disc with the accent limb so the layout never jumps. */
export function GlobeSkeleton({ className, label = 'Loading globe…' }: { className?: string; label?: string }) {
  return (
    <div className={cn('relative flex h-full w-full items-center justify-center overflow-hidden', className)} aria-busy="true" aria-live="polite">
      <div
        className="aspect-square w-[min(72%,520px)] rounded-full"
        style={{
          background: 'radial-gradient(circle at 35% 30%, rgba(24,33,64,0.9), rgba(11,16,32,0.95) 55%, rgba(6,9,18,1) 72%)',
          boxShadow: '0 0 0 1px rgba(56,211,255,0.10), 0 0 60px rgba(56,211,255,0.10), inset -30px -20px 80px rgba(0,0,0,0.5)',
        }}
      />
      <p className="mono absolute bottom-4 left-4 text-2xs uppercase tracking-[0.14em] text-ink-3">{label}</p>
    </div>
  );
}

/** Honest fallback when WebGL is unavailable (headless, blocked GPU, old device). */
export function GlobeUnavailable({ className, reason }: { className?: string; reason?: string }) {
  return (
    <div className={cn('flex h-full w-full items-center justify-center p-6', className)} role="status">
      <div className="max-w-sm text-center">
        <p className="eyebrow">3D globe</p>
        <p className="mt-2 text-base font-medium text-ink">WebGL is not available in this browser</p>
        <p className="mt-2 text-sm leading-relaxed text-ink-3">{reason ?? 'The live globe needs hardware-accelerated graphics. Positions and orbital data are still available in the catalogue.'}</p>
        <Link href={routes.satellites('has_gp=true')} className="mt-4 inline-flex h-11 items-center justify-center rounded-md border border-rule-strong px-4 text-sm text-ink hover:bg-plane-2">
          Browse tracked satellites →
        </Link>
      </div>
    </div>
  );
}