"use client"

import { CircleHelp } from "lucide-react"

import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import { EM_DASH, formatAccounting } from "@/lib/format/numbers"
import { cn } from "@/lib/utils"

function money(value: number): string {
  return formatAccounting(value, EM_DASH)
}

/**
 * “?” help for the PIB summary strip — same CircleHelp + Tooltip pattern as
 * ConvertedTotalValueWithTooltip (Accumulator / Structured Product).
 */
export function PibSummaryCalcHelp({
  currency,
  totalAssets,
  assigned,
  inferred,
  potential,
  loanLiability,
  aumMode,
  className,
}: {
  currency: string
  totalAssets: number
  assigned: number
  inferred: number
  potential: number
  loanLiability: number
  aumMode: "gross" | "net"
  className?: string
}) {
  const totalLabel = aumMode === "net" ? "Net assets advised" : "Total assets advised"

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <button
          type="button"
          className={cn(
            "inline-flex size-5 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
            className
          )}
          aria-label="How these figures are calculated"
        >
          <CircleHelp className="size-3.5" />
        </button>
      </TooltipTrigger>
      <TooltipContent
        side="bottom"
        align="start"
        className="max-w-[340px] flex-col items-start gap-0 px-3 py-2.5 text-left text-xs leading-relaxed"
      >
        <div className="w-full space-y-2.5">
          <p className="font-medium">{totalLabel}</p>
          <div className="space-y-1 opacity-90">
            <p>
              Assigned + Inferred
              {aumMode === "net" ? " + Loan / Overdraft" : ""}
            </p>
            <p className="font-mono tabular-nums">
              {money(assigned)} + {money(inferred)}
              {aumMode === "net" ? ` + ${money(loanLiability)}` : ""}
            </p>
            <p className="font-mono font-semibold tabular-nums">
              = {currency} {money(totalAssets)}
            </p>
          </div>

          <div className="w-full space-y-1 border-t border-background/25 pt-2">
            <p>
              <span className="font-medium">Potential</span>{" "}
              <span className="font-mono tabular-nums">{money(potential)}</span>
            </p>
            <p className="opacity-90">
              Structured Products on the Potential tab. Shown for reference — not included in
              Assigned, Inferred, or {totalLabel.toLowerCase()}.
            </p>
          </div>

          <div className="w-full space-y-1 border-t border-background/25 pt-2">
            <p>
              <span className="font-medium">Loan / Overdraft</span>{" "}
              <span className="font-mono tabular-nums">{money(loanLiability)}</span>
            </p>
            <p className="opacity-90">
              {aumMode === "net"
                ? "Deducted because AUM is set to Net (same as Overall Summary)."
                : "Excluded from Gross AUM (same as Overall Summary)."}
            </p>
          </div>
        </div>
      </TooltipContent>
    </Tooltip>
  )
}