import * as React from 'react';
import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
import { cn } from '../../shared/utils';
import { Card, CardContent } from '../card';

interface StatsCardProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string;
  value: string | number;
  description?: string;
  trend?: {
    value: number;
    label?: string;
  };
  icon?: React.ReactNode;
  /**
   * Tailwind class for the icon text/foreground color.
   * @default "text-muted-foreground"
   */
  iconColor?: string;
  /**
   * Tailwind class for the icon background color.
   * @default "bg-muted"
   */
  iconBg?: string;
}

/**
 * KPI metric card for dashboard overview pages.
 *
 * @description
 * Standardized layout for displaying a metric title, a large value, an
 * optional icon, and an optional trend indicator with automatic up/down/neutral
 * icon and color. Built on top of `<Card>`.
 *
 * @ai-rules
 * 1. Provide the `icon` as a Lucide React element with `className="size-5"`.
 * 2. `trend.value` is a raw number (e.g., `20.1` for +20.1%) — the component
 *    displays `Math.abs(value)%` automatically. Do NOT pre-format as string.
 * 3. `value` IS a pre-formatted display string: `"$45,231"`, `"3.6%"`, etc.
 * 4. `trend.label` takes precedence over `description` for below-value text.
 */
const StatsCard = React.forwardRef<HTMLDivElement, StatsCardProps>(
  ({ className, title, value, description, trend, icon, iconColor, iconBg, ...props }, ref) => {
    const getTrendIcon = () => {
      if (!trend) return null;

      if (trend.value > 0) {
        return <TrendingUp className="h-4 w-4 text-success" />;
      } else if (trend.value < 0) {
        return <TrendingDown className="h-4 w-4 text-destructive" />;
      } else {
        return <Minus className="h-4 w-4 text-muted-foreground" />;
      }
    };

    const getTrendColor = () => {
      if (!trend) return '';

      if (trend.value > 0) {
        return 'text-success';
      } else if (trend.value < 0) {
        return 'text-destructive';
      } else {
        return 'text-muted-foreground';
      }
    };

    return (
      <Card ref={ref} className={cn('', className)} {...props}>
        <CardContent className="p-4 sm:p-6">
          <div className="flex items-start justify-between gap-3">
            <div className="flex-1 min-w-0">
              <p className="text-muted-foreground mb-1 text-sm">{title}</p>
              <div className="flex flex-wrap items-baseline gap-2">
                <h3 className="text-foreground text-xl sm:text-2xl">{value}</h3>
                {trend && (
                  <div className={cn('flex items-center gap-1 text-sm', getTrendColor())}>
                    {getTrendIcon()}
                    <span>{Math.abs(trend.value)}%</span>
                  </div>
                )}
              </div>
              {(description || trend?.label) && (
                <p className="text-muted-foreground mt-1 text-xs sm:text-sm">
                  {trend?.label || description}
                </p>
              )}
            </div>
            {icon && (
              <div
                className={cn(
                  'rounded-[var(--radius)] p-2 sm:p-3 flex-shrink-0',
                  iconBg || 'bg-muted',
                  iconColor || 'text-muted-foreground'
                )}
              >
                {icon}
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    );
  }
);
StatsCard.displayName = 'StatsCard';

export { StatsCard };
export type { StatsCardProps };