import { useMutation, useQuery } from '@tanstack/react-query';
import { Loader2, Play, Trophy } from 'lucide-react';
import { useParams } from 'react-router';
import { toast } from 'sonner';
import { useClient } from 'hooks/useClient';
import { isLevel, type Replay } from './levels';

/**
 * The saved games for whichever difficulty the URL names, best first.
 *
 * Rows are BUTTONS, not links, and that is a rule rather than a preference: a row here does not navigate
 * anywhere, it makes the game do something. `docs/navigation-audit.md` draws exactly that line — a control
 * that mutates stays a button, and only one that opens an addressable thing is an anchor. Which difficulty
 * is showing IS addressable, and that is the panel next door.
 *
 * Ordering comes from the server, which is where it belongs: a loss is never "best" however short it was,
 * so wins rank by time and losses fall to the end. Re-sorting here would be a second place to disagree.
 */
export const ReplaysPanel = () => {
  const { section } = useParams();
  const client = useClient();
  const level = isLevel(section) ? section : null;

  const { data, isLoading } = useQuery({
    queryKey: ['minesweeper', 'replays', level],
    queryFn: () => client.get<{ replays: Replay[] }>(`/minesweeper/replays?level=${level}`),
    enabled: !!level,
  });

  const play = useMutation({
    mutationFn: (file: string) => client.post('/minesweeper/replay', { file }),
    onError: () => toast.error('The game would not open that recording.'),
  });

  const replays = data?.replays ?? [];

  return (
    <div className="flex size-full flex-col overflow-hidden">
      <div className="px-3 py-2 text-xs font-medium text-muted-foreground">
        {level ? `${replays.length} saved ${replays.length === 1 ? "game" : "games"}` : "Replays"}
      </div>

      <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-2">
        {isLoading ? (
          <p className="px-1 py-2 text-xs text-muted-foreground">Loading…</p>
        ) : replays.length === 0 ? (
          <p className="px-1 py-2 text-xs text-muted-foreground">No recordings for this level yet.</p>
        ) : (
          replays.map((replay, index) => {
            const pending = play.isPending && play.variables === replay.file;
            return (
              <button
                key={replay.file}
                type="button"
                onClick={() => play.mutate(replay.file)}
                disabled={play.isPending}
                className="group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-accent/50 disabled:opacity-60"
              >
                {pending ? (
                  <Loader2 className="size-3.5 shrink-0 animate-spin text-muted-foreground" />
                ) : (
                  <Play className="size-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
                )}
                {/* A rank only means anything while the list is ranked, so losses do not get one. */}
                <span className="w-4 shrink-0 text-right text-xs tabular-nums text-muted-foreground">
                  {replay.lost ? "" : index + 1}
                </span>
                <span className={`shrink-0 text-sm tabular-nums ${replay.lost ? "text-muted-foreground" : ""}`}>
                  {replay.time.toFixed(2)}s
                </span>
                {index === 0 && !replay.lost ? <Trophy className="size-3.5 shrink-0 text-amber-500" /> : null}
                {replay.lost ? <span className="shrink-0 text-[10px] text-muted-foreground">lost</span> : null}
                <span className="ml-auto truncate text-[11px] text-muted-foreground">{replay.played}</span>
              </button>
            );
          })
        )}
      </div>
    </div>
  );
};