'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 { Button } from '../../../components/Button';

const CATS = ['OVERALL', 'STATE', 'DISTRICT', 'TOURNAMENT'] as const;

export default function RankingsPage() {
  const [category, setCategory] = useState<(typeof CATS)[number]>('OVERALL');
  const [rows, setRows] = useState<any[]>([]);
  const [page, setPage] = useState(1);
  const [pages, setPages] = useState(1);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const load = async () => {
    setLoading(true);
    setError('');
    try {
      const res = await apiRequest(`/players/rankings?category=${category}&page=${page}&pageSize=20`);
      setRows(res.data || []);
      setPages(res.pagination?.totalPages || 1);
    } catch (e: any) {
      setError(e.message || 'Failed to load rankings');
    } finally {
      setLoading(false);
    }
  };

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

  return (
    <div className="space-y-3">
      <div className="d11-sheet overflow-hidden">
        <div className="flex items-center justify-between border-b border-gray-100 px-4 py-3">
          <div>
            <h1 className="font-display text-lg font-bold text-d11-ink">Player ranks</h1>
            <p className="text-xs text-d11-muted">Real-player performance boards</p>
          </div>
          <Link href="/players" className="text-sm font-bold text-d11-red hover:underline">
            All players
          </Link>
        </div>
        <div className="flex flex-wrap">
          {CATS.map((c) => (
            <button
              key={c}
              type="button"
              onClick={() => {
                setCategory(c);
                setPage(1);
              }}
              className={`d11-tab min-h-[48px] cursor-pointer ${category === c ? 'd11-tab-active' : ''}`}
            >
              {c}
            </button>
          ))}
        </div>
      </div>
      {loading && <LoadingBlock />}
      {error && <ErrorBlock message={error} onRetry={load} />}
      {!loading && !error && rows.length === 0 && (
        <EmptyBlock title="No rankings published yet." hint="Rankings appear after scored matches." />
      )}
      {!loading && !error && rows.length > 0 && (
        <div className="d11-card overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full min-w-[480px] text-left text-sm">
              <thead className="bg-gray-50 text-[11px] uppercase tracking-wider text-d11-muted">
                <tr>
                  <th className="px-4 py-3">Rank</th>
                  <th className="px-4 py-3">Player</th>
                  <th className="px-4 py-3">Points</th>
                  <th className="px-4 py-3">Matches</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100">
                {rows.map((r) => (
                  <tr key={r._id} className="hover:bg-gray-50">
                    <td className="px-4 py-3 font-mono font-bold text-d11-red">#{r.rank}</td>
                    <td className="px-4 py-3">
                      <Link
                        href={`/players/${r.playerId?._id || r.playerId}`}
                        className="font-medium text-d11-ink hover:text-d11-red"
                      >
                        {r.playerId?.name || 'Player'}
                      </Link>
                      <div className="mt-0.5">
                        <Badge variant="slate">{r.playerId?.role || '—'}</Badge>
                      </div>
                    </td>
                    <td className="px-4 py-3 font-mono text-d11-ink">{r.points}</td>
                    <td className="px-4 py-3 text-d11-muted">{r.matchesPlayed}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
      {pages > 1 && (
        <div className="flex gap-2">
          <Button variant="secondary" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
            Prev
          </Button>
          <Button variant="secondary" disabled={page >= pages} onClick={() => setPage((p) => p + 1)}>
            Next
          </Button>
        </div>
      )}
    </div>
  );
}