'use client';

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { Search, UserRound, ChevronRight } from 'lucide-react';
import { apiRequest } from '../../../lib/api';
import { formatCoins } from '../../../lib/coins';
import { Badge } from '../../../components/Badge';
import { ShimmerTable } from '../../../components/Shimmer';

export default function AdminPlayersPage() {
  const [users, setUsers] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [status, setStatus] = useState('');
  const [total, setTotal] = useState(0);

  const load = async (q = search, st = status) => {
    setLoading(true);
    try {
      const params = new URLSearchParams({ role: 'CUSTOMER', pageSize: '50' });
      if (q.trim()) params.set('search', q.trim());
      if (st) params.set('status', st);
      const res = await apiRequest(`/users?${params}`);
      setUsers(res.data || []);
      setTotal(res.pagination?.total ?? res.data?.length ?? 0);
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    load();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [status]);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight text-white">Players</h1>
        <p className="mt-1 text-xs text-zinc-400">
          Customer accounts — profile, wallet, devices, game history &amp; P&amp;L ({total} total)
        </p>
      </div>

      <div className="flex flex-col gap-3 sm:flex-row">
        <div className="relative flex-1">
          <Search className="absolute left-3.5 top-3 h-4 w-4 text-zinc-400" />
          <input
            type="search"
            placeholder="Search by name or mobile…"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            onKeyDown={(e) => e.key === 'Enter' && load()}
            className="w-full rounded-xl border border-zinc-800 bg-zinc-900 py-2.5 pl-9 pr-4 text-xs text-white placeholder-zinc-500 outline-none focus:border-emerald-500"
          />
        </div>
        <select
          value={status}
          onChange={(e) => setStatus(e.target.value)}
          className="rounded-xl border border-zinc-800 bg-zinc-900 px-3.5 py-2.5 text-xs text-zinc-300 outline-none focus:border-emerald-500"
        >
          <option value="">All statuses</option>
          <option value="ACTIVE">Active</option>
          <option value="SUSPENDED">Suspended</option>
          <option value="INACTIVE">Inactive</option>
        </select>
        <button
          type="button"
          onClick={() => load()}
          className="rounded-xl border border-zinc-700 bg-zinc-900 px-4 py-2.5 text-xs font-semibold text-zinc-200 hover:border-emerald-600 hover:text-emerald-400"
        >
          Search
        </button>
      </div>

      <div className="overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900/80">
        {loading ? (
          <ShimmerTable rows={8} cols={5} />
        ) : users.length === 0 ? (
          <div className="p-10 text-center text-xs text-zinc-500">No players found.</div>
        ) : (
          <table className="w-full text-left text-sm">
            <thead className="border-b border-zinc-800 bg-zinc-950/40 text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
              <tr>
                <th className="px-5 py-3">Player</th>
                <th className="px-5 py-3">Mobile</th>
                <th className="px-5 py-3">Wallet</th>
                <th className="px-5 py-3">KYC</th>
                <th className="px-5 py-3">Status</th>
                <th className="px-5 py-3 text-right">Profile</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-zinc-800/60 text-xs">
              {users.map((u) => (
                <tr key={u._id} className="hover:bg-zinc-800/30">
                  <td className="px-5 py-3">
                    <div className="flex items-center gap-2.5">
                      <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-800 text-emerald-400">
                        <UserRound className="h-4 w-4" />
                      </span>
                      <span className="font-medium text-white">{u.name}</span>
                    </div>
                  </td>
                  <td className="px-5 py-3 font-mono text-zinc-300">{u.phone}</td>
                  <td className="px-5 py-3 font-mono text-white">
                    {formatCoins(u.wallet?.totalBalance ?? 0)}
                  </td>
                  <td className="px-5 py-3">
                    <Badge variant="slate">{u.kycStatus || 'NONE'}</Badge>
                  </td>
                  <td className="px-5 py-3">
                    <Badge
                      variant={
                        u.status === 'ACTIVE' ? 'emerald' : u.status === 'SUSPENDED' ? 'rose' : 'slate'
                      }
                    >
                      {u.status}
                    </Badge>
                  </td>
                  <td className="px-5 py-3 text-right">
                    <Link
                      href={`/admin/users/${u._id}`}
                      className="inline-flex items-center gap-1 rounded-lg px-2.5 py-1.5 text-emerald-400 hover:bg-emerald-500/10"
                    >
                      Open <ChevronRight className="h-3.5 w-3.5" />
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}