import React from 'react';
import { clsx } from 'clsx';
import { ArrowUp, ArrowDown } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';

export interface StatCardProps {
  title: string;
  value: string | number;
  icon: React.ReactNode;
  subtext?: string;
  trend?: {
    value: number;
    label: string;
    isPositive?: boolean;
  };
  onClick?: () => void;
  color?: 'primary' | 'success' | 'warning' | 'info' | 'default';
  className?: string;
}

const colorClasses = {
  primary: 'bg-primary/10 text-primary border-primary/20',
  success: 'bg-success/10 text-success border-success/20',
  warning: 'bg-warning/10 text-warning border-warning/20',
  info: 'bg-primary/10 text-primary border-primary/20',
  default: 'bg-muted text-muted-foreground border-border',
};

/**
 * Enhanced stat card component for dashboard metrics
 */
export const StatCard = ({
  title,
  value,
  icon,
  subtext,
  trend,
  onClick,
  color = 'default',
  className,
}: StatCardProps) => {
  const handleClick = () => {
    if (onClick) {
      onClick();
    }
  };

  return (
    <Card
      className={clsx(
        'transition-all',
        {
          'cursor-pointer hover:shadow-lg hover:-translate-y-1': onClick,
        },
        className
      )}
      onClick={handleClick}
    >
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
        <div className={clsx('rounded-lg p-2 border', colorClasses[color])}>{icon}</div>
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
        {subtext && <p className="text-xs text-muted-foreground mt-1">{subtext}</p>}
        {trend && (
          <div className="flex items-center gap-1 mt-2 text-xs">
            {trend.isPositive !== false ? (
              <ArrowUp className="h-3 w-3 text-success" />
            ) : (
              <ArrowDown className="h-3 w-3 text-destructive" />
            )}
            <span
              className={clsx({
                'text-success': trend.isPositive !== false,
                'text-destructive': trend.isPositive === false,
              })}
            >
              {trend.value > 0 ? '+' : ''}
              {trend.value}%
            </span>
            <span className="text-muted-foreground ml-1">{trend.label}</span>
          </div>
        )}
      </CardContent>
    </Card>
  );
};