"use client";

import type { ReactNode } from "react";
import { ArrowDown, ArrowRight, ArrowUp } from "lucide-react";

type KPITone = "default" | "primary" | "accent" | "warning" | "danger";

type KPIStatProps = {
  /** Eyebrow label above the value (e.g. "Today's Orders") */
  label: string;
  /** The primary value to display. Accepts a node so callers can pass formatted strings, JSX, etc. */
  value: ReactNode;
  /** Optional icon element (typically a lucide-react icon) shown in the leading tile. */
  icon?: ReactNode;
  /** Controls the icon tile's background + icon color. Defaults to "default". */
  tone?: KPITone;
  /** Optional trend indicator rendered next to the value. */
  trend?: { value: string; direction: "up" | "down" | "flat" };
  /** Extra class names appended to the card. */
  className?: string;
};

// Tone -> icon-tile background / icon color. Pulled from --admin-* tokens
// introduced in the Phase 1 palette unification. No hardcoded hex values.
const toneStyles: Record<KPITone, { bg: string; fg: string }> = {
  default: { bg: "var(--admin-bg-subtle)", fg: "var(--admin-text-secondary)" },
  primary: { bg: "var(--admin-primary-soft)", fg: "var(--admin-primary)" },
  accent: { bg: "var(--admin-accent-soft)", fg: "var(--admin-accent)" },
  warning: { bg: "var(--admin-warning-soft)", fg: "var(--admin-warning)" },
  danger: { bg: "var(--admin-danger-soft)", fg: "var(--admin-danger)" },
};

// Trend direction -> icon + color. "up" reads as positive (primary),
// "down" as negative (danger), "flat" as neutral.
const trendStyles: Record<"up" | "down" | "flat", { Icon: typeof ArrowUp; color: string }> = {
  up: { Icon: ArrowUp, color: "var(--admin-primary)" },
  down: { Icon: ArrowDown, color: "var(--admin-danger)" },
  flat: { Icon: ArrowRight, color: "var(--admin-text-muted)" },
};

/**
 * KPIStat — compact metric card for admin surfaces.
 *
 * Extracted from the inline pattern previously duplicated four times in
 * `DashboardClient.tsx`. Reuses the `.admin-stat-card*` classes from
 * `admin-design-system.css` for the shell, then applies tone-aware
 * background/foreground via inline `var(--admin-*)` styles.
 */
export default function KPIStat({
  label,
  value,
  icon,
  tone = "default",
  trend,
  className = "",
}: KPIStatProps) {
  const { bg, fg } = toneStyles[tone];

  return (
    <div className={`admin-stat-card ${className}`.trim()}>
      <div className="admin-stat-card-inner">
        {icon && (
          <div
            className="admin-stat-icon"
            style={{ backgroundColor: bg, color: fg }}
          >
            {icon}
          </div>
        )}
        <div className="admin-stat-body">
          <span className="admin-stat-label">{label}</span>
          <div className="flex items-baseline gap-2">
            <span className="admin-stat-value">{value}</span>
            {trend && <TrendIndicator trend={trend} />}
          </div>
        </div>
      </div>
    </div>
  );
}

function TrendIndicator({
  trend,
}: {
  trend: { value: string; direction: "up" | "down" | "flat" };
}) {
  const { Icon, color } = trendStyles[trend.direction];
  return (
    <span
      className="inline-flex items-center gap-0.5 text-[0.6875rem] font-semibold"
      style={{ color }}
    >
      <Icon className="h-3 w-3" strokeWidth={2.25} aria-hidden="true" />
      {trend.value}
    </span>
  );
}