{% extends "base.html" %}
{% block title %}WIDDX — Autonomous AI Engineering{% endblock %}

{% block head_extra %}
<style>
  /* ─── Boot Screen Overlay ─── */
  #bootOverlay {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: var(--bg, #0d1117);
    transition: opacity 0.6s ease, visibility 0.6s ease;
  }
  #bootOverlay.hidden {
    opacity: 0; visibility: hidden; pointer-events: none;
  }
  .boot-logo {
    font-size: 48px; color: var(--accent, #58a6ff);
    margin-bottom: 6px;
  }
  .boot-logo i { font-size: 52px; }
  .boot-title {
    font-size: 22px; font-weight: 700; color: var(--text, #e6edf3);
    margin-bottom: 4px;
  }
  .boot-subtitle {
    font-size: 13px; color: var(--text-dim, #8b949e);
    margin-bottom: 28px;
  }
  .boot-steps {
    width: 340px; display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 20px;
  }
  .boot-step {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--text-dim, #8b949e);
    transition: color 0.3s;
  }
  .boot-step.active { color: var(--text, #e6edf3); }
  .boot-step.done { color: var(--success, #3fb950); }
  .boot-step .step-icon { width: 18px; text-align: center; font-size: 14px; }
  .boot-step .step-label { flex: 1; }
  .boot-progress-wrap {
    width: 340px; height: 4px;
    background: var(--surface2, #21262d); border-radius: 2px;
    overflow: hidden;
  }
  .boot-progress-bar {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--accent, #58a6ff), var(--brand-glow, #79c0ff));
    border-radius: 2px;
    transition: width 0.5s ease;
  }
</style>
{% endblock %}

{% block topbar %}{% include "partials/topbar.html" %}{% endblock %}
{% block activity_bar %}{% include "partials/activity_bar.html" %}{% endblock %}

{% block side_panel %}{% include "partials/side_panel.html" %}{% endblock %}

{% block workspace %}{% include "partials/workspace.html" %}{% endblock %}

{% block statusbar %}{% include "partials/statusbar.html" %}{% endblock %}

{% block modals %}{% include "partials/modals.html" %}{% endblock %}

{% block scripts_extra %}
<script>
  // ─── Boot Sequence ───
  (async function boot() {
    const overlay = document.getElementById("bootOverlay");
    if (!overlay) return;
    const totalSteps = 6;
    const bar = overlay.querySelector(".boot-progress-bar");
    const stepsContainer = overlay.querySelector(".boot-steps");

    try {
      const resp = await fetch("/api/boot");
      const data = await resp.json();
      const steps = data.steps || [];

      for (let i = 0; i < steps.length; i++) {
        const s = steps[i];
        const el = stepsContainer.children[i];
        if (!el) continue;

        // Mark as active
        el.className = "boot-step active";
        const icon = el.querySelector(".step-icon");
        icon.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';

        // Animate progress
        const pct = ((i + 1) / totalSteps) * 100;
        bar.style.width = pct + "%";

        // Wait ~300ms for visual feedback
        await new Promise(r => setTimeout(r, 250));

        // Mark as done
        const statusIcon = s.status === "ok" ? '<i class="fa-solid fa-check" style="color:var(--success)"></i>'
          : s.status === "warn" ? '<i class="fa-solid fa-triangle-exclamation" style="color:var(--warning)"></i>'
          : '<i class="fa-regular fa-circle" style="color:var(--text-dim)"></i>';
        icon.innerHTML = statusIcon;
        el.className = "boot-step done";
      }

      // Full progress
      bar.style.width = "100%";

      // Wait a beat, then fade out
      await new Promise(r => setTimeout(r, 400));
      overlay.classList.add("hidden");
      setTimeout(() => { overlay.style.display = "none"; }, 600);
    } catch (err) {
      console.error("Boot failed:", err);
      // Still show the main UI after timeout
      setTimeout(() => {
        overlay.classList.add("hidden");
        setTimeout(() => { overlay.style.display = "none"; }, 600);
      }, 2000);
    }
  })();
</script>
{% endblock %}