import type { MarketConcentration } from "@dci/core";
import { ApiNote, CoverageBar, HonestEmpty, ShareList } from "@/components/intelligence/shared";
import { fmtInt, fmtPct } from "@/lib/format";
import { routes } from "@/lib/routes";

function hhiLabel(hhi: number): string {
  if (hhi >= 2500) return "highly concentrated";
  if (hhi >= 1500) return "moderately concentrated";
  return "unconcentrated";
}

function Figures({ hhi, top3, top5 }: { hhi: number; top3: number; top5: number }) {
  return (
    <dl className="mb-3 grid grid-cols-3 gap-x-3 border-y border-hair py-2">
      <div className="min-w-0">
        <dt className="label-caps truncate">HHI</dt>
        <dd className="figure text-[18px] font-medium leading-tight text-ink">{fmtInt(hhi)}</dd>
        <dd className="text-[11px] text-ink-3">{hhiLabel(hhi)} · 0–10 000</dd>
      </div>
      <div className="min-w-0">
        <dt className="label-caps truncate">Top-3 share</dt>
        <dd className="figure text-[18px] font-medium leading-tight text-ink">{fmtPct(top3)}</dd>
      </div>
      <div className="min-w-0">
        <dt className="label-caps truncate">Top-5 share</dt>
        <dd className="figure text-[18px] font-medium leading-tight text-ink">{fmtPct(top5)}</dd>
      </div>
    </dl>
  );
}

/**
 * MARKET CONCENTRATION — computed on facility counts and, separately, on known MW (only when published
 * figures exist). The MW view always shows its coverage and says "incomplete MW data" when partial.
 */
export function MarketConcentrationPanel({ c, facilityCount }: { c: MarketConcentration; facilityCount: number }) {
  const f = c.facilities;
  const mw = c.knownMw;
  return (
    <div className="flex flex-col gap-4">
      <div className="grid gap-6 md:grid-cols-2">
        <div>
          <h3 className="text-[13.5px] font-semibold text-ink">On facility counts</h3>
          <p className="mb-2 text-[11.5px] text-ink-3">
            {fmtInt(c.operatorCount)} operators · {fmtInt(facilityCount)} counted facilities (campus rows with buildings excluded)
          </p>
          <Figures hhi={f.hhi} top3={f.top3Share} top5={f.top5Share} />
          <ShareList items={f.top.slice(0, 10).map((o) => ({ key: o.id, label: o.name, href: routes.operator(o.slug), count: o.count, share: o.share }))} unit="facilities" />
        </div>
        <div>
          <h3 className="text-[13.5px] font-semibold text-ink">On known MW</h3>
          {mw ? (
            <>
              <div className="mb-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11.5px] text-ink-3">
                <span>Published operational MW only</span>
                <CoverageBar value={mw.coverage} label="MW coverage" width="w-[140px]" />
              </div>
              {mw.coverage < 1 && (
                <p className="mb-2 rounded-sm border border-warn/30 bg-warn/5 px-2.5 py-1.5 text-[12px] text-ink-2" role="note">
                  <strong className="text-ink">Incomplete MW data</strong> — {fmtPct(mw.coverage)} of facilities publish a figure; shares below describe the published subset, not the market.
                </p>
              )}
              <Figures hhi={mw.hhi} top3={mw.top3Share} top5={mw.top5Share} />
              <ShareList items={mw.top.slice(0, 10).map((o) => ({ key: o.id, label: o.name, href: routes.operator(o.slug), count: Math.round(o.mw), share: o.share }))} unit="MW" />
            </>
          ) : (
            <HonestEmpty title="Not computed on MW" detail="no operator in this market publishes an operational MW figure, so a capacity view would be invented" className="mt-2" />
          )}
        </div>
      </div>
      <ApiNote note={c.note} label="Method" />
    </div>
  );
}