const AUTHORITY = 'https://auth.mischlabs.de/realms/mischlabs';
const CLIENT_ID = 'mischlabs-admin';
const REDIRECT_URI = `${window.location.origin}/admin.html`;
const SCOPES = 'openid profile email';
const CONFIG_URL = '/services.json?v=1';
const LOCAL_CONFIG_KEY = 'mischlabs.dashboard.config';
const TOKEN_KEY = 'mischlabs.admin.tokens';
const PKCE_KEY = 'mischlabs.admin.pkce';

const loginButton = document.querySelector('#loginButton');
const logoutButton = document.querySelector('#logoutButton');
const loginPanel = document.querySelector('#loginPanel');
const adminPanel = document.querySelector('#adminPanel');
const loginMessage = document.querySelector('#loginMessage');
const adminUser = document.querySelector('#adminUser');
const serviceEditor = document.querySelector('#serviceEditor');
const checkAllButton = document.querySelector('#checkAllButton');
const saveLocalButton = document.querySelector('#saveLocalButton');
const resetLocalButton = document.querySelector('#resetLocalButton');
const downloadConfigButton = document.querySelector('#downloadConfigButton');
const refreshOpsButton = document.querySelector('#refreshOpsButton');
const runWatchtowerButton = document.querySelector('#runWatchtowerButton');
const diskStatus = document.querySelector('#diskStatus');
const watchtowerStatus = document.querySelector('#watchtowerStatus');
const containerStatus = document.querySelector('#containerStatus');

let config = null;
let tokenSet = null;
let opsRefreshTimer = null;
let latestWatchtower = null;
let lastManualWatchtowerRun = null;

function base64UrlEncode(buffer) {
  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/g, '');
}

function randomString(length = 64) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';
  const bytes = new Uint8Array(length);
  crypto.getRandomValues(bytes);
  return [...bytes].map((byte) => chars[byte % chars.length]).join('');
}

async function createChallenge(verifier) {
  const data = new TextEncoder().encode(verifier);
  const digest = await crypto.subtle.digest('SHA-256', data);
  return base64UrlEncode(digest);
}

function decodeJwt(token) {
  const payload = token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
  const json = decodeURIComponent(atob(payload).split('').map((char) => (
    `%${(`00${char.charCodeAt(0).toString(16)}`).slice(-2)}`
  )).join(''));
  return JSON.parse(json);
}

function getStoredTokens() {
  try {
    const raw = sessionStorage.getItem(TOKEN_KEY);
    return raw ? JSON.parse(raw) : null;
  } catch {
    return null;
  }
}

function storeTokens(tokens) {
  sessionStorage.setItem(TOKEN_KEY, JSON.stringify(tokens));
}

function clearTokens() {
  sessionStorage.removeItem(TOKEN_KEY);
  sessionStorage.removeItem(PKCE_KEY);
}

function isTokenValid(tokens) {
  if (!tokens?.id_token) return false;
  try {
    const claims = decodeJwt(tokens.id_token);
    return Date.now() < claims.exp * 1000;
  } catch {
    return false;
  }
}

async function login() {
  const verifier = randomString();
  const challenge = await createChallenge(verifier);
  const state = randomString(32);
  sessionStorage.setItem(PKCE_KEY, JSON.stringify({ verifier, state }));

  const params = new URLSearchParams({
    client_id: CLIENT_ID,
    redirect_uri: REDIRECT_URI,
    response_type: 'code',
    scope: SCOPES,
    state,
    code_challenge: challenge,
    code_challenge_method: 'S256'
  });

  window.location.href = `${AUTHORITY}/protocol/openid-connect/auth?${params}`;
}

async function handleCallback() {
  const url = new URL(window.location.href);
  const code = url.searchParams.get('code');
  const state = url.searchParams.get('state');
  const error = url.searchParams.get('error');

  if (error) {
    loginMessage.textContent = `Keycloak Fehler: ${error}`;
    window.history.replaceState({}, document.title, REDIRECT_URI);
    return;
  }

  if (!code) return;

  const stored = JSON.parse(sessionStorage.getItem(PKCE_KEY) || '{}');
  if (!stored.verifier || stored.state !== state) {
    loginMessage.textContent = 'SSO Antwort konnte nicht verifiziert werden.';
    return;
  }

  const body = new URLSearchParams({
    grant_type: 'authorization_code',
    client_id: CLIENT_ID,
    redirect_uri: REDIRECT_URI,
    code,
    code_verifier: stored.verifier
  });

  try {
    const response = await fetch(`${AUTHORITY}/protocol/openid-connect/token`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body
    });

    if (!response.ok) {
      throw new Error(`Token endpoint returned ${response.status}`);
    }

    const tokens = await response.json();
    storeTokens(tokens);
    window.history.replaceState({}, document.title, REDIRECT_URI);
  } catch (error) {
    loginMessage.textContent = `Token-Austausch fehlgeschlagen: ${error.message}. Keycloak Client/Web Origins pruefen.`;
  }
}

function authorize(tokens) {
  const claims = decodeJwt(tokens.id_token);
  const username = String(claims.preferred_username || '').toLowerCase();
  const email = String(claims.email || '').toLowerCase();
  const allowed = username === 'mrdiderot' || email === 'mail.misch@pm.me';

  if (!allowed) {
    loginMessage.textContent = `Angemeldet als ${claims.preferred_username || claims.email}, aber nicht fuer diese Adminseite freigeschaltet.`;
    return null;
  }

  return claims;
}

async function loadConfig() {
  const local = localStorage.getItem(LOCAL_CONFIG_KEY);
  if (local) return JSON.parse(local);

  const response = await fetch(CONFIG_URL, { cache: 'no-store' });
  return response.json();
}

function categoryOptions(selected) {
  return config.categories.map((category) => (
    `<option value="${category.id}" ${category.id === selected ? 'selected' : ''}>${category.label}</option>`
  )).join('');
}

function renderEditor() {
  serviceEditor.innerHTML = config.services.map((service, index) => `
    <article class="admin-row" data-index="${index}">
      <div>
        <strong>${service.name}</strong>
        <span>${service.domain}</span>
      </div>
      <label>
        Kategorie
        <select data-field="category">${categoryOptions(service.category)}</select>
      </label>
      <label>
        URL
        <input data-field="url" value="${service.url}">
      </label>
      <button class="ghost-button check-one" type="button">Pruefen</button>
      <div class="diagnostic">Noch nicht geprueft.</div>
    </article>
  `).join('');

  serviceEditor.querySelectorAll('select,input').forEach((input) => {
    input.addEventListener('change', () => {
      const row = input.closest('.admin-row');
      const service = config.services[Number(row.dataset.index)];
      service[input.dataset.field] = input.value;
    });
  });

  serviceEditor.querySelectorAll('.check-one').forEach((button) => {
    button.addEventListener('click', () => checkRow(button.closest('.admin-row')));
  });
}

async function probe(url) {
  const started = performance.now();
  const controller = new AbortController();
  const timeout = window.setTimeout(() => controller.abort(), 6000);

  try {
    const response = await fetch(url, {
      mode: 'no-cors',
      cache: 'no-store',
      signal: controller.signal
    });
    return {
      status: 'online',
      ms: Math.round(performance.now() - started),
      detail: response.type === 'opaque'
        ? 'Erreichbar. HTTP-Details wegen Browser-CORS nicht lesbar.'
        : `HTTP ${response.status}`
    };
  } catch (error) {
    const isTimeout = error.name === 'AbortError';
    return {
      status: isTimeout ? 'offline' : 'unknown',
      ms: Math.round(performance.now() - started),
      detail: isTimeout
        ? 'Timeout nach 6 Sekunden.'
        : 'Der Browser blockiert diese Pruefung wahrscheinlich wegen CORS/CORB. Der Dienst kann trotzdem online sein.'
    };
  } finally {
    window.clearTimeout(timeout);
  }
}

async function checkRow(row) {
  const service = config.services[Number(row.dataset.index)];
  const diagnostic = row.querySelector('.diagnostic');
  diagnostic.textContent = 'Pruefe...';
  row.classList.remove('is-online', 'is-offline', 'is-unknown');

  const result = await probe(service.url);
  row.classList.toggle('is-online', result.status === 'online');
  row.classList.toggle('is-offline', result.status === 'offline');
  row.classList.toggle('is-unknown', result.status === 'unknown');

  const label = {
    online: 'Online',
    offline: 'Fehler',
    unknown: 'Nicht im Browser pruefbar'
  }[result.status];

  diagnostic.textContent = `${label} - ${result.ms} ms - ${result.detail}`;
}

function saveLocal() {
  localStorage.setItem(LOCAL_CONFIG_KEY, JSON.stringify(config, null, 2));
}

function downloadConfig() {
  const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'services.json';
  link.click();
  URL.revokeObjectURL(url);
}

function formatBytes(bytes) {
  if (!Number.isFinite(bytes)) return '--';
  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
  let value = bytes;
  let unit = 0;
  while (value >= 1024 && unit < units.length - 1) {
    value /= 1024;
    unit += 1;
  }
  return `${value.toFixed(value >= 10 || unit === 0 ? 0 : 1)} ${units[unit]}`;
}

function renderDisks(disks = []) {
  diskStatus.innerHTML = disks.map((disk) => {
    if (disk.error) {
      const hint = disk.mount
        ? `Mount fehlt: ${disk.mount}`
        : disk.error;
      return `<div class="ops-line is-warning"><strong>${disk.label}</strong><span>${hint}</span></div>`;
    }

    const level = disk.usedPercent >= 90 ? 'danger' : disk.usedPercent >= 80 ? 'warn' : 'ok';
    return `
      <div class="ops-line">
        <strong>${disk.label}</strong>
        <span>${formatBytes(disk.used)} / ${formatBytes(disk.total)} (${disk.usedPercent}%)</span>
      </div>
      <div class="usage-bar" data-level="${level}">
        <span style="width:${Math.min(disk.usedPercent, 100)}%"></span>
      </div>
    `;
  }).join('');
}

function renderWatchtower(watchtower) {
  latestWatchtower = watchtower;
  const officialSession = watchtower?.lastSession;
  const officialHtml = officialSession
    ? `
      <div class="ops-line"><strong>Offizieller Lauf</strong><span>${officialSession.finishedAt ? new Date(officialSession.finishedAt).toLocaleString('de-DE') : '--'}</span></div>
      <div class="ops-line"><strong>Geprueft</strong><span>${officialSession.scanned ?? '--'}</span></div>
      <div class="ops-line"><strong>Aktualisiert</strong><span>${officialSession.updated ?? '--'}</span></div>
      <div class="ops-line"><strong>Fehler</strong><span>${officialSession.failed ?? '--'}</span></div>
    `
    : `<div class="ops-line"><strong>Offizieller Lauf</strong><span>${watchtower?.tail?.slice(-2)?.join(' | ') || 'Noch nicht gefunden'}</span></div>`;

  if (lastManualWatchtowerRun) {
    const run = lastManualWatchtowerRun;
    const session = run.session;
    const finished = run.finishedAt ? new Date(run.finishedAt).toLocaleString('de-DE') : 'laeuft noch';
    const state = run.running ? 'Laeuft' : `Beendet (${run.exitCode ?? '--'})`;
    watchtowerStatus.innerHTML = `
      ${officialHtml}
      <div class="ops-divider"></div>
      <div class="ops-line"><strong>Manuell</strong><span>${state}</span></div>
      <div class="ops-line"><strong>Gestartet</strong><span>${run.startedAt ? new Date(run.startedAt).toLocaleString('de-DE') : '--'}</span></div>
      <div class="ops-line"><strong>Fertig</strong><span>${finished}</span></div>
      <div class="ops-line"><strong>Manuell geprueft</strong><span>${session?.scanned ?? '--'}</span></div>
      <div class="ops-line"><strong>Manuell aktualisiert</strong><span>${session?.updated ?? '--'}</span></div>
      <div class="ops-line"><strong>Manuelle Fehler</strong><span>${session?.failed ?? (run.exitCode ? 1 : 0)}</span></div>
    `;
    return;
  }

  watchtowerStatus.innerHTML = officialHtml;
}

function renderContainers(containers) {
  if (!Array.isArray(containers)) {
    containerStatus.textContent = containers?.error || 'Containerdaten nicht verfuegbar.';
    return;
  }

  const important = [
    'mischlabs',
    'watchtower',
    'gitea',
    'gitea-runner',
    'auth',
    'nextcloud_app',
    'vaultwarden',
    'photography-website',
    'michess',
    'calibre-web',
    'audiobookshelf'
  ];

  const rows = containers
    .filter((container) => important.includes(container.name))
    .sort((a, b) => important.indexOf(a.name) - important.indexOf(b.name));

  containerStatus.innerHTML = rows.map((container) => `
    <div class="ops-line container-line" data-container="${container.name}">
      <strong>${container.name}</strong>
      <span>${container.status}</span>
      <button class="ghost-button mini restart-container" type="button" title="${container.restartable ? 'Container neu starten' : (container.restartBlockReason || 'Neustart gesperrt')}" ${container.restartable ? '' : 'disabled'}>
        Neustarten
      </button>
    </div>
  `).join('');

  containerStatus.querySelectorAll('.restart-container').forEach((button) => {
    button.addEventListener('click', () => restartContainer(button.closest('.container-line')));
  });
}

async function restartContainer(row) {
  const name = row?.dataset.container;
  if (!name) return;

  const confirmed = window.confirm(`${name} jetzt neu starten? Der Dienst ist kurz nicht erreichbar.`);
  if (!confirmed) return;

  const button = row.querySelector('.restart-container');
  const status = row.querySelector('span');
  const previousText = status.textContent;

  button.disabled = true;
  status.textContent = 'Neustart laeuft...';

  try {
    const response = await fetch(`/api/containers/${encodeURIComponent(name)}/restart`, {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${tokenSet.id_token}`
      }
    });
    const payload = await response.json().catch(() => ({}));
    if (!response.ok) throw new Error(payload.error || `HTTP ${response.status}`);

    status.textContent = `Neugestartet um ${new Date(payload.restartedAt).toLocaleTimeString('de-DE')}`;
    window.clearTimeout(opsRefreshTimer);
    opsRefreshTimer = window.setTimeout(refreshOps, 3500);
  } catch (error) {
    status.textContent = `Neustart fehlgeschlagen: ${error.message}`;
    button.disabled = false;
    window.setTimeout(() => {
      status.textContent = previousText;
    }, 6000);
  }
}

async function runWatchtowerOnce() {
  const confirmed = window.confirm('Watchtower jetzt manuell starten? Je nach Updates koennen Dienste kurz neu starten.');
  if (!confirmed) return;

  const previousText = runWatchtowerButton.textContent;
  runWatchtowerButton.disabled = true;
  runWatchtowerButton.textContent = 'Laeuft...';
  watchtowerStatus.innerHTML = '<div class="ops-line"><strong>Manueller Lauf</strong><span>Gestartet...</span></div>';

  try {
    const response = await fetch('/api/watchtower/run-once', {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${tokenSet.id_token}`
      }
    });
    const payload = await response.json().catch(() => ({}));
    if (!response.ok) throw new Error(payload.error || `HTTP ${response.status}`);

    lastManualWatchtowerRun = {
      id: payload.fullId || payload.id,
      name: payload.name,
      running: true,
      startedAt: payload.startedAt,
      session: null,
      tail: []
    };
    watchtowerStatus.innerHTML = `
      <div class="ops-line"><strong>Manueller Lauf</strong><span>Gestartet</span></div>
      <div class="ops-line"><strong>Container</strong><span>${payload.name}</span></div>
    `;
    window.clearTimeout(opsRefreshTimer);
    pollWatchtowerRun(payload.fullId || payload.id);
  } catch (error) {
    watchtowerStatus.textContent = `Watchtower konnte nicht gestartet werden: ${error.message}`;
  } finally {
    window.setTimeout(() => {
      runWatchtowerButton.disabled = false;
      runWatchtowerButton.textContent = previousText;
    }, 5000);
  }
}

async function pollWatchtowerRun(runId, attempt = 0) {
  try {
    const response = await fetch(`/api/watchtower/runs/${encodeURIComponent(runId)}`, {
      cache: 'no-store',
      headers: {
        Authorization: `Bearer ${tokenSet.id_token}`
      }
    });
    const payload = await response.json().catch(() => ({}));
    if (!response.ok) throw new Error(payload.error || `HTTP ${response.status}`);

    lastManualWatchtowerRun = payload;
    renderWatchtower(latestWatchtower);

    if (payload.running && attempt < 36) {
      opsRefreshTimer = window.setTimeout(() => pollWatchtowerRun(runId, attempt + 1), 5000);
      return;
    }

    opsRefreshTimer = window.setTimeout(refreshOps, 4000);
  } catch (error) {
    watchtowerStatus.textContent = `Manueller Watchtower-Lauf nicht lesbar: ${error.message}`;
  }
}

async function refreshOps() {
  diskStatus.textContent = 'Lade...';
  watchtowerStatus.textContent = 'Lade...';
  containerStatus.textContent = 'Lade...';

  try {
    const response = await fetch('/api/status', { cache: 'no-store' });
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const status = await response.json();
    renderDisks(status.disks);
    renderWatchtower(status.watchtower);
    renderContainers(status.containers);
  } catch (error) {
    diskStatus.textContent = `Statusproxy nicht erreichbar: ${error.message}`;
    watchtowerStatus.textContent = 'Nicht verfuegbar.';
    containerStatus.textContent = 'Nicht verfuegbar.';
  }
}

async function boot() {
  await handleCallback();
  tokenSet = getStoredTokens();

  if (!isTokenValid(tokenSet)) {
    loginPanel.hidden = false;
    adminPanel.hidden = true;
    loginButton.hidden = false;
    logoutButton.hidden = true;
    return;
  }

  const claims = authorize(tokenSet);
  if (!claims) return;

  config = await loadConfig();
  loginPanel.hidden = true;
  adminPanel.hidden = false;
  loginButton.hidden = true;
  logoutButton.hidden = false;
  adminUser.textContent = `Angemeldet als ${claims.preferred_username || claims.email}`;
  renderEditor();
  refreshOps();
}

loginButton.addEventListener('click', login);
logoutButton.addEventListener('click', () => {
  const idToken = tokenSet?.id_token;
  clearTokens();
  const params = new URLSearchParams({
    client_id: CLIENT_ID,
    post_logout_redirect_uri: REDIRECT_URI
  });
  if (idToken) params.set('id_token_hint', idToken);
  window.location.href = `${AUTHORITY}/protocol/openid-connect/logout?${params}`;
});

checkAllButton.addEventListener('click', () => {
  [...serviceEditor.querySelectorAll('.admin-row')].forEach((row) => checkRow(row));
});

saveLocalButton.addEventListener('click', () => {
  saveLocal();
  window.alert('Lokal gespeichert. Das Dashboard in diesem Browser nutzt diese Aenderungen.');
});

resetLocalButton.addEventListener('click', () => {
  localStorage.removeItem(LOCAL_CONFIG_KEY);
  window.location.reload();
});

downloadConfigButton.addEventListener('click', downloadConfig);
refreshOpsButton.addEventListener('click', refreshOps);
runWatchtowerButton.addEventListener('click', runWatchtowerOnce);

boot().catch((error) => {
  loginMessage.textContent = `Adminseite konnte nicht starten: ${error.message}`;
});