ui/src/app/components/OverviewTab.tsx

"use client";
import { motion } from "framer-motion";
import { Droplets, Users, Cpu, TrendingUp, BookOpen, Percent, AlertTriangle, Award, Layers, Wallet } from "lucide-react";
import StatCard from "./StatCard";
import StatusBadge from "./StatusBadge";

const fadeUp = { hidden: { opacity: 0, y: 16 }, visible: (i = 0) => ({ opacity: 1, y: 0, transition: { duration: 0.4, delay: i * 0.05, ease: [0.23, 1, 0.32, 1] } }) };

export default function OverviewTab({ data }: { data: any }) {
  const s = data?.slippage || {};
  const h = data?.holders || {};
  const l = data?.liquidity || {};
  const t = data?.trading || {};
  const f = data?.funding || {};
  const liq = data?.liquidation || {};
  const m = data?.mining || {};

  return (
    <motion.div key="overview" initial="hidden" animate="visible" variants={fadeUp} className="space-y-5">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <StatCard title="Slippage Collected" value={`$${(s.total_collected_usd || 0).toLocaleString()}`} icon={Droplets} color="cyan" delay={0} />
        <StatCard title="Total Holders" value={h.total_holders || 0} icon={Users} color="violet" delay={1} />
        <StatCard title="LLM Liquidity" value={`$${(l.total_liquidity_usd || 0).toLocaleString()}`} icon={Cpu} color="emerald" delay={2} />
        <StatCard title="24h Volume" value={`$${(t.total_volume || 0).toLocaleString()}`} icon={TrendingUp} color="cyan" delay={3} />
        <StatCard title="Active Positions" value={t.active_positions || 0} icon={BookOpen} color="amber" delay={4} />
        <StatCard title="Funding Rate" value={`${((f.current_rate || 0) * 100).toFixed(4)}%`} icon={Percent} color="amber" delay={5} />
        <StatCard title="Insurance Fund" value={`$${(liq.insurance_fund || 0).toLocaleString()}`} icon={AlertTriangle} color="rose" delay={6} />
        <StatCard title="Mining Rewards" value={`$${(m.total_rewards || 0).toLocaleString()}`} icon={Award} color="emerald" delay={7} />
      </div>

      <div className="glass rounded-xl p-4">
        <div className="flex items-center gap-2 mb-3"><Layers className="w-4 h-4 text-[#38bdf8]" /><h2 className="text-sm font-bold text-[#e2e2ec] tracking-tight">System Status</h2></div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
          {data?.status_meta && Object.entries(data.status_meta).map(([key, meta]: [string, any]) => (
            <div key={key} className="glass-strong rounded-xl p-3 border border-white/[0.04]">
              <div className="flex items-center justify-between mb-1"><span className="text-xs font-semibold text-[#e2e2ec]">{meta.label}</span><StatusBadge status={meta.status} /></div>
              <p className="text-[10px] text-[#9a9aae] leading-relaxed">{meta.detail}</p>
            </div>
          ))}
        </div>
      </div>

      <div className="glass rounded-xl p-4">
        <div className="flex items-center gap-2 mb-3"><Wallet className="w-4 h-4 text-[#818cf8]" /><h2 className="text-sm font-bold text-[#e2e2ec] tracking-tight">Integration Map</h2></div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
          {data?.config && Object.entries(data.config).map(([key, item]: [string, any]) => (
            <div key={key} className="glass-strong rounded-xl p-3 border border-white/[0.04]">
              <div className="text-[10px] font-bold text-[#5a5a6e] uppercase tracking-widest mb-1">{item.label}</div>
              <div className="flex items-center justify-between"><StatusBadge status={item.status} />{item.value_public && <span className="text-[10px] text-[#5a5a6e] font-mono truncate max-w-[120px]">{item.value_public}</span>}</div>
              {item.env && <div className="text-[10px] text-[#5a5a6e] mt-1">{item.env}</div>}
            </div>
          ))}
        </div>
      </div>
    </motion.div>
  );
}