"use client";

import type { GoalCallout as GoalCalloutData } from "@/lib/reporting/model";
import { formatNumber } from "@/app/utils";

const DIMENSION_LABEL: Record<string, string> = {
  carbon: "carbon",
  energy: "energy use",
  valuation: "valuation",
};

/**
 * The goal-aware callout beneath the EPC ladder. Current-stock views frame
 * the portfolio's own goal; scenario views frame the before→after movement
 * on that goal (grilling decision, per selectGoalCallout).
 */
export function GoalCallout({
  callout,
  total,
  dimensionTotals,
  onDrill,
}: {
  callout: GoalCalloutData;
  total: number;
  dimensionTotals?: { carbon?: number; energy?: number };
  onDrill?: () => void;
}) {
  let body: React.ReactNode;
  let good = false;

  if (callout.kind === "below-band") {
    const pct = total > 0 ? Math.round((callout.count / total) * 100) : 0;
    body = (
      <>
        <b>
          {callout.count} homes ({pct}%)
        </b>{" "}
        sit below EPC {callout.band} — this portfolio&apos;s goal band.
      </>
    );
  } else if (callout.kind === "below-band-movement") {
    good = callout.after < callout.before;
    const beforePct = total > 0 ? Math.round((callout.before / total) * 100) : 0;
    const afterPct = total > 0 ? Math.round((callout.after / total) * 100) : 0;
    body = (
      <>
        Below {callout.band} falls from <b>{callout.before} homes to {callout.after}</b>{" "}
        ({beforePct}% → {afterPct}%).
      </>
    );
  } else if (callout.kind === "dimension-total") {
    const dim = DIMENSION_LABEL[callout.dimension];
    const carbon = dimensionTotals?.carbon;
    body =
      callout.dimension === "carbon" && carbon !== undefined ? (
        <>
          <b>{formatNumber(carbon)} tCO₂e a year</b> across the portfolio —
          scenarios target this {dim} number.
        </>
      ) : (
        <>This portfolio&apos;s goal is to improve {dim} — scenarios target it.</>
      );
  } else {
    good = true;
    body = <>This scenario improves {DIMENSION_LABEL[callout.dimension]}.</>;
  }

  return (
    <div
      className={`mt-auto flex items-center justify-between gap-3 rounded-lg px-3.5 py-2.5 text-[0.82rem] ${
        good ? "bg-[#e9f4ef] text-[#114d38]" : "bg-[#faf1e2] text-[#6d4a12]"
      }`}
    >
      <span className="tabular-nums">{body}</span>
      {onDrill && (
        <button
          type="button"
          onClick={onDrill}
          className="whitespace-nowrap font-semibold text-midblue"
        >
          View homes →
        </button>
      )}
    </div>
  );
}
