'use client';

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

export default function FantasyRankingsPage() {
  const [rows, setRows] = useState<any[]>([]);
  const [me, setMe] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const user = getCurrentUser();

  const load = async () => {
    setLoading(true);
    try {
      const [r, profile] = await Promise.all([
        apiRequest('/fantasy/rankings?page=1&pageSize=25'),
        user ? apiRequest('/fantasy/me') : Promise.resolve({ data: null }),
      ]);
      setRows(r.data || []);
      setMe(profile.data);
      setError('');
    } catch (e: any) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  };

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

  return (
    <div className="space-y-3">
      <PageHeader
        title="Fantasy rankings"
        subtitle="Contest points leaderboard"
        backHref="/fantasy"
        backLabel="Contests"
      />
      {me && user && (
        <div className="rounded-xl border border-red-200 bg-d11-soft px-4 py-3 text-sm text-d11-ink">
          Your position: rank {me.rank ?? '—'} · {me.totalPoints || 0} pts · {me.contestsPlayed || 0} contests ·{' '}
          {me.wins || 0} wins
        </div>
      )}
      {loading && <LoadingBlock />}
      {error && <ErrorBlock message={error} onRetry={load} />}
      {!loading && !error && rows.length === 0 && <EmptyBlock title="No fantasy rankings yet." />}
      {!loading && rows.length > 0 && (
        <div className="d11-card overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full min-w-[400px] text-left text-sm">
              <thead className="bg-gray-50 text-[11px] uppercase text-d11-muted">
                <tr>
                  <th className="px-4 py-3">#</th>
                  <th className="px-4 py-3">User</th>
                  <th className="px-4 py-3">Points</th>
                  <th className="px-4 py-3">Wins</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100">
                {rows.map((r, i) => (
                  <tr key={r._id} className="hover:bg-gray-50">
                    <td className="px-4 py-3 font-mono font-bold text-d11-red">{r.rank || i + 1}</td>
                    <td className="px-4 py-3 text-d11-ink">{r.userId?.name || 'Player'}</td>
                    <td className="px-4 py-3 font-mono text-d11-ink">{r.totalPoints}</td>
                    <td className="px-4 py-3 text-d11-muted">{r.wins}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}