// PKCE generation: see Authentication section
const params = new URLSearchParams({
  client_id: 'YOUR_CLIENT_ID',
  redirect_uri: 'https://your-app.com/callback',
  response_type: 'code',
  code_challenge: codeChallenge,
  code_challenge_method: 'S256',
  state,
  prompt: 'select_tone',
  // gears: 'full-rig',         // optional: amp, full-rig, pedal, outboard, ir
  // gears: 'amp_full-rig',     // optional: multiple values separated by _
  // platform: 'nam',           // optional: nam, aida-x, aa-snapshot, proteus, ir
  // menubar: 'true',           // optional: show navigation bar with back/forward/refresh/close
});

window.location.href = `https://www.tone3000.com/api/v1/oauth/authorize?${params}`;

const params = new URLSearchParams(window.location.search);
const code = params.get('code');
const state = params.get('state');
const toneId = params.get('tone_id');
const canceled = params.get('canceled') === 'true';

if (state !== sessionStorage.getItem('t3k_state')) {
  throw new Error('State mismatch. Possible CSRF attack.');
}

if (canceled) {
  // User exited without selecting a tone.
  // If code is present, you can still exchange it for tokens.
  // If code is absent, the user closed before signing in.
  return;
}

// Token exchange: see Authentication section
const { access_token } = await exchangeCode(code);

// Fetch tone metadata
const tone = await fetch(`https://www.tone3000.com/api/v1/tones/${toneId}`, {
  headers: { Authorization: `Bearer ${access_token}` },
}).then(r => r.json());

// Fetch models — each has a model_url for downloading
const { data: models } = await fetch(
  `https://www.tone3000.com/api/v1/models?tone_id=${toneId}`,
  { headers: { Authorization: `Bearer ${access_token}` } },
).then(r => r.json());

// PKCE generation: see Authentication section
const params = new URLSearchParams({
  client_id: 'YOUR_CLIENT_ID',
  redirect_uri: 'https://your-app.com/callback',
  response_type: 'code',
  code_challenge: codeChallenge,
  code_challenge_method: 'S256',
  state,
  prompt: 'load_tone',
  tone_id: '42',
  // gears: 'amp',       // optional: filter replacement browse by gear type
  // platform: 'nam',   // optional: filter replacement browse by platform
  // menubar: 'true',   // optional: show navigation bar with back/forward/refresh/close
});

window.location.href = `https://www.tone3000.com/api/v1/oauth/authorize?${params}`;

const params = new URLSearchParams(window.location.search);
const code = params.get('code');
const state = params.get('state');
const toneId = params.get('tone_id');  // may differ from your original request
const canceled = params.get('canceled') === 'true';

if (state !== sessionStorage.getItem('t3k_state')) {
  throw new Error('State mismatch. Possible CSRF attack.');
}

if (canceled) {
  // User exited without loading a tone.
  // If code is present, you can still exchange it for tokens.
  // If code is absent, the user closed before signing in.
  return;
}

// Token exchange: see Authentication section
const { access_token } = await exchangeCode(code);

// Fetch tone metadata
const tone = await fetch(`https://www.tone3000.com/api/v1/tones/${toneId}`, {
  headers: { Authorization: `Bearer ${access_token}` },
}).then(r => r.json());

// Fetch models — each has a model_url for downloading
const { data: models } = await fetch(
  `https://www.tone3000.com/api/v1/models?tone_id=${toneId}`,
  { headers: { Authorization: `Bearer ${access_token}` } },
).then(r => r.json());

const response = await fetch(`https://www.tone3000.com/api/v1/tones/created?page=${page}&page_size=${pageSize}`, {
  headers: {
    'Authorization': `Bearer ${accessToken}`,
    'Content-Type': 'application/json'
  }
});

const tones = await response.json();

const response = await fetch(`https://www.tone3000.com/api/v1/tones/favorited?page=${page}&page_size=${pageSize}`, {
  headers: {
    'Authorization': `Bearer ${accessToken}`,
    'Content-Type': 'application/json'
  }
});

const tones = await response.json();

const response = await fetch(`https://www.tone3000.com/api/v1/tones/${toneId}`, {
  headers: {
    'Authorization': `Bearer ${accessToken}`,
    'Content-Type': 'application/json'
  }
});

const tone = await response.json();

const response = await fetch(`https://www.tone3000.com/api/v1/tones/search?query=${query}&page=${page}&page_size=${pageSize}&sort=${sort}&gears=${gears}&sizes=${sizes}`, {
  headers: {
    'Authorization': `Bearer ${accessToken}`,
    'Content-Type': 'application/json'
  }
});

const tones = await response.json();

const response = await fetch(`https://www.tone3000.com/api/v1/models/${modelId}`, {
  headers: {
    'Authorization': `Bearer ${accessToken}`,
    'Content-Type': 'application/json'
  }
});

const model = await response.json();

const response = await fetch(`https://www.tone3000.com/api/v1/models?tone_id=${toneId}&page=${page}&page_size=${pageSize}`, {
  headers: {
    'Authorization': `Bearer ${accessToken}`,
    'Content-Type': 'application/json'
  }
});

const models = await response.json();

// Download model in browser
const downloadModel = async (modelUrl: string) => {
  const response = await fetch(modelUrl, {
    headers: {
      'Authorization': `Bearer ${accessToken}`
    }
  });
  
  if (!response.ok) {
    throw new Error('Failed to download model');
  }
  
  const blob = await response.blob();
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = modelUrl.split('/').pop() || 'model';
  document.body.appendChild(a);
  a.click();
  window.URL.revokeObjectURL(url);
  document.body.removeChild(a);
};

// Usage
await downloadModel(model.model_url);