import React from "react";
import { TrendingUp, TrendingDown, Minus, Plus } from "lucide-react";
import { cn } from "@/lib/utils";
import { formatCurrencyAbbrev } from "@/lib/format-currency";
import { Button } from "./button";

// ─── BorrowCapacityItem ───────────────────────────────────────────────────────
/**
 * Displays a single borrowing capacity result field.
 * Shows a muted label, optional sub-label, and the formatted value below.
 *
 * Used inside scenario detail cards on the Borrowing Capacity page.
 */

export interface BorrowCapacityItemProps {
  /** Label above the value (e.g. "Purchase Price") */
  title?: string;
  /** Optional secondary descriptor below the title */
  subTitle?: string;
  /** Pre-formatted value string to display (e.g. "$500,000") */
  value?: string;
  className?: string;
}

export function BorrowCapacityItem({
  title,
  subTitle,
  value,
  className,
}: BorrowCapacityItemProps) {
  if (!title && !value) {
    return <div className={cn("min-h-[52px]", className)} aria-hidden />;
  }

  return (
    <div className={cn("flex flex-col gap-1", className)}>
      {title && (
        <span className="block min-h-[2.5rem] text-sm text-muted-foreground">
          {title}
        </span>
      )}
      {value && (
        <span className="text-lg font-semibold text-foreground">{value}</span>
      )}
      {subTitle && (
        <span className="text-sm italic text-muted-foreground/70">
          {subTitle}
        </span>
      )}
    </div>
  );
}

// ─── StatisticItem ────────────────────────────────────────────────────────────
/**
 * Shows a financial trend statistic over a lookback period.
 * Displays a heading ("Last N months"), the absolute dollar change,
 * and the percentage change with a direction icon.
 *
 * Trend colors: positive → primary, flat/negative → muted.
 *
 * Used in the statistics summary row of the Borrowing Capacity page.
 */

export interface StatisticItemProps {
  /** Number of months to look back (default: 3) */
  loopBackMonths?: number;
  /** Absolute dollar amount of change */
  amountChange?: number;
  /** Percentage change — positive = up, negative = down, 0 = flat */
  amountChangePercentage?: number;
  className?: string;
}

export function StatisticItem({
  loopBackMonths = 3,
  amountChange = 0,
  amountChangePercentage = 0,
  className,
}: StatisticItemProps) {
  const isPositive = amountChangePercentage > 0;
  const isNegative = amountChangePercentage < 0;
  const TrendIcon = isPositive ? TrendingUp : isNegative ? TrendingDown : Minus;
  const trendClassName = isPositive ? "text-primary" : "text-muted-foreground";
  const amountPrefix = isPositive ? "+" : isNegative ? "−" : "";

  return (
    <div
      className={cn(
        "flex flex-col justify-center gap-2 border border-border p-3",
        className,
      )}
    >
      <span className="text-sm text-muted-foreground">
        Last {loopBackMonths} month{loopBackMonths !== 1 ? "s" : ""}
      </span>
      <div className="flex items-center justify-between gap-2">
        <span className="text-xl font-semibold tabular-nums text-foreground">
          {amountPrefix}
          {formatCurrencyAbbrev(Math.abs(amountChange), 2)}
        </span>
        <span
          className={cn(
            "flex items-center gap-1 text-sm font-medium tabular-nums",
            trendClassName,
          )}
        >
          <TrendIcon size={14} className="shrink-0" />
          {Math.abs(amountChangePercentage).toFixed(1)}%
        </span>
      </div>
    </div>
  );
}

// ─── LoanToValueRatio ─────────────────────────────────────────────────────────
/**
 * Displays a Loan-to-Value Ratio (LVR) as a percentage with a color-coded
 * risk indicator and an optional equity/debt breakdown bar.
 *
 * Risk tiers:
 *   ≤ 60%  → green  (safe)
 *   61–80% → warning (moderate)
 *   > 80%  → destructive (high)
 *
 * Used in the LVR settings panel of the Borrowing Capacity page.
 */

export interface LoanToValueRatioProps {
  /** LVR as a whole number percentage (0–100) */
  lvr: number;
  /** Optional debt amount — shown below the bar when provided */
  debtAmount?: number;
  /** Optional equity amount — shown below the bar when provided */
  equityAmount?: number;
  className?: string;
}

// Thresholds match major Australian lender risk bands
const LVR_TIER_STYLES = {
  safe: { text: "text-success", bar: "bg-success" },
  moderate: { text: "text-warning", bar: "bg-warning" },
  high: { text: "text-destructive", bar: "bg-destructive" },
} as const;

export function LoanToValueRatio({
  lvr,
  debtAmount,
  equityAmount,
  className,
}: LoanToValueRatioProps) {
  const clamped = Math.min(100, Math.max(0, lvr));
  const tier = clamped <= 60 ? "safe" : clamped <= 80 ? "moderate" : "high";
  const { text: lvrTextColor, bar: lvrBarColor } = LVR_TIER_STYLES[tier];

  return (
    <div className={cn("flex flex-col items-center gap-2", className)}>
      <div className="flex flex-col items-center leading-none">
        <span className={cn("text-3xl font-bold tabular-nums", lvrTextColor)}>
          {clamped.toFixed(0)}%
        </span>
        <span className="mt-1 text-sm font-semibold uppercase tracking-widest text-muted-foreground">
          LVR
        </span>
      </div>

      {/* Debt-vs-equity bar */}
      <div className="h-1.5 w-full overflow-hidden bg-muted" aria-hidden>
        <div
          className={cn("h-full transition-all", lvrBarColor)}
          style={{ width: `${clamped}%` }}
        />
      </div>

      {(debtAmount !== undefined || equityAmount !== undefined) && (
        <div className="flex w-full items-center justify-between text-sm text-muted-foreground">
          {debtAmount !== undefined && (
            <span>Debt {formatCurrencyAbbrev(debtAmount, 1)}</span>
          )}
          {equityAmount !== undefined && (
            <span>Equity {formatCurrencyAbbrev(equityAmount, 1)}</span>
          )}
        </div>
      )}
    </div>
  );
}

// ─── AddScenarioButton ────────────────────────────────────────────────────────
/**
 * A dashed-border CTA button for adding a new borrowing scenario.
 * Renders as a full-width <button> with a label and Plus icon.
 * Supports a disabled state that removes interactivity.
 *
 * Used on the Borrowing Capacity page to open the "add / compare scenario" flow.
 */

export interface AddScenarioButtonProps {
  /** Button label (default: "Add New Scenario") */
  title?: string;
  /** Disables the button */
  disabled?: boolean;
  /** Click handler */
  onClick?: () => void;
  className?: string;
}

export function AddScenarioButton({
  title = "Add New Scenario",
  disabled = false,
  onClick,
  className,
}: AddScenarioButtonProps) {
  return (
    <Button
      variant="outline"
      disabled={disabled}
      onClick={onClick}
      className={cn("w-full justify-between", className)}
    >
      <span>{title}</span>
      <Plus size={18} className="shrink-0" />
    </Button>
  );
}