"use client";

import { Card, CardContent } from "@/components/ui/card";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { LucideIcon } from "lucide-react";

interface StatCardData {
  label: string;
  sublabel?: string;
  value: string | number;
  icon?: LucideIcon;
  iconColor?: string;
  trend?: {
    value: string;
    isPositive: boolean;
  };
  onClick?: () => void;
  isActive?: boolean;
  tooltip?: string;
}

interface StatCardsProps {
  stats: StatCardData[];
}

export function StatCards({ stats }: StatCardsProps) {
  const count = stats.length;
  const gridClass =
    count >= 6
      ? 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-2'
      : count >= 5
        ? 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2'
        : 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2';

  return (
    <TooltipProvider delayDuration={300}>
      <div className={gridClass}>
        {stats.map((stat, index) => {
          const Icon = stat.icon;
          const isClickable = !!stat.onClick;

          const card = (
            <Card
              className={`flex-1 min-w-0 transition-colors ${
                isClickable ? 'cursor-pointer hover:border-primary/50' : ''
              } ${
                stat.isActive ? 'border-primary bg-primary/5' : ''
              } ${
                count % 2 === 1 && index === count - 1 && count < 6 ? 'col-span-2 sm:col-span-1' : ''
              }`}
              onClick={stat.onClick}
            >
              <CardContent className="p-2 md:p-3">
                <div className="flex items-center justify-between">
                  <div className="flex-1 min-w-0">
                    <p className="text-[10px] md:text-xs text-muted-foreground mb-0.5 uppercase tracking-wide truncate">
                      {stat.label}
                      {stat.sublabel && (
                        <span className="ml-2 normal-case tracking-normal">{stat.sublabel}</span>
                      )}
                    </p>
                    <p className="font-bold text-base md:text-lg truncate">
                      {stat.value}
                    </p>
                    {stat.trend && (
                      <p className={`text-[9px] md:text-[10px] mt-0.5 font-medium ${stat.trend.isPositive ? 'text-green-600' : 'text-red-600'}`}>
                        {stat.trend.value}
                      </p>
                    )}
                  </div>
                  {Icon && (
                    <Icon
                      className={`w-6 h-6 md:w-8 md:h-8 opacity-15 flex-shrink-0 ${stat.iconColor || 'text-blue-600'}`}
                    />
                  )}
                </div>
              </CardContent>
            </Card>
          );

          if (stat.tooltip) {
            return (
              <Tooltip key={index}>
                <TooltipTrigger asChild>{card}</TooltipTrigger>
                <TooltipContent side="bottom" className="max-w-[280px] text-sm whitespace-pre-line">
                  {stat.tooltip}
                </TooltipContent>
              </Tooltip>
            );
          }

          return <div key={index}>{card}</div>;
        })}
      </div>
    </TooltipProvider>
  );
}