'use client';

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

export default function PlayerProfilePage() {
  const { id } = useParams<{ id: string }>();
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const load = async () => {
    setLoading(true);
    try {
      const res = await apiRequest(`/players/${id}`);
      setData(res.data);
      setError('');
    } catch (e: any) {
      setError(e.message || 'Player not found');
    } finally {
      setLoading(false);
    }
  };

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

  if (loading) return <LoadingBlock />;
  if (error) {
    return (
      <div className="space-y-3">
        <Link href="/players" className="inline-flex min-h-[44px] items-center text-sm font-bold text-d11-muted hover:text-d11-red">
          ← Players
        </Link>
        <ErrorBlock message={error} onRetry={load} />
      </div>
    );
  }
  if (!data?.player) {
    return (
      <div className="space-y-3">
        <EmptyBlock
          title="Player not found"
          action={
            <Link href="/players" className="text-sm font-bold text-d11-red hover:underline">
              Browse players
            </Link>
          }
        />
      </div>
    );
  }

  const { player, performance, rankings } = data;
  const totals = (performance || []).reduce(
    (a: any, p: any) => ({
      runs: a.runs + (p.runs || 0),
      wickets: a.wickets + (p.wickets || 0),
      catches: a.catches + (p.catches || 0),
      points: a.points + (p.fantasyPoints || 0),
    }),
    { runs: 0, wickets: 0, catches: 0, points: 0 }
  );

  return (
    <div className="space-y-3">
      <Link href="/players" className="text-xs font-bold text-d11-muted hover:text-d11-red">
        ← Players
      </Link>
      <div className="d11-card flex flex-wrap items-start gap-4 p-4">
        <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-d11-soft text-2xl font-bold text-d11-red">
          {player.name?.[0] || '?'}
        </div>
        <div>
          <h1 className="font-display text-xl font-bold text-d11-ink">{player.name}</h1>
          <div className="mt-2 flex flex-wrap gap-2 text-xs text-d11-muted">
            <Badge variant="emerald">{player.playerId}</Badge>
            <Badge variant="slate">{player.role?.replace('_', ' ')}</Badge>
            <span>
              {player.teamId?.name || 'Free agent'} · {player.district}, {player.state}
            </span>
            <span>· {player.creditValue} credits</span>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
        {[
          ['Runs', totals.runs],
          ['Wickets', totals.wickets],
          ['Catches', totals.catches],
          ['Fantasy pts', totals.points],
        ].map(([l, v]) => (
          <div key={l as string} className="d11-card p-3">
            <div className="text-[11px] uppercase text-d11-muted">{l}</div>
            <div className="font-mono text-xl font-bold text-d11-ink">{v}</div>
          </div>
        ))}
      </div>

      <section>
        <h2 className="mb-2 px-1 text-sm font-bold text-d11-ink">Rankings</h2>
        {!rankings?.length ? (
          <EmptyBlock title="No ranking entries yet." />
        ) : (
          <ul className="space-y-2 text-sm">
            {rankings.map((r: any) => (
              <li key={r._id} className="d11-card px-3 py-2 text-d11-ink">
                {r.category} #{r.rank} · {r.points} pts
              </li>
            ))}
          </ul>
        )}
      </section>

      <section>
        <h2 className="mb-2 px-1 text-sm font-bold text-d11-ink">Recent performance</h2>
        {!performance?.length ? (
          <EmptyBlock title="No match performances yet." />
        ) : (
          <ul className="space-y-2 text-xs text-d11-muted">
            {performance.map((p: any) => (
              <li key={p._id} className="d11-card px-3 py-2">
                {p.matchId?.title || 'Match'} — {p.runs} runs, {p.wickets} wkts, {p.fantasyPoints} pts
              </li>
            ))}
          </ul>
        )}
      </section>
    </div>
  );
}