"use client";
import { motion } from "framer-motion";
import { LucideIcon } from "lucide-react";

interface StatCardProps {
  label: string;
  value: string;
  subValue?: string;
  icon: LucideIcon;
  variant?: "neutral" | "profit" | "loss" | "azure";
  delay?: number;
}

const variantStyles = {
  neutral: {
    iconBg: "rgba(29, 111, 235, 0.12)",
    iconColor: "#4A90F5",
    valueColor: "#EEF5FF",
    border: "rgba(29, 111, 235, 0.18)",
    glow: "rgba(29, 111, 235, 0.07)",
    top: "rgba(29, 111, 235, 0.08)",
  },
  profit: {
    iconBg: "rgba(0, 200, 117, 0.12)",
    iconColor: "#00C875",
    valueColor: "#00C875",
    border: "rgba(0, 200, 117, 0.22)",
    glow: "rgba(0, 200, 117, 0.07)",
    top: "rgba(0, 200, 117, 0.08)",
  },
  loss: {
    iconBg: "rgba(240, 62, 62, 0.12)",
    iconColor: "#F03E3E",
    valueColor: "#F03E3E",
    border: "rgba(240, 62, 62, 0.22)",
    glow: "rgba(240, 62, 62, 0.07)",
    top: "rgba(240, 62, 62, 0.08)",
  },
  azure: {
    iconBg: "rgba(29, 111, 235, 0.18)",
    iconColor: "#1D6FEB",
    valueColor: "#93C5FD",
    border: "rgba(29, 111, 235, 0.3)",
    glow: "rgba(29, 111, 235, 0.1)",
    top: "rgba(29, 111, 235, 0.1)",
  },
};

export default function StatCard({ label, value, subValue, icon: Icon, variant = "neutral", delay = 0 }: StatCardProps) {
  const s = variantStyles[variant];
  return (
    <motion.div
      initial={{ opacity: 0, y: 24 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay, ease: [0.22, 1, 0.36, 1] }}
      whileHover={{ y: -3, transition: { duration: 0.2 } }}
      className="relative rounded-phi-lg p-5 flex flex-col gap-3 overflow-hidden"
      style={{
        background: "rgba(17, 38, 84, 0.6)",
        border: `1px solid ${s.border}`,
        backdropFilter: "blur(14px)",
        boxShadow: `0 4px 24px ${s.glow}, inset 0 1px 0 rgba(255,255,255,0.06)`,
      }}
    >
      <div className="absolute top-0 right-0 w-24 h-24 rounded-full pointer-events-none"
        style={{ background: `radial-gradient(circle, ${s.top} 0%, transparent 70%)`, transform: "translate(30%,-30%)" }} />

      <div className="flex items-center justify-between">
        <span className="text-phi-xs font-data uppercase tracking-widest" style={{ color: "#7A9ABF" }}>
          {label}
        </span>
        <div className="w-9 h-9 rounded-phi flex items-center justify-center" style={{ background: s.iconBg }}>
          <Icon size={16} style={{ color: s.iconColor }} />
        </div>
      </div>

      <div>
        <p className="font-display font-bold text-phi-2xl leading-none" style={{ color: s.valueColor }}>
          {value}
        </p>
        {subValue && (
          <p className="text-phi-xs font-data mt-1" style={{ color: "#7A9ABF" }}>{subValue}</p>
        )}
      </div>
    </motion.div>
  );
}