import React, { forwardRef } from "react";
import { BaseComponentProps } from "../../types";
import { Card, CardContent } from "../ui/Card";

export interface StatsCardProps extends BaseComponentProps {
  title: string;
  value: string | number;
  subtitle?: string;
  trend?: {
    value: number;
    label?: string;
    isPositive?: boolean;
  };
  icon?: React.ReactNode;
  variant?: "default" | "success" | "warning" | "danger";
  loading?: boolean;
}

export const StatsCard = forwardRef<HTMLDivElement, StatsCardProps>(
  (
    {
      className = "",
      title,
      value,
      subtitle,
      trend,
      icon,
      variant = "default",
      loading = false,
      ...props
    },
    ref
  ) => {
    const getVariantClasses = () => {
      switch (variant) {
        case "success":
          return "border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950";
        case "warning":
          return "border-yellow-200 bg-yellow-50 dark:border-yellow-800 dark:bg-yellow-950";
        case "danger":
          return "border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950";
        default:
          return "";
      }
    };

    const getTrendColor = () => {
      if (!trend) return "";
      return trend.isPositive
        ? "text-green-600 dark:text-green-400"
        : "text-red-600 dark:text-red-400";
    };

    const getTrendIcon = () => {
      if (!trend) return null;
      return trend.isPositive ? (
        <svg
          className="w-4 h-4"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M7 17l9.2-9.2M17 17V7h-10"
          />
        </svg>
      ) : (
        <svg
          className="w-4 h-4"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M17 7l-9.2 9.2M7 7v10h10"
          />
        </svg>
      );
    };

    if (loading) {
      return (
        <Card
          ref={ref}
          className={`${getVariantClasses()} ${className}`}
          {...props}
        >
          <CardContent className="p-6">
            <div className="animate-pulse">
              <div className="flex items-center justify-between mb-4">
                <div className="h-4 bg-gray-200 rounded w-1/3"></div>
                <div className="h-6 w-6 bg-gray-200 rounded"></div>
              </div>
              <div className="h-8 bg-gray-200 rounded w-1/2 mb-2"></div>
              <div className="h-3 bg-gray-200 rounded w-2/3"></div>
            </div>
          </CardContent>
        </Card>
      );
    }

    return (
      <Card
        ref={ref}
        className={`${getVariantClasses()} ${className}`}
        {...props}
      >
        <CardContent className="p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-sm font-medium text-muted-foreground">
              {title}
            </h3>
            {icon && <div className="text-muted-foreground">{icon}</div>}
          </div>

          <div className="space-y-2">
            <p className="text-2xl font-bold text-foreground">{value}</p>

            <div className="flex items-center justify-between">
              {subtitle && (
                <p className="text-sm text-muted-foreground">{subtitle}</p>
              )}

              {trend && (
                <div
                  className={`flex items-center space-x-1 text-sm ${getTrendColor()}`}
                >
                  {getTrendIcon()}
                  <span>{Math.abs(trend.value)}%</span>
                  {trend.label && (
                    <span className="text-muted-foreground">
                      ({trend.label})
                    </span>
                  )}
                </div>
              )}
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }
);

StatsCard.displayName = "StatsCard";