import type { ExpansionVelocity } from "@dci/core";
import { StepLines } from "@/components/intelligence/client-charts";
import { HonestEmpty } from "@/components/intelligence/shared";
import { TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { fmtInt, fmtMw } from "@/lib/format";

const WINDOW_LABEL: Record<ExpansionVelocity["windows"][number]["label"], string> = { "12m": "Last 12 months", "3y": "Last 3 years", "5y": "Last 5 years" };

/**
 * Expansion velocity: three windows (12 m / 3 y / 5 y) as a compact table, then the cumulative
 * countries / metros / facilities step chart. Every point carries its basis: "opened" = published
 * opening date; "first_seen" = when the index first observed the facility (NOT when it opened).
 */
export function ExpansionVelocityBlock({ velocity }: { velocity: ExpansionVelocity }) {
  const windows = velocity.windows;
  const series = velocity.countriesOverTime;
  const bases = new Set(series.map((p) => p.basis));
  const firstSeenYears = series.filter((p) => p.basis === "first_seen").map((p) => p.year);
  const fmtN = (n: number | null | undefined) => (n === null || n === undefined ? <span className="text-ink-4">—</span> : fmtInt(n));
  const fmtM = (n: number | null | undefined) => (n === null || n === undefined ? <span className="text-ink-4" title="No published MW figure">—</span> : fmtMw(n));

  return (
    <div className="flex flex-col gap-5">
      {windows.length ? (
        <Table dense>
          <THead>
            <tr>
              <Th>Window</Th>
              <Th numeric>New facilities</Th>
              <Th numeric>New projects</Th>
              <Th numeric>New countries</Th>
              <Th numeric>New markets</Th>
              <Th numeric className="hidden sm:table-cell">
                Opened MW
              </Th>
              <Th numeric className="hidden sm:table-cell">
                Announced MW
              </Th>
            </tr>
          </THead>
          <TBody>
            {windows.map((w) => (
              <Tr key={w.label}>
                <Td primary>{WINDOW_LABEL[w.label]}</Td>
                <Td label="New facilities" numeric lead>
                  {fmtN(w.newFacilities)}
                </Td>
                <Td label="New projects" numeric>
                  {fmtN(w.newProjects)}
                </Td>
                <Td label="New countries" numeric>
                  {fmtN(w.newCountries)}
                </Td>
                <Td label="New markets" numeric>
                  {fmtN(w.newMetros)}
                </Td>
                <Td label="Opened MW" numeric className="hidden sm:table-cell">
                  {fmtM(w.openedMw)}
                </Td>
                <Td label="Announced MW" numeric className="hidden sm:table-cell">
                  {fmtM(w.announcedMw)}
                </Td>
              </Tr>
            ))}
          </TBody>
        </Table>
      ) : (
        <HonestEmpty title="No dated expansion yet" detail="windows need opening, announcement or first-observation dates" />
      )}
      <p className="text-[11.5px] text-ink-3">
        “New facilities” counts facilities whose opening date — or, when none is published, the date the index first observed them — falls in the window. MW columns show published figures only.
      </p>

      <div>
        <div className="label-caps mb-2">Cumulative footprint by year</div>
        {series.length >= 2 ? (
          <>
            <StepLines
              height={180}
              format="int"
              series={[
                { name: "Countries", color: "var(--ink)", data: series.map((p) => ({ x: p.year, y: p.countries })) },
                { name: "Markets", color: "var(--st-planned)", data: series.map((p) => ({ x: p.year, y: p.metros })) },
                { name: "Facilities", color: "var(--accent)", dashed: true, data: series.map((p) => ({ x: p.year, y: p.facilities })) },
              ]}
              ariaLabel="Cumulative countries, markets and facilities by year"
            />
            <ul className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-[11.5px] text-ink-3">
              {series.map((p) => (
                <li key={p.year} className="figure">
                  {p.year}
                  <span className="text-ink-4"> · {p.basis === "opened" ? "opened" : "first seen"}</span>
                </li>
              ))}
            </ul>
          </>
        ) : (
          <HonestEmpty title="Not enough dated points to chart" detail="a step chart appears once two or more years are known" />
        )}
        <p className="mt-2 text-[11.5px] text-ink-3">
          Basis per point: <strong className="font-medium text-ink-2">opened</strong> = published opening date; <strong className="font-medium text-ink-2">first seen</strong> = the year the index first observed the facility, which is <em>not</em> when it opened.
          {bases.has("first_seen") && firstSeenYears.length > 0 && <> The {firstSeenYears.length === 1 ? "point for" : "points for"} {firstSeenYears.join(", ")} {firstSeenYears.length === 1 ? "is" : "are"} first-seen values and overstate recent growth.</>}
        </p>
      </div>
    </div>
  );
}