import { auth } from './api.js';
import { icons } from './icons.js';
import { route, navigate, startRouter } from './router.js';
import { renderDashboard } from './pages/dashboard.js';
import { renderLogin } from './pages/login.js';
import { renderServiceDetail } from './pages/service-detail.js';
import { renderLogs } from './pages/logs.js';
import { renderMonitoring } from './pages/monitoring.js';
import { renderSettings } from './pages/settings.js';

let currentUser = null;

function renderSidebar(user) {
  return `
    <aside class="sidebar">
      <div class="sidebar-brand">
        <div class="sidebar-brand-icon">${icons.rocket(20)}</div>
        <h1>AutoDeployer</h1>
      </div>
      <nav class="sidebar-nav">
        <div class="sidebar-section">Navigation</div>
        <div class="sidebar-link" data-path="/">${icons.layoutDashboard()} <span>Dashboard</span></div>
        <div class="sidebar-link" data-path="/logs">${icons.scrollText()} <span>Logs</span></div>
        <div class="sidebar-link" data-path="/monitoring">${icons.activity()} <span>Monitoring</span></div>
        <div class="sidebar-section">System</div>
        <div class="sidebar-link" data-path="/settings">${icons.settings()} <span>Settings</span></div>
      </nav>
      <div class="sidebar-footer">
        <div class="sidebar-link" id="logout-btn">${icons.logOut()} <span>Logout</span></div>
        <div class="text-xs text-muted mt-2" style="padding:0 12px">
          Logged in as <strong>${user.username}</strong>
        </div>
      </div>
    </aside>`;
}

function setupSidebarEvents() {
  document.querySelectorAll('.sidebar-link[data-path]').forEach(el => {
    el.onclick = () => navigate(el.dataset.path);
  });
  const logoutBtn = document.getElementById('logout-btn');
  if (logoutBtn) logoutBtn.onclick = async () => { await auth.logout(); location.reload(); };
}

async function init() {
  const app = document.getElementById('app');

  // Check auth
  try {
    const status = await auth.status();
    if (status.setupRequired) {
      renderLogin(app, true, onLogin);
      return;
    }
    const data = await auth.me();
    currentUser = data.user;
  } catch {
    renderLogin(app, false, onLogin);
    return;
  }

  // Render app layout
  app.innerHTML = `
    ${renderSidebar(currentUser)}
    <main class="main-content" id="page-content"></main>
  `;
  setupSidebarEvents();

  // Setup routes
  const content = document.getElementById('page-content');
  route('/', (c) => renderDashboard(c));
  route('/services/:id', (c, p) => renderServiceDetail(c, p.id));
  route('/logs', (c) => renderLogs(c));
  route('/monitoring', (c) => renderMonitoring(c));
  route('/settings', (c) => renderSettings(c));

  startRouter(content);
}

function onLogin(user) {
  currentUser = user;
  init();
}

document.addEventListener('DOMContentLoaded', init);