'use client';

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { apiRequest } from '../../../lib/api';
import { EmptyBlock, ErrorBlock, LoadingBlock } from '../../../components/StateBlock';
import { Badge } from '../../../components/Badge';
import { PageHeader } from '../../../components/PageHeader';

export default function PlayersPage() {
  const [q, setQ] = useState('');
  const [players, setPlayers] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const load = async (search = q) => {
    setLoading(true);
    setError('');
    try {
      const params = new URLSearchParams({ pageSize: '30', status: 'ACTIVE' });
      if (search.trim().length >= 2) params.set('search', search.trim());
      const res = await apiRequest(`/players?${params}`);
      setPlayers(res.data || []);
    } catch (e: any) {
      setError(e.message || 'Failed to load players');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    load();
  }, []);

  useEffect(() => {
    const t = setTimeout(() => {
      if (q.length === 0 || q.length >= 2) load(q);
    }, 350);
    return () => clearTimeout(t);
  }, [q]);

  return (
    <div className="space-y-3">
      <PageHeader
        title="Players"
        subtitle="Search active players"
        action={
          <Link href="/rankings" className="text-sm font-bold text-d11-red hover:underline">
            Ranks
          </Link>
        }
      />
      <div className="d11-card p-4">
        <input
          value={q}
          onChange={(e) => setQ(e.target.value)}
          placeholder="Search name or ID (min 2 chars)…"
          className="d11-input"
          inputMode="search"
          aria-label="Search players"
        />
      </div>
      {loading && <LoadingBlock />}
      {error && <ErrorBlock message={error} onRetry={() => load()} />}
      {!loading && !error && players.length === 0 && <EmptyBlock title="No players found." />}
      <div className="grid gap-2 sm:grid-cols-2">
        {players.map((p) => (
          <Link
            key={p._id}
            href={`/players/${p._id}`}
            className="d11-card min-h-[56px] cursor-pointer px-4 py-3 transition hover:shadow-lift"
          >
            <div className="flex items-center justify-between gap-2">
              <span className="font-medium text-d11-ink">{p.name}</span>
              <Badge variant="slate">{p.role?.replace('_', ' ')}</Badge>
            </div>
            <div className="mt-1 text-xs text-d11-muted">
              {p.playerId} · {p.district}, {p.state} · {p.creditValue} cr
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}