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

import { InProgressMatches } from "../components/InProgressMatches";
import { Leaderboard } from "../components/Leaderboard";
import { ProfileStatsCard } from "../components/ProfileStatsCard";
import { Spinner } from "../components/Spinner";
import { useHome } from "../hooks/stats";

export function HomePage() {
  const { data, isLoading, isError } = useHome();
  const navigate = useNavigate();

  if (isLoading) return <Spinner />;
  if (isError || !data) return <div className="muted">Не удалось загрузить данные.</div>;

  return (
    <div>
      {/* Карточка кликабельна целиком → общая статистика; ники внутри — просто
          текст, ссылки на профили есть в самой общей статистике. */}
      <div className="card" style={{ cursor: "pointer" }} onClick={() => navigate("/stats")}>
        <div className="row-between">
          <h3 style={{ margin: 0 }}>Топ игроков</h3>
          <span className="muted small">Вся статистика →</span>
        </div>
        <div style={{ marginTop: 10 }}>
          <Leaderboard entries={data.leaderboard} provisional={data.provisional} profileLinks={false} />
        </div>
      </div>

      <ProfileStatsCard stats={data.profile} />

      <InProgressMatches items={data.in_progress} />

      {data.active_group && (
        <div className="card">
          <h3>Активная группа</h3>
          <div className="row-between">
            <b>{data.active_group.name}</b>
            <span className="muted small">
              игр: {data.active_group.games}, побед: {data.active_group.wins}
            </span>
          </div>
        </div>
      )}
    </div>
  );
}