import { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { Users, Gamepad2, Clock, TrendingUp } from 'lucide-react';
import { Card } from '@/components/ui/Card';
import { SkeletonCard } from '@/components/ui/Skeleton';
import { adminAPI } from '@/api/client';
import { useCountUp } from '@/hooks/useCountUp';
import { formatNumber } from '@/lib/constants';
import { staggerContainer, staggerItem } from '@/lib/animations';

function StatCard({ icon: Icon, label, value }: { icon: any; label: string; value: number }) {
  const animated = useCountUp(value);
  return (
    <Card>
      <div className="flex items-center gap-2 mb-2">
        <Icon className="w-4 h-4 text-text-muted" />
        <span className="text-xs text-text-muted uppercase tracking-wider">{label}</span>
      </div>
      <p className="text-3xl font-mono font-bold text-text-primary">{formatNumber(animated)}</p>
    </Card>
  );
}

export default function PlatformStats() {
  const [stats, setStats] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    adminAPI.getStats().then(({ data }) => setStats(data)).catch(() => {}).finally(() => setLoading(false));
  }, []);

  if (loading) {
    return (
      <div className="p-6 space-y-4">
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">{[...Array(4)].map((_, i) => <SkeletonCard key={i} />)}</div>
      </div>
    );
  }

  return (
    <div className="p-6">
      <h1 className="text-xl font-bold text-text-primary mb-6">Platform Statistics</h1>

      <motion.div variants={staggerContainer} initial="initial" animate="animate" className="space-y-6">
        <motion.div variants={staggerItem} className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          <StatCard icon={Users} label="Total Users" value={stats?.total_users || 0} />
          <StatCard icon={Users} label="Active (7d)" value={stats?.active_users || 0} />
          <StatCard icon={Gamepad2} label="Total Matches" value={stats?.total_matches || 0} />
          <StatCard icon={Clock} label="Avg Queue Time" value={stats?.avg_queue_time || 0} />
        </motion.div>

        <motion.div variants={staggerItem}>
          <Card>
            <h2 className="text-sm font-bold text-text-muted uppercase tracking-widest mb-4">Tier Distribution</h2>
            <div className="grid grid-cols-3 gap-4">
              {['normal', 'premium', 'vip'].map((tier) => (
                <div key={tier} className="text-center p-4 bg-bg-elevated rounded-xl">
                  <p className="text-2xl font-mono font-bold text-text-primary">{stats?.tier_distribution?.[tier] || 0}</p>
                  <p className="text-xs text-text-muted capitalize">{tier}</p>
                </div>
              ))}
            </div>
          </Card>
        </motion.div>

        <motion.div variants={staggerItem} className="grid grid-cols-2 gap-4">
          <Card>
            <h2 className="text-sm font-bold text-text-muted uppercase tracking-widest mb-2">Active Bans</h2>
            <p className="text-3xl font-mono font-bold text-red-400">{stats?.active_bans || 0}</p>
          </Card>
          <Card>
            <h2 className="text-sm font-bold text-text-muted uppercase tracking-widest mb-2">Open Tickets</h2>
            <p className="text-3xl font-mono font-bold text-amber-400">{stats?.open_tickets || 0}</p>
          </Card>
        </motion.div>
      </motion.div>
    </div>
  );
}
