import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { Search } from 'lucide-react';
import { Card } from '@/components/ui/Card';
import { Input } from '@/components/ui/Input';
import { Avatar } from '@/components/ui/Avatar';
import { Badge } from '@/components/ui/Badge';
import { SkeletonRow } from '@/components/ui/Skeleton';
import { adminAPI } from '@/api/client';
import { cn } from '@/lib/cn';
import { formatNumber } from '@/lib/constants';
import { staggerContainer, staggerItem } from '@/lib/animations';

export default function UserManagement() {
  const [users, setUsers] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');

  useEffect(() => {
    setLoading(true);
    adminAPI.getUsers(search ? { search } : undefined).then(({ data }) => {
      setUsers(data.users || []);
    }).catch(() => {}).finally(() => setLoading(false));
  }, [search]);

  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-xl font-bold text-text-primary">User Management</h1>
      </div>

      <div className="mb-6">
        <Input
          label="Search users..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          rightIcon={<Search className="w-4 h-4 text-text-muted" />}
        />
      </div>

      {loading ? (
        <div className="space-y-3">{[...Array(5)].map((_, i) => <SkeletonRow key={i} />)}</div>
      ) : (
        <Card padding={false}>
          <div className="grid grid-cols-[1fr_80px_80px_80px_80px] gap-2 px-5 py-3 text-xs text-text-muted uppercase tracking-wider border-b border-white/[0.06]">
            <span>User</span>
            <span className="text-center">MMR</span>
            <span className="text-center">Role</span>
            <span className="text-center">Tier</span>
            <span className="text-center">Matches</span>
          </div>
          <motion.div variants={staggerContainer} initial="initial" animate="animate">
            {users.map((u) => (
              <motion.div key={u.id} variants={staggerItem}>
                <Link
                  to={`/admin/users/${u.id}`}
                  className="grid grid-cols-[1fr_80px_80px_80px_80px] gap-2 px-5 py-3 items-center border-b border-white/[0.03] hover:bg-white/[0.02] transition-colors"
                >
                  <div className="flex items-center gap-2.5 min-w-0">
                    <Avatar src={u.steam_avatar_url} username={u.username} size="sm" />
                    <div className="min-w-0">
                      <p className="text-sm font-medium text-text-primary truncate">{u.username}</p>
                      <p className="text-xs text-text-muted truncate">{u.email}</p>
                    </div>
                  </div>
                  <span className="text-sm font-mono text-amber-400 text-center">{formatNumber(u.mmr)}</span>
                  <span className="text-center">
                    <Badge variant={u.role === 'owner' ? 'warning' : u.role === 'admin' ? 'info' : 'default'}>
                      {u.role}
                    </Badge>
                  </span>
                  <span className="text-center">
                    <Badge variant={u.tier === 'vip' ? 'vip' : u.tier === 'premium' ? 'premium' : 'default'}>
                      {u.tier}
                    </Badge>
                  </span>
                  <span className="text-sm font-mono text-text-secondary text-center">{u.matches_played}</span>
                </Link>
              </motion.div>
            ))}
            {users.length === 0 && (
              <p className="px-5 py-8 text-center text-sm text-text-muted">No users found</p>
            )}
          </motion.div>
        </Card>
      )}
    </div>
  );
}
