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

import { Avatar } from "../components/Avatar";
import { ProfileStatsCard } from "../components/ProfileStatsCard";
import { Spinner } from "../components/Spinner";
import { usePublicProfile } from "../hooks/stats";

/**
 * Просмотр ЧУЖОГО профиля — отдельный read-only компонент (намеренно изолирован от
 * редактируемого AccountPage: здесь нет никаких контролов правки, только просмотр).
 */
export function PublicProfilePage() {
  const { userId } = useParams();
  const id = Number(userId);
  const { data, isLoading, isError } = usePublicProfile(id);

  if (isLoading) return <Spinner />;
  if (isError || !data) return <div className="muted">Профиль не найден.</div>;

  return (
    <div>
      <div className="card">
        <div className="row" style={{ gap: 14 }}>
          <Avatar url={data.avatar_url} nickname={data.nickname} size={64} />
          <div style={{ flex: 1 }}>
            <b style={{ fontSize: 18 }}>{data.nickname}</b>
            {data.bio ? (
              <div className="muted" style={{ marginTop: 6, whiteSpace: "pre-wrap" }}>
                {data.bio}
              </div>
            ) : (
              <div className="muted small" style={{ marginTop: 6 }}>
                Игрок пока не рассказал о себе.
              </div>
            )}
          </div>
        </div>
      </div>

      <ProfileStatsCard stats={data.stats} title="Статистика" />
    </div>
  );
}