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

import { formatDate, formatDuration } from "../domain/format";
import type { MatchListItem } from "../domain/types";
import { MatchListView } from "./MatchList";

/**
 * История партий игрока в профиле. Подробный режим — тот же список, что у группы
 * (MatchListView со всеми участниками); компактный — строка с результатом самого
 * владельца профиля, поэтому компонент и принимает его userId.
 */
export function MatchHistory({
  items,
  userId,
  detail,
  hasMore = false,
  loadingMore = false,
  onMore,
}: {
  items: MatchListItem[];
  userId: number;
  detail: string;
  hasMore?: boolean;
  loadingMore?: boolean;
  onMore?: () => void;
}) {
  const navigate = useNavigate();

  const more = hasMore && onMore && (
    <button
      className="btn btn-ghost btn-block"
      style={{ marginTop: 10 }}
      onClick={onMore}
      disabled={loadingMore}
    >
      {loadingMore ? "Загружаю…" : "Показать ещё"}
    </button>
  );

  if (items.length === 0) return <div className="muted small">Партий пока нет.</div>;
  if (detail === "full")
    return (
      <>
        <MatchListView items={items} />
        {more}
      </>
    );

  return (
    <div className="stack">
      {items.map((m) => {
        const mine = m.participants.find((p) => p.user_id === userId);
        return (
          <button
            key={m.id}
            className="card row-between"
            style={{ margin: 0, width: "100%", textAlign: "left" }}
            onClick={() => navigate(`/match/${m.id}`)}
          >
            <div className="row" style={{ gap: 10, minWidth: 0 }}>
              <span
                className={
                  "place-badge" +
                  (mine?.place === 1 && !mine?.eliminated ? " first" : "") +
                  (mine?.eliminated ? " eliminated" : "")
                }
              >
                {mine?.eliminated ? "✕" : (mine?.place ?? "—")}
              </span>
              <span
                style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
              >
                {mine?.faction_name ?? "—"}
              </span>
            </div>
            <span className="muted small" style={{ flexShrink: 0 }}>
              {formatDate(m.played_at)} · {formatDuration(m.duration_minutes)}
            </span>
          </button>
        );
      })}
      {more}
    </div>
  );
}