import { setToken } from './lib/api.mjs';
import './components/wo-list.mjs';
import './components/wo-form.mjs';

// ── Keycloak init ─────────────────────────────────────────────────────────────
const keycloak = new Keycloak({
  url:      window.KEYCLOAK_URL      || 'http://localhost:8180',
  realm:    window.KEYCLOAK_REALM    || 'workorders',
  clientId: window.KEYCLOAK_CLIENT_ID || 'workorders-app',
});

keycloak.init({
  onLoad: 'login-required',
  pkceMethod: 'S256',
  checkLoginIframe: false,
})
  .then(authenticated => {
    if (!authenticated) { keycloak.login(); return; }
    setToken(keycloak.token);

    // Refresh token before it expires
    setInterval(async () => {
      try { await keycloak.updateToken(60); setToken(keycloak.token); }
      catch { keycloak.login(); }
    }, 30_000);

    window.addEventListener('auth:expired', () => keycloak.login());
    renderApp(keycloak);
  })
  .catch(() => document.getElementById('app').innerHTML =
    '<p style="color:red;padding:2rem">Failed to connect to authentication server.</p>');

// ── App shell ─────────────────────────────────────────────────────────────────
function renderApp(kc) {
  const app = document.getElementById('app');
  const userName = kc.tokenParsed?.name || kc.tokenParsed?.preferred_username || 'User';

  // Nav
  const nav = document.createElement('nav');
  nav.innerHTML = `
    <span class="brand">Work Orders</span>
    <span class="spacer"></span>
    <span class="user-info">${userName}</span>
    <button id="logout" style="background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;padding:.3rem .8rem;font-size:.85rem">Logout</button>`;
  document.body.insertBefore(nav, app);
  nav.querySelector('#logout').addEventListener('click', () => kc.logout());

  showList();

  app.addEventListener('wo:select', e => showDetail(e.detail.id));
  app.addEventListener('wo:cancel', () => showList());
  app.addEventListener('wo:saved',  () => showList());

  document.addEventListener('keydown', e => { if (e.key === 'Escape') showList(); });
}

function showList() {
  const app = document.getElementById('app');
  app.innerHTML = `
    <div class="page-header">
      <h1>Work Orders</h1>
      <button id="new-wo">+ New Work Order</button>
    </div>
    <wo-list id="wo-list"></wo-list>`;
  app.querySelector('#new-wo').addEventListener('click', showCreate);
}

function showCreate() {
  const app = document.getElementById('app');
  app.innerHTML = `
    <div class="page-header"><h1>New Work Order</h1></div>
    <div class="card"><wo-form></wo-form></div>`;
}

function showDetail(id) {
  const app = document.getElementById('app');
  app.innerHTML = `
    <div class="page-header">
      <h1>Edit Work Order</h1>
      <button id="back" class="secondary">← Back</button>
    </div>
    <div class="card"><wo-form wo-id="${id}"></wo-form></div>`;
  app.querySelector('#back').addEventListener('click', showList);
}