"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

/**
 * MiniKpi — micro-stat for inline contexts (inside cards, not page-level).
 *
 * Replaces the ad-hoc local `Stat` components in cash-forecast.tsx,
 * personal-cashflow.tsx, music-landing.tsx with a single primitive.
 *
 * Usage:
 *   <MiniKpiGrid>
 *     <MiniKpi label="Earned" value="80.0 hrs" />
 *     <MiniKpi label="Used" value="12.5 hrs" tone="amber" />
 *     <MiniKpi label="Balance" value="67.5 hrs" tone="emerald" emphasis />
 *   </MiniKpiGrid>
 *
 * `tone` adds a 4×4 colored dot before the label.
 * `emphasis` bumps the value from text-base to text-lg.
 */

export type MiniKpiTone =
  | "neutral"
  | "brand"
  | "emerald"
  | "amber"
  | "violet"
  | "rose";

const DOT_CLASS: Record<MiniKpiTone, string> = {
  neutral: "bg-muted-foreground/40",
  brand: "bg-[var(--sag-brand)]",
  emerald: "bg-emerald-500",
  amber: "bg-amber-500",
  violet: "bg-violet-500",
  rose: "bg-rose-500",
};

export function MiniKpi({
  label,
  value,
  hint,
  tone,
  emphasis = false,
  className,
}: {
  label: React.ReactNode;
  value: React.ReactNode;
  hint?: React.ReactNode;
  tone?: MiniKpiTone;
  emphasis?: boolean;
  className?: string;
}) {
  return (
    <div className={cn("min-w-0", className)}>
      <div className="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-muted-foreground">
        {tone && (
          <span
            aria-hidden="true"
            className={cn("h-2 w-2 shrink-0 rounded-full", DOT_CLASS[tone])}
          />
        )}
        <span className="truncate">{label}</span>
      </div>
      <div
        className={cn(
          "font-semibold tabular-nums text-foreground",
          emphasis ? "text-lg" : "text-base",
        )}
      >
        {value}
      </div>
      {hint !== undefined && (
        <div className="mt-0.5 text-[11px] text-muted-foreground">{hint}</div>
      )}
    </div>
  );
}

export function MiniKpiGrid({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4",
        className,
      )}
    >
      {children}
    </div>
  );
}