// ---------------------------------------------------------------------------
// DominantKpiCard — the headline KPI tile.
//
// One KPI gets the dominant slot on the dashboard. It carries:
//   - a thicker accent rule on the left edge
//   - an oversized Instrument Serif number
//   - a wide sparkline (not a 28px afterthought)
//   - delta + hint row in mono
// Same paper variant as the smaller KpiCard. Designed to live INSIDE
// the statement, next to a column of 4 smaller readouts.
// ---------------------------------------------------------------------------

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

interface DominantKpiCardProps {
  label: string;
  icon?: LucideIcon;
  /** Pre-rendered value node. Required unless `rawValue`+`format`
   *  are both supplied, in which case the AnimatedNumber is used. */
  value?: React.ReactNode;
  /** Used when value is a plain number — drives the AnimatedNumber. */
  rawValue?: number;
  /** Formatter for the AnimatedNumber. */
  format?: (n: number) => string;
  delta?: { value: string; direction: "up" | "down"; positive: boolean };
  hint?: string;
  sparkline?: number[];
  /** Sparkline stroke colour. Defaults to accent. */
  sparklineColor?: string;
  /** Accent rail colour (left edge). Defaults to accent. */
  accent?: string;
  className?: string;
  style?: React.CSSProperties;
}

export function DominantKpiCard({
  label,
  icon: Icon,
  value,
  rawValue,
  format,
  delta,
  hint,
  sparkline,
  sparklineColor = "hsl(var(--accent))",
  accent = "hsl(var(--accent))",
  className,
  style,
}: DominantKpiCardProps) {
  const computedStyle: React.CSSProperties = {
    backgroundColor: "hsl(var(--surface))",
    boxShadow:
      "inset 0 1px 0 0 hsl(0 0% 100% / 0.45), 0 1px 0 0 hsl(30 14% 22% / 0.06), inset 3px 0 0 0 hsl(0 0% 100% / 0.4)",
    ...style,
  };

  return (
    <div
      style={computedStyle}
      className={cn(
        "relative rounded-xl p-6 flex flex-col gap-4 overflow-hidden",
        "border border-[hsl(30_14%_14%/_0.10)] hover:bg-[hsl(36_22%_92%)] transition-colors",
        className
      )}
    >
      {/* Accent rail on the left — thicker than the small cards */}
      <div
        aria-hidden
        className="absolute left-0 top-5 bottom-5 w-[3px] rounded-r-sm"
        style={{ backgroundColor: accent, opacity: 0.85 }}
      />

      {/* Header row: label + icon */}
      <div className="flex items-center justify-between">
        <div
          className="eyebrow flex items-center gap-2"
          style={{ color: "hsl(var(--surface-ink-3))" }}
        >
          <span>{label}</span>
          {hint ? (
            <span
              className="mono normal-case tracking-normal"
              style={{
                color: "hsl(var(--surface-ink-3))",
                fontSize: 10,
                opacity: 0.7,
              }}
            >
              · {hint}
            </span>
          ) : null}
        </div>
        {Icon ? (
          <div
            className="h-7 w-7 rounded-md flex items-center justify-center"
            style={{
              backgroundColor: "hsl(36 22% 90%)",
              boxShadow: "inset 0 0 0 1px hsl(30 14% 22% / 0.08)",
              color: "hsl(var(--surface-ink-2))",
            }}
          >
            <Icon className="h-3.5 w-3.5" strokeWidth={1.75} />
          </div>
        ) : null}
      </div>

      {/* Big number */}
      <div
        className="display tabular-nums tracking-[-0.04em]"
        style={{
          color: "hsl(var(--surface-ink))",
          fontSize: "clamp(48px, 6vw, 72px)",
          lineHeight: 0.92,
          fontWeight: 400,
        }}
      >
        {rawValue !== undefined && format ? (
          <AnimatedNumber value={rawValue} format={format} />
        ) : (
          value
        )}
      </div>

      {/* Delta + sparkline */}
      <div className="flex items-end justify-between gap-4">
        <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}
          <span
            className="mono uppercase tracking-[0.14em]"
            style={{
              color: "hsl(var(--surface-ink-3))",
              fontSize: 10,
            }}
          >
            vs last 6 mo
          </span>
        </div>

        {sparkline ? (
          <div className="flex-1 max-w-[240px]">
            <Sparkline values={sparkline} stroke={sparklineColor} />
          </div>
        ) : null}
      </div>
    </div>
  );
}