{{define "settings"}}
  <div class="settings-container">
    <h1>Settings</h1>

    <!-- Tab Navigation -->
    <div class="settings-tabs">
      <button class="tab-button active" data-tab="import">Import Data</button>
      <button class="tab-button" data-tab="scrobble">Scrobble API</button>
    </div>

    <!-- Tab Content -->
    <div class="tab-content">
      <!-- Import Data Tab -->
      <div class="tab-panel active" id="import">
        <div class="import-section">
          <h2>Spotify</h2>
          <p>Import your Spotify listening history from your data export.</p>
          <form id="spotify-form" method="POST" action="/settings/import/spotify" enctype="multipart/form-data">
            <input type="file" name="json_files" accept=".json,application/json" multiple required>
            <button type="submit">Upload Spotify Data</button>
          </form>

          <div id="spotify-progress" class="progress-container" style="display: none;">
            <div class="progress-status" id="spotify-progress-status">Initializing...</div>
            <div class="progress-bar-wrapper">
              <div class="progress-bar-fill" id="spotify-progress-fill"></div>
              <div class="progress-text" id="spotify-progress-text">0%</div>
            </div>
            <div class="progress-tracks" id="spotify-progress-tracks"></div>
            <div class="progress-error" id="spotify-progress-error"></div>
            <div class="progress-success" id="spotify-progress-success"></div>
          </div>
        </div>

        <div class="import-section">
          <h2>Last.fm</h2>
          <p>Import your Last.fm scrobbles.</p>
          <form id="lastfm-form" method="POST" action="/settings/import/lastfm">
            <input type="text" name="lastfm_username" placeholder="Last.FM Username" required>
            <input type="text" name="lastfm_api_key" placeholder="Last.FM API Key" required>
            <button type="submit">Import from Last.fm</button>
          </form>

          <div id="lastfm-progress" class="progress-container" style="display: none;">
            <div class="progress-status" id="lastfm-progress-status">Initializing...</div>
            <div class="progress-bar-wrapper">
              <div class="progress-bar-fill" id="lastfm-progress-fill"></div>
              <div class="progress-text" id="lastfm-progress-text">0%</div>
            </div>
            <div class="progress-tracks" id="lastfm-progress-tracks"></div>
            <div class="progress-error" id="lastfm-progress-error"></div>
            <div class="progress-success" id="lastfm-progress-success"></div>
          </div>
        </div>
      </div>

      <!-- Scrobble API Tab -->
      <div class="tab-panel" id="scrobble">
        <div class="import-section">
          <h2>API Keys</h2>
          <p>Generate an API key to receive scrobbles from external apps.</p>
          {{if .APIKey}}
            <div class="api-key-display">
              <label>API Key:</label>
              <code>{{.APIKey}}</code>
            </div>
            <div class="api-key-display">
              <label>API Secret:</label>
              <code>{{.APISecret}}</code>
            </div>
          {{end}}
          <form method="POST" action="/settings/generate-apikey">
            <button type="submit">{{if .APIKey}}Regenerate{{else}}Generate{{end}} API Key</button>
          </form>
        </div>

        <div class="import-section">
          <h2>Endpoint URLs</h2>
          <p>Use these URLs in your scrobbling apps:</p>
          <div class="api-key-display">
            <label>Last.fm Compatible:</label>
            <code>/2.0/</code>
          </div>
          <div class="api-key-display">
            <label>Listenbrainz JSON:</label>
            <code>/1/submit-listens</code>
          </div>
        </div>

        <div class="import-section">
          <h2>Spotify Integration</h2>
          <p>Connect your Spotify account to automatically import your listening history.</p>
          <p>Create a Spotify app at <a href="https://developer.spotify.com/dashboard" target="_blank">developer.spotify.com</a> and enter your credentials below.</p>
          
          <form method="POST" action="/settings/update-spotify">
            <input type="text" name="spotify_client_id" placeholder="Spotify Client ID" value="{{.SpotifyClientId}}">
            <input type="password" name="spotify_client_secret" placeholder="Spotify Client Secret">
            <button type="submit">Save Spotify Credentials</button>
          </form>

          {{if and .SpotifyClientId (not .SpotifyConnected)}}
            <p><a href="/settings/spotify-connect" class="button">Connect Spotify</a></p>
            <p class="info">Click to authorize Muzi to access your Spotify account.</p>
          {{end}}

          {{if .SpotifyConnected}}
            <p class="success">Spotify is connected and importing!</p>
          {{end}}
        </div>
      </div>
    </div>
  </div>
  
  <script src="/files/import.js"></script>
  <script>
    document.querySelectorAll('.tab-button').forEach(button => {
      button.addEventListener('click', () => {
        document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
        document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
        
        button.classList.add('active');
        document.getElementById(button.dataset.tab).classList.add('active');
      });
    });
  </script>
{{end}}