/**
 * 统计行组件 - 显示多个统计指标
 */

import { Card, CardContent } from '@/components/ui/card';
import { TrendingUp, TrendingDown, Minus, Activity } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { ComponentPropsMap, RenderContext } from '../types';

interface StatsRowProps {
  props: ComponentPropsMap['stats_row'];
  context: RenderContext;
}

export function StatsRow({ props }: StatsRowProps) {
  const { items, columns = items.length } = props;

  // 配色：所有色调走语义令牌，避免硬编码
  const accentMap: Record<string, { ring: string; icon: string; value: string }> = {
    success: { ring: 'bg-emerald-500/10', icon: 'text-emerald-600 dark:text-emerald-400', value: 'text-emerald-600 dark:text-emerald-400' },
    warning: { ring: 'bg-amber-500/10', icon: 'text-amber-600 dark:text-amber-400', value: 'text-amber-600 dark:text-amber-400' },
    error:   { ring: 'bg-rose-500/10',  icon: 'text-rose-600 dark:text-rose-400',  value: 'text-rose-600 dark:text-rose-400' },
    info:    { ring: 'bg-sky-500/10',   icon: 'text-sky-600 dark:text-sky-400',   value: 'text-sky-600 dark:text-sky-400' },
    default: { ring: 'bg-primary/10',   icon: 'text-primary',                      value: 'text-foreground' },
  };

  const getTrendIcon = (direction?: string) => {
    switch (direction) {
      case 'up':   return <TrendingUp className="h-3.5 w-3.5" />;
      case 'down': return <TrendingDown className="h-3.5 w-3.5" />;
      default:     return <Minus className="h-3.5 w-3.5" />;
    }
  };

  return (
    <div
      className="grid gap-3"
      style={{ gridTemplateColumns: `repeat(${Math.min(columns, 4)}, minmax(0, 1fr))` }}
    >
      {items.map((item, index) => {
        const trendValue = typeof item.trend === 'object' && item.trend !== null
          ? (item.trend as { value?: string }).value
          : item.trend;
        const trendDirection = typeof item.trend === 'object' && item.trend !== null
          ? (item.trend as { direction?: string }).direction
          : item.trendDirection;

        const accent = accentMap[item.color || 'default'] || accentMap.default;
        const trendColor =
          trendDirection === 'up' ? 'text-emerald-600 dark:text-emerald-400'
          : trendDirection === 'down' ? 'text-rose-600 dark:text-rose-400'
          : 'text-muted-foreground';

        return (
          <Card key={index} className="overflow-hidden border-border/60 hover:shadow-md hover:border-border transition-all duration-200">
            <CardContent className="p-4">
              <div className="flex items-start justify-between gap-2">
                <div className={cn('h-8 w-8 rounded-lg flex items-center justify-center', accent.ring)}>
                  <Activity className={cn('h-4 w-4', accent.icon)} />
                </div>
                {(trendValue || trendDirection) && (
                  <div className={cn('flex items-center gap-0.5 text-xs font-medium', trendColor)}>
                    {getTrendIcon(trendDirection)}
                    {trendValue && <span>{trendValue}</span>}
                  </div>
                )}
              </div>
              <div className="mt-3">
                <div className="text-xs text-muted-foreground font-medium">{item.label}</div>
                <div className={cn('text-2xl font-bold tracking-tight mt-1', accent.value)}>
                  {item.value}
                </div>
              </div>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
}
