import React from "react";
import {
  TrendingUp,
  Home,
  ShoppingBag,
  CreditCard,
  PiggyBank,
  TrendingDown,
} from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "./card";
import { InfoTooltip } from "./info-tooltip";
import { cn } from "@/lib/utils";
import { formatCurrency } from "@/lib/format-currency";

// ─── Types ───────────────────────────────────────────────────────────────────

// The budget-bucket taxonomy (mirrors the FE dashboard card): Total Income at the
// top, then where it goes — Essentials, Lifestyle: Discretionary, Debt Repayments —
// and whatever is left as Surplus & Future Savings (or Over Spending if consumption
// exceeds income).
export type IncomingOutgoingsLabel =
  | "Total Income"
  | "Essentials"
  | "Lifestyle: Discretionary"
  | "Debt Repayments"
  | "Surplus & Future Savings"
  | "Over Spending";

export interface IncomingOutgoingsItem {
  label: IncomingOutgoingsLabel;
  /** Dollar value */
  value: number;
  /** CSS color string for the bar fill and icon */
  color: string;
  /** CSS color string for the bar track background */
  bgColor: string;
  /** Bar fill width as a percentage 0–100 */
  pct: number;
  /**
   * Optional "how is this calculated" explainer shown as an info-icon tooltip
   * next to the label (e.g. why Debt Repayments don't add up exactly to income).
   */
  tooltip?: string;
}

export interface IncomingOutgoingsCardProps {
  items: IncomingOutgoingsItem[];
  title?: string;
  /** Optional whole-card explainer shown as an info-icon tooltip next to the title. */
  tooltip?: string;
  className?: string;
}

// ─── Icon map ─────────────────────────────────────────────────────────────────

const ICON_MAP: Record<
  IncomingOutgoingsLabel,
  React.ComponentType<{
    size?: number;
    className?: string;
    style?: React.CSSProperties;
  }>
> = {
  "Total Income": TrendingUp,
  Essentials: Home,
  "Lifestyle: Discretionary": ShoppingBag,
  "Debt Repayments": CreditCard,
  "Surplus & Future Savings": PiggyBank,
  "Over Spending": TrendingDown,
};

// ─── Component ────────────────────────────────────────────────────────────────

export function IncomingOutgoingsCard({
  items,
  title = "Incoming and outgoings",
  tooltip,
  className,
}: IncomingOutgoingsCardProps) {
  if (!items?.length) return null;

  return (
    <Card className={cn("h-full", className)}>
      <CardHeader className="pb-2">
        <CardTitle className="flex items-center gap-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
          {title}
          {tooltip && <InfoTooltip text={tooltip} />}
        </CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-5">
        {items.map((item) => {
          const Icon = ICON_MAP[item.label];
          return (
            <div key={item.label} className="flex flex-col gap-1">
              <div className="flex items-center justify-between gap-2">
                <span className="flex items-center gap-1.5 text-sm font-medium text-foreground">
                  {Icon && (
                    <Icon
                      size={16}
                      className="shrink-0"
                      style={{ color: item.color }}
                    />
                  )}
                  {item.label}
                  {item.tooltip && <InfoTooltip text={item.tooltip} />}
                </span>
                <span className="shrink-0 text-sm font-semibold text-foreground">
                  {formatCurrency(item.value)}
                </span>
              </div>
              <div
                className="h-1.5 w-full overflow-hidden"
                style={{ background: item.bgColor }}
                aria-hidden="true"
              >
                <div
                  className="h-full transition-all"
                  style={{
                    background: item.color,
                    width: `${Math.min(100, Math.max(0, item.pct))}%`,
                  }}
                />
              </div>
            </div>
          );
        })}
      </CardContent>
    </Card>
  );
}