"use client";

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

export type TrendDirection = "up" | "down" | "neutral";

export interface SparklinePoint {
  value: number;
}

export interface MetricCardProps extends React.HTMLAttributes<HTMLDivElement> {
  /** 小号大写字母标签（如 "TOTAL JOBS TODAY"） */
  label: string;
  /** 主数字/值 */
  value: string | number;
  /** 次要描述，显示在主值下方 */
  subValue?: string;
  /** 趋势方向 */
  trend?: TrendDirection;
  /** 趋势百分比，如 "+18%" */
  trendValue?: string;
  /** 趋势说明文字，如 "vs last month" */
  trendLabel?: string;
  /** sparkline 数据点 */
  sparklineData?: SparklinePoint[];
  /** 图标（可选的左侧小图标） */
  icon?: React.ReactNode;
  /** 卡片尺寸 */
  size?: "sm" | "default" | "lg";
}

const MetricCard = React.forwardRef<HTMLDivElement, MetricCardProps>(
  (
    {
      className,
      label,
      value,
      subValue,
      trend = "neutral",
      trendValue,
      trendLabel,
      sparklineData,
      icon,
      size = "default",
      ...props
    },
    ref
  ) => {
    const paddingClass = {
      sm: "p-4",
      default: "p-5",
      lg: "p-6",
    }[size];

    const valueClass = {
      sm: "text-2xl",
      default: "text-3xl",
      lg: "text-4xl",
    }[size];

    return (
      <div
        ref={ref}
        className={cn(
          "bg-white rounded-xl border border-gray-200",
          className
        )}
        {...props}
      >
        <div className={cn("flex items-stretch", paddingClass)}>
          {/* Left color bar */}
          <div
            className={cn(
              "w-1 shrink-0 rounded-full mr-4",
              trend === "up" && "bg-emerald-500",
              trend === "down" && "bg-red-500",
              trend === "neutral" && "bg-gray-300"
            )}
          />

          {/* Content */}
          <div className="flex-1 min-w-0">
            {/* Label row */}
            <div className="flex items-center justify-between">
              <p className="text-sm font-medium text-gray-500">
                {label}
              </p>
              {trendValue && (
                <span
                  className={cn(
                    "text-xs font-medium px-2 py-0.5 rounded-full",
                    trend === "up" && "text-emerald-600 bg-emerald-50",
                    trend === "down" && "text-red-600 bg-red-50",
                    trend === "neutral" && "text-gray-500 bg-gray-50"
                  )}
                >
                  {trend === "up" && "+"}{trendValue}
                </span>
              )}
            </div>

            {/* Value */}
            <p
              className={cn(
                "mt-2 font-bold text-gray-900 leading-none",
                valueClass
              )}
              style={{ fontVariantNumeric: "tabular-nums" }}
            >
              {value}
            </p>

            {/* Trend label */}
            {trendLabel && (
              <p className="mt-1 text-xs text-gray-400">{trendLabel}</p>
            )}
          </div>
        </div>
      </div>
    );
  }
);
MetricCard.displayName = "MetricCard";

export { MetricCard };