{% extends "base.html" %}
{% block title %}Setup Banner — {{ config.INSTANCE_NAME }}{% endblock %}

{% block content %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/material-darker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/jinja2/jinja2.min.js"></script>

<style>
  .container:has(.welcome-page) { max-width: none; padding: 24px 16px; }
  .welcome-page { max-width: 1400px; margin: 0 auto; padding: 0; }

  .welcome-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
  }
  .welcome-title { margin: 0; font-size: 22px; font-weight: 600; }
  .welcome-sub { color: var(--text-secondary, #6b7280); font-size: 13px; margin-top: 4px; margin-bottom: 0; }

  .origin-chip {
    display: inline-block;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.4px;
  }
  .origin-override { background: #ede9fe; color: #6d28d9; }
  .origin-default  { background: #f3f4f6; color: #6b7280; }

  .welcome-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
  }
  .welcome-card-body { padding: 20px 22px; }

  .welcome-desc { font-size: 13px; color: var(--text-secondary, #6b7280); margin: 0 0 16px; }

  /* Placeholder cheatsheet — collapsible */
  details.welcome-cheatsheet { margin-bottom: 18px; }
  details.welcome-cheatsheet summary {
    cursor: pointer; font-size: 13px; font-weight: 500;
    color: var(--text-primary, #111827); list-style: none;
    display: inline-flex; align-items: center; gap: 6px;
  }
  details.welcome-cheatsheet summary::-webkit-details-marker { display: none; }
  details.welcome-cheatsheet summary::before {
    content: "▶"; font-size: 10px; color: var(--text-secondary, #6b7280);
    transition: transform 0.15s;
  }
  details.welcome-cheatsheet[open] summary::before { transform: rotate(90deg); }

  /* Dark code block */
  .code-block {
    background: #1e1e2e;
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
    font-size: 13px;
    color: #cdd6f4;
    line-height: 1.6;
    margin-top: 10px;
    position: relative;
  }
  .code-block .code-body { flex: 1; white-space: pre; overflow-x: auto; }
  .btn-copy {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid #45475a;
    color: #cdd6f4;
    cursor: pointer;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.15s ease;
    flex-shrink: 0;
  }
  .btn-copy:hover { border-color: #89b4fa; color: #89b4fa; background: rgba(137, 180, 250, 0.08); }
  .btn-copy.copied { border-color: #a6e3a1; color: #a6e3a1; background: rgba(166, 227, 161, 0.08); }

  /* CodeMirror editor styling */
  .welcome-page .CodeMirror {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    font-size: 13px;
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  }

  /* Split layout: editor left, preview right */
  .welcome-editor-row {
    display: flex;
    gap: 16px;
    margin-top: 0;
  }
  .welcome-editor-col, .welcome-preview-col {
    flex: 1 1 50%;
    min-width: 0;
  }
  .welcome-preview-col {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--text-primary, #111827);
    padding: 16px;
    font-size: 14px;
    line-height: 1.6;
    overflow: auto;
    max-height: 600px;
  }
  .welcome-preview-col h4 {
    color: var(--text-secondary, #6b7280); margin: 0 0 8px; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.5px;
  }
  .welcome-preview-empty {
    color: var(--text-secondary, #6b7280);
    font-style: italic;
    font-size: 13px;
  }
  .welcome-preview-error {
    background: rgba(234, 88, 12, 0.15);
    color: #b91c1c;
    border: 1px solid rgba(234, 88, 12, 0.4);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    white-space: pre-wrap;
  }
  @media (max-width: 1100px) {
    .welcome-editor-row { flex-direction: column; }
  }

  /* Action row */
  .welcome-actions {
    padding: 14px 22px;
    background: var(--border-light, #fafafa);
    border-top: 1px solid var(--border, #e5e7eb);
    display: flex; gap: 8px; justify-content: flex-end;
  }
  .welcome-btn {
    padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
    border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff);
    cursor: pointer; transition: all 0.15s;
  }
  .welcome-btn:hover { background: var(--border-light, #f9fafb); }
  .welcome-btn.primary { background: var(--primary, #6366f1); color: #fff; border-color: var(--primary, #6366f1); }
  .welcome-btn.primary:hover { filter: brightness(1.05); }
  .welcome-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
  .welcome-btn.danger:hover { filter: brightness(1.05); }
  .welcome-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Modal */
  .modal-backdrop {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
    display: none; align-items: center; justify-content: center; z-index: 1000;
    padding: 16px;
  }
  .modal-backdrop.is-open { display: flex; }
  .modal-card {
    background: var(--surface, #fff); border-radius: 12px;
    padding: 24px; width: 100%; max-width: 440px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  }
  .modal-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
  .modal-card p.sub { margin: 0 0 18px; font-size: 13px; color: var(--text-secondary, #6b7280); }
  .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
  .modal-btn {
    padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
    border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff);
    cursor: pointer;
  }
  .modal-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }

  /* Toast stack */
  .toast-stack {
    position: fixed; bottom: 24px; right: 24px; z-index: 2000;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
  }
  .toast {
    background: #111827; color: #fff; padding: 10px 16px;
    border-radius: 8px; font-size: 13px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s;
    pointer-events: auto; max-width: 380px;
  }
  .toast.show { opacity: 1; transform: translateY(0); }
  .toast.success { background: #047857; }
  .toast.error { background: #b91c1c; }
</style>

<div class="welcome-page">
  <div class="welcome-toolbar">
    <div>
      <h2 class="welcome-title">Setup Page Banner</h2>
      <p class="welcome-sub">Shown above the bootstrap commands on <code>/setup</code>. Use it for org-specific notes: VPN requirements, support channel, data classification, platform prerequisites. Empty by default — no banner is shown when unset.</p>
    </div>
    <div id="status-chip">
      {% if is_override %}
        <span class="origin-chip origin-override"
              title="Overridden by {{ updated_by }} on {{ updated_at.strftime('%Y-%m-%d %H:%M UTC') if updated_at else '—' }}">
          Banner active
        </span>
      {% else %}
        <span class="origin-chip origin-default">No banner</span>
      {% endif %}
    </div>
  </div>

  <div class="welcome-card">
    <div class="welcome-card-body">
      <p class="welcome-desc">
        Author HTML or plain text with Jinja2 placeholders. The banner renders inside the <code>/setup</code> page —
        HTML tags are allowed. Leave empty and click <strong>Remove banner</strong> to go back to no banner.
        <code>{{ "{{ user }}" }}</code> may be <code>null</code> for anonymous visitors — guard with <code>{% if user %}</code>.
      </p>

      <details class="welcome-cheatsheet">
        <summary>Available placeholders</summary>
        <div class="code-block">
          <span id="placeholder-text" class="code-body">{{ "{{ instance.name }}" }}        — instance display name
{{ "{{ instance.subtitle }}" }}    — operator name
{{ "{{ server.url }}" }}           — full server URL
{{ "{{ server.hostname }}" }}      — host part only
{{ "{{ user.email }}" }}, {{ "{{ user.name }}" }}, {{ "{{ user.is_admin }}" }}
                         — null for anonymous visitors; guard with {% if user %}
{{ "{{ now }}" }}, {{ "{{ today }}" }}</span>
          <button class="btn-copy" data-copy-target="placeholder-text">Copy</button>
        </div>
      </details>

      <div class="welcome-editor-row">
        <div class="welcome-editor-col">
          <textarea id="content" name="content">{{ current }}</textarea>
        </div>
        <div class="welcome-preview-col">
          <h4>Live preview</h4>
          <div id="preview-content"></div>
          <div id="preview-error" class="welcome-preview-error" hidden></div>
        </div>
      </div>
    </div>
    <div class="welcome-actions">
      <button type="button" class="welcome-btn danger" id="reset-btn">Remove banner</button>
      <button type="button" class="welcome-btn primary" id="save-btn">Save banner</button>
    </div>
  </div>
</div>

<!-- Remove confirmation modal -->
<div class="modal-backdrop" id="reset-modal" role="dialog" aria-modal="true" aria-labelledby="reset-modal-title">
  <div class="modal-card">
    <h3 id="reset-modal-title">Remove the banner?</h3>
    <p class="sub"><code>/setup</code> will go back to showing no banner. This cannot be undone.</p>
    <div class="modal-actions">
      <button class="modal-btn" data-close-modal="reset-modal">Cancel</button>
      <button class="modal-btn danger" id="reset-confirm-btn">Remove</button>
    </div>
  </div>
</div>

<div class="toast-stack" id="toast-stack" aria-live="polite"></div>

<script>
const API = "/api/admin/setup-banner";

// ── CodeMirror editor ─────────────────────────────────────────────────
const editor = CodeMirror.fromTextArea(document.getElementById("content"), {
  mode: "jinja2",
  lineNumbers: true,
  lineWrapping: true,
  theme: "material-darker",
  indentUnit: 2,
  tabSize: 2,
});
editor.setSize("100%", 480);

// ── Live preview (debounced) ──────────────────────────────────────────
let previewTimer = null;
function schedulePreview() {
  if (previewTimer) clearTimeout(previewTimer);
  previewTimer = setTimeout(renderPreview, 500);
}

async function renderPreview() {
  const content = editor.getValue();
  const previewBox = document.getElementById("preview-content");
  const previewErr = document.getElementById("preview-error");
  if (!content.trim()) {
    previewBox.innerHTML = '<span class="welcome-preview-empty">(no banner)</span>';
    previewErr.hidden = true;
    return;
  }
  try {
    const r = await fetch(API + "/preview", {
      method: "POST",
      credentials: "include",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ content }),
    });
    if (r.ok) {
      const j = await r.json();
      previewBox.innerHTML = j.content;
      previewErr.hidden = true;
    } else {
      let detail = r.statusText;
      try { detail = (await r.json()).detail || detail; } catch (_) {}
      previewBox.innerHTML = "";
      previewErr.textContent = detail;
      previewErr.hidden = false;
    }
  } catch (e) {
    previewErr.textContent = "Network error: " + e.message;
    previewErr.hidden = false;
  }
}

editor.on("change", schedulePreview);
renderPreview();   // initial render on load

// ── Toast ─────────────────────────────────────────────────────────────
function toast(msg, kind) {
  const el = document.createElement("div");
  el.className = "toast" + (kind ? " " + kind : "");
  el.textContent = msg;
  document.getElementById("toast-stack").appendChild(el);
  requestAnimationFrame(() => el.classList.add("show"));
  setTimeout(() => { el.classList.remove("show"); setTimeout(() => el.remove(), 250); }, 3500);
}

// ── Modal helpers ─────────────────────────────────────────────────────
function openModal(id) { document.getElementById(id).classList.add("is-open"); }
function closeModal(id) { document.getElementById(id).classList.remove("is-open"); }
document.querySelectorAll("[data-close-modal]").forEach(el =>
  el.addEventListener("click", () => closeModal(el.dataset.closeModal)));
document.querySelectorAll(".modal-backdrop").forEach(el => {
  el.addEventListener("click", e => { if (e.target === el) el.classList.remove("is-open"); });
});
document.addEventListener("keydown", e => {
  if (e.key === "Escape") document.querySelectorAll(".modal-backdrop.is-open").forEach(m => m.classList.remove("is-open"));
});

// ── Status chip ───────────────────────────────────────────────────────
function setStatusChip(data) {
  const wrap = document.getElementById("status-chip");
  if (data.content !== null && data.content !== undefined) {
    const when = data.updated_at
      ? new Date(data.updated_at).toISOString().slice(0, 16).replace("T", " ") + " UTC"
      : "—";
    const who = data.updated_by || "—";
    wrap.innerHTML = `<span class="origin-chip origin-override" title="Overridden by ${who} on ${when}">Banner active</span>`;
  } else {
    wrap.innerHTML = `<span class="origin-chip origin-default">No banner</span>`;
  }
}

// ── Refresh status + editor content from API ─────────────────────────
async function refreshStatus() {
  const r = await fetch(API, { credentials: "include" });
  if (!r.ok) return;
  const data = await r.json();
  setStatusChip(data);
  editor.setValue(data.content !== null && data.content !== undefined ? data.content : "");
  renderPreview();
}

// ── Save ──────────────────────────────────────────────────────────────
document.getElementById("save-btn").addEventListener("click", async () => {
  const btn = document.getElementById("save-btn");
  const content = editor.getValue();
  if (!content.trim()) {
    toast("Nothing to save — editor is empty. Use Remove banner to clear.", "error");
    return;
  }
  btn.disabled = true;
  try {
    const r = await fetch(API, {
      method: "PUT",
      credentials: "include",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ content }),
    });
    if (r.ok) {
      toast("Banner saved.", "success");
      await refreshStatus();
    } else {
      let detail = r.statusText;
      try { detail = (await r.json()).detail || detail; } catch (_) {}
      toast("Save failed: " + detail, "error");
    }
  } catch (e) {
    toast("Save failed: " + e.message, "error");
  } finally {
    btn.disabled = false;
  }
});

// ── Remove (with confirm modal) ───────────────────────────────────────
document.getElementById("reset-btn").addEventListener("click", () => openModal("reset-modal"));

document.getElementById("reset-confirm-btn").addEventListener("click", async () => {
  closeModal("reset-modal");
  const btn = document.getElementById("reset-btn");
  btn.disabled = true;
  try {
    const r = await fetch(API, { method: "DELETE", credentials: "include" });
    if (r.ok) {
      toast("Banner removed.", "success");
      await refreshStatus();
    } else {
      let detail = r.statusText;
      try { detail = (await r.json()).detail || detail; } catch (_) {}
      toast("Remove failed: " + detail, "error");
    }
  } catch (e) {
    toast("Remove failed: " + e.message, "error");
  } finally {
    btn.disabled = false;
  }
});

// ── Copy widget ───────────────────────────────────────────────────────
function copyToClipboard(text) {
  if (navigator.clipboard && window.isSecureContext) {
    return navigator.clipboard.writeText(text);
  }
  const ta = document.createElement("textarea");
  ta.value = text;
  ta.style.cssText = "position:fixed;left:-9999px;top:-9999px";
  document.body.appendChild(ta);
  ta.focus();
  ta.select();
  return new Promise((resolve, reject) => {
    try { document.execCommand("copy") ? resolve() : reject(); }
    finally { document.body.removeChild(ta); }
  });
}

function flashCopied(button) {
  const original = button.textContent;
  button.textContent = "Copied!";
  button.classList.add("copied");
  setTimeout(() => { button.textContent = original; button.classList.remove("copied"); }, 1500);
}

document.querySelectorAll(".btn-copy[data-copy-target]").forEach(btn => {
  btn.addEventListener("click", () => {
    const target = document.getElementById(btn.getAttribute("data-copy-target"));
    if (!target) return;
    copyToClipboard(target.textContent.trim())
      .then(() => flashCopied(btn))
      .catch(() => {
        const range = document.createRange();
        range.selectNodeContents(target);
        const sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
      });
  });
});
</script>
{% endblock %}