import { useNavigate } from "react-router-dom";

import { formatDuration } from "../domain/format";
import { winReasonLabel } from "../domain/winReasons";
import type { MatchListItem } from "../domain/types";

export function MatchListView({ items }: { items: MatchListItem[] }) {
  const navigate = useNavigate();
  if (items.length === 0) return <div className="muted small">Партий пока нет.</div>;

  return (
    <div className="stack">
      {items.map((m) => {
        const inProgress = m.status === "in_progress";
        const sorted = [...m.participants].sort((a, b) => (a.place ?? 99) - (b.place ?? 99));
        return (
          <button
            key={m.id}
            className="card"
            style={{ textAlign: "left", width: "100%", margin: 0 }}
            onClick={() => navigate(`/match/${m.id}`)}
          >
            <div className="row-between">
              <span className="muted small">{m.played_at}</span>
              {inProgress ? (
                <span className="badge" style={{ color: "var(--accent-2)" }}>идёт</span>
              ) : (
                <span className="muted small">
                  {formatDuration(m.duration_minutes)} · {winReasonLabel(m.win_reason)}
                </span>
              )}
            </div>
            <div className="stack" style={{ marginTop: 6, gap: 4 }}>
              {sorted.map((p) => (
                <div key={p.user_id} className="row" style={{ gap: 8 }}>
                  <span
                    className={
                      "place-badge" +
                      (p.place === 1 && !p.eliminated ? " first" : "") +
                      (p.eliminated ? " eliminated" : "")
                    }
                  >
                    {p.eliminated ? "✕" : (p.place ?? "—")}
                  </span>
                  <span>{p.nickname}</span>
                  <span className="muted small">· {p.faction_name}</span>
                </div>
              ))}
            </div>
          </button>
        );
      })}
    </div>
  );
}