'use client';

import React, { useCallback, useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import { apiRequest } from '../../../../lib/api';
import { subscribeToMatch } from '../../../../lib/socket';
import { formatScore, statusVariant } from '../../../../lib/format';
import { Badge } from '../../../../components/Badge';
import { EmptyBlock, ErrorBlock, LoadingBlock } from '../../../../components/StateBlock';
import { Button } from '../../../../components/Button';
import { PageHeader } from '../../../../components/PageHeader';

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

  const load = useCallback(async () => {
    try {
      const res = await apiRequest(`/matches/${id}`);
      setData(res.data);
      setError('');
    } catch (e: any) {
      setError(e.message || 'Match not found');
    } finally {
      setLoading(false);
    }
  }, [id]);

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

  useEffect(() => {
    if (!id) return;
    return subscribeToMatch(id, () => load());
  }, [id, load]);

  if (loading) return <LoadingBlock label="Loading scorecard…" />;
  if (error) {
    return (
      <div className="space-y-3">
        <PageHeader title="Match" backHref="/" backLabel="Home" />
        <ErrorBlock message={error} onRetry={load} />
      </div>
    );
  }
  if (!data?.match) {
    return (
      <div className="space-y-3">
        <PageHeader title="Match" backHref="/" backLabel="Home" />
        <EmptyBlock
          title="Match not found"
          action={
            <Link href="/">
              <Button variant="secondary">Browse matches</Button>
            </Link>
          }
        />
      </div>
    );
  }

  const { match, innings, latestBalls, commentary } = data;
  const target = match.target;
  const chasing = match.currentInning === 2 && target;
  const batting = match.currentInning === 1 ? match.teamA : match.teamB;
  const needed = chasing ? Math.max(0, target - (batting?.score?.runs || 0)) : null;
  const showFantasyCta = match.fantasyEnabled && match.status !== 'COMPLETED';

  return (
    <div className="space-y-3">
      <div className="d11-sheet overflow-hidden">
        <div className="flex flex-wrap items-center justify-between gap-2 border-b border-gray-100 px-3 py-2">
          <div className="min-w-0">
            <Link
              href="/"
              className="inline-flex min-h-8 items-center text-xs font-bold text-d11-muted hover:text-d11-red"
            >
              ← Home
            </Link>
            <p className="truncate text-sm font-bold text-d11-ink">
              {match.teamA?.shortName || 'T1'} vs {match.teamB?.shortName || 'T2'}
            </p>
            <div className="mt-1 flex flex-wrap items-center gap-1.5 text-[10px] text-d11-muted">
              <Badge variant={statusVariant(match.status)}>{match.status}</Badge>
              <span>{match.venue}</span>
            </div>
          </div>
          {showFantasyCta && (
            <Link href={`/fantasy?matchId=${match._id}`}>
              <Button size="sm">
                {match.status === 'SCHEDULED' ? 'Create team' : 'Contests'}
              </Button>
            </Link>
          )}
        </div>
      </div>

      <div className="grid gap-3 sm:grid-cols-2">
        {[match.teamA, match.teamB].map((t: any) => (
          <div key={t.teamId} className="d11-card p-4">
            <div className="text-[11px] uppercase tracking-wider text-d11-muted">{t.name}</div>
            <div className="mt-1 font-mono text-2xl font-bold text-d11-ink">{formatScore(t)}</div>
          </div>
        ))}
      </div>

      {chasing && (
        <div className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
          Target {target} · Need {needed} more
        </div>
      )}

      <div className="grid gap-3 lg:grid-cols-2">
        <Panel title="Recent balls">
          {!latestBalls?.length ? (
            <p className="text-xs text-d11-muted">No balls yet.</p>
          ) : (
            <ul className="space-y-2 text-xs">
              {latestBalls.map((b: any) => (
                <li key={b._id} className="flex justify-between gap-2 border-b border-gray-100 pb-2">
                  <span className="font-mono text-d11-muted">
                    {b.overNumber}.{b.ballNumber}
                  </span>
                  <span className="font-semibold text-d11-ink">
                    {b.isWicket ? `W ${b.wicketKind}` : b.extraType !== 'NONE' ? b.extraType : b.runsBatter}
                  </span>
                </li>
              ))}
            </ul>
          )}
        </Panel>
        <Panel title="Commentary">
          {!commentary?.length ? (
            <p className="text-xs text-d11-muted">No commentary yet.</p>
          ) : (
            <ul className="max-h-64 space-y-2 overflow-y-auto text-xs text-d11-ink">
              {commentary.map((c: any) => (
                <li key={c._id}>
                  <span className="mr-2 font-mono text-d11-red">
                    {c.overNumber}.{c.ballNumber}
                  </span>
                  {c.text}
                </li>
              ))}
            </ul>
          )}
        </Panel>
      </div>

      {innings?.length > 0 && (
        <Panel title="Innings">
          <ul className="space-y-1 text-sm text-d11-ink">
            {innings.map((inn: any) => (
              <li key={inn._id}>
                Innings {inn.inningNumber}: {inn.totalRuns}/{inn.totalWickets} (
                {inn.totalOvers}.{inn.totalBalls})
              </li>
            ))}
          </ul>
        </Panel>
      )}
    </div>
  );
}

function Panel({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="d11-card p-4">
      <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-d11-muted">{title}</h3>
      {children}
    </div>
  );
}