"use client";

/**
 * Shared reporting primitives — the one visual vocabulary for the redesign
 * (PRD #370). EPC colour is the only strong colour; deltas carry semantic
 * green/red; everything else is quiet navy-on-white.
 */

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/app/shadcn_components/ui/tooltip";
import { Info } from "lucide-react";
import { getEpcColorClass } from "@/app/utils";

/**
 * A small "ⓘ" affordance that reveals an explanation on hover/focus. The one
 * way the reporting surfaces disclose what a figure includes or excludes, so
 * the KPI band, ledger and spend breakdown all read the same.
 */
export function InfoDot({
  label,
  tip,
}: {
  label: string;
  tip: React.ReactNode;
}) {
  return (
    <TooltipProvider delayDuration={100}>
      <Tooltip>
        <TooltipTrigger asChild>
          <button
            type="button"
            aria-label={`About: ${label}`}
            className="inline-flex h-3.5 w-3.5 items-center justify-center rounded-full border border-gray-300 text-gray-600 hover:text-gray-900"
          >
            <Info className="h-2.5 w-2.5" />
          </button>
        </TooltipTrigger>
        <TooltipContent
          side="top"
          sideOffset={6}
          className="w-[300px] max-w-[calc(100vw-2rem)] rounded-lg border-gray-200 bg-white px-4 py-3.5 text-[0.82rem] font-normal leading-relaxed text-gray-700 shadow-lg"
        >
          {tip}
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

const EPC_TEXT_ON: Record<string, string> = {
  A: "text-white",
  B: "text-white",
  C: "text-[#2c3510]",
  D: "text-[#4d3f04]",
  E: "text-[#5c3410]",
  F: "text-white",
  G: "text-white",
  Unknown: "text-gray-600",
};

export function EpcChip({
  band,
  size = "md",
}: {
  band: string;
  size?: "sm" | "md";
}) {
  const bg = band === "Unknown" ? "bg-gray-300" : getEpcColorClass(band);
  const dims =
    size === "sm"
      ? "min-w-[19px] h-[19px] text-[0.68rem] rounded-[5px]"
      : "min-w-[24px] h-6 text-sm rounded-md";
  return (
    <span
      className={`inline-flex items-center justify-center px-1.5 font-bold ${bg} ${EPC_TEXT_ON[band] ?? "text-white"} ${dims}`}
    >
      {band}
    </span>
  );
}

/**
 * A signed delta pill. `improved` decides the colour, not the sign —
 * a fall in bills is good, a rise in SAP is good.
 */
export function DeltaPill({
  children,
  improved,
}: {
  children: React.ReactNode;
  improved: boolean;
}) {
  const tone = improved
    ? "text-[#0c6b4a] bg-[#e9f4ef]"
    : "text-[#b91c1c] bg-[#fbeaea]";
  return (
    <span
      className={`inline-flex items-center rounded-[5px] px-1.5 py-0.5 text-[0.67rem] font-bold tabular-nums ${tone}`}
    >
      {children}
    </span>
  );
}

export function Panel({
  title,
  meta,
  action,
  children,
  className = "",
}: {
  title: string;
  meta?: React.ReactNode;
  action?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <section
      className={`flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white ${className}`}
    >
      <header className="flex items-baseline justify-between gap-3 px-5 pt-4">
        <h3 className="text-[0.88rem] font-semibold text-brandblue">
          {title}
          {meta && (
            <span className="ml-2 text-[0.74rem] font-normal text-gray-600">
              {meta}
            </span>
          )}
        </h3>
        {action}
      </header>
      <div className="flex flex-1 flex-col px-5 pb-5 pt-4">{children}</div>
    </section>
  );
}

/** £2,477,000 → "£2.48m"; £850,000 → "£850k". Presentation only. */
export function moneyCompact(amount: number): string {
  const abs = Math.abs(amount);
  const sign = amount < 0 ? "−" : "";
  if (abs >= 1_000_000) return `${sign}£${(abs / 1_000_000).toFixed(2)}m`;
  if (abs >= 1_000) return `${sign}£${Math.round(abs / 1_000)}k`;
  return `${sign}£${Math.round(abs)}`;
}

export function moneyFull(amount: number): string {
  const sign = amount < 0 ? "−" : "";
  return `${sign}£${Math.abs(Math.round(amount)).toLocaleString("en-GB")}`;
}
