{% extends "base.html" %}

{% block title %}{{ path or 'Preview' }}{% endblock %}

{% block actions %}
  {% if file %}
    <button class="btn ghost" id="tab-preview" data-tab="preview">Preview</button>
    {# For templates, Edit jumps to the schema-driven /editor (form +
       CodeMirror + live lint). For other files (specs, summaries),
       Edit toggles the legacy raw-textarea pane below. Single
       Edit affordance per file type — no redundant tab + button. #}
    <button class="btn ghost"
            id="tab-edit"
            data-tab="edit"
            {% if file.root == 'templates' %}data-mode="editor"{% endif %}>Edit</button>
    <button class="btn primary" id="save-btn" hidden>Save</button>
  {% endif %}
{% endblock %}

{% block content %}
  {% if error %}
    <p class="banner danger">{{ error }}</p>
  {% endif %}

  {% if file %}
    <p class="meta-line">
      <code class="mono">{{ file.root }}/{{ file.path }}</code>
      {% if file.manual %}<span class="badge accent" style="margin-left:.5rem;">manually maintained</span>{% endif %}
    </p>

    {% if file.root == 'specs' and file.path.endswith('.md') %}
      <div id="status-bar" class="status-bar card" hidden>
        <span class="dim small">Phase status:</span>
        <select id="status-select" class="text-input" style="max-width:14rem;">
          <option value="draft">draft</option>
          <option value="in-review">in-review</option>
          <option value="approved">approved</option>
          <option value="complete">complete</option>
        </select>
        <button class="btn primary" id="status-save">Update status</button>
      </div>
    {% endif %}

    <div id="pane-preview" class="pane">
      <article class="markdown-body">
        {{ rendered_html|safe }}
      </article>
    </div>

    <div id="pane-edit" class="pane" hidden>
      <textarea id="editor" class="editor" spellcheck="false">{{ file.content }}</textarea>
    </div>
  {% else %}
    <p class="empty">Select a file from <a href="/dashboard/templates">Templates</a> or <a href="/dashboard/specs">Specs</a> to preview it.</p>
  {% endif %}
{% endblock %}

{% block scripts %}
{% if file %}
<script>
  const root = {{ root|tojson }};
  const path = {{ path|tojson }};
  const tabPreview = document.getElementById('tab-preview');
  const tabEdit = document.getElementById('tab-edit');
  const panePreview = document.getElementById('pane-preview');
  const paneEdit = document.getElementById('pane-edit');
  const saveBtn = document.getElementById('save-btn');
  const editor = document.getElementById('editor');

  function setTab(name) {
    const isPreview = name === 'preview';
    panePreview.hidden = !isPreview;
    paneEdit.hidden = isPreview;
    saveBtn.hidden = isPreview;
    tabPreview.classList.toggle('active', isPreview);
    tabEdit.classList.toggle('active', !isPreview);
  }
  tabPreview.addEventListener('click', () => setTab('preview'));
  if (tabEdit.dataset.mode === 'editor') {
    // Templates: hop to the schema-driven /editor instead of toggling
    // the legacy textarea pane. Resolves the abs path to
    // (corpus, rel_path) so the editor URL is canonical.
    tabEdit.addEventListener('click', async () => {
      tabEdit.disabled = true;
      try {
        const data = await AttuneUI.api('/api/cowork/templates');
        if (!data.templates_root) {
          AttuneUI.toast('No templates root configured.', 'danger');
          return;
        }
        const abs = `${data.templates_root}/${path}`;
        const resolved = await AttuneUI.api('/api/corpus/resolve', {
          method: 'POST',
          body: JSON.stringify({abs_path: abs}),
        });
        const url = `/editor?corpus=${encodeURIComponent(resolved.corpus_id)}&path=${encodeURIComponent(resolved.rel_path)}`;
        location.assign(url);
      } catch (e) {
        AttuneUI.toast(`Open editor failed: ${e.message}. Register the corpus via Commands → Add corpus.`, 'danger');
        tabEdit.disabled = false;
      }
    });
  } else {
    tabEdit.addEventListener('click', () => setTab('edit'));
  }
  setTab('preview');

  saveBtn.addEventListener('click', async () => {
    saveBtn.disabled = true;
    try {
      await AttuneUI.api(`/api/cowork/files/raw/${root}/${encodeURIComponent(path)}`, {
        method: 'PUT',
        body: JSON.stringify({ content: editor.value }),
      });
      AttuneUI.toast('Saved.', 'ok');
      const r = await AttuneUI.api(`/api/cowork/files/rendered/${root}/${encodeURIComponent(path)}`);
      document.querySelector('.markdown-body').innerHTML = r.html;
    } catch (e) {
      AttuneUI.toast(`Save failed: ${e.message}`, 'danger');
    } finally {
      saveBtn.disabled = false;
    }
  });

  // ── Spec phase status bar ────────────────────────────────────────────
  (function () {
    const bar = document.getElementById('status-bar');
    if (!bar) return;
    const parts = path.split('/');
    if (parts.length !== 2) return;
    const feature = parts[0];
    const phase = parts[1].replace(/\.md$/, '');
    if (!['requirements', 'design', 'tasks'].includes(phase)) return;

    // Parse current status from file.content
    const content = editor.value;
    const m = content.match(/\*\*Status\*\*:\s*(\S+)/);
    const select = document.getElementById('status-select');
    if (m) {
      const current = m[1].toLowerCase();
      // Normalise legacy values
      const normalised = ({completed: 'complete', done: 'complete', in_review: 'in-review', review: 'in-review'})[current] || current;
      if ([...select.options].some(o => o.value === normalised)) {
        select.value = normalised;
      }
    }
    bar.hidden = false;

    document.getElementById('status-save').addEventListener('click', async (e) => {
      const status = select.value;
      e.target.disabled = true;
      try {
        await AttuneUI.api(
          `/api/cowork/specs/${encodeURIComponent(feature)}/${encodeURIComponent(phase)}/status`,
          { method: 'PUT', body: JSON.stringify({ status }) }
        );
        AttuneUI.toast(`Status → ${status}`, 'ok');
        setTimeout(() => location.reload(), 350);
      } catch (err) {
        AttuneUI.toast(`Status update failed: ${err.message}`, 'danger');
        e.target.disabled = false;
      }
    });
  })();
</script>
{% endif %}
{% endblock %}