import { ArrowRight, Building2, Globe2, MapPin, Orbit, Rocket, Satellite } from 'lucide-react';
import Link from 'next/link';
import { fmtInt } from '@/lib/format';
import type { SearchPayload, SearchResult } from '@/lib/types';

type EntityType = SearchResult['entity_type'];

const GROUPS: { type: EntityType; label: string; Icon: typeof Satellite }[] = [
  { type: 'satellite', label: 'Satellites', Icon: Satellite },
  { type: 'constellation', label: 'Constellations', Icon: Orbit },
  { type: 'operator', label: 'Operators', Icon: Building2 },
  { type: 'country', label: 'Countries', Icon: Globe2 },
  { type: 'launch', label: 'Launches', Icon: Rocket },
  { type: 'launch_site', label: 'Launch sites', Icon: MapPin },
];

export function Shortcuts({ items }: { items: SearchPayload['shortcuts'] }) {
  if (!items.length) return null;
  return (
    <div className="mb-6">
      <p className="eyebrow mb-2">Filters matching your query</p>
      <ul className="flex flex-wrap gap-2">
        {items.map((s) => (
          <li key={s.href}>
            <Link href={s.href} className="inline-flex min-h-[40px] items-center gap-1.5 rounded-full border border-rule bg-plane-2 px-3 text-sm text-ink-2 hover:border-rule-strong hover:text-ink">
              <ArrowRight className="size-3.5 text-accent" aria-hidden /> {s.label}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

/** Results grouped by entity type in a fixed order; every row links to `result.href` from the API. */
export function GroupedResults({ results }: { results: SearchResult[] }) {
  const byType = new Map<EntityType, SearchResult[]>();
  for (const r of results) byType.set(r.entity_type, [...(byType.get(r.entity_type) ?? []), r]);
  const groups = GROUPS.filter((g) => byType.has(g.type));
  return (
    <div className="space-y-10">
      {groups.map(({ type, label, Icon }) => {
        const rows = byType.get(type) ?? [];
        return (
          <section key={type} aria-labelledby={`grp-${type}`}>
            <div className="mb-2 flex items-baseline justify-between gap-3">
              <h2 id={`grp-${type}`} className="flex items-center gap-2 text-base font-semibold text-ink">
                <Icon className="size-4 text-ink-3" aria-hidden /> {label}
              </h2>
              <span className="tnum text-xs text-ink-3">{fmtInt(rows.length)}</span>
            </div>
            <ul className="divide-y divide-rule border-t border-rule">
              {rows.map((r) => (
                <li key={`${r.entity_type}-${r.entity_id}`}>
                  <Link href={r.href} className="group flex min-h-[52px] items-center gap-3 py-2.5">
                    <span className="min-w-0 flex-1">
                      <span className="block truncate text-[15px] text-ink group-hover:text-accent">{r.title}</span>
                      {r.subtitle && <span className="block truncate text-xs text-ink-3">{r.subtitle}</span>}
                    </span>
                    <ArrowRight className="size-4 shrink-0 text-ink-3 group-hover:text-accent" aria-hidden />
                  </Link>
                </li>
              ))}
            </ul>
          </section>
        );
      })}
    </div>
  );
}

export const EXAMPLE_QUERIES = ['ISS', 'Starlink', '25544', '1998-067A', 'SpaceX', 'Canada', 'GPS', 'Falcon 9'];