import { useEffect, useState } from 'react';

function formatClock(date) {
  return new Intl.DateTimeFormat(undefined, {
    hour: '2-digit',
    minute: '2-digit',
  }).format(date);
}

function formatDate(date) {
  return new Intl.DateTimeFormat(undefined, {
    weekday: 'short',
    month: 'short',
    day: 'numeric',
  }).format(date);
}

function EditIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M12 20h9" />
      <path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z" />
    </svg>
  );
}

function ListIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <line x1="8" y1="6" x2="21" y2="6" />
      <line x1="8" y1="12" x2="21" y2="12" />
      <line x1="8" y1="18" x2="21" y2="18" />
      <line x1="3" y1="6" x2="3.01" y2="6" />
      <line x1="3" y1="12" x2="3.01" y2="12" />
      <line x1="3" y1="18" x2="3.01" y2="18" />
    </svg>
  );
}

function InstallIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M12 3v12" />
      <path d="m7 10 5 5 5-5" />
      <path d="M5 21h14" />
    </svg>
  );
}

function CastIcon({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M2 16.1A5 5 0 0 1 5.9 20" />
      <path d="M2 12.05A9 9 0 0 1 9.95 20" />
      <path d="M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6" />
    </svg>
  );
}

function AirPlayIcon({ size = 22, className = '' }) {
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M5 17h14" />
      <path d="M7 7h10a2 2 0 0 1 2 2v6" />
      <path d="M5 15V9a2 2 0 0 1 2-2" />
      <path d="m12 20 3-3h-6l3 3Z" />
    </svg>
  );
}

function InfoIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="12" cy="12" r="9" />
      <path d="M12 16v-4" />
      <path d="M12 8h.01" />
    </svg>
  );
}

function TimerIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="12" cy="13" r="8" />
      <path d="M12 9v4l2 2" />
      <path d="M9 2h6" />
      <path d="M12 2v3" />
    </svg>
  );
}

function HelpIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="12" cy="12" r="9" />
      <path d="M9.25 9a2.75 2.75 0 1 1 4.6 2.02c-.86.76-1.35 1.23-1.35 2.48" />
      <path d="M12 17h.01" />
    </svg>
  );
}

function AlarmIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="12" cy="13" r="8" />
      <path d="M12 10v4l2 1.5" />
      <path d="m5 4 2.5 2.5" />
      <path d="M19 4 16.5 6.5" />
    </svg>
  );
}

function DocsIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M7 3h7l3 3v15H7z" />
      <path d="M14 3v4h4" />
      <path d="M9 11h6" />
      <path d="M9 15h6" />
    </svg>
  );
}

function PrivacyIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M12 22s8-4 8-10V6l-8-3-8 3v6c0 6 8 10 8 10Z" />
      <path d="M9.5 12.5 11.5 14.5 14.5 10.5" />
    </svg>
  );
}

function VolumeIcon() {
  return (
    <svg id="icon-volume" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
      <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
    </svg>
  );
}

function MutedIcon() {
  return (
    <svg id="icon-muted" className="hidden" width="20" height="20" viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="2">
      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
      <line x1="23" y1="9" x2="17" y2="15" />
      <line x1="17" y1="9" x2="23" y2="15" />
    </svg>
  );
}

