import { ArrowDownRight, ArrowUpRight, type LucideIcon } from "lucide-react";
import * as React from "react";
import { Sparkline } from "./Sparkline";
import { cn } from "@/lib/utils";

interface KpiCardProps {
  label: string;
  value: React.ReactNode;
  delta?: { value: string; direction: "up" | "down"; positive: boolean };
  hint?: string;
  icon?: LucideIcon;
  sparkline?: number[];
  accent?: "default" | "success" | "warning" | "destructive" | "accent";
  className?: string;
  style?: React.CSSProperties;
}

/**
 * KPI tile. Five parts top-to-bottom:
 *  1. Eyebrow label + small icon — both uppercased
 *  2. Big number — Geist Mono, the headline
 *  3. Delta + hint row — one is always present
 *  4. Sparkline strip — bottom, hairline-separated
 *  5. (Optional) Accent line on the left edge
 */
export function KpiCard({
  label,
  value,
  delta,
  hint,
  icon: Icon,
  sparkline,
  accent = "default",
  className,
  style,
}: KpiCardProps) {
  const accentColor = {
    default: "hsl(var(--accent))",
    accent: "hsl(var(--accent))",
    success: "hsl(var(--success))",
    warning: "hsl(var(--warning))",
    destructive: "hsl(var(--destructive))",
  }[accent];

  return (
    <div
      style={style}
      className={cn(
        "group relative surface-2 rounded-xl p-5 flex flex-col gap-3 transition-colors hover:bg-muted/20 overflow-hidden",
        className
      )}
    >
      {/* Left accent line — the only "color" element on the card, and
          only present when the value is significant (denial rate,
          etc.). Width 2px so it reads as a marker, not decoration. */}
      <div
        aria-hidden
        className="absolute left-0 top-4 bottom-4 w-px"
        style={{ backgroundColor: accentColor, opacity: 0.45 }}
      />

      <div className="flex items-center justify-between">
        <div className="eyebrow">{label}</div>
        {Icon ? (
          <div className="h-6 w-6 rounded-md bg-muted/50 ring-1 ring-inset ring-border/40 flex items-center justify-center text-muted-foreground">
            <Icon className="h-3 w-3" strokeWidth={1.75} />
          </div>
        ) : null}
      </div>

      <div className="display mono text-[32px] leading-[1.05] text-foreground tracking-tight">
        {value}
      </div>

      <div className="flex items-center gap-2 text-[11px] min-h-[16px]">
        {delta ? (
          <span
            className={cn(
              "inline-flex items-center gap-0.5 font-medium mono",
              delta.positive ? "text-[hsl(var(--success))]" : "text-destructive"
            )}
          >
            {delta.direction === "up" ? (
              <ArrowUpRight className="h-3 w-3" strokeWidth={2} />
            ) : (
              <ArrowDownRight className="h-3 w-3" strokeWidth={2} />
            )}
            {delta.value}
          </span>
        ) : null}
        {hint ? (
          <span className="text-muted-foreground">{hint}</span>
        ) : null}
      </div>

      {sparkline ? (
        <div className="-mx-5 -mb-5 mt-2 pt-3 pb-3 border-t border-border/30">
          <Sparkline values={sparkline} stroke={accentColor} />
        </div>
      ) : null}
    </div>
  );
}
