import type { MarketMomentum } from "@dci/core";
import Link from "next/link";
import { CounterGrid, type CounterItem } from "@/components/intelligence/shared";
import { fmtInt } from "@/lib/format";
import { routes } from "@/lib/routes";

/**
 * MARKET MOMENTUM — each component shown on its own, never collapsed into a score. Counts come from
 * events / projects detected in the window; MW are published figures only ("not published" otherwise).
 */
export function MarketMomentumPanel({ m, metroSlug, countryIso2 }: { m: MarketMomentum; metroSlug: string; countryIso2: string }) {
  const items: CounterItem[] = [
    { key: "pa", value: m.projectsAnnounced, label: "projects announced", href: routes.projects(`metro=${metroSlug}`) },
    { key: "pc", value: m.projectsEnteredConstruction, label: "projects entered construction", href: routes.projects(`metro=${metroSlug}&status=under_construction`) },
    { key: "cmw", value: m.constructionMw, label: "of construction MW (published, ≈)", format: "mw" },
    { key: "amw", value: m.announcedMw, label: "of announced MW (published, ≈)", format: "mw" },
    { key: "ne", value: m.newEntrants.length, label: m.newEntrants.length === 1 ? "operator entered the market" : "operators entered the market", note: "first facility observed in the window" },
    { key: "fo", value: m.facilitiesOpened, label: "facilities opened", href: routes.live(`metro=${metroSlug}&type=facility_opened`) },
    { key: "cr", value: m.cloudRegionsAdded, label: "cloud regions added", href: routes.live(`metro=${metroSlug}&type=cloud_region_announced,cloud_region_launched`) },
    { key: "ge", value: m.gridEvents, label: "grid / power events", href: routes.live(`metro=${metroSlug}&type=grid_constraint,grid_connection,utility_event,power_agreement`) },
    { key: "et", value: m.eventsTotal, label: "changes detected in total", href: routes.live(`country=${countryIso2}`) },
  ];
  return (
    <div className="flex flex-col gap-3">
      <CounterGrid items={items} suffix="· last 12 months" />
      {m.newEntrants.length > 0 && (
        <div>
          <div className="label-caps mb-1.5">New entrants ({fmtInt(m.newEntrants.length)})</div>
          <ul className="flex flex-wrap gap-1.5">
            {m.newEntrants.map((o) => (
              <li key={o.id}>
                <Link href={routes.operator(o.slug)} className="inline-flex h-10 items-center rounded-sm border border-hair bg-surface px-2 text-[12px] text-ink hover:border-hair-2 hover:text-accent sm:h-8">
                  {o.name}
                </Link>
              </li>
            ))}
          </ul>
          <p className="mt-1.5 text-[11px] text-ink-4">“New entrant” = an operator whose first facility in this market was first observed by the index within the window; for a recently connected source this reflects indexing, not market entry.</p>
        </div>
      )}
    </div>
  );
}