import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import { SVGProps } from "react";

interface BaseStatCardProps {
  icon:
    | React.ComponentType<SVGProps<SVGSVGElement>>
    | React.ComponentType<{ className?: string }>;
  iconBgColor: string;
  title: string;
  value: string | number | React.ReactNode;
  className?: string;
}

interface DefaultVariantProps extends BaseStatCardProps {
  variant?: "default";
  subtitle?: string | React.ReactNode;
  trend?: {
    value: string;
    isPositive: boolean;
    label?: string;
  };
  statuses?: never;
}

interface StatusVariantProps extends BaseStatCardProps {
  variant: "status";
  statuses: {
    primary: {
      label: string;
      value: string | number;
    };
    secondary: {
      label: string;
      value: string | number;
    };
  };
  subtitle?: never;
  trend?: never;
}

type StatCardProps = DefaultVariantProps | StatusVariantProps;

export function StatCard({
  icon: Icon,
  iconBgColor,
  title,
  value,
  variant = "default",
  className,
  ...props
}: StatCardProps) {
  // Render status variant
  if (variant === "status" && "statuses" in props) {
    const { statuses } = props;
    return (
      <Card className={cn("border border-border shadow-sm", className)}>
        <CardContent className="p-3 sm:p-4 flex flex-col gap-4 sm:gap-6">
          <div className="flex items-start gap-2 w-full">
            <div className="flex-1 space-y-0.5 sm:space-y-1 min-w-0">
              <p className="text-sm sm:text-base text-foreground truncate">{title}</p>
              <div className="text-base sm:text-lg font-bold text-foreground break-words">
                {typeof value === "number" ? value.toLocaleString() : value}
              </div>
            </div>
            <div
              className={cn(
                "flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full shrink-0",
                iconBgColor,
              )}
            >
              <Icon className="h-5 w-5 sm:h-6 sm:w-6" />
            </div>
          </div>

          {/* Status indicators */}
          <div className="flex flex-wrap items-center gap-1 text-[10px] sm:text-xs">
            <div className="flex items-center gap-0.5 sm:gap-1 min-w-0">
              <span className="text-muted-foreground whitespace-nowrap">
                {statuses?.secondary?.label}
              </span>
              <span className="font-semibold text-foreground leading-[18px] truncate">
                {typeof statuses?.secondary?.value === "number"
                  ? statuses?.secondary?.value.toLocaleString()
                  : statuses?.secondary?.value}
              </span>
            </div>

            {/* Separator */}
            <div className="rotate-90 mx-0.5 sm:mx-1 shrink-0">
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                className="sm:w-6 sm:h-6"
              >
                <path
                  d="M5 12H19"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  className="text-border"
                />
              </svg>
            </div>

            <div className="flex items-center gap-0.5 sm:gap-1 min-w-0">
              <span className="text-muted-foreground whitespace-nowrap">
                {statuses?.primary?.label}
              </span>
              <span className="font-semibold text-foreground leading-[18px] truncate">
                {typeof statuses?.primary?.value === "number"
                  ? statuses?.primary?.value.toLocaleString()
                  : statuses?.primary?.value}
              </span>
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }

  // Render default variant
  const { subtitle, trend } = props as DefaultVariantProps;
  return (
    <Card className={cn("h-[145px] border-0 shadow-sm", className)}>
      <CardContent className="p-4 flex items-start justify-between h-full">
        <div
          className={cn(
            "flex items-center justify-center w-12 h-12 rounded-full shrink-0",
            iconBgColor,
          )}
        >
          <Icon className="h-6 w-6" />
        </div>
        <div className="flex-1 text-start space-y-1 ltr:ml-4 rtl:mr-4">
          <p className="text-sm text-muted-foreground">{title}</p>
          <div className="flex items-center gap-2">
            <div className="text-lg font-bold">
              {typeof value === "number" ? value.toLocaleString() : value}
            </div>
            {trend && (
              <svg
                className={cn(
                  "w-5 h-5",
                  trend.isPositive
                    ? "text-success rotate-180"
                    : "text-destructive",
                )}
                fill="currentColor"
                viewBox="0 0 10 10"
              >
                <path d="M5 0L9.33 8H0.67L5 0Z" />
              </svg>
            )}
          </div>
          {subtitle && (
            <div className="text-xs text-muted-foreground">{subtitle}</div>
          )}
          {trend && trend.label && (
            <div className="flex items-center gap-2 text-xs">
              <span className="text-muted-foreground">{trend.label}</span>
              <span
                className={cn(
                  "font-bold",
                  trend.isPositive ? "text-success" : "text-destructive",
                )}
              >
                {trend.value}
              </span>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}