import type { ProfileStats } from "../domain/types";

function pct(v: number | null | undefined): string {
  return v == null ? "—" : `${Math.round(v * 100)}%`;
}

export function ProfileStatsCard({
  stats,
  title = "Моя статистика",
}: {
  stats: ProfileStats;
  title?: string;
}) {
  const o = stats.overall;
  // Серебристый рейтинг — пока игрок «новичок» (меньше min_games партий) или
  // не играл вовсе; золотой — только подтверждённый (как в топах).
  const provisional = o.score == null || o.games < stats.min_games;
  return (
    <div className="card">
      <h3>{title}</h3>
      <div className="row-between">
        <div>Игр</div>
        <b>{o.games}</b>
      </div>
      <div className="row-between">
        <div>Побед</div>
        <b>{o.wins}</b>
      </div>
      <div className="row-between">
        <div>Винрейт</div>
        <b>{pct(o.win_rate)}</b>
      </div>
      <div className="row-between">
        <div>Среднее место</div>
        <b>{o.avg_place ?? "—"}</b>
      </div>
      <div className="row-between">
        <div>Очки (рейтинг)</div>
        <b className={"lb-score" + (provisional ? " provisional" : "")}>{o.score ?? "—"}</b>
      </div>
      {/* Любимая — личный выбор игрока в профиле; ниже — статистика по партиям. */}
      {stats.favorite_faction && (
        <div className="row-between">
          <div>Любимая фракция</div>
          <b>{stats.favorite_faction.name_ru}</b>
        </div>
      )}
      {stats.main_faction && (
        <div className="row-between">
          <div>Чаще всего играет на</div>
          <b>{stats.main_faction.name_ru_prepositional}</b>
        </div>
      )}
    </div>
  );
}