import type { LucideIcon } from "lucide-react"
import { ArrowDownRight, ArrowUpRight } from "lucide-react"
import { cn } from "@/lib/utils"

type Tone = "default" | "gold" | "success" | "warning" | "danger" | "info" | "processing"

const toneStyles: Record<Tone, { icon: string; accent: string }> = {
  default: { icon: "bg-muted text-muted-foreground", accent: "" },
  gold: { icon: "bg-gold-100 text-gold-700", accent: "" },
  success: { icon: "bg-emerald-100 text-emerald-700", accent: "" },
  warning: { icon: "bg-amber-100 text-amber-700", accent: "" },
  danger: { icon: "bg-red-100 text-red-700", accent: "" },
  info: { icon: "bg-slate-100 text-slate-700", accent: "" },
  processing: { icon: "bg-blue-100 text-blue-700", accent: "" },
}

export type KpiCardProps = {
  label: string
  value: string
  unit?: string
  hint?: string
  delta?: { value: string; trend: "up" | "down" | "flat"; tone?: "positive" | "negative" | "neutral" }
  icon?: LucideIcon
  tone?: Tone
  accent?: boolean
  className?: string
}

export function KpiCard({
  label,
  value,
  unit,
  hint,
  delta,
  icon: Icon,
  tone = "default",
  accent,
  className,
}: KpiCardProps) {
  const deltaTone =
    delta?.tone ?? (delta?.trend === "up" ? "positive" : delta?.trend === "down" ? "negative" : "neutral")
  const deltaClasses =
    deltaTone === "positive"
      ? "text-emerald-600 bg-emerald-50"
      : deltaTone === "negative"
        ? "text-red-600 bg-red-50"
        : "text-muted-foreground bg-muted"

  return (
    <div
      className={cn(
        "relative rounded-xl border border-border bg-card p-5 transition-all hover:shadow-sm hover:border-gold-200",
        accent && "border-gold-300 bg-gradient-to-br from-gold-50/50 to-card",
        className,
      )}
    >
      {accent && <div className="absolute top-0 right-4 left-4 h-[2px] bg-gradient-to-l from-transparent via-gold-400 to-transparent" />}
      <div className="flex items-start justify-between gap-3">
        <div className="flex flex-col gap-1">
          <span className="text-[11.5px] font-medium uppercase tracking-wider text-muted-foreground">
            {label}
          </span>
        </div>
        {Icon && (
          <div className={cn("flex h-9 w-9 items-center justify-center rounded-lg", (toneStyles[tone as Tone] || toneStyles.default).icon)}>
            <Icon className="h-[17px] w-[17px]" strokeWidth={1.75} />
          </div>
        )}
      </div>

      <div className="mt-3 flex items-baseline gap-1.5 tabular-nums">
        <span className="text-[26px] font-bold tracking-tight text-foreground leading-none">{value}</span>
        {unit && <span className="text-[13px] font-medium text-muted-foreground">{unit}</span>}
      </div>

      <div className="mt-3 flex items-center gap-2 min-h-[20px]">
        {delta && (
          <span
            className={cn(
              "inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-[11px] font-semibold tabular-nums",
              deltaClasses,
            )}
          >
            {delta.trend === "up" ? (
              <ArrowUpRight className="h-3 w-3" />
            ) : delta.trend === "down" ? (
              <ArrowDownRight className="h-3 w-3" />
            ) : null}
            {delta.value}
          </span>
        )}
        {hint && <span className="text-[11.5px] text-muted-foreground">{hint}</span>}
      </div>
    </div>
  )
}
