{% extends "base.html" %}

{% block extra_head %}
<style>
  :root {
    --radio-bg: #eeede7;
    --radio-ink: #24241f;
    --radio-muted: rgba(36, 36, 31, 0.48);
    --radio-soft: rgba(36, 36, 31, 0.055);
    --radio-line: rgba(36, 36, 31, 0.11);
    --radio-accent: #466b61;
    --radio-warm: #a88756;
    --radio-paper: rgba(255, 255, 250, 0.44);
    --radio-art-a: #466b61;
    --radio-art-b: #a88756;
    --radio-art-c: #d7d2c4;
  }

  [data-theme="dark"] {
    --radio-bg: #10110f;
    --radio-ink: #e8e4da;
    --radio-muted: rgba(232, 228, 218, 0.48);
    --radio-soft: rgba(232, 228, 218, 0.07);
    --radio-line: rgba(232, 228, 218, 0.13);
    --radio-accent: #9fb9ad;
    --radio-warm: #b89b62;
    --radio-paper: rgba(255, 250, 235, 0.055);
    --radio-art-a: #9fb9ad;
    --radio-art-b: #b89b62;
    --radio-art-c: #272a25;
  }

  body {
    background:
      radial-gradient(ellipse at 50% 43%, color-mix(in oklab, var(--radio-accent) 7%, transparent), transparent 21rem),
      linear-gradient(120deg, rgba(255,255,255,0.2), transparent 42%),
      var(--radio-bg);
  }

  body:has([data-radio-root]) {
    padding-bottom: 0 !important;
    overflow: hidden;
  }

  [data-theme="dark"] body {
    background:
      radial-gradient(ellipse at 50% 43%, color-mix(in oklab, var(--radio-accent) 8%, transparent), transparent 23rem),
      linear-gradient(120deg, rgba(255,255,255,0.035), transparent 42%),
      var(--radio-bg);
  }

  .radio-page {
    width: min(100% - 2rem, 33rem);
    height: 100dvh;
    min-height: 0;
    margin: 0 auto;
    padding: clamp(0.75rem, 2dvh, 1.15rem) 0 max(5.85rem, calc(env(safe-area-inset-bottom) + 5.05rem));
    display: grid;
    grid-template-rows: auto auto auto auto;
    align-content: center;
    gap: clamp(0.54rem, 1.45dvh, 0.9rem);
    color: var(--radio-ink);
    overflow: hidden;
  }

  .now-playing {
    min-height: 3.85rem;
    display: grid;
    align-content: center;
    gap: 0.12rem;
    text-align: center;
    transition: opacity 520ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .track-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-width: min(100%, 28.5rem);
    margin: 0 auto;
    font-size: clamp(1.08rem, 2.6vw, 1.28rem);
    line-height: 1.36;
    font-weight: 600;
    letter-spacing: 0;
    color: color-mix(in oklab, var(--radio-ink) 82%, transparent);
  }

  .track-meta {
    min-height: 1.15rem;
    max-width: min(100%, 22rem);
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.76rem;
    line-height: 1.4;
    font-weight: 520;
    color: var(--radio-muted);
    opacity: 0;
    transition: opacity 520ms ease;
  }

  .track-meta.has-meta {
    opacity: 1;
  }

  .radio-page.is-changing-track .now-playing {
    opacity: 0;
    transform: translateY(0.34rem);
  }

  .radio-page.is-changing-track .signal-disc {
    opacity: 0.62;
    transform: scale(0.982);
  }

  .signal-stage {
    display: grid;
    place-items: center;
    min-height: 0;
    align-self: center;
    isolation: isolate;
  }

  .signal-disc {
    position: relative;
    width: min(76vw, 52dvh, 19.2rem);
    aspect-ratio: 1;
    border: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--radio-accent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), opacity 700ms ease;
  }

  .signal-disc:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--radio-accent) 62%, transparent);
    outline-offset: 0.35rem;
  }

  .signal-disc::before,
  .signal-disc::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
  }

  .signal-disc::before {
    inset: 8%;
    background:
      radial-gradient(circle at 50% 50%, transparent 0 38%, var(--radio-line) 38.5% 39%, transparent 39.5%),
      radial-gradient(circle at 50% 50%, transparent 0 61%, color-mix(in oklab, var(--radio-accent) 15%, transparent) 61.5% 62%, transparent 62.5%),
      radial-gradient(circle at 50% 50%, transparent 0 82%, color-mix(in oklab, var(--radio-warm) 18%, transparent) 82.5% 83%, transparent 83.5%);
    opacity: 0.78;
    transform: rotate(var(--needle-angle, -18deg));
    transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .signal-disc::after {
    inset: 17%;
    background:
      linear-gradient(125deg, rgba(255,255,255,0.42), transparent 34%),
      radial-gradient(circle at 50% 45%, var(--radio-paper), transparent 62%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.2),
      0 2rem 4.5rem color-mix(in oklab, var(--radio-ink) 6%, transparent);
    opacity: 0.88;
  }

  .record-surface {
    position: absolute;
    inset: 15%;
    z-index: 1;
    border-radius: 999px;
    background:
      radial-gradient(circle at 50% 50%, transparent 0 24%, color-mix(in oklab, var(--radio-art-a) 8%, transparent) 24.5% 25%, transparent 25.5%),
      repeating-radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--radio-ink) 5%, transparent) 0 1px, transparent 1px 4px),
      conic-gradient(from 25deg, color-mix(in oklab, var(--radio-art-a) 9%, transparent), transparent 17%, color-mix(in oklab, var(--radio-art-b) 12%, transparent), transparent 58%, color-mix(in oklab, var(--radio-art-c) 11%, transparent), transparent);
    box-shadow:
      inset 0 0 0 1px color-mix(in oklab, var(--radio-ink) 5%, transparent),
      inset 0 0 3.5rem color-mix(in oklab, var(--radio-ink) 4%, transparent);
    opacity: 0.72;
    transform: rotate(0deg);
    transition: opacity 800ms ease, filter 800ms ease, transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
    animation: record-drift 112s linear infinite;
    animation-play-state: paused;
    pointer-events: none;
  }

  .signal-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 39%;
    height: 1px;
    transform-origin: left center;
    transform: rotate(var(--needle-angle, -16deg));
    background: linear-gradient(90deg, var(--radio-warm), transparent);
    opacity: 0.38;
    z-index: 2;
    transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .signal-core {
    position: relative;
    z-index: 3;
    width: 5.85rem;
    aspect-ratio: 1;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.5), transparent 34%),
      color-mix(in oklab, var(--radio-bg) 86%, white);
    border: 1px solid var(--radio-line);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.28),
      0 0.7rem 2.4rem color-mix(in oklab, var(--radio-ink) 8%, transparent);
    overflow: hidden;
  }

  [data-theme="dark"] .signal-core {
    background: color-mix(in oklab, var(--radio-bg) 88%, black);
  }

  .signal-bars {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    height: 2rem;
    color: var(--radio-accent);
  }

  .signal-bars span {
    width: 0.24rem;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    opacity: 0.58;
  }

  .signal-bars span:nth-child(1) { height: 0.95rem; }
  .signal-bars span:nth-child(2) { height: 1.45rem; }
  .signal-bars span:nth-child(3) { height: 2rem; }
  .signal-bars span:nth-child(4) { height: 1.35rem; }
  .signal-bars span:nth-child(5) { height: 1rem; }

  .radio-page:not(.is-playing) .signal-bars {
    opacity: 0.5;
  }

  .radio-page:not(.is-playing) .signal-bars span {
    transform: scaleY(0.62);
  }

  .cover-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 900ms ease, transform 1200ms cubic-bezier(0.16, 1, 0.3, 1), filter 900ms ease;
  }

  .signal-disc.has-cover .cover-art {
    opacity: 0.82;
    transform: scale(1);
    filter: saturate(0.78) contrast(0.92);
    animation: cover-drift 156s linear infinite;
    animation-play-state: paused;
  }

  .signal-disc.has-cover .signal-bars {
    opacity: 0;
  }

  .signal-disc.no-cover .signal-core {
    background:
      radial-gradient(circle at 32% 28%, rgba(255,255,255,0.38), transparent 30%),
      linear-gradient(135deg, color-mix(in oklab, var(--radio-art-a) 22%, transparent), transparent 43%),
      linear-gradient(315deg, color-mix(in oklab, var(--radio-art-b) 23%, transparent), transparent 46%),
      color-mix(in oklab, var(--radio-bg) 85%, white);
  }

  .radio-page.is-playing .signal-disc {
    animation: radio-breathe 24s ease-in-out infinite;
  }

  .radio-page.is-playing .record-surface {
    animation-play-state: running;
  }

  .radio-page.is-playing .signal-disc.has-cover .cover-art {
    animation-play-state: running;
  }

  .radio-page.is-playing .signal-bars span {
    animation: slow-meter 5.8s ease-in-out infinite;
  }

  .radio-page.is-playing .signal-bars span:nth-child(2) { animation-delay: 0.42s; }
  .radio-page.is-playing .signal-bars span:nth-child(3) { animation-delay: 0.85s; }
  .radio-page.is-playing .signal-bars span:nth-child(4) { animation-delay: 1.2s; }
  .radio-page.is-playing .signal-bars span:nth-child(5) { animation-delay: 1.58s; }

  @keyframes radio-breathe {
    0%, 100% { transform: scale(0.992); filter: saturate(0.96); }
    50% { transform: scale(1.012); filter: saturate(1.04); }
  }

  @keyframes slow-meter {
    0%, 100% { transform: scaleY(0.54); opacity: 0.46; }
    45% { transform: scaleY(1); opacity: 0.86; }
  }

  @keyframes record-drift {
    to { transform: rotate(360deg); }
  }

  @keyframes cover-drift {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
  }

  .progress-panel {
    display: grid;
    gap: 0.32rem;
    width: min(100%, 22.75rem);
    margin: 0 auto;
    opacity: 0.18;
    transition: opacity 400ms ease;
  }

  .radio-page.is-playing .progress-panel {
    opacity: 0.34;
  }

  .progress-panel:hover,
  .progress-panel:focus-within {
    opacity: 0.82;
  }

  #progress-bar {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(to right, var(--radio-accent) 0%, var(--radio-soft) 0%);
  }

  #progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0.68rem;
    height: 0.68rem;
    border-radius: 999px;
    background: var(--radio-accent);
    box-shadow: 0 2px 10px color-mix(in oklab, var(--radio-accent) 24%, transparent);
  }

  .time-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.66rem;
    color: var(--radio-muted);
    font-variant-numeric: tabular-nums;
  }

  .radio-controls {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 3.88rem);
    justify-content: center;
    align-items: center;
    gap: 0.46rem;
    width: max-content;
    margin: 0.02rem auto 0;
    padding: 0.15rem;
    border-radius: 999px;
    background: transparent;
  }

  .radio-button {
    position: relative;
    width: 3.88rem;
    height: 3.48rem;
    min-width: 3.88rem;
    min-height: 3.48rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    border: 0;
    border-radius: 999px;
    color: var(--radio-muted);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
      color 260ms ease,
      background 360ms ease,
      transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-tap-highlight-color: transparent;
  }

  .radio-button::before {
    content: "";
    position: absolute;
    inset: 0.32rem 0.42rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--radio-ink) 4%, transparent);
    opacity: 0;
    transform: scale(0.76);
    transition:
      opacity 360ms ease,
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
      background 360ms ease;
  }

  .radio-button svg {
    position: relative;
    z-index: 1;
    width: 1.32rem;
    height: 1.32rem;
    stroke-width: 1.95;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), fill 260ms ease;
  }

  .radio-button:hover {
    color: var(--radio-ink);
    background: transparent;
  }

  .radio-button:hover::before,
  .radio-button:focus-visible::before {
    opacity: 1;
    transform: scale(1);
  }

  .radio-button:active {
    transform: scale(0.94);
  }

  .radio-button:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--radio-accent) 52%, transparent);
    outline-offset: 0.16rem;
  }

  .radio-button.is-active {
    color: var(--radio-accent);
    background: transparent;
  }

  .radio-button.is-active::before {
    opacity: 1;
    transform: scale(1);
    background: color-mix(in oklab, var(--radio-accent) 8%, transparent);
  }

  .radio-button.is-active::after {
    content: "";
    position: absolute;
    bottom: 0.22rem;
    width: 0.22rem;
    height: 0.22rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.6;
  }

  .radio-button.is-settling svg {
    animation: control-settle 620ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .radio-button span:not(.sr-only) {
    position: relative;
    z-index: 1;
    min-width: 1.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  @keyframes control-settle {
    0% { transform: scale(0.84); }
    42% { transform: scale(1.16); }
    100% { transform: scale(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .radio-page.is-playing .signal-disc,
    .radio-page.is-playing .record-surface,
    .radio-page.is-playing .signal-disc.has-cover .cover-art,
    .radio-page.is-playing .signal-bars span,
    .radio-page.is-changing-track .now-playing,
    .radio-page.is-changing-track .signal-disc,
    .radio-button.is-settling svg {
      animation: none;
    }
  }

  @media (max-width: 420px) {
    .radio-page {
      width: min(100% - 1.5rem, 31rem);
      gap: clamp(0.46rem, 1.15dvh, 0.72rem);
      padding-top: clamp(0.62rem, 1.6dvh, 1rem);
      padding-bottom: max(5.55rem, calc(env(safe-area-inset-bottom) + 4.85rem));
    }

    .signal-disc {
      width: min(82vw, 47dvh, 18rem);
    }

    .radio-controls {
      grid-template-columns: repeat(3, 3.58rem);
      gap: 0.34rem;
    }

    .radio-button {
      width: 3.58rem;
      min-width: 3.58rem;
    }
  }
</style>
<link rel="stylesheet" href="{{ url_for('static', filename='radio.css') }}">
{% endblock %}

{% block content %}
<main id="radio-page" class="radio-page" data-radio-root>
  <div class="radio-atmosphere" aria-hidden="true">
    <span class="radio-glow radio-glow-a"></span>
    <span class="radio-glow radio-glow-b"></span>
    <span class="radio-grain"></span>
  </div>

  <div class="radio-layout">
    <section class="signal-stage" aria-label="电台播放器">
      <div class="signal-caption" aria-hidden="true">
        <span>TKL</span><span>RADIO · 24/7</span>
      </div>
      <button id="btn-play" class="signal-disc" type="button" title="播放" aria-label="播放" aria-pressed="false">
        <span class="disc-halo" aria-hidden="true"></span>
        <span class="record-surface" aria-hidden="true"></span>
        <span class="signal-marker" aria-hidden="true"></span>
        <span id="tuning-dial" class="signal-core">
          <img id="cover-art" class="cover-art" alt="" decoding="async">
          <span id="cover-wave" class="signal-bars" aria-hidden="true">
            <span></span><span></span><span></span><span></span><span></span>
          </span>
        </span>
        <span class="play-state" aria-hidden="true">
          <svg class="play-symbol" viewBox="0 0 24 24"><path d="M8.2 5.7 18 12l-9.8 6.3z"/></svg>
          <svg class="pause-symbol" viewBox="0 0 24 24"><path d="M7.5 5.5h3.2v13H7.5zm5.8 0h3.2v13h-3.2z"/></svg>
        </span>
      </button>
      <div class="signal-status" aria-hidden="true">
        <span class="signal-dot"></span><span>ON AIR</span>
      </div>
    </section>

    <div class="radio-console">
      <div class="station-chip">
        <span class="station-pulse" aria-hidden="true"><i></i><i></i><i></i></span>
        <span id="station-name">默认电台</span>
      </div>

      <section class="now-playing" aria-live="polite">
        <div class="now-playing-label">NOW PLAYING</div>
        <div id="track-title" class="track-title">Radio</div>
        <div id="track-meta" class="track-meta"></div>
      </section>

      <section class="progress-panel" aria-label="播放进度">
        <input id="progress-bar" type="range" min="0" max="100" value="0" aria-label="播放进度">
        <div class="time-row">
          <span id="time-current">0:00</span>
          <span id="time-total">0:00</span>
        </div>
      </section>

      <section class="radio-controls" aria-label="电台操作">
        <button id="btn-fav" class="radio-button" type="button" title="收藏" aria-label="收藏" aria-pressed="false">
          <i data-feather="heart"></i>
          <span class="sr-only">收藏</span>
        </button>
        <button id="btn-next" class="radio-button is-primary" type="button" title="下一首" aria-label="下一首">
          <i data-feather="skip-forward"></i>
        </button>
        <button id="btn-sleep" class="radio-button" type="button" title="定时" aria-label="定时" aria-pressed="false">
          <i data-feather="moon"></i>
          <span id="sleep-label" class="sr-only">定时</span>
        </button>
      </section>
    </div>
  </div>

  <ul id="upcoming-preview" class="hidden" aria-hidden="true">
    <li></li>
  </ul>
  <ul id="upcoming-list" class="hidden" aria-hidden="true"></ul>
  <div id="station-options" class="hidden"></div>
</main>
{% endblock %}

{% block extra_body %}
<script src="{{ url_for('static', filename='radio_controller.js') }}"></script>
{% endblock %}