"use client";

import { motion } from "framer-motion";

import { Zap, Radio, Eye, Timer, type LucideIcon } from "lucide-react";

import { Card } from "@/components/ui/card";

import { Skeleton } from "@/components/ui/skeleton";

import { CountUp } from "@/components/shared/CountUp";

import { staggerContainer, fadeUpItem } from "@/lib/motion";

import { useStats } from "@/hooks/useStats";

import { formatLatency } from "@/lib/utils";

interface Tile {

  key: string;

  label: string;

  icon: LucideIcon;

  accent: string;

  value: number;

  sub: string;

  render?: "latency";

}

export function StatsRow() {

  const { data, isLoading } = useStats();

  if (isLoading || !data) {

    return (

      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">

        {Array.from({ length: 4 }).map((_, i) => (

          <Skeleton key={i} className="h-[104px] rounded-[var(--radius-lg)]" />

        ))}

      </div>

    );

  }

  const tiles: Tile[] = [

    {

      key: "drops",

      label: "Drops · 24h",

      icon: Zap,

      accent: "var(--color-accent-teal)",

      value: data.drops_24h,

      sub: `${data.drops_7d.toLocaleString()} this week`,

    },

    {

      key: "sources",

      label: "Active sources",

      icon: Radio,

      accent: "var(--color-accent-green)",

      value: data.sources_healthy,

      sub: `${data.sources_total} total · ${data.sources_down} down`,

    },

    {

      key: "matches",

      label: "Watchlist hits · 24h",

      icon: Eye,

      accent: "var(--color-accent-violet)",

      value: data.watchlist_matches_24h,

      sub: `${data.events_onsale_now.toLocaleString()} on sale now`,

    },

    {

      key: "latency",

      label: "Detect latency p50",

      icon: Timer,

      accent: "var(--color-accent-amber)",

      value: data.detection_latency_ms_p50,

      sub: `p99 ${formatLatency(data.detection_latency_ms_p99)}`,

      render: "latency",

    },

  ];

  return (

    <motion.div

      variants={staggerContainer}

      initial="initial"

      animate="animate"

      className="grid grid-cols-2 gap-3 lg:grid-cols-4"

    >

      {tiles.map((t) => (

        <motion.div key={t.key} variants={fadeUpItem}>

          <Card className="group relative overflow-hidden p-4 transition-colors hover:border-[var(--color-border-default)]">

            <div

              className="absolute -right-6 -top-6 h-20 w-20 rounded-full opacity-[0.07] blur-2xl transition-opacity group-hover:opacity-20"

              style={{ background: t.accent }}

              aria-hidden

            />

            <div className="flex items-center justify-between">

              <span className="text-xs font-medium text-[var(--color-fg-tertiary)]">{t.label}</span>

              <t.icon className="h-4 w-4" style={{ color: t.accent }} aria-hidden />

            </div>

            <div className="mt-3 font-mono text-2xl font-semibold tracking-[var(--tracking-tight)] text-[var(--color-fg-primary)]">

              {t.render === "latency" ? (

                <span className="tabular">{formatLatency(t.value)}</span>

              ) : (

                <CountUp value={t.value} />

              )}

            </div>

            <div className="mt-0.5 text-xs text-[var(--color-fg-tertiary)]">{t.sub}</div>

          </Card>

        </motion.div>

      ))}

    </motion.div>

  );

}