---
import Layout from "../layouts/Layout.astro";
---

<Layout wide>
  <Fragment slot="head">
    <title th:text="|${title} - ${site.title}|"></title>
  </Fragment>

  <section class="wi-steam">
    <div class="wi-container">
    <div class="wi-steam__header">
      <h1 class="wi-steam__title" th:text="${title}">Steam</h1>
      <span class="wi-page-accent"></span>
    </div>

    <th:block th:with="profile = ${steamFinder.getProfile()}, stats = ${steamFinder.getStats()}, badges = ${steamFinder.getBadges()}, recentGames = ${steamFinder.getRecentGames(recentGamesLimit)}">

    <div class="wi-steam__profile" th:if="${profile != null}">
      <div class="wi-steam__avatar">
        <img
          th:if="${profile.summary != null and !#strings.isEmpty(profile.summary?.avatarFull) and !#strings.contains(profile.summary?.avatarFull, '00000000000000000')}"
          th:src="${profile.summary?.avatarFull}"
          th:alt="${profile.summary?.personaName ?: 'Steam'}"
          class="wi-steam__avatar-img"
          decoding="async"
        />
        <span
          class="wi-steam__avatar-placeholder"
          th:if="${profile.summary == null or #strings.isEmpty(profile.summary?.avatarFull) or #strings.contains(profile.summary?.avatarFull, '00000000000000000')}"
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="36" height="36">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
          </svg>
        </span>
        <span
          class="wi-steam__status-dot wi-steam__status-dot--playing"
          th:if="${profile.playing}"
        ></span>
        <span
          class="wi-steam__status-dot wi-steam__status-dot--online"
          th:if="${!profile.playing and profile.summary?.personaState != null and profile.summary?.personaState > 0}"
        ></span>
        <span
          class="wi-steam__status-dot wi-steam__status-dot--offline"
          th:if="${!profile.playing and (profile.summary?.personaState == null or profile.summary?.personaState == 0)}"
        ></span>
      </div>
      <div class="wi-steam__info">
        <h2 class="wi-steam__name" th:if="${profile.summary != null}" th:text="${profile.summary?.personaName}"></h2>
        <span class="wi-steam__status-text" th:if="${!#strings.isEmpty(profile.statusText)}" th:text="${profile.statusText}"></span>
        <a
          class="wi-steam__profile-link"
          th:if="${profile.summary != null and !#strings.isEmpty(profile.summary?.profileUrl)}"
          th:href="${profile.summary?.profileUrl}"
          target="_blank"
          rel="noopener noreferrer"
        >Steam 主页 →</a>
      </div>
      <div class="wi-steam__level" th:if="${profile.steamLevel != null}">
        <span class="wi-steam__level-num" th:text="${profile.steamLevel}"></span>
        <span class="wi-steam__level-label">等级</span>
      </div>
    </div>

    <div class="wi-steam__stats" th:if="${stats != null}">
      <div class="wi-steam__stat-card">
        <span class="wi-steam__stat-value" th:text="${stats.totalGames} ?: 0">0</span>
        <span class="wi-steam__stat-label">拥有游戏</span>
      </div>
      <div class="wi-steam__stat-card">
        <span class="wi-steam__stat-value" th:text="${stats.totalPlaytimeFormatted} ?: '0 小时'">0 小时</span>
        <span class="wi-steam__stat-label">总游玩时长</span>
      </div>
      <div class="wi-steam__stat-card">
        <span class="wi-steam__stat-value" th:text="${stats.recentPlaytimeFormatted} ?: '0 小时'">0 小时</span>
        <span class="wi-steam__stat-label">近两周</span>
      </div>
      <div class="wi-steam__stat-card">
        <span class="wi-steam__stat-value" th:text="${badges != null and badges.totalBadges != null ? badges.totalBadges : 0}">0</span>
        <span class="wi-steam__stat-label">徽章</span>
      </div>
    </div>

    <div class="wi-steam__section" th:if="${recentGames != null and !recentGames.isEmpty()}">
      <h3 class="wi-steam__section-title">最近游玩</h3>
      <div class="wi-steam__recent-scroll">
        <article class="wi-steam__recent-card" th:each="game : ${recentGames}">
          <a
            class="wi-steam__card-link"
            th:if="${enableGameLink}"
            th:href="@{'https://store.steampowered.com/app/' + ${game.appId}}"
            target="_blank"
            rel="noopener noreferrer"
            tabindex="-1"
            aria-hidden="true"
          ></a>
          <div class="wi-steam__recent-cover">
            <img
              th:src="${game.headerImageUrl}"
              th:alt="${game.name}"
              class="wi-steam__recent-img"
              loading="lazy"
              decoding="async"
            />
          </div>
          <div class="wi-steam__recent-body">
            <h4 class="wi-steam__recent-name" th:text="${game.name}"></h4>
            <div class="wi-steam__recent-meta">
              <span class="wi-steam__recent-time" th:text="${game.playtime2WeeksFormatted} ?: '0 小时'"></span>
              <span
                class="wi-steam__recent-achievements"
                th:if="${game.achievementProgressText != null}"
                th:text="${game.achievementProgressText}"
              ></span>
            </div>
          </div>
        </article>
      </div>
    </div>

    </th:block>

    <div class="wi-steam__section">
      <h3 class="wi-steam__section-title">游戏库</h3>
      <div class="wi-steam__games-grid">
        <article class="wi-steam__game-card" th:each="game : ${games.items}">
          <a
            class="wi-steam__card-link"
            th:if="${enableGameLink}"
            th:href="@{'https://store.steampowered.com/app/' + ${game.appId}}"
            target="_blank"
            rel="noopener noreferrer"
            tabindex="-1"
            aria-hidden="true"
          ></a>
          <div class="wi-steam__game-cover">
            <img
              th:src="${game.headerImageUrl}"
              th:alt="${game.name}"
              class="wi-steam__game-img"
              loading="lazy"
              decoding="async"
            />
          </div>
          <div class="wi-steam__game-body">
            <h4 class="wi-steam__game-name" th:text="${game.name}"></h4>
            <div class="wi-steam__game-meta">
              <span class="wi-steam__game-time" th:text="${game.playtimeFormatted} ?: '0 小时'"></span>
              <span
                class="wi-steam__game-last"
                th:if="${!#strings.isEmpty(game.lastPlayedFormatted)}"
                th:text="|最后游玩 ${game.lastPlayedFormatted}|"
              ></span>
            </div>
          </div>
        </article>
      </div>
    </div>

    <nav
      class="wi-steam__pagination"
      th:if="${games.hasPrevious() or games.hasNext()}"
    >
      <a
        class="wi-steam__page-btn"
        th:if="${games.hasPrevious()}"
        th:href="${games.prevUrl}"
      >上一页</a>
      <span class="wi-steam__page-spacer" th:if="${games.hasPrevious() and games.hasNext()}"></span>
      <a
        class="wi-steam__page-btn"
        th:if="${games.hasNext()}"
        th:href="${games.nextUrl}"
      >下一页</a>
    </nav>
    </div>
  </section>
</Layout>

<style>
  .wi-steam {
    padding-block: 1rem;
  }

  .wi-steam__header {
    text-align: center;
    margin-bottom: var(--space-3xl);
  }

  .wi-steam__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-sm);
  }

  .wi-page-accent {
    display: block;
    width: 48px;
    height: 3px;
    margin: var(--space-sm) auto 0;
    border-radius: 9999px;
    background: var(--accent);
  }

  .wi-steam__profile {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: 16px;
    margin-bottom: var(--space-2xl);
  }

  .wi-steam__avatar {
    position: relative;
    flex-shrink: 0;
  }

  .wi-steam__avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--rule);
    display: block;
  }

  .wi-steam__avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent-bg);
    border: 3px solid var(--rule);
    color: var(--ink-3);
  }

  .wi-steam__status-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--bg-raised);
  }

  .wi-steam__status-dot--online {
    background: #22c55e;
  }

  .wi-steam__status-dot--playing {
    background: #3b82f6;
  }

  .wi-steam__status-dot--offline {
    background: #6b7280;
  }

  .wi-steam__info {
    flex: 1;
    min-width: 0;
  }

  .wi-steam__name {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--ink);
  }

  .wi-steam__status-text {
    font-size: var(--text-sm);
    color: var(--ink-3);
    display: block;
    margin-top: 2px;
  }

  .wi-steam__profile-link {
    font-size: var(--text-xs);
    color: var(--accent);
    text-decoration: none;
    display: inline-block;
    margin-top: 4px;
  }

  .wi-steam__profile-link:hover {
    text-decoration: underline;
  }

  .wi-steam__level {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--accent-bg);
    border-radius: 12px;
    flex-shrink: 0;
  }

  .wi-steam__level-num {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
  }

  .wi-steam__level-label {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 2px;
  }

  .wi-steam__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
  }

  .wi-steam__stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: 12px;
    min-height: 80px;
  }

  .wi-steam__stat-value {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--accent);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    container-type: inline-size;
  }

  @container (max-width: 120px) {
    .wi-steam__stat-value {
      font-size: var(--text-lg);
    }
  }

  @container (max-width: 80px) {
    .wi-steam__stat-value {
      font-size: var(--text-md);
    }
  }

  .wi-steam__stat-label {
    font-size: var(--text-xs);
    color: var(--ink-3);
    margin-top: 4px;
    white-space: nowrap;
  }

  .wi-steam__section {
    margin-bottom: var(--space-2xl);
  }

  .wi-steam__section-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--accent);
    display: inline-block;
  }

  .wi-steam__recent-scroll {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    padding-bottom: var(--space-sm);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .wi-steam__recent-scroll::-webkit-scrollbar {
    height: 6px;
  }

  .wi-steam__recent-scroll::-webkit-scrollbar-track {
    background: var(--bg);
    border-radius: 3px;
  }

  .wi-steam__recent-scroll::-webkit-scrollbar-thumb {
    background: var(--rule);
    border-radius: 3px;
  }

  .wi-steam__recent-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    max-width: 260px;
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: 12px;
    overflow: hidden;
    scroll-snap-align: start;
    flex-shrink: 0;
    transition:
      transform var(--duration-normal) var(--ease-out-expo),
      box-shadow var(--duration-normal) var(--ease-out-expo),
      border-color var(--duration-normal) var(--ease-out-expo);
  }

  .wi-steam__recent-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
  }

  .wi-steam__recent-cover {
    width: 100%;
    overflow: hidden;
  }

  .wi-steam__recent-img {
    width: 100%;
    aspect-ratio: 460 / 215;
    object-fit: cover;
  }

  .wi-steam__recent-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-sm) var(--space-md) var(--space-md);
    min-width: 0;
  }

  .wi-steam__recent-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wi-steam__recent-meta {
    display: flex;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--ink-3);
  }

  .wi-steam__recent-time {
    color: var(--accent);
    font-weight: 500;
  }

  .wi-steam__recent-achievements {
    color: #f59e0b;
  }

  .wi-steam__games-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }

  .wi-steam__game-card {
    position: relative;
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: 12px;
    overflow: hidden;
    transition:
      transform var(--duration-normal) var(--ease-out-expo),
      box-shadow var(--duration-normal) var(--ease-out-expo),
      border-color var(--duration-normal) var(--ease-out-expo);
  }

  .wi-steam__game-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
  }

  .wi-steam__card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .wi-steam__game-cover {
    width: 100%;
    overflow: hidden;
  }

  .wi-steam__game-img {
    width: 100%;
    aspect-ratio: 460 / 215;
    object-fit: cover;
    transition: transform var(--duration-normal) var(--ease-out-expo);
  }

  .wi-steam__game-card:hover .wi-steam__game-img {
    transform: scale(1.05);
  }

  .wi-steam__game-body {
    padding: var(--space-sm) var(--space-md) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 72px;
  }

  .wi-steam__game-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wi-steam__game-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--ink-3);
    flex-wrap: wrap;
  }

  .wi-steam__game-time {
    color: var(--accent);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .wi-steam__game-last {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
  }

  .wi-steam__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-3xl);
  }

  .wi-steam__page-btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 12px;
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out-quart),
      color var(--duration-fast) var(--ease-out-quart);
  }

  .wi-steam__page-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  .wi-steam__page-spacer {
    flex: 1;
  }

  @media (max-width: 1200px) {
    .wi-steam__games-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 1024px) {
    .wi-steam__stats {
      grid-template-columns: repeat(2, 1fr);
    }

    .wi-steam__games-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .wi-steam__profile {
      flex-direction: column;
      text-align: center;
      padding: var(--space-lg);
    }

    .wi-steam__avatar-img,
    .wi-steam__avatar-placeholder {
      width: 64px;
      height: 64px;
    }

    .wi-steam__stats {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-sm);
    }

    .wi-steam__stat-card {
      padding: var(--space-md);
    }

    .wi-steam__stat-value {
      font-size: var(--text-xl);
    }

    .wi-steam__games-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-sm);
    }

    .wi-steam__game-body {
      padding: var(--space-xs) var(--space-sm) var(--space-sm);
    }

    .wi-steam__game-name {
      font-size: var(--text-xs);
    }

    .wi-steam__game-meta {
      font-size: 10px;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
    }

    .wi-steam__recent-card {
      min-width: 180px;
    }
  }

  @media (max-width: 480px) {
    .wi-steam__games-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-xs);
    }

    .wi-steam__stat-card {
      padding: var(--space-sm);
    }

    .wi-steam__stat-value {
      font-size: var(--text-lg);
    }

    .wi-steam__stat-label {
      font-size: 10px;
    }
  }
</style>