"use client";

import {
  ArrowDown,
  ArrowUp,
  DollarSign,
  ShoppingCart,
  TrendingUp,
  Users,
} from "lucide-react";
import { useTranslations } from "next-intl";
import { Area, AreaChart, ResponsiveContainer } from "recharts";
import { Badge } from "@/components/ui/badge";
import { NumberTicker } from "@/components/ui/number-ticker";
import { buyOffers, sellOffers } from "@/lib/mock-data";

interface StatData {
  icon: typeof ShoppingCart;
  value: number;
  label: string;
  change: number; // percentual
  trend: "up" | "down";
  sparklineData: number[]; // 7 pontos
  iconColor: string;
  iconBg: string;
  description: string;
  lastUpdated: string;
}

// Componente Mini Sparkline
function MiniSparkline({ data, color }: { data: number[]; color: string }) {
  const chartData = data.map((value, index) => ({
    value,
    index,
  }));

  return (
    <div className="h-12 w-full min-h-[48px] min-w-[150px]">
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart
          data={chartData}
          margin={{ top: 2, right: 2, left: 2, bottom: 2 }}
          width={150}
          height={48}
        >
          <defs>
            <linearGradient
              id={`gradient-${color}`}
              x1="0"
              y1="0"
              x2="0"
              y2="1"
            >
              <stop offset="0%" stopColor={color} stopOpacity={0.3} />
              <stop offset="100%" stopColor={color} stopOpacity={0.05} />
            </linearGradient>
          </defs>
          <Area
            type="monotone"
            dataKey="value"
            stroke={color}
            strokeWidth={2}
            fill={`url(#gradient-${color})`}
            dot={false}
            activeDot={false}
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

// Componente StatCard individual
function StatCard({ stat }: { stat: StatData }) {
  const TrendIcon = stat.trend === "up" ? ArrowUp : ArrowDown;
  const isPositive = stat.trend === "up";

  return (
    <div className="group relative p-8 text-center rounded-xl border border-border/50 bg-linear-to-br from-card via-card/95 to-muted/30 backdrop-blur-lg transition-all duration-300 ease-out hover:scale-105 hover:shadow-2xl hover:border-accent/50 hover:shadow-accent/20">
      {/* Ícone com círculo colorido */}
      <div
        className={`w-12 h-12 mx-auto mb-4 rounded-full ${stat.iconBg} flex items-center justify-center group-hover:animate-pulse`}
      >
        <stat.icon className={`w-6 h-6 ${stat.iconColor}`} />
      </div>

      {/* Número principal */}
      <div className="mb-2">
        <p className="text-6xl font-extrabold font-mono bg-linear-to-br from-foreground to-foreground/70 bg-clip-text">
          <NumberTicker value={stat.value} />
        </p>
      </div>

      {/* Badge de variação */}
      <div className="mb-3">
        <Badge
          variant={isPositive ? "default" : "destructive"}
          className={`${
            isPositive
              ? "bg-green-500/10 text-green-600 border-green-500/20"
              : "bg-red-500/10 text-red-600 border-red-500/20"
          } gap-1`}
        >
          <TrendIcon className="w-3 h-3" />
          {stat.change}%
        </Badge>
      </div>

      {/* Label e descrição */}
      <div className="mb-4">
        <p className="text-lg font-semibold text-foreground">{stat.label}</p>
        <p className="text-sm text-muted-foreground">{stat.description}</p>
      </div>

      {/* Mini Sparkline */}
      <div className="mb-3">
        <MiniSparkline
          data={stat.sparklineData}
          color={stat.iconColor.replace("text-", "").replace("-500", "")}
        />
      </div>

      {/* Timestamp */}
      <p className="text-xs text-muted-foreground">{stat.lastUpdated}</p>
    </div>
  );
}

export function MarketStats() {
  const t = useTranslations("home.stats");

  // Calcular volume total baseado nos dados mock
  const _calculateTotalVolume = () => {
    const buyVolume = buyOffers.reduce(
      (sum, offer) => sum + offer.price * offer.quantity,
      0,
    );
    const sellVolume = sellOffers.reduce(
      (sum, offer) => sum + offer.price * offer.quantity,
      0,
    );
    return Math.round((buyVolume + sellVolume) / 1000); // Dividir por 1000 para número mais legível
  };

  const stats: StatData[] = [
    {
      icon: ShoppingCart,
      value: 1542,
      label: t("activeOffers"),
      change: 8.5,
      trend: "up",
      sparklineData: [1200, 1300, 1400, 1350, 1450, 1500, 1542],
      iconColor: "text-orange-500",
      iconBg: "bg-orange-500/10",
      description: "esta semana",
      lastUpdated: `${t("updated")} 5 ${t("minutes")}`,
    },
    {
      icon: TrendingUp,
      value: 8763,
      label: t("itemsSold"),
      change: 15.3,
      trend: "up",
      sparklineData: [7200, 7500, 7800, 8000, 8200, 8500, 8763],
      iconColor: "text-green-500",
      iconBg: "bg-green-500/10",
      description: `${t("averagePerDay")}: 292 ${t("salesPerDay")}`,
      lastUpdated: `${t("updated")} 5 ${t("minutes")}`,
    },
    {
      icon: Users,
      value: 3421,
      label: t("users"),
      change: 22.1,
      trend: "up",
      sparklineData: [3100, 3200, 3250, 3300, 3350, 3400, 3421],
      iconColor: "text-blue-500",
      iconBg: "bg-blue-500/10",
      description: `${t("onlineNow")}: 847 ${t("traders")}`,
      lastUpdated: `${t("updated")} 2 ${t("minutes")}`,
    },
    {
      icon: DollarSign,
      value: 208,
      label: t("totalVolume"),
      change: 18.7,
      trend: "up",
      sparklineData: [180, 200, 220, 240, 260, 280, 300],
      iconColor: "text-purple-500",
      iconBg: "bg-purple-500/10",
      description: "em gold pieces",
      lastUpdated: `${t("today")}: 12.5M gp`,
    },
  ];

  return (
    <section className="py-20 bg-muted/30">
      <div className="container">
        <h2 className="text-4xl font-bold text-center mb-12">{t("title")}</h2>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {stats.map((stat, index) => (
            <StatCard key={index} stat={stat} />
          ))}
        </div>
      </div>
    </section>
  );
}