/* One action control for the Downloads page and Settings download manager. */
(function(root) {
  'use strict';
  // One SVG definition per media concept; every instance inherits its control colour.
  const mediaPaths = {
    download: '<path d="M12 3v12m-5-5 5 5 5-5M4 17v4h16v-4"/>',
    offline: '<circle cx="12" cy="12" r="9"/><path d="m7.5 12 3 3 6-6"/>',
    progress: '<path d="M12 3a9 9 0 1 1-9 9"/>'
  };
  const variants = {
    'classic': mediaPaths,
    'f7-swipe': {
      download: '<path d="M12 3v12m-5-5 5 5 5-5M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/>',
      offline: '<circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/>',
      progress: '<path d="M12 3a9 9 0 1 1-9 9"/>'
    },
    'glass-stage': {
      download: '<path d="M12 4v11m-4-4 4 4 4-4M5 20h14"/>',
      offline: '<circle cx="12" cy="12" r="8"/><path d="m8.5 12 2.5 2.5 4.5-5"/>',
      progress: '<path d="M12 4a8 8 0 1 1-8 8"/>'
    },
    'bento-hub': {
      download: '<path d="M12 4v11m-4-4 4 4 4-4M5 17v3h14v-3"/>',
      offline: '<rect x="4" y="4" width="16" height="16" rx="4"/><path d="m8 12 3 3 5-6"/>',
      progress: '<path d="M12 4a8 8 0 1 1-8 8"/>'
    }
  };
  const use = kind => `<use href="#media-${kind}"/>`;
  const svg = (kind, extra = '') => `<svg class="media-icon ${extra}" data-media-icon="${kind}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${use(kind)}</svg>`;
  const media = { paths: mediaPaths, use, svg };
  if (root.document) {
    const defs = root.document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    defs.setAttribute('aria-hidden', 'true'); defs.setAttribute('width', '0'); defs.setAttribute('height', '0');
    defs.style.position = 'absolute'; defs.style.pointerEvents = 'none';
    defs.innerHTML = '<defs>' + Object.keys(mediaPaths).map(kind => `<g id="media-${kind}">${Object.entries(variants).map(([layout, paths]) => `<g class="media-shape media-shape-${layout}">${paths[kind]}</g>`).join('')}</g>`).join('') + '</defs>';
    root.document.body.appendChild(defs);
    root.MediaIcons = media;
  }
  // Shared transport symbols: CSS switches drawings without replacing live controls.
  const transportPaths = {
    play: '<path d="m8 5 11 7-11 7z"/>',
    pause: '<rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/>',
    previous: '<path d="m19 5-10 7 10 7zM5 5v14"/>',
    next: '<path d="m5 5 10 7-10 7zM19 5v14"/>',
    forward: '<path d="m3 5 9 7-9 7zM12 5l9 7-9 7z"/>'
  };
  for (const seconds of [10,15]) for (const direction of ['back','forward']) {
    transportPaths[direction + seconds] = (direction === 'back'
      ? '<path d="M4 12a8 8 0 1 0 3-6.2M4 4v4.5h4.5"/>'
      : '<path d="M20 12a8 8 0 1 1-3-6.2M20 4v4.5h-4.5"/>') +
      `<text x="12" y="15.5" text-anchor="middle" font-size="7.5" font-weight="700" fill="currentColor" stroke="none">${seconds}</text>`;
  }
  const transportVariants = Object.fromEntries(['classic','f7-swipe','glass-stage','bento-hub'].map(layout => [layout,{...transportPaths}]));
  Object.assign(transportVariants['f7-swipe'], {
    play: '<path d="M8 5.8a1 1 0 0 1 1.5-.86l10 6.2a1 1 0 0 1 0 1.72l-10 6.2A1 1 0 0 1 8 18.2z"/>',
    previous: '<rect x="4" y="5" width="3" height="14" rx="1.5"/><path d="M19 6a1 1 0 0 0-1.5-.86l-8.5 6a1 1 0 0 0 0 1.72l8.5 6A1 1 0 0 0 19 18z"/>',
    next: '<rect x="17" y="5" width="3" height="14" rx="1.5"/><path d="M5 6a1 1 0 0 1 1.5-.86l8.5 6a1 1 0 0 1 0 1.72l-8.5 6A1 1 0 0 1 5 18z"/>'
  });
  const transport = {
    paths: transportPaths, variants: transportVariants,
    svg(kind) {
      if (!transportPaths[kind]) throw new Error('Unknown transport icon: ' + kind);
      return `<svg class="transport-icon" data-transport-icon="${kind}" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><use href="#transport-${kind}"/></svg>`;
    },
    set(button, kind, label) {
      if (!button) return;
      button.innerHTML = this.svg(kind);
      button.setAttribute('aria-label', label || (kind === 'pause' ? 'Pause' : 'Play'));
    }
  };
  if (root.document) {
    const defs = root.document.createElementNS('http://www.w3.org/2000/svg','svg');
    defs.setAttribute('aria-hidden','true'); defs.setAttribute('width','0'); defs.setAttribute('height','0');
    defs.style.position='absolute'; defs.style.pointerEvents='none';
    defs.innerHTML='<defs>'+Object.keys(transportPaths).map(kind=>`<g id="transport-${kind}">${Object.entries(transportVariants).map(([layout,paths])=>`<g class="transport-shape transport-shape-${layout}">${paths[kind]}</g>`).join('')}</g>`).join('')+'</defs>';
    root.document.body.appendChild(defs); root.TransportIcons=transport;
  }
  const paths = {
    retry: '<path d="M3 11a9 9 0 1 1 2.6 7M3 3v8h8"/>',
    cancel: '<path d="m6 6 12 12M6 18 18 6"/>',
    pause: '<path d="M8 5v14M16 5v14"/>',
    resume: '<path d="m9 5 10 7-10 7z"/>',
  };
  function create(doc, action, title) {
    if (!paths[action]) throw new Error('Unknown download action');
    const label = action[0].toUpperCase() + action.slice(1);
    const button = doc.createElement('button'); button.type = 'button';
    button.className = `dl-act download-action${action === 'cancel' ? ' danger' : ''}`;
    button.setAttribute('aria-label', `${label} ${title}`);
    const icon = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
    icon.setAttribute('viewBox', '0 0 24 24'); icon.setAttribute('aria-hidden', 'true'); icon.setAttribute('focusable', 'false');
    icon.classList.add('download-action-icon'); icon.innerHTML = paths[action];
    const text = doc.createElement('span'); text.textContent = label;
    button.append(icon, text); return button;
  }
  const api = { create, media, transport };
  if (typeof module !== 'undefined' && module.exports) module.exports = api; else root.DownloadActions = api;
})(globalThis);