import * as React from "react";
import { cn } from "@/lib/utils";

/**
 * Financial display primitives — WealthX DS
 *
 * Atomic building blocks for financial data display.
 * Used inside summary report drawers, opportunity detail panels,
 * and any financial data card in the backoffice and frontend.
 *
 * Compose these upward:
 *   Atom  → FinancialDetailField, FinancialLineItem, FinancialLvrBar …
 *   Card  → PropertyCard, DebtCard, ApplicantInfoCard …
 *   Section → PropertyHoldingsGrid, IncomeExpensesGrid …
 *   Drawer → SummaryReportDrawer, OpportunityDetailsDrawer …
 */

const NO_DATA = "—";

// ---------------------------------------------------------------------------
// FinancialSectionLabel
// ---------------------------------------------------------------------------

export interface FinancialSectionLabelProps {
  children: React.ReactNode;
}

/** All-caps muted section heading. Used above major sections inside a financial drawer. */
export function FinancialSectionLabel({
  children,
}: FinancialSectionLabelProps) {
  return (
    <span className="text-label-small uppercase text-muted-foreground">
      {children}
    </span>
  );
}

// ---------------------------------------------------------------------------
// FinancialCardHeader
// ---------------------------------------------------------------------------

export interface FinancialCardHeaderProps {
  children: React.ReactNode;
}

/** All-caps muted label at the top of a card — lighter than SectionLabel. */
export function FinancialCardHeader({ children }: FinancialCardHeaderProps) {
  return (
    <div className="py-2.5">
      <span className="text-label-small uppercase text-muted-foreground">
        {children}
      </span>
    </div>
  );
}

// ---------------------------------------------------------------------------
// FinancialSubsectionTitle
// ---------------------------------------------------------------------------

export interface FinancialSubsectionTitleProps {
  children: React.ReactNode;
}

/** Uppercase bold title inside a card section (e.g. "Card Stats", "Loan Stats"). */
export function FinancialSubsectionTitle({
  children,
}: FinancialSubsectionTitleProps) {
  return (
    <span className="text-label-medium uppercase text-foreground">
      {children}
    </span>
  );
}

// ---------------------------------------------------------------------------
// FinancialDetailField
// ---------------------------------------------------------------------------

export type FinancialDetailFieldVariant = "caption" | "overline" | "footer";

export interface FinancialDetailFieldProps {
  label: string;
  /**
   * The value to display. Accepts any renderable node — formatted strings,
   * badges, or `null`/`undefined` (renders `—`).
   */
  value?: React.ReactNode;
  /**
   * Controls label typography and layout density:
   * - `caption`  (default) — small 2-line min-height label; use in dense grids
   * - `overline` — tighter gap; use in mid-density sections
   * - `footer`   — flex-col layout; use inside `FinancialSubtotalFrame`
   */
  variant?: FinancialDetailFieldVariant;
}

/**
 * Label + value vertical stack — the core data-display cell.
 *
 * | Variant   | Label style            | Use when                          |
 * |-----------|------------------------|-----------------------------------|
 * | caption   | small, 2-line min-h    | Dense grids (default)             |
 * | overline  | overline, tighter gap  | Mid-density sections              |
 * | footer    | overline + flex-col    | SubtotalFrame cells               |
 */
export function FinancialDetailField({
  label,
  value,
  variant = "caption",
}: FinancialDetailFieldProps) {
  if (variant === "footer") {
    return (
      <div className="flex flex-col justify-between min-w-0">
        <span className="text-overline text-muted-foreground">{label}</span>
        <span className="text-label-medium text-foreground mt-1 break-words">
          {value ?? NO_DATA}
        </span>
      </div>
    );
  }

  const labelClass =
    variant === "caption"
      ? "block min-h-[2rem] text-caption text-muted-foreground"
      : "min-h-[1.75rem] text-overline text-muted-foreground";

  return (
    <div
      className={cn(
        "min-w-0",
        variant === "overline" && "flex flex-col gap-0.5",
      )}
    >
      <span className={labelClass}>{label}</span>
      <span className="text-label-medium text-foreground break-words">
        {value ?? NO_DATA}
      </span>
    </div>
  );
}

// ---------------------------------------------------------------------------
// FinancialLineItem
// ---------------------------------------------------------------------------

export interface FinancialLineItemProps {
  label: string;
  /** Formatted value string e.g. "$9,500". Renders `—` when falsy. */
  value?: string | null;
  /**
   * When `true`, renders the value in `text-destructive` (red).
   * Use for expenses, liabilities, or negative cashflow values.
   */
  destructive?: boolean;
}

/**
 * Horizontal row: label on left, value on right.
 * Use `destructive` for expenses, liabilities, or negative cashflow values.
 */
export function FinancialLineItem({
  label,
  value,
  destructive,
}: FinancialLineItemProps) {
  return (
    <div className="flex items-center justify-between gap-4 py-0.5">
      <span className="text-body-small text-foreground">{label}</span>
      <span
        className={cn(
          "text-label-medium whitespace-nowrap text-right",
          destructive ? "text-destructive" : "text-foreground",
        )}
      >
        {value || NO_DATA}
      </span>
    </div>
  );
}

// ---------------------------------------------------------------------------
// FinancialLvrBar
// ---------------------------------------------------------------------------

export interface FinancialLvrBarProps {
  /**
   * LVR percentage (0–100). Drives colour threshold:
   * - `< 70`  → success (low risk)
   * - `70–79` → warning (borderline)
   * - `≥ 80`  → destructive (high risk)
   */
  percent?: number;
  /** Human-readable label rendered on the right e.g. `"56% — Good"`. */
  label?: string;
}

/**
 * LVR progress bar with label.
 *
 * Colour thresholds map to semantic tokens:
 * - < 70%   → success  (low risk)
 * - 70–79%  → warning  (borderline)
 * - ≥ 80%   → destructive (high risk)
 */
export function FinancialLvrBar({
  percent = 56,
  label = "56% — Good",
}: FinancialLvrBarProps) {
  const color =
    percent >= 80 ? "destructive" : percent >= 70 ? "warning" : "success";

  const textClass = {
    success: "text-success",
    warning: "text-warning",
    destructive: "text-destructive",
  }[color];

  const trackClass = {
    success: "bg-success/15",
    warning: "bg-warning/15",
    destructive: "bg-destructive/15",
  }[color];

  const fillClass = {
    success: "bg-success",
    warning: "bg-warning",
    destructive: "bg-destructive",
  }[color];

  return (
    <div className="flex flex-col gap-2">
      <div className="flex items-center justify-between">
        <span className="text-body-small text-muted-foreground">LVR</span>
        <span className={cn("text-label-medium", textClass)}>{label}</span>
      </div>
      <div className={cn("h-2.5 w-full overflow-hidden", trackClass)}>
        <div
          className={cn("h-full", fillClass)}
          style={{ width: `${Math.min(percent, 100)}%` }}
        />
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// FinancialSubtotalFrame
// ---------------------------------------------------------------------------

export interface FinancialSubtotalFrameProps {
  children: React.ReactNode;
}

/**
 * Brand-tinted footer container — sits at the bottom of a property or debt card.
 * Background uses the tenant primary color at 10 % opacity.
 */
export function FinancialSubtotalFrame({
  children,
}: FinancialSubtotalFrameProps) {
  return (
    <div className="mt-auto border-t border-primary/20 bg-primary/10 px-4 py-3">
      {children}
    </div>
  );
}

// ---------------------------------------------------------------------------
// FinancialSubtotalBlock
// ---------------------------------------------------------------------------

export interface FinancialSubtotalBlockProps {
  /**
   * Monthly average value e.g. `"$2,840"`.
   * When provided without `totalLast12Months`, renders right-aligned as a single figure.
   */
  monthlyAverage?: string;
  /** Total for the last 12 months e.g. `"$34,080"`. Only shown when provided alongside `monthlyAverage`. */
  totalLast12Months?: string;
  /** Override the "Monthly Average" label (e.g. `"Net Surplus"`). */
  label?: string;
}

/**
 * One or two summary values inside a SubtotalFrame.
 *
 * - Two values  → Monthly Average (left) + Total Last 12 Months (right)
 * - One value   → right-aligned single figure (pass only `monthlyAverage`)
 * - Custom label → override "Monthly Average" via `label` prop
 */
export function FinancialSubtotalBlock({
  monthlyAverage,
  totalLast12Months,
  label,
}: FinancialSubtotalBlockProps) {
  const isSingle = monthlyAverage && !totalLast12Months;
  return (
    <div
      className={cn(
        "flex flex-row items-center",
        isSingle ? "justify-end" : "justify-between",
      )}
    >
      <div
        className={cn(
          "flex flex-col gap-0.5",
          isSingle ? "text-right" : "text-left",
        )}
      >
        <span className="min-h-[1.75rem] text-overline text-muted-foreground">
          {label ?? "Monthly Average"}
        </span>
        <span className="text-label-medium text-foreground">
          {monthlyAverage ?? NO_DATA}
        </span>
      </div>
      {!isSingle && (
        <div className="flex flex-col gap-0.5 text-right">
          <span className="min-h-[1.75rem] text-overline text-muted-foreground">
            Total Last 12 Months
          </span>
          <span className="text-label-medium text-foreground">
            {totalLast12Months ?? NO_DATA}
          </span>
        </div>
      )}
    </div>
  );
}