"use client";

/**
 * StatCard — the canonical KPI card used across every admin page.
 *
 * Layout: small uppercase label + icon (top), large tabular number
 * (middle), trend badge (top-right), optional sparkline filling the
 * card's bottom band. The sparkline mode reads as a Datadog-style
 * card; the no-sparkline mode is the simple counter variant.
 *
 * Sizes:
 *   default — 2-3 per row, value is text-3xl
 *   compact — 4-6 per row, value is text-2xl
 */

import type { ReactNode } from "react";
import type { LucideIcon } from "lucide-react";
import { Sparkline } from "./sparkline";
import { TrendBadge } from "./trend-badge";

interface Props {
  label: string;
  value: ReactNode;
  /** Optional small line above the value, e.g. "Last 30d". */
  hint?: string;
  /** Period-over-period delta. Pass null for "no comparison". */
  trendPct?: number | null;
  /** Sparkline data — when present, renders as a subtle background
   *  area chart filling the bottom of the card. */
  sparkline?: number[] | null;
  /** Sparkline + accent color. Defaults to violet (brand). */
  color?: string;
  /** Optional icon rendered next to the label. */
  icon?: LucideIcon;
  /** Compact variant for cards in 4-6 column grids. */
  variant?: "default" | "compact";
  /** Override for the value's tabular-num color — e.g. emerald for
   *  positive-only metrics like Conversions. */
  valueClass?: string;
  /** When true, render the sparkline at full-height as the card's
   *  hero background instead of the bottom strip. */
  heroSparkline?: boolean;
}

const ACCENTS = {
  default: "text-slate-900",
  emerald: "text-emerald-600",
  rose:    "text-rose-600",
  amber:   "text-amber-600",
  blue:    "text-blue-600",
  violet:  "text-violet-600",
};

export function StatCard({
  label,
  value,
  hint,
  trendPct,
  sparkline,
  color = "#6366F1",
  icon: Icon,
  variant = "default",
  valueClass,
  heroSparkline = false,
}: Props) {
  const valueSize = variant === "compact" ? "text-2xl" : "text-3xl";
  const finalValueClass = valueClass ?? ACCENTS.default;

  return (
    <div className="relative bg-white border border-slate-100 rounded-xl shadow-sm overflow-hidden">
      {/* Hero sparkline — fills the entire card as a backdrop */}
      {heroSparkline && sparkline && sparkline.length > 0 && (
        <div className="absolute inset-x-0 bottom-0 h-3/4 opacity-40 pointer-events-none">
          <Sparkline points={sparkline} color={color} variant="area" />
        </div>
      )}

      <div className="relative px-4 py-3.5">
        <div className="flex items-center justify-between mb-1">
          <div className="flex items-center gap-1.5">
            {Icon && <Icon className="w-3 h-3 text-slate-400" />}
            <p className="text-[10px] font-semibold uppercase tracking-widest text-slate-500">
              {label}
            </p>
          </div>
          {trendPct !== undefined && <TrendBadge pct={trendPct} />}
        </div>

        <p className={`${valueSize} font-semibold tabular-nums leading-tight ${finalValueClass}`}>
          {value}
        </p>

        {hint && <p className="text-[11px] text-slate-400 mt-0.5">{hint}</p>}

        {/* Bottom-strip sparkline (when not hero) */}
        {!heroSparkline && sparkline && sparkline.length > 0 && (
          <div className="mt-2 h-6">
            <Sparkline points={sparkline} color={color} variant="area" />
          </div>
        )}
      </div>
    </div>
  );
}
