import Link from 'next/link';
import { OrbitBadge, StatusBadge } from '@/components/ui/badges';
import { Section } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { fmtInt, fmtKm, num } from '@/lib/format';
import { routes } from '@/lib/site';
import type { HomePayload } from '@/lib/types';

/** Trending (by views) — or "Featured" when the view counters are still at zero. Honest label, real rows. */
export function FeaturedObjects({ items }: { items: HomePayload['trending'] }) {
  const hasViews = items.some((t) => (num(t.views) ?? 0) > 0);
  return (
    <Section eyebrow={hasViews ? 'Trending' : 'Featured'} title={hasViews ? 'Most viewed objects' : 'Notable objects'} action={{ href: routes.explore(), label: 'Find them on the globe' }} className="py-0">
      {items.length === 0 ? (
        <Unavailable what="Featured objects" />
      ) : (
        <ul className="divide-y divide-rule border-t border-rule">
          {items.map((t) => (
            <li key={t.id}>
              <Link href={routes.satellite(t.slug)} className="group grid min-h-[56px] grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-1 py-2.5 md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)_auto_auto]">
                <span className="min-w-0">
                  <span className="block truncate text-[15px] font-medium text-ink group-hover:text-accent">{t.name}</span>
                  <span className="mono block text-2xs text-ink-3">NORAD {t.norad_id ?? '—'}</span>
                </span>
                <span className="col-span-2 min-w-0 truncate text-xs text-ink-2 md:col-span-1">{[t.operator_name, t.constellation_name].filter(Boolean).join(' · ') || '—'}</span>
                <span className="flex items-center gap-1.5 md:justify-end">
                  <OrbitBadge orbitClass={t.orbit_class} />
                  <StatusBadge status={t.status} />
                </span>
                <span className="tnum hidden text-right text-xs text-ink-3 md:block" title="Perigee">
                  {fmtKm(t.perigee_km)}
                  {hasViews && <span className="ml-2">{fmtInt(t.views)} views</span>}
                </span>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </Section>
  );
}