/**
 * StudioStatTile — pastel hero stat tile (Sorbet Studio).
 *
 * The tile's pastel fill + matching sparkline tone are that metric's identity;
 * up/down semantics live only in the delta pill's text color, never the fill.
 * Drop-in beside DashboardStatCard: same title/value/subtitle/trend/onClick
 * contract, plus a `tone` and optional `spark` series.
 */
import React from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";
import { STUDIO_COLORS, STUDIO_TILES } from "@/lib/dashboard/designTokens";
import Sparkline from "./Sparkline";

interface StudioStatTileProps {
  title: string;
  value: React.ReactNode;
  valuePrefix?: string;
  valueSuffix?: string;
  subtitle?: React.ReactNode;
  trend?: { value: number; moreIsBetter?: boolean };
  tone: keyof typeof STUDIO_TILES;
  /** Featured tile: larger numeral + area-filled sparkline */
  featured?: boolean;
  spark?: number[];
  sparkTitle?: string;
  onClick?: () => void;
  loading?: boolean;
}

const StudioStatTile: React.FC<StudioStatTileProps> = ({
  title,
  value,
  valuePrefix,
  valueSuffix,
  subtitle,
  trend,
  tone,
  featured = false,
  spark,
  sparkTitle = "Last 30 days",
  onClick,
  loading = false,
}) => {
  const t = STUDIO_TILES[tone];

  const showTrend = trend != null && Math.abs(trend.value) >= 0.1;
  const isGood = trend
    ? (trend.moreIsBetter ?? true) === trend.value > 0
    : true;

  return (
    <div
      className={cn(
        "rounded-[14px] px-3.5 py-3 text-left transition-all",
        onClick && "cursor-pointer hover:brightness-[1.03] hover:shadow-sm"
      )}
      style={{ background: t.fill, color: STUDIO_COLORS.ink }}
      onClick={onClick}
      role={onClick ? "button" : undefined}
      tabIndex={onClick ? 0 : undefined}
      onKeyDown={
        onClick
          ? (e) => {
              if (e.key === "Enter" || e.key === " ") {
                e.preventDefault();
                onClick();
              }
            }
          : undefined
      }
    >
      <div className="text-[11px] font-semibold" style={{ color: "rgba(43,41,37,.62)" }}>
        {title}
      </div>

      {loading ? (
        <>
          <Skeleton className="mt-1.5 h-7 w-24 bg-white/60" />
          <Skeleton className="mt-2 h-4 w-32 bg-white/50" />
        </>
      ) : (
        <>
          <div className="mt-0.5 flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
            <span
              className={cn(
                "font-bold tracking-tight tabular-nums",
                featured ? "text-[26px]" : "text-[22px]"
              )}
            >
              {valuePrefix}
              {value}
              {valueSuffix}
            </span>
            {showTrend && (
              <span
                className="rounded-full px-2 py-0.5 text-[10.5px] font-bold"
                style={{
                  background: "rgba(255,255,255,.78)",
                  color: isGood ? STUDIO_COLORS.up : STUDIO_COLORS.down,
                }}
              >
                {trend.value > 0 ? "↑" : "↓"} {Math.abs(trend.value).toFixed(1)}%
              </span>
            )}
          </div>
          {subtitle && (
            <div className="mt-0.5 text-[11.5px]" style={{ color: "rgba(43,41,37,.6)" }}>
              {subtitle}
            </div>
          )}
        </>
      )}

      {spark && spark.length > 1 && !loading && (
        <div className={cn("mt-2", featured ? "h-9" : "h-7")}>
          <Sparkline
            data={spark}
            color={t.spark}
            fill={featured ? t.sparkFill : undefined}
            title={sparkTitle}
          />
        </div>
      )}
    </div>
  );
};

export default StudioStatTile;
