import type { Pulse } from "@dci/core";
import Link from "next/link";
import { EventList } from "@/components/event-list";
import { cn } from "@/components/ui/cn";
import { CountryFlag } from "@/components/ui/country-flag";
import { fmtInt, fmtMw } from "@/lib/format";
import { routes } from "@/lib/routes";

function Stat({ label, value, href, muted }: { label: string; value: string; href?: string; muted?: boolean }) {
  const inner = (
    <>
      <div className={cn("figure text-[18px] font-medium leading-none tracking-[-0.02em]", muted ? "text-ink-4" : "text-ink group-hover:text-accent")}>{value}</div>
      <div className="mt-1 text-[11px] leading-tight text-ink-3">{label}</div>
    </>
  );
  return href ? (
    <Link href={href} className="group block min-w-0 py-2 pr-3">
      {inner}
    </Link>
  ) : (
    <div className="min-w-0 py-2 pr-3">{inner}</div>
  );
}

/** WHAT CHANGED TODAY (§16): deterministic pulse counts + the major events of the window; nothing scored, everything countable. */
export function PulseBlock({ pulse, compact }: { pulse: Pulse; compact?: boolean }) {
  const win = pulse.window === "24h" ? "24 h" : pulse.window;
  const live = (type: string) => routes.live(`type=${type}&since=${encodeURIComponent(pulse.since)}`);
  const stats: Array<{ label: string; value: number | null; href?: string; mw?: boolean }> = [
    { label: "new projects", value: pulse.newProjects, href: live("project_announced") },
    { label: "entered construction", value: pulse.projectsEnteredConstruction, href: live("construction_started") },
    { label: "facilities opened", value: pulse.facilitiesOpened, href: live("facility_opened") },
    { label: "newly announced (published MW)", value: pulse.newlyAnnouncedMw, mw: true },
    { label: "construction started (published MW)", value: pulse.constructionStartedMw, mw: true },
    { label: "cloud regions announced", value: pulse.cloudRegionsAnnounced, href: live("cloud_region_announced") },
    { label: "power agreements", value: pulse.powerAgreements, href: live("power_agreement") },
    { label: "grid constraint events", value: pulse.gridConstraintEvents, href: live("grid_constraint") },
    { label: "acquisitions", value: pulse.acquisitions, href: live("acquisition") },
    { label: "financing events", value: pulse.financingEvents, href: live("investment_announced") },
    { label: "facilities newly indexed", value: pulse.newFacilitiesIndexed, href: live("facility_discovered") },
    { label: "capacity changes", value: pulse.capacityChanges, href: live("capacity_changed") },
  ];
  return (
    <div className="grid gap-6 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]">
      <div className="min-w-0">
        <div className={cn("grid grid-cols-2 divide-hair sm:grid-cols-3", compact && "sm:grid-cols-2")}>
          {stats.map((s) => (
            <Stat key={s.label} label={s.label} value={s.value === null ? "—" : s.mw ? fmtMw(s.value) : fmtInt(s.value)} href={s.href} muted={s.value === null || s.value === 0} />
          ))}
        </div>
        {pulse.operatorsNewMarkets.length > 0 && (
          <div className="mt-3 border-t border-hair pt-3">
            <div className="label-caps mb-1.5">Operators entering new markets · {win}</div>
            <ul className="flex flex-wrap gap-1.5">
              {pulse.operatorsNewMarkets.slice(0, 8).map((o, i) => (
                <li key={`${o.operator.id}-${o.market?.id ?? o.countryIso2 ?? i}`}>
                  <Link href={routes.operator(o.operator.slug)} className="inline-flex h-10 max-w-[260px] items-center gap-1.5 rounded-xs border border-hair px-2 text-[12px] text-ink-2 hover:text-ink sm:h-7">
                    <span className="truncate">{o.operator.name}</span>
                    <span aria-hidden className="text-ink-4">→</span>
                    <CountryFlag iso2={o.countryIso2} size={11} />
                    <span className="truncate text-ink-3">{o.market?.name ?? ""}</span>
                  </Link>
                </li>
              ))}
              {pulse.operatorsNewMarkets.length > 8 && <li className="inline-flex h-10 items-center sm:h-7 text-[12px] text-ink-4">+{fmtInt(pulse.operatorsNewMarkets.length - 8)} more</li>}
            </ul>
          </div>
        )}
        {(pulse.byCountry.length > 0 || pulse.byOperator.length > 0) && (
          <div className="mt-3 grid gap-4 border-t border-hair pt-3 sm:grid-cols-2">
            {pulse.byCountry.length > 0 && (
              <div>
                <div className="label-caps mb-1.5">Most active countries</div>
                <ul className="divide-y divide-hair text-[12.5px]">
                  {pulse.byCountry.slice(0, 5).map((c) => (
                    <li key={c.iso2} className="flex min-h-10 items-center justify-between gap-2 py-1 sm:min-h-0">
                      <Link href={routes.country(c.slug)} className="inline-flex min-h-10 min-w-0 items-center gap-1.5 text-ink-2 hover:text-ink sm:min-h-0">
                        <CountryFlag iso2={c.iso2} size={11} /> <span className="truncate">{c.name}</span>
                      </Link>
                      <span className="figure shrink-0 text-ink-3">
                        {fmtInt(c.events)} ev · {fmtInt(c.newProjects)} prj
                      </span>
                    </li>
                  ))}
                </ul>
              </div>
            )}
            {pulse.byOperator.length > 0 && (
              <div>
                <div className="label-caps mb-1.5">Most active operators</div>
                <ul className="divide-y divide-hair text-[12.5px]">
                  {pulse.byOperator.slice(0, 5).map((o) => (
                    <li key={o.id} className="flex min-h-10 items-center justify-between gap-2 py-1 sm:min-h-0">
                      <Link href={routes.operator(o.slug)} className="inline-flex min-h-10 items-center truncate text-ink-2 hover:text-ink sm:min-h-0">
                        {o.name}
                      </Link>
                      <span className="figure shrink-0 text-ink-3">
                        {fmtInt(o.events)} ev · {fmtInt(o.newProjects)} prj
                      </span>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>
        )}
      </div>
      <div className="min-w-0">
        <div className="mb-1.5 flex items-baseline justify-between">
          <div className="label-caps">Major events · {win}</div>
          <Link href={routes.live("significance=major")} className="text-[12px] text-ink-3 hover:text-ink">
            All major →
          </Link>
        </div>
        <EventList events={pulse.majorEvents.slice(0, 6)} dense emptyTitle="No major event in this window" emptyDescription="Major = large MW, new market entries, grid constraints, openings." />
      </div>
    </div>
  );
}