// ===== SERVICE CREDENTIALS =====
(function() {
  const errorHandler = new ErrorHandler();
  injectModal('folder-browser-modal', `<div id="folder-browser-modal" class="weather-modal">
    <div class="weather-modal-content" style="min-width: 500px; max-width: 700px; max-height: 80vh;">
      <h3>📂 Browse for Media Folders</h3>

      <div id="folder-browser-path" style="padding: 10px; background: var(--card-bg); border-radius: 6px; margin-bottom: 12px; font-family: monospace; font-size: 0.9rem; word-break: break-all;">
        /
      </div>

      <div id="folder-browser-list" style="max-height: 400px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px;">
        <div style="padding: 20px; text-align: center; color: var(--muted);">Loading...</div>
      </div>

      <div id="folder-browser-selected" style="margin-top: 12px; padding: 10px; background: color-mix(in srgb, var(--success) 10%, transparent); border: 1px solid var(--success); border-radius: 6px; display: none;">
        <div style="font-size: 0.85rem; color: var(--success); margin-bottom: 6px;">Selected folders:</div>
        <div id="folder-browser-selected-list" style="display: flex; flex-wrap: wrap; gap: 6px;"></div>
      </div>

      <div class="weather-modal-buttons" style="margin-top: 16px; display: flex; gap: 8px; justify-content: space-between;">
        <button id="folder-browser-select-current" class="btn-accent">
          + Add Current Folder
        </button>
        <div class="flex-row-gap">
          <button id="folder-browser-cancel">Cancel</button>
          <button id="folder-browser-done" style="background: color-mix(in srgb, var(--success) 20%, transparent); border-color: var(--success); color: var(--success);">Done</button>
        </div>
      </div>
    </div>
  </div>`);

  injectModal('service-creds-modal', `<div id="service-creds-modal">
    <div class="service-creds-content">
      <h3 id="svc-creds-title" style="margin: 0 0 4px; font-size: 1.05rem;">Service Credentials</h3>
      <p id="svc-creds-desc" style="font-size: 0.75rem; color: var(--muted); margin: 0 0 14px;">Credentials are injected automatically when accessing this service.</p>

      <!-- Status indicator -->
      <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 12px;">
        <span id="svc-creds-dot" class="status-dot"></span>
        <span id="svc-creds-status" class="text-muted-sm">No credentials stored</span>
      </div>

      <!-- Seedhost credentials (shown for external services) -->
      <div id="svc-creds-seedhost" style="display: none; margin-bottom: 14px;">
        <label class="label-bold">Seedhost Login</label>
        <p class="hint-micro">Username shared across all services. Password is per-service.</p>
        <input type="text" id="svc-seedhost-user" placeholder="Username (shared)" autocomplete="username"
               style="width: 100%; padding: 8px 10px; margin-bottom: 6px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; box-sizing: border-box;" />
        <input type="password" id="svc-seedhost-pass" placeholder="Password" autocomplete="current-password"
               class="input-creds" />
      </div>

      <!-- API Key (shown for arr services or services with API key support) -->
      <div id="svc-creds-apikey" style="display: none; margin-bottom: 14px;">
        <label class="label-bold">API Key</label>
        <p class="hint-micro">Bypasses the app's own login screen</p>
        <input type="text" id="svc-apikey-input" placeholder="API key"
               style="width: 100%; padding: 8px 10px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; font-family: monospace; box-sizing: border-box;" />
      </div>

      <!-- Quality Profile (shown for radarr/sonarr only) -->
      <div id="svc-creds-quality" style="display: none; margin-bottom: 14px;">
        <label class="label-bold">Quality Profile</label>
        <p class="hint-micro">Used when requesting via Seerr</p>
        <div style="display: flex; gap: 8px; align-items: center;">
          <select id="svc-quality-select"
                  style="flex: 1; padding: 8px 10px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; box-sizing: border-box;">
            <option value="">-- Enter API key first --</option>
          </select>
          <button id="svc-quality-fetch" type="button"
                  style="padding: 8px 12px; font-size: 0.75rem; cursor: pointer; white-space: nowrap;">
            Fetch
          </button>
        </div>
        <div id="svc-quality-status" style="font-size: 0.75rem; margin-top: 4px; min-height: 1em;"></div>
      </div>

      <!-- Per-service Basic Auth (shown for non-external services) -->
      <div id="svc-creds-basic" style="display: none; margin-bottom: 14px;">
        <label class="label-bold">Service Login</label>
        <input type="text" id="svc-basic-user" placeholder="Username" autocomplete="username"
               style="width: 100%; padding: 8px 10px; margin-top: 6px; margin-bottom: 6px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; box-sizing: border-box;" />
        <input type="password" id="svc-basic-pass" placeholder="Password" autocomplete="current-password"
               class="input-creds" />
      </div>

      <!-- Error message -->
      <div id="svc-creds-error" style="display: none; padding: 8px 10px; margin-bottom: 10px; background: color-mix(in srgb, var(--error, #c62828) 12%, transparent); border: 1px solid var(--error, #c62828); border-radius: 6px; font-size: 0.8rem; color: var(--error, #c62828);"></div>

      <!-- Buttons -->
      <div style="display: flex; gap: 8px; margin-top: 14px;">
        <button id="svc-creds-save" class="btn-accent-solid" style="flex: 1; padding: 9px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem;">
          Save
        </button>
        <button id="svc-creds-clear" style="padding: 9px 14px; background: transparent; color: var(--bad-fg, #ff9aa3); border: 1px solid var(--bad-fg, #ff9aa3); border-radius: 6px; cursor: pointer; font-size: 0.85rem; display: none;">
          Clear
        </button>
        <button id="svc-creds-close" style="padding: 9px 16px; background: var(--card-base); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 0.85rem;">
          Cancel
        </button>
      </div>
    </div>
  </div>`);

  const modal = document.getElementById('service-creds-modal');
  let currentService = null;
  const arrServices = ['sonarr', 'radarr', 'prowlarr', 'overseerr'];
  const qualityProfileServices = ['sonarr', 'radarr'];

  function getServiceUrl(service) {
    return service.externalUrl || service.url || '';
  }

  function showError(msg) {
    const el = document.getElementById('svc-creds-error');
    el.textContent = msg;
    el.style.display = '';
  }

  function hideError() {
    const el = document.getElementById('svc-creds-error');
    el.textContent = '';
    el.style.display = 'none';
  }

  window.openServiceCredsModal = async function(service) {
    currentService = service;
    hideError();
    const title = document.getElementById('svc-creds-title');
    const desc = document.getElementById('svc-creds-desc');
    const seedhostSection = document.getElementById('svc-creds-seedhost');
    const apikeySection = document.getElementById('svc-creds-apikey');
    const basicSection = document.getElementById('svc-creds-basic');
    const qualitySection = document.getElementById('svc-creds-quality');

    title.textContent = service.name + ' Credentials';
    // Determine which sections to show
    const isExt = !!service.isExternal;
    const isArr = arrServices.includes(service.id) || arrServices.includes(service.appTemplate);
    const hasQuality = qualityProfileServices.includes(service.id) || qualityProfileServices.includes(service.appTemplate);

    seedhostSection.style.display = isExt ? '' : 'none';
    apikeySection.style.display = isArr ? '' : 'none';
    qualitySection.style.display = hasQuality ? '' : 'none';
    basicSection.style.display = !isExt ? '' : 'none';

    // Reset quality dropdown
    const qualSelect = document.getElementById('svc-quality-select');
    qualSelect.innerHTML = '<option value="">-- Enter API key first --</option>';
    document.getElementById('svc-quality-status').textContent = '';

    if (isExt) {
      desc.textContent = 'Seedhost credentials auto-login past the HTTP prompt. API key bypasses the app login.';
      // Update password placeholder with service name
      document.getElementById('svc-seedhost-pass').placeholder = `Password for ${service.name}`;
    } else if (isArr) {
      desc.textContent = 'API key bypasses the app login screen automatically.';
    } else {
      desc.textContent = 'Credentials are injected automatically when accessing this service.';
    }

    // Load existing credentials
    await loadServiceCreds(service);
    modal.classList.add('show');
  };

  async function loadServiceCreds(service) {
    const dot = document.getElementById('svc-creds-dot');
    const status = document.getElementById('svc-creds-status');
    const clearBtn = document.getElementById('svc-creds-clear');
    let hasCreds = false;

    // Load seedhost creds (shared username + per-service password)
    if (service.isExternal) {
      try {
        const res = await fetch(`/api/v1/seedhost-creds?serviceId=${service.id}`);
        const data = await res.json();
        if (data.success) {
          document.getElementById('svc-seedhost-user').value = data.username || '';
          if (data.hasCredentials) hasCreds = true;
        } else {
          document.getElementById('svc-seedhost-user').value = '';
        }
      } catch (e) { /* ignore */ }
      document.getElementById('svc-seedhost-pass').value = '';
    }

    // Load per-service creds
    try {
      const res = await fetch(`/api/v1/services/${service.id}/credentials`);
      const data = await res.json();
      if (data.success) {
        if (data.hasApiKey) {
          document.getElementById('svc-apikey-input').value = '••••••••';
          hasCreds = true;
        } else {
          document.getElementById('svc-apikey-input').value = '';
        }
        if (data.hasBasicAuth && !service.isExternal) {
          document.getElementById('svc-basic-user').value = data.username || '';
          hasCreds = true;
        } else {
          document.getElementById('svc-basic-user').value = '';
        }
      }
    } catch (e) { /* ignore */ }
    if (document.getElementById('svc-basic-pass')) document.getElementById('svc-basic-pass').value = '';

    // Load quality profile for arr services
    const svcId = service.id || service.appTemplate;
    if (qualityProfileServices.includes(svcId)) {
      await loadQualityProfiles(service);
    }

    if (hasCreds) {
      dot.style.background = 'var(--ok-fg, #74dfc4)';
      status.style.color = 'var(--ok-fg, #74dfc4)';
      status.textContent = 'Credentials stored';
      clearBtn.style.display = '';
      // Update the card button
      const btn = document.getElementById(`creds-btn-${service.id}`);
      if (btn) btn.classList.add('has-creds');
    } else {
      dot.style.background = 'var(--muted)';
      status.style.color = 'var(--muted)';
      status.textContent = 'No credentials stored';
      clearBtn.style.display = 'none';
    }
  }

  // Fetch and populate quality profiles dropdown
  async function loadQualityProfiles(service) {
    const qualSelect = document.getElementById('svc-quality-select');
    const qualStatus = document.getElementById('svc-quality-status');
    const svcId = service.id || service.appTemplate;
    const svcUrl = getServiceUrl(service);

    if (!svcUrl) {
      qualSelect.innerHTML = '<option value="">-- No service URL --</option>';
      return;
    }

    qualSelect.innerHTML = '<option value="">Loading...</option>';
    qualStatus.textContent = '';

    try {
      const params = new URLSearchParams({ service: svcId, url: svcUrl });
      const res = await fetch(`/api/v1/arr/quality-profiles?${params}`);
      const data = await res.json();

      if (!data.success || !data.profiles?.length) {
        qualSelect.innerHTML = '<option value="">-- No profiles found (enter API key and click Fetch) --</option>';
        return;
      }

      qualSelect.innerHTML = '';
      for (const p of data.profiles) {
        const opt = document.createElement('option');
        opt.value = p.id;
        opt.textContent = p.name;
        qualSelect.appendChild(opt);
      }

      // Pre-select stored profile or best match for "720"
      if (data.storedProfileId) {
        qualSelect.value = String(data.storedProfileId);
      }
      if (!qualSelect.value) {
        // Try to find a 720p-ish profile
        const match720 = data.profiles.find(p => /720/i.test(p.name));
        if (match720) qualSelect.value = String(match720.id);
      }
      if (!qualSelect.value && data.profiles.length) {
        qualSelect.value = String(data.profiles[0].id);
      }

      qualStatus.innerHTML = `<span style="color: var(--ok-fg);">${data.profiles.length} profiles loaded</span>`;
    } catch (e) {
      qualSelect.innerHTML = '<option value="">-- Failed to load --</option>';
      qualStatus.innerHTML = `<span style="color: var(--error, #c62828);">Error: ${e.message}</span>`;
    }
  }

  // Fetch button for quality profiles
  document.getElementById('svc-quality-fetch')?.addEventListener('click', async () => {
    if (!currentService) return;
    const svcId = currentService.id || currentService.appTemplate;
    const svcUrl = getServiceUrl(currentService);
    const apiKeyInput = document.getElementById('svc-apikey-input');
    const apiKey = apiKeyInput?.value.trim();
    const qualSelect = document.getElementById('svc-quality-select');
    const qualStatus = document.getElementById('svc-quality-status');

    if (!svcUrl) {
      qualStatus.innerHTML = '<span style="color: var(--error, #c62828);">No service URL available</span>';
      return;
    }
    if (!apiKey || apiKey === '••••••••') {
      qualStatus.innerHTML = '<span style="color: var(--error, #c62828);">Enter an API key first</span>';
      return;
    }

    qualSelect.innerHTML = '<option value="">Fetching...</option>';
    qualStatus.textContent = '';

    try {
      const params = new URLSearchParams({ service: svcId, url: svcUrl, apiKey });
      const res = await fetch(`/api/v1/arr/quality-profiles?${params}`);
      const data = await res.json();

      if (!data.success) {
        qualSelect.innerHTML = '<option value="">-- Error --</option>';
        qualStatus.innerHTML = `<span style="color: var(--error, #c62828);">${data.error || 'Failed to fetch profiles'}</span>`;
        return;
      }

      if (!data.profiles?.length) {
        qualSelect.innerHTML = '<option value="">-- No profiles found --</option>';
        return;
      }

      qualSelect.innerHTML = '';
      for (const p of data.profiles) {
        const opt = document.createElement('option');
        opt.value = p.id;
        opt.textContent = p.name;
        qualSelect.appendChild(opt);
      }

      // Pre-select 720p match
      const match720 = data.profiles.find(p => /720/i.test(p.name));
      if (match720) qualSelect.value = String(match720.id);
      else if (data.profiles.length) qualSelect.value = String(data.profiles[0].id);

      qualStatus.innerHTML = `<span style="color: var(--ok-fg);">${data.profiles.length} profiles loaded</span>`;
    } catch (e) {
      qualSelect.innerHTML = '<option value="">-- Error --</option>';
      qualStatus.innerHTML = `<span style="color: var(--error, #c62828);">${e.message}</span>`;
    }
  });

  // Save button
  document.getElementById('svc-creds-save')?.addEventListener('click', async () => {
    if (!currentService) return;
    const saveBtn = document.getElementById('svc-creds-save');
    saveBtn.textContent = 'Saving...';
    saveBtn.disabled = true;
    hideError();

    try {
      const isArr = arrServices.includes(currentService.id) || arrServices.includes(currentService.appTemplate);
      const svcId = currentService.id || currentService.appTemplate;

      // Save seedhost creds (shared username + per-service password)
      if (currentService.isExternal) {
        const user = document.getElementById('svc-seedhost-user').value.trim();
        const pass = document.getElementById('svc-seedhost-pass').value;
        if (user) {
          await secureFetch('/api/v1/seedhost-creds', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ username: user, password: pass || undefined, serviceId: currentService.id })
          });
        }
      }

      // Save API key — for arr services, use the arr credentials endpoint (correct namespace)
      const apiKeyInput = document.getElementById('svc-apikey-input');
      const apiKey = apiKeyInput?.value.trim();
      if (apiKey && apiKey !== '••••••••') {
        if (isArr) {
          // Use arr credentials endpoint — validates key, tests connection, stores in arr.* namespace
          const svcUrl = getServiceUrl(currentService);
          const qualSelect = document.getElementById('svc-quality-select');
          const qualityProfileId = qualSelect?.value ? parseInt(qualSelect.value) : undefined;
          const qualityProfileName = qualSelect?.selectedOptions?.[0]?.textContent || undefined;

          const res = await secureFetch('/api/v1/arr/credentials', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              service: svcId,
              apiKey,
              url: svcUrl || undefined,
              qualityProfileId: qualityProfileId || undefined,
              qualityProfileName: qualityProfileName || undefined
            })
          });
          const data = await res.json();
          if (!data.success) {
            showError(data.error || 'Failed to save API key');
            saveBtn.textContent = 'Save';
            saveBtn.disabled = false;
            return;
          }
          if (data.connectionTest && !data.connectionTest.success) {
            showError(`API key saved but connection test failed: ${data.connectionTest.error}`);
          }
        } else {
          // Non-arr services use the generic endpoint
          await secureFetch(`/api/v1/services/${currentService.id}/credentials`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ apiKey })
          });
        }
      } else if (isArr && qualityProfileServices.includes(svcId)) {
        // API key unchanged but user may have changed quality profile — save profile only
        const qualSelect = document.getElementById('svc-quality-select');
        const qualityProfileId = qualSelect?.value ? parseInt(qualSelect.value) : undefined;
        const qualityProfileName = qualSelect?.selectedOptions?.[0]?.textContent || undefined;
        if (qualityProfileId) {
          await secureFetch('/api/v1/arr/quality-profiles', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ service: svcId, qualityProfileId, qualityProfileName })
          });
        }
      }

      // Save per-service basic auth
      if (!currentService.isExternal) {
        const user = document.getElementById('svc-basic-user').value.trim();
        const pass = document.getElementById('svc-basic-pass').value;
        if (user && pass) {
          await secureFetch(`/api/v1/services/${currentService.id}/credentials`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ username: user, password: pass })
          });
        }
      }

      await loadServiceCreds(currentService);
    } catch (e) {
      errorHandler.logError('[ServiceCredentials] Save', e, { function: 'saveCredentials' });
      showError('Failed to save: ' + (e.message || 'Unknown error'));
    }
    saveBtn.textContent = 'Save';
    saveBtn.disabled = false;
  });

  // Clear button
  document.getElementById('svc-creds-clear')?.addEventListener('click', async () => {
    if (!currentService) return;
    if (!confirm(`Remove stored credentials for ${currentService.name}?`)) return;
    hideError();
    try {
      const svcId = currentService.id || currentService.appTemplate;
      const isArr = arrServices.includes(svcId);
      if (currentService.isExternal) {
        await secureFetch(`/api/v1/seedhost-creds?serviceId=${currentService.id}`, { method: 'DELETE' });
      }
      // Delete from both namespaces
      await secureFetch(`/api/v1/services/${currentService.id}/credentials`, { method: 'DELETE' });
      if (isArr) {
        await secureFetch(`/api/v1/arr/credentials/${svcId}`, { method: 'DELETE' });
      }
      const btn = document.getElementById(`creds-btn-${currentService.id}`);
      if (btn) btn.classList.remove('has-creds');
      await loadServiceCreds(currentService);
    } catch (e) {
      errorHandler.logError('[ServiceCredentials] Clear', e, { function: 'clearCredentials' });
      showError('Failed to clear: ' + (e.message || 'Unknown error'));
    }
  });

  // Close button / backdrop
  document.getElementById('svc-creds-close')?.addEventListener('click', () => {
    modal.classList.remove('show');
    currentService = null;
  });
  modal?.addEventListener('click', (e) => {
    if (e.target === modal) {
      modal.classList.remove('show');
      currentService = null;
    }
  });

  // Check credential status for all services on page load (update key button highlights)
  window.refreshCredsButtons = async function() {
    try {
      for (const app of (window.APPS || [])) {
        if (!app.isExternal && !app.appTemplate && !app.url) continue;
        let hasCreds = false;
        if (app.isExternal) {
          try {
            const seedRes = await fetch(`/api/v1/seedhost-creds?serviceId=${app.id}`);
            const seedData = await seedRes.json();
            if (seedData.success && seedData.hasCredentials) hasCreds = true;
          } catch (e) { /* ignore */ }
        }
        try {
          const r = await fetch(`/api/v1/services/${app.id}/credentials`);
          const d = await r.json();
          if (d.success && (d.hasApiKey || d.hasBasicAuth)) hasCreds = true;
        } catch (e) { /* ignore */ }
        const btn = document.getElementById(`creds-btn-${app.id}`);
        if (btn) btn.classList.toggle('has-creds', hasCreds);
      }
    } catch (e) { /* ignore */ }
  };
})();