function HeaderControls() {
  const [now, setNow] = useState(() => new Date());

  useEffect(() => {
    const intervalId = window.setInterval(() => setNow(new Date()), 1000);
    return () => window.clearInterval(intervalId);
  }, []);

  return (
    <header>
      <div className="header-top-row">
        <div className="brand-block">
          <img className="brand-logo" src="assets/radioplayer-logo-192.png" alt="" aria-hidden="true" />
          <div className="brand-copy">
            <div className="app-title">RadioPlayer</div>
            <time className="datetime" dateTime={now.toISOString()}>
              <span className="datetime-time">{formatClock(now)}</span>
              <span className="datetime-date">{formatDate(now)}</span>
            </time>
          </div>
        </div>
        <div className="header-icons-left">
          <button id="edit-stations-btn" className="icon-btn" title="Edit Stations" aria-label="Edit Stations" type="button">
            <EditIcon />
          </button>
          <button id="stations-list-btn" className="icon-btn" aria-label="All Stations" title="All Stations" type="button">
            <ListIcon />
          </button>
          <button id="session-scheduler-btn" className="icon-btn session-scheduler-btn" aria-label="Sleep timer and wake alarm" title="Sleep timer and wake alarm" type="button">
            <TimerIcon />
            <span id="session-scheduler-badge" className="session-scheduler-badge hidden" aria-hidden="true" />
          </button>
          <button id="shortcut-help-btn" className="icon-btn" aria-label="Keyboard shortcuts" title="Keyboard shortcuts" type="button">
            <HelpIcon />
          </button>
          <button id="install-app-btn" className="icon-btn install-btn hidden" title="Install app" aria-label="Install app" type="button">
            <InstallIcon />
          </button>
          <button id="cast-btn" className="icon-btn cast-btn" title="Cast or AirPlay to device" aria-label="Cast or AirPlay to device" type="button">
            <CastIcon />
            <AirPlayIcon className="hidden" />
          </button>
        </div>
        <div className="header-close" />
      </div>
    </header>
  );
}

function ArtworkPanel() {
  return (
    <section className="artwork-section">
      <div className="artwork-stack">
        <div className="artwork-container">
          <div className="artwork-placeholder">
            <img id="station-logo-img" className="station-logo-img hidden" alt="station logo" />
            <span className="station-logo-text">1</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function QuickPickCarousel() {
  return (
    <section className="quickpick-section" aria-label="Favorite stations">
      <div id="artwork-coverflow" className="artwork-coverflow" aria-label="Stations">
        <button id="artwork-prev" className="coverflow-arrow left" aria-label="Previous station" type="button">&lsaquo;</button>
        <div id="artwork-coverflow-stage" className="artwork-coverflow-stage" role="list" aria-label="Station icons" />
        <button id="artwork-next" className="coverflow-arrow right" aria-label="Next station" type="button">&rsaquo;</button>
      </div>
    </section>
  );
}

function SyncToast() {
  return (
    <div className="quickpick-sync-info" aria-live="polite">
      <div id="managed-catalog-status" className="managed-catalog-status hidden" />
      <div id="catalog-sync-status" className="catalog-sync-status hidden">
        <span id="catalog-sync-status-text" />
        <time id="catalog-sync-status-time" className="catalog-sync-status-time" />
      </div>
      <div id="catalog-sync-history" className="catalog-sync-history hidden" />
    </div>
  );
}

function LegalLinks() {
  return (
    <nav className="legal-links" aria-label="Legal">
      <a
        className="legal-link"
        data-variant="about"
        href={`${import.meta.env.BASE_URL}about.html`}
        aria-label="About RadioPlayer"
        title="About"
      >
        <InfoIcon />
      </a>
      <a
        className="legal-link"
        data-variant="docs"
        href={`${import.meta.env.BASE_URL}docs.html`}
        aria-label="Docs"
        title="Docs"
      >
        <DocsIcon />
      </a>
      <a
        className="legal-link"
        data-variant="privacy"
        href={`${import.meta.env.BASE_URL}privacy.html`}
        aria-label="Pravilnik o zasebnosti"
        title="Pravilnik o zasebnosti"
      >
        <PrivacyIcon />
      </a>
    </nav>
  );
}

function TrackInfo() {
  return (
    <section className="track-info">
      <h2 id="station-name" />
      <div id="now-playing" className="now-playing hidden" aria-live="polite">
        <div id="now-artist" className="now-artist" aria-hidden="false" />
        <div id="now-title" className="now-title" aria-hidden="false" />
      </div>
      <p id="station-subtitle" />
      <div className="station-meta-row">
        <div id="station-health-summary" className="station-health-summary hidden" aria-live="polite" />
        <div id="status-indicator" className="status-indicator-wrap" aria-hidden="true">
          <span className="status-dot" />
          <span id="status-text" />
          <span id="engine-badge" className="engine-badge engine-html" title="HTML5 Audio playback">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"
              strokeLinejoin="round" aria-hidden="true">
              <path d="M4 15V9" />
              <path d="M8 19V5" />
              <path d="M12 16V8" />
              <path d="M16 18V6" />
              <path d="M20 15V9" />
            </svg>
            <span id="engine-label">HTML5</span>
          </span>
        </div>
      </div>
      <div id="station-health-detail" className="station-health-detail hidden" aria-live="polite" />
      <section id="song-history-panel" className="song-history-panel hidden" aria-labelledby="song-history-title">
        <div className="song-history-header">
          <h3 id="song-history-title">Recent tracks</h3>
          <button id="song-history-clear-btn" className="session-link-btn" type="button">Clear</button>
        </div>
        <ul id="song-history-list" className="song-history-list" />
      </section>
      <div id="cast-output-row" className="cast-output-row hidden" aria-live="polite">
        <span className="cast-output-label">Output:</span>
        <button id="cast-output-btn" className="cast-output-toggle" aria-pressed="false"
          title="Toggle: Cast only / Cast + This computer" type="button">
          <span id="cast-output-icon">
            <CastIcon size={14} />
          </span>
          <span id="cast-output-text">Cast only</span>
        </button>
      </div>
    </section>
  );
}

function PlayerControls() {
  return (
    <section className="controls-section">
      <button id="prev-btn" className="control-btn secondary" aria-label="Previous Station" type="button">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />
        </svg>
      </button>

      <button id="play-btn" className="control-btn primary" aria-label="Play" type="button">
        <div className="icon-container">
          <svg id="icon-play" width="32" height="32" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M8 5v14l11-7z" />
          </svg>
          <svg id="icon-stop" className="hidden" width="32" height="32" viewBox="0 0 24 24" fill="currentColor"
            aria-hidden="true">
            <path d="M6 6h12v12H6z" />
          </svg>
        </div>
      </button>

      <button id="next-btn" className="control-btn secondary" aria-label="Next Station" type="button">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" />
        </svg>
      </button>
    </section>
  );
}

function VolumeControl() {
  return (
    <section className="volume-section">
      <button id="mute-btn" className="icon-btn small" type="button" aria-label="Mute">
        <VolumeIcon />
        <MutedIcon />
      </button>
      <div className="slider-container">
        <input type="range" id="volume-slider" min="0" max="100" defaultValue="80" aria-label="Volume" />
      </div>
      <span id="volume-value">80%</span>
    </section>
  );
}

function SessionSummary() {
  return (
    <section className="session-summary-section">
      <button id="session-summary-btn" className="session-summary-btn" type="button" aria-haspopup="dialog" aria-expanded="false">
        <span className="session-summary-icon" aria-hidden="true">
          <TimerIcon size={16} />
        </span>
        <span className="session-summary-copy">
          <span className="session-summary-label">Session tools</span>
          <span id="session-summary-text" className="session-summary-text">Sleep timer off · Wake alarm off</span>
        </span>
      </button>
    </section>
  );
}

function InstallPromptBanner() {
  return (
    <section id="install-prompt-banner" className="install-prompt-banner hidden" aria-live="polite" aria-label="Install RadioPlayer">
      <div className="install-prompt-copy">
        <strong>Install RadioPlayer</strong>
        <span>Run it like an app on your phone.</span>
      </div>
      <div className="install-prompt-actions">
        <button id="install-prompt-action" className="btn cancel install-prompt-action" type="button">Install</button>
        <button id="install-prompt-dismiss" className="btn secondary install-prompt-dismiss" type="button">Later</button>
      </div>
    </section>
  );
}

function RetroStarfield() {
  const stars = Array.from({ length: 120 }, (_, index) => {
    const angle = (index * 137.508) % 360;
    const radius = 90 + ((index * 47) % 520);
    const verticalBias = ((index * 29) % 180) - 90;
    const x0 = Math.cos(angle * Math.PI / 180) * radius * 0.34;
    const y0 = Math.sin(angle * Math.PI / 180) * radius * 0.24 + verticalBias * 0.18;
    const x1 = Math.cos((angle + 24) * Math.PI / 180) * radius * 1.08;
    const y1 = Math.sin((angle + 18) * Math.PI / 180) * radius * 0.72 + verticalBias;
    const size = 2 + (index % 6) * 0.75;
    const duration = 7 + (index % 9) * 1.1;
    const delay = -((index * 0.71) % duration);

    return {
      id: index,
      style: {
        '--x0': `${x0.toFixed(1)}px`,
        '--y0': `${y0.toFixed(1)}px`,
        '--x1': `${x1.toFixed(1)}px`,
        '--y1': `${y1.toFixed(1)}px`,
        '--star-size': `${size.toFixed(1)}px`,
        '--star-duration': `${duration.toFixed(1)}s`,
        '--star-delay': `${delay.toFixed(1)}s`,
      },
    };
  });

  return (
    <div className="starfield" aria-hidden="true">
      <div className="starfield-plane">
        {stars.map((star) => (
          <span key={star.id} className="star" style={star.style} />
        ))}
      </div>
    </div>
  );
}

function StationsOverlay() {
  return (
    <div id="cast-overlay" className="overlay hidden" aria-hidden="true">
      <div className="modal" role="dialog" aria-modal="true" aria-labelledby="deviceTitle">
        <h2 id="deviceTitle">Stations</h2>
        <ul id="device-list" className="device-list">
          <li className="device">
            <div className="device-main">Loading...</div>
            <div className="device-sub">Preparing stations</div>
          </li>
        </ul>
        <button id="close-overlay" className="btn cancel" type="button">Close</button>
      </div>
    </div>
  );
}

function EditorOverlay() {
  return (
    <div id="editor-overlay" className="overlay hidden" aria-hidden="true">
      <div className="modal" role="dialog" aria-modal="true" aria-labelledby="editorTitle">
        <h2 id="editorTitle">Edit Stations</h2>
        <p id="editor-persistence-note" className="editor-note" aria-live="polite">
          Local storage: <strong id="editor-persistence-backend">IndexedDB</strong>
        </p>
        <p id="editor-backup-activity-note" className="editor-note editor-note-subtle" aria-live="polite">
          No backup activity yet.
        </p>
        <ul id="editor-list" className="device-list" />
        <div className="editor-tools">
          <button id="export-user-data-btn" className="btn secondary" type="button">Export Data</button>
          <button id="import-user-data-btn" className="btn secondary" type="button">Import Data</button>
          <button id="reset-user-data-btn" className="btn delete-btn" type="button">Reset Local Data</button>
          <input id="import-user-data-input" className="hidden-file-input" type="file" accept="application/json" />
        </div>
        <label className="editor-checkbox" htmlFor="reset-user-data-backup-checkbox">
          <input id="reset-user-data-backup-checkbox" type="checkbox" defaultChecked />
          <span>Download a backup before reset</span>
        </label>
        <form id="add-station-form">
          <div className="field-row">
            <input id="us_title" placeholder="Title" required />
          </div>
          <div className="field-row">
            <input id="us_url" placeholder="Stream URL" required />
          </div>
          <div className="field-row">
            <input id="us_logo" placeholder="Logo URL (optional)" />
          </div>
          <div className="field-row">
            <input id="us_www" placeholder="Website (optional)" />
          </div>
          <input type="hidden" id="us_id" />
          <div className="editor-actions">
            <button id="us_save_btn" className="btn cancel" type="submit">Save</button>
            <button id="editor-close-btn" className="btn secondary" type="button">Close</button>
          </div>
        </form>
      </div>
    </div>
  );
}

function CountrySelectionOverlay() {
  return (
    <div id="country-selection-overlay" className="overlay hidden" aria-hidden="true">
      <div className="modal country-selection-modal" role="dialog" aria-modal="true" aria-labelledby="countrySelectionTitle">
        <h2 id="countrySelectionTitle">Select Countries</h2>
        <p id="country-selection-note" className="editor-note" aria-live="polite">
          These choices control which Radio Browser countries are synced and shown. Managed Slovenia stays available.
        </p>
        <div className="country-selection-toolbar">
          <label className="library-search country-selection-search" htmlFor="country-selection-search-input">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
              strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <circle cx="11" cy="11" r="8" />
              <path d="m21 21-4.3-4.3" />
            </svg>
            <input id="country-selection-search-input" type="search" placeholder="Search countries" autoComplete="off" />
          </label>
          <div className="country-selection-actions">
            <button id="country-selection-defaults-btn" className="btn secondary" type="button">Restore Defaults</button>
            <button id="country-selection-all-btn" className="btn secondary" type="button">Select All</button>
          </div>
        </div>
        <p id="country-selection-summary" className="editor-note editor-note-subtle" aria-live="polite">
          Loading countries...
        </p>
        <p id="country-selection-empty" className="library-empty hidden">No countries found.</p>
        <ul id="country-selection-list" className="device-list country-selection-list" />
        <div className="editor-actions country-selection-footer">
          <button id="country-selection-save-btn" className="btn cancel" type="button">Save</button>
          <button id="country-selection-cancel-btn" className="btn secondary" type="button">Cancel</button>
        </div>
      </div>
    </div>
  );
}

function ShortcutHelpOverlay() {
  return (
    <div id="shortcut-help-overlay" className="overlay hidden" aria-hidden="true">
      <div className="modal shortcut-help-modal" role="dialog" aria-modal="true" aria-labelledby="shortcutHelpTitle">
        <h2 id="shortcutHelpTitle">Keyboard shortcuts</h2>
        <ul className="shortcut-help-list">
          <li><kbd>Space</kbd><span>Play or stop</span></li>
          <li><kbd>Left</kbd><span>Previous station</span></li>
          <li><kbd>Right</kbd><span>Next station</span></li>
          <li><kbd>M</kbd><span>Mute audio</span></li>
          <li><kbd>?</kbd><span>Open this help</span></li>
          <li><kbd>Esc</kbd><span>Close overlays and library</span></li>
        </ul>
        <div className="editor-actions">
          <button id="shortcut-help-close-btn" className="btn cancel" type="button">Close</button>
        </div>
      </div>
    </div>
  );
}

function SessionSchedulerOverlay() {
  return (
    <div id="session-scheduler-overlay" className="overlay hidden" aria-hidden="true">
      <div className="modal session-scheduler-modal" role="dialog" aria-modal="true" aria-labelledby="sessionSchedulerTitle">
        <div className="session-scheduler-top">
          <div>
            <p className="session-scheduler-eyebrow">Session tools</p>
            <h2 id="sessionSchedulerTitle">Sleep and wake</h2>
            <p className="session-scheduler-intro">Set when playback should gently stop, then choose when you want RadioPlayer ready again.</p>
          </div>
          <button id="session-scheduler-close-btn" className="icon-btn" aria-label="Close session tools" type="button">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M18 6 6 18" />
              <path d="m6 6 12 12" />
            </svg>
          </button>
        </div>

        <div className="session-scheduler-grid">
          <section className="session-panel session-panel-sleep" aria-labelledby="sleepTimerPanelTitle">
            <div className="session-panel-heading">
              <span className="session-panel-icon" aria-hidden="true"><TimerIcon size={18} /></span>
              <div>
                <h3 id="sleepTimerPanelTitle">Sleep timer</h3>
                <p>Ideal when you want the stream to stop automatically after you drift off.</p>
              </div>
            </div>
            <div className="session-tool-actions">
              <button className="session-chip" data-sleep-minutes="15" type="button">15 min</button>
              <button className="session-chip" data-sleep-minutes="30" type="button">30 min</button>
              <button className="session-chip" data-sleep-minutes="60" type="button">60 min</button>
              <button className="session-chip secondary" data-sleep-minutes="0" type="button">Turn off</button>
            </div>
            <div id="sleep-timer-status" className="session-tool-status session-tool-status-strong" aria-live="polite">Off</div>
          </section>

          <section className="session-panel session-panel-wake" aria-labelledby="wakeAlarmPanelTitle">
            <div className="session-panel-heading">
              <span className="session-panel-icon" aria-hidden="true"><AlarmIcon size={18} /></span>
              <div>
                <h3 id="wakeAlarmPanelTitle">Wake alarm</h3>
                <p>Queue the current station to resume later. Best after you have interacted with playback.</p>
              </div>
            </div>
            <div className="session-tool-actions">
              <button className="session-chip" data-wake-minutes="15" type="button">15 min</button>
              <button className="session-chip" data-wake-minutes="30" type="button">30 min</button>
              <button className="session-chip" data-wake-minutes="60" type="button">60 min</button>
              <button className="session-chip secondary" data-wake-minutes="0" type="button">Turn off</button>
            </div>
            <div id="wake-alarm-status" className="session-tool-status session-tool-status-strong" aria-live="polite">Off</div>
          </section>
        </div>

        <div className="session-scheduler-footer">
          <div id="session-scheduler-footnote" className="session-scheduler-footnote">Wake alarms may still be limited by browser autoplay rules.</div>
          <button id="session-scheduler-done-btn" className="btn cancel" type="button">Done</button>
        </div>
      </div>
    </div>
  );
}

function StationLibrary() {
  return (
    <aside id="station-library" className="station-library" aria-label="Station library">
      <div className="library-top">
        <div>
          <p className="library-eyebrow">Browse</p>
          <h2>Stations</h2>
        </div>
        <div className="library-top-actions">
          <button
            id="station-library-filters-toggle"
            className="icon-btn library-filters-toggle"
            aria-label="Collapse search and filters"
            aria-controls="station-library-controls"
            aria-expanded="true"
            type="button"
            title="Collapse search and filters"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
              strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M4 7h16" />
              <path d="M7 12h10" />
              <path d="M10 17h4" />
            </svg>
          </button>
          <button id="station-library-close" className="icon-btn library-close" aria-label="Close station library" type="button">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
              strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M18 6 6 18" />
              <path d="m6 6 12 12" />
            </svg>
          </button>
          {import.meta.env.DEV && (
            <button
              id="clear-managed-catalog-btn"
              className="icon-btn library-clear-managed"
              aria-label="Clear persisted managed catalog"
              title="Clear persisted managed catalog"
              type="button"
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
                strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M21 12a9 9 0 1 0-9 9" />
                <path d="M21 3v6h-6" />
              </svg>
            </button>
          )}
        </div>
      </div>

      <div id="station-library-controls" className="library-filter-grid">
        <label className="library-search" htmlFor="station-search-input">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
            strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <circle cx="11" cy="11" r="8" />
            <path d="m21 21-4.3-4.3" />
          </svg>
          <input id="station-search-input" type="search" placeholder="Search stations" autoComplete="off" />
        </label>

        <div className="library-select" data-country-filter>
          <button
            id="station-country-filter-btn"
            className="library-select-trigger"
            type="button"
            aria-haspopup="listbox"
            aria-expanded="false"
            aria-label="Country filter"
          >
            <span id="station-country-filter-flag" className="library-select-flag" aria-hidden="true">🌐</span>
            <span className="library-select-prefix">Filter</span>
            <span id="station-country-filter-text" className="library-select-value">All countries</span>
            <svg className="library-select-caret" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
              <path d="m6 9 6 6 6-6" />
            </svg>
          </button>
          <div id="station-country-filter-menu" className="library-select-menu" role="listbox" aria-label="Country filter options" />
        </div>

        <button id="station-advanced-filters-btn" className="library-filter-settings-btn" aria-label="Open filter settings" title="Filter settings" type="button">
          <svg className="library-select-sort-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <line x1="4" y1="6" x2="20" y2="6" />
            <circle cx="9" cy="6" r="2" />
            <line x1="4" y1="12" x2="20" y2="12" />
            <circle cx="15" cy="12" r="2" />
            <line x1="4" y1="18" x2="20" y2="18" />
            <circle cx="11" cy="18" r="2" />
          </svg>
        </button>
      </div>

      <div className="library-tabs" role="tablist" aria-label="Station filters">
        <button className="library-tab active" data-station-tab="all" type="button">
          <span className="library-tab-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M4 6h7v7H4z" />
              <path d="M13 6h7v4h-7z" />
              <path d="M13 12h7v6h-7z" />
              <path d="M4 15h7v3H4z" />
            </svg>
          </span>
        </button>
        <button className="library-tab" data-station-tab="favourites" type="button">
          <span className="library-tab-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 21s-7-4.4-9.4-8.7C.6 8.8 3 5 7.2 5c2 0 3.4 1 4.8 2.8C13.4 6 14.8 5 16.8 5 21 5 23.4 8.8 21.4 12.3 19 16.6 12 21 12 21z" />
            </svg>
          </span>
        </button>
        <button className="library-tab" data-station-tab="recent" type="button">
          <span className="library-tab-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 8v5l3 2" />
              <circle cx="12" cy="12" r="8" />
            </svg>
          </span>
        </button>
        <button className="library-tab" data-station-tab="categories" type="button">
          <span className="library-tab-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 7h14" />
              <path d="M5 12h14" />
              <path d="M5 17h14" />
              <circle cx="8" cy="7" r="1" />
              <circle cx="16" cy="12" r="1" />
              <circle cx="10" cy="17" r="1" />
            </svg>
          </span>
        </button>
      </div>

      <div id="station-category-list" className="category-list" aria-label="Categories" />
      <div id="station-library-summary" className="library-summary" aria-live="polite">Loading stations...</div>
      <div id="station-library-pagination" className="library-pagination" aria-label="Station pagination">
        <button id="station-library-page-prev" className="library-page-btn" type="button" aria-label="Previous page">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="m15 18-6-6 6-6" />
          </svg>
          <span>Prev</span>
        </button>
        <span id="station-library-page-info" className="library-pagination-info">Page 1 of 1</span>
        <button id="station-library-page-next" className="library-page-btn" type="button" aria-label="Next page">
          <span>Next</span>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="m9 18 6-6-6-6" />
          </svg>
        </button>
      </div>
      <ul id="station-library-list" className="library-list" />
    </aside>
  );
}

function AdvancedFiltersOverlay() {
  return (
    <div id="station-advanced-filters-overlay" className="overlay hidden" aria-hidden="true">
      <div className="modal advanced-filters-modal" role="dialog" aria-modal="true" aria-labelledby="advancedFiltersTitle">
        <div className="advanced-filters-top">
          <div>
            <p className="session-scheduler-eyebrow">Station filters</p>
            <h2 id="advancedFiltersTitle">More ways to tune the library</h2>
          </div>
          <button id="station-advanced-filters-close-btn" className="icon-btn" aria-label="Close filter settings" type="button">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M18 6 6 18" />
              <path d="m6 6 12 12" />
            </svg>
          </button>
        </div>

        <div className="advanced-filters-grid">
          <div className="library-select" data-sort-filter>
            <button
              id="station-sort-btn"
              className="library-select-trigger"
              type="button"
              aria-haspopup="listbox"
              aria-expanded="false"
              aria-label="Sort stations"
            >
              <svg className="library-select-sort-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M3 6h18M7 12h10M11 18h2" />
              </svg>
              <span className="library-select-prefix">Sort</span>
              <span id="station-sort-text" className="library-select-value">Recommended</span>
              <svg className="library-select-caret" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                <path d="m6 9 6 6 6-6" />
              </svg>
            </button>
            <div id="station-sort-menu" className="library-select-menu" role="listbox" aria-label="Sort options" />
          </div>

          <div className="library-select" data-language-filter>
            <button
              id="station-language-filter-btn"
              className="library-select-trigger"
              type="button"
              aria-haspopup="listbox"
              aria-expanded="false"
              aria-label="Language filter"
            >
              <svg className="library-select-sort-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M4 5h10" />
                <path d="M4 9h6" />
                <path d="M14 5s0 6-5 10" />
                <path d="M12 15c1.2 1.6 2.9 3 5 4" />
                <path d="M16 19l4-10 4 10" transform="translate(-2 -2)" />
                <path d="M15.5 13h5" />
              </svg>
              <span className="library-select-prefix">Language</span>
              <span id="station-language-filter-text" className="library-select-value">All languages</span>
              <svg className="library-select-caret" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                <path d="m6 9 6 6 6-6" />
              </svg>
            </button>
            <div id="station-language-filter-menu" className="library-select-menu" role="listbox" aria-label="Language filter options" />
          </div>

          <div className="library-select" data-codec-filter>
            <button
              id="station-codec-filter-btn"
              className="library-select-trigger"
              type="button"
              aria-haspopup="listbox"
              aria-expanded="false"
              aria-label="Codec filter"
            >
              <svg className="library-select-sort-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <rect x="4" y="6" width="16" height="12" rx="2" />
                <path d="M8 10h8" />
                <path d="M8 14h5" />
              </svg>
              <span className="library-select-prefix">Codec</span>
              <span id="station-codec-filter-text" className="library-select-value">All codecs</span>
              <svg className="library-select-caret" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                <path d="m6 9 6 6 6-6" />
              </svg>
            </button>
            <div id="station-codec-filter-menu" className="library-select-menu" role="listbox" aria-label="Codec filter options" />
          </div>

          <div className="library-select" data-bitrate-filter>
            <button
              id="station-bitrate-filter-btn"
              className="library-select-trigger"
              type="button"
              aria-haspopup="listbox"
              aria-expanded="false"
              aria-label="Bitrate filter"
            >
              <svg className="library-select-sort-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M5 18V9" />
                <path d="M10 18V5" />
                <path d="M15 18v-7" />
                <path d="M20 18V7" />
              </svg>
              <span className="library-select-prefix">Bitrate</span>
              <span id="station-bitrate-filter-text" className="library-select-value">Any bitrate</span>
              <svg className="library-select-caret" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                <path d="m6 9 6 6 6-6" />
              </svg>
            </button>
            <div id="station-bitrate-filter-menu" className="library-select-menu" role="listbox" aria-label="Bitrate filter options" />
          </div>

          <button id="station-health-filter-btn" className="library-select-trigger library-select-toggle" aria-pressed="false" type="button">
            <svg className="library-select-sort-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M12 21s-7-4.35-9.5-8.55C.53 8.93 2.84 5 6.97 5c1.97 0 3.36.96 5.03 2.83C13.67 5.96 15.06 5 17.03 5c4.13 0 6.44 3.93 4.47 7.45C19 16.65 12 21 12 21Z" />
              <path d="m9.3 12.25 1.75 1.75 3.65-4" />
            </svg>
            <span className="library-select-prefix">Health</span>
            <span id="station-health-filter-text" className="library-select-value">All stations</span>
          </button>
        </div>

        <div className="editor-actions advanced-filters-actions">
          <button id="station-advanced-filters-done-btn" className="btn cancel" type="button">Done</button>
        </div>
      </div>
    </div>
  );
}

export default function App() {
  return (
    <div className="app-container">
      <div className="player-layout">
        <div className="sidebar-wrap">
          <StationLibrary />
        </div>
        <main className="glass-card">
          <RetroStarfield />
          <HeaderControls />
          <ArtworkPanel />
          <TrackInfo />
          <PlayerControls />
          <VolumeControl />
          <SessionSummary />
          <QuickPickCarousel />
          <LegalLinks />
          <AdvancedFiltersOverlay />
          <StationsOverlay />
          <EditorOverlay />
          <SessionSchedulerOverlay />
          <ShortcutHelpOverlay />
          <CountrySelectionOverlay />
        </main>
        <InstallPromptBanner />
      </div>
      <SyncToast />
    </div>
  );
}
