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

import { formatTime, plural } from "../domain/format";
import type { HomeInProgressMatch } from "../domain/types";

export function InProgressMatches({ items }: { items: HomeInProgressMatch[] }) {
  const navigate = useNavigate();
  if (items.length === 0) return null;

  return (
    <div className="card" style={{ borderColor: "var(--accent)" }}>
      <h3 style={{ color: "var(--accent-2)" }}>Незавершённые партии</h3>
      <div className="stack">
        {items.map((m) => (
          <button
            key={m.id}
            className="card row-between"
            onClick={() => navigate(`/match/${m.id}`)}
            style={{ margin: 0, width: "100%", textAlign: "left" }}
          >
            <div style={{ minWidth: 0 }}>
              <div className="row" style={{ gap: 8 }}>
                <b>{m.group_name}</b>
                <span className="badge badge-live">идёт</span>
              </div>
              <div className="muted small">
                {formatTime(m.started_at)} · {m.player_count}{" "}
                {plural(m.player_count, "игрок", "игрока", "игроков")}
              </div>
              <div
                className="small"
                style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
              >
                {/* Ники — просто текст: карточка целиком ведёт в партию,
                    как и в списке партий группы. */}
                {m.participants.map((p) => p.nickname).join(", ")}
              </div>
            </div>
            <div className="row" style={{ gap: 4, color: "var(--accent-2)", flexShrink: 0 }}>
              Завершить <ChevronRight size={18} />
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}