import React from "react";
import { Info } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "./card";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "./tooltip";
import { cn } from "@/lib/utils";
import { formatCurrencyAbbrev } from "@/lib/format-currency";

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

export interface AssetsLiabilitiesSideCardProps {
  /** Total liabilities in dollars (positive number — displayed as negative) */
  liabilities: number;
  /** Total cash assets in dollars */
  assets: number;
  /** Net position in dollars (may be negative) */
  netPosition: number;
  /** Total property value in dollars */
  propertyValue: number;
  title?: string;
  /** Tooltip text explaining the snapshot context */
  tooltipText?: string;
  className?: string;
}

// ─── Internal types ───────────────────────────────────────────────────────────

interface MetricCell {
  label: string;
  value: number;
  /** When true, value is prefixed with "-" and coloured with brand-secondary */
  negative?: boolean;
}

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

export function AssetsLiabilitiesSideCard({
  liabilities,
  assets,
  netPosition,
  propertyValue,
  title = "Assets & Liabilities",
  tooltipText = "Current snapshot of your financial position. These values are not affected by the date range filter.",
  className,
}: AssetsLiabilitiesSideCardProps) {
  const cells: MetricCell[] = [
    { label: "Total Liabilities", value: liabilities, negative: true },
    { label: "Total Cash Assets", value: assets },
    { label: "Net Position", value: netPosition },
    { label: "Total Property Value", value: propertyValue },
  ];

  return (
    <Card className={cn("flex flex-col", className)}>
      <CardHeader className="pb-3">
        <div className="flex items-center gap-1">
          <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
            {title}
          </CardTitle>
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger
                render={
                  <Info
                    size={13}
                    className="cursor-help text-muted-foreground"
                    aria-label="About this data"
                  />
                }
              />
              <TooltipContent className="max-w-56">
                {tooltipText}
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        </div>
      </CardHeader>

      <CardContent className="pb-5">
        {/* 2×2 grid — matches frontend layout */}
        <div className="grid grid-cols-2 gap-1.5">
          {cells.map((cell) => {
            const displayValue = `${cell.negative ? "-" : ""}${formatCurrencyAbbrev(Math.abs(cell.value))}`;
            const fullValue = `${cell.negative ? "-" : ""}$${Math.abs(cell.value).toLocaleString()}`;

            return (
              <div key={cell.label} className="bg-muted p-4">
                <p className="text-xs text-muted-foreground font-medium mb-1.5">
                  {cell.label}
                </p>
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger
                      render={
                        <span
                          className={cn(
                            "text-lg font-bold cursor-default",
                            cell.negative
                              ? "text-brand-secondary"
                              : "text-primary",
                          )}
                        >
                          {displayValue}
                        </span>
                      }
                    />
                    <TooltipContent>{fullValue}</TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              </div>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}