{% extends "base.html" %}

{% block title %}Editor — Canon{% endblock %}

{% block content %}
{% if mode == "list" %}
<!-- Repo/spec listing for editor -->
<nav class="text-sm text-slate-500 dark:text-slate-400 mb-6 font-mono">
  <a href="/app/{{ current_org | default('') }}/" class="hover:text-accent-400 transition-colors">Dashboard</a>
  <span class="mx-1 text-slate-400 dark:text-slate-600">/</span>
  <span class="text-slate-800 dark:text-slate-200">Editor</span>
</nav>

<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold font-display text-slate-900 dark:text-slate-100">Spec Editor</h1>
  {% if github_user %}
  <span class="text-sm text-slate-500">Connected as <strong class="text-slate-800 dark:text-slate-200">{{ github_user.login }}</strong></span>
  {% endif %}
</div>

{% if repos %}
<div class="grid gap-4">
  {% for repo in repos %}
  <div class="bg-white dark:bg-surface-elevated rounded-lg border border-gray-200 dark:border-slate-700 px-4 py-3">
    <div class="flex items-center justify-between">
      <div>
        <h3 class="font-semibold text-slate-800 dark:text-slate-200">{{ repo.full_name }}</h3>
        <p class="text-sm text-slate-500 dark:text-slate-400">{{ repo.description or 'No description' }}</p>
      </div>
      <a href="/app/{{ current_org }}/editor/{{ repo.owner.login }}/{{ repo.name }}/new"
         class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md bg-accent-500 text-white hover:bg-accent-600 transition-colors">
        New Spec
      </a>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<p class="text-slate-500 dark:text-slate-400">No repositories found. Connect your GitHub account to get started.</p>
{% endif %}

{% else %}
<!-- Editor view (new or edit) -->
<nav class="text-sm text-slate-500 dark:text-slate-400 mb-6 font-mono overflow-hidden">
  <a href="/app/{{ current_org | default('') }}/" class="hover:text-accent-400 transition-colors">Dashboard</a>
  <span class="mx-1 text-slate-400 dark:text-slate-600">/</span>
  <a href="/app/{{ current_org }}/editor/" class="hover:text-accent-400 transition-colors">Editor</a>
  <span class="mx-1 text-slate-400 dark:text-slate-600">/</span>
  <span class="text-slate-800 dark:text-slate-200">{{ file_path or 'New Spec' }}</span>
</nav>

<div class="flex items-center justify-between mb-4">
  <h1 class="text-xl font-bold font-display text-slate-900 dark:text-slate-100">
    {% if mode == "new" %}New Spec{% else %}Editing {{ file_path }}{% endif %}
  </h1>
  <div class="flex gap-2">
    <button onclick="previewSpec()" class="px-3 py-1.5 text-sm font-medium rounded-md border border-gray-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors">
      Preview
    </button>
    <button onclick="saveSpec()" class="px-3 py-1.5 text-sm font-medium rounded-md bg-accent-500 text-white hover:bg-accent-600 transition-colors">
      Save
    </button>
    <button onclick="saveAsPR()" class="px-3 py-1.5 text-sm font-medium rounded-md bg-brand-500 text-white hover:bg-brand-600 transition-colors">
      Open PR
    </button>
    <button onclick="requestReview()" class="px-3 py-1.5 text-sm font-medium rounded-md border border-amber-400 text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-900/20 transition-colors">
      Request Review
    </button>
  </div>
</div>

<!-- Frontmatter form -->
<div id="frontmatter-form" class="bg-white dark:bg-surface-elevated rounded-lg border border-gray-200 dark:border-slate-700 px-4 py-4 mb-4">
  <h2 class="text-sm font-semibold text-slate-600 dark:text-slate-400 uppercase tracking-wider mb-3">Frontmatter</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
    <div>
      <label class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Title</label>
      <input id="fm-title" type="text" value="" class="w-full rounded-md border border-gray-300 dark:border-slate-600 bg-white dark:bg-[#0a0f1a] text-slate-800 dark:text-slate-200 px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500">
    </div>
    <div>
      <label class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Status</label>
      <select id="fm-status" class="w-full rounded-md border border-gray-300 dark:border-slate-600 bg-white dark:bg-[#0a0f1a] text-slate-800 dark:text-slate-200 px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500">
        <option value="draft">Draft</option>
        <option value="in_progress">In Progress</option>
        <option value="done">Done</option>
        <option value="blocked">Blocked</option>
      </select>
    </div>
    <div>
      <label class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Review Status</label>
      <select id="fm-review-status" class="w-full rounded-md border border-gray-300 dark:border-slate-600 bg-white dark:bg-[#0a0f1a] text-slate-800 dark:text-slate-200 px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500">
        <option value="">None</option>
        <option value="draft">Draft</option>
        <option value="in_review">In Review</option>
        <option value="approved">Approved</option>
      </select>
    </div>
    <div>
      <label class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Owner</label>
      <input id="fm-owner" type="text" value="" class="w-full rounded-md border border-gray-300 dark:border-slate-600 bg-white dark:bg-[#0a0f1a] text-slate-800 dark:text-slate-200 px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500">
    </div>
    <div>
      <label class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Team</label>
      <input id="fm-team" type="text" value="" class="w-full rounded-md border border-gray-300 dark:border-slate-600 bg-white dark:bg-[#0a0f1a] text-slate-800 dark:text-slate-200 px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500">
    </div>
    <div>
      <label class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Tags (comma-separated)</label>
      <input id="fm-tags" type="text" value="" class="w-full rounded-md border border-gray-300 dark:border-slate-600 bg-white dark:bg-[#0a0f1a] text-slate-800 dark:text-slate-200 px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500">
    </div>
  </div>
  {% if mode == "new" %}
  <div class="mt-3">
    <label class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">File Path (e.g. docs/specs/my-feature.md)</label>
    <input id="fm-file-path" type="text" value="" placeholder="docs/specs/" class="w-full rounded-md border border-gray-300 dark:border-slate-600 bg-white dark:bg-[#0a0f1a] text-slate-800 dark:text-slate-200 px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500">
  </div>
  {% endif %}
</div>

<!-- Markdown editor -->
<div class="bg-white dark:bg-surface-elevated rounded-lg border border-gray-200 dark:border-slate-700 px-4 py-4 mb-4">
  <div class="flex items-center justify-between mb-3">
    <h2 class="text-sm font-semibold text-slate-600 dark:text-slate-400 uppercase tracking-wider">Body</h2>
    <button id="mode-toggle-btn" onclick="toggleEditorMode()" class="px-2 py-1 text-xs font-medium rounded border border-gray-300 dark:border-slate-600 text-slate-600 dark:text-slate-400 hover:text-accent-500 hover:border-accent-400 transition-colors">
      Switch to Structured
    </button>
  </div>
  <div id="source-editor">
    <textarea id="editor-content" rows="30" class="w-full rounded-md border border-gray-300 dark:border-slate-600 bg-white dark:bg-[#0a0f1a] text-slate-800 dark:text-slate-200 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-accent-500 resize-y">{{ content | default('') }}</textarea>
  </div>
  <div id="structured-editor" class="hidden"></div>
</div>

<!-- Preview area -->
<div id="preview-area" class="hidden bg-white dark:bg-surface-elevated rounded-lg border border-gray-200 dark:border-slate-700 px-4 sm:px-6 py-4 mb-4 prose dark:prose-invert max-w-none">
</div>

<!-- Status messages -->
<div id="editor-status" class="hidden fixed bottom-4 right-4 px-4 py-2 rounded-md text-sm font-medium shadow-lg z-50"></div>

<input type="hidden" id="editor-sha" value="{{ sha | default('') }}">
<input type="hidden" id="editor-owner" value="{{ owner | default('') }}">
<input type="hidden" id="editor-repo" value="{{ repo | default('') }}">
<input type="hidden" id="editor-file-path" value="{{ file_path | default('') }}">
<input type="hidden" id="editor-org" value="{{ current_org | default('') }}">
<input type="hidden" id="editor-mode" value="{{ mode | default('edit') }}">

<!-- Conflict resolution modal -->
<div id="conflict-modal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-surface-elevated rounded-lg border border-gray-200 dark:border-slate-700 shadow-xl max-w-4xl w-full max-h-[80vh] flex flex-col">
    <div class="px-4 py-3 border-b border-gray-200 dark:border-slate-700">
      <h3 class="text-lg font-semibold text-red-600 dark:text-red-400">Conflict Detected</h3>
      <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">The file was modified on the server since you loaded it. Choose how to resolve:</p>
    </div>
    <div class="flex-1 overflow-auto p-4 grid grid-cols-2 gap-4">
      <div>
        <h4 class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">Server Version</h4>
        <pre id="conflict-server-content" class="text-xs font-mono bg-gray-50 dark:bg-[#0a0f1a] rounded border border-gray-200 dark:border-slate-700 p-3 overflow-auto max-h-[50vh] whitespace-pre-wrap"></pre>
      </div>
      <div>
        <h4 class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">Your Version</h4>
        <pre id="conflict-local-content" class="text-xs font-mono bg-gray-50 dark:bg-[#0a0f1a] rounded border border-gray-200 dark:border-slate-700 p-3 overflow-auto max-h-[50vh] whitespace-pre-wrap"></pre>
      </div>
    </div>
    <div class="px-4 py-3 border-t border-gray-200 dark:border-slate-700 flex justify-end gap-3">
      <button onclick="hideConflictModal()" class="px-3 py-1.5 text-sm rounded-md border border-gray-300 dark:border-slate-600 text-slate-600 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors">Cancel</button>
      <button onclick="resolveConflictUseServer()" class="px-3 py-1.5 text-sm rounded-md bg-amber-500 text-white hover:bg-amber-600 transition-colors">Use Server Version</button>
      <button onclick="resolveConflictOverwrite()" class="px-3 py-1.5 text-sm rounded-md bg-red-500 text-white hover:bg-red-600 transition-colors">Overwrite with Mine</button>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js" integrity="sha384-+pxiN6T7yvpryuJmE1gM9PX7yQit15auDb+ZwwvJOd/4be2Cie5/IuVXgQb/S9du" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.5/dist/purify.min.js" integrity="sha384-DOv0oIFRJB3W+KF7vFHGd/vsFwmeHWEbfXBiLcHFCbOJrc/LWnF0KGWlXaBNjFGm" crossorigin="anonymous"></script>
<script src="/static/editor.js"></script>

{% if posthog_key %}
{# NOTE: Client-side 'editor_saved' fires here; server-side 'spec_saved' fires in editor_routes.py.
   Use 'spec_saved' for authoritative save counts (server-validated). #}
<script>
  (function() {
    var _editorRepo = {{ ((owner | default("")) ~ '/' ~ (repo | default(""))) | tojson }};
    var origSave = window.saveSpec;
    if (origSave) window.saveSpec = function() { if (typeof swTrack === 'function') swTrack('editor_saved', {method: 'direct', repo: _editorRepo}); return origSave.apply(this, arguments); };
    var origPR = window.saveAsPR;
    if (origPR) window.saveAsPR = function() { if (typeof swTrack === 'function') swTrack('editor_saved', {method: 'pr', repo: _editorRepo}); return origPR.apply(this, arguments); };
    var origPreview = window.previewSpec;
    if (origPreview) window.previewSpec = function() { if (typeof swTrack === 'function') swTrack('editor_preview', {repo: _editorRepo}); return origPreview.apply(this, arguments); };
  })();
</script>
{% endif %}

{% endif %}
{% endblock %}