{% extends "admin_base.html" %}

{% block extra_head %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.3/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js" referrerpolicy="origin"></script>
{% endblock %}

{% block page_title %}Editor: {{ plugin_name }}{% endblock %}
{% block admin_content %}
<main id="plugin-editor-page" class="mx-auto w-full max-w-screen-2xl space-y-4">
  <header class="flex flex-col gap-3 rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between sm:p-5">
    <div class="flex min-w-0 flex-wrap items-center gap-3">
      <a href="/plugins/core-plugin-registry/plugins" class="blocks-button blocks-button-secondary min-h-10"><i class="fas fa-arrow-left" aria-hidden="true"></i> Back</a>
      <div class="min-w-0">
        <h1 class="break-all text-lg font-semibold text-foreground">Edit plugin <span id="pluginNameLabel">{{ plugin_name }}</span></h1>
        <p id="filePathDisplay" class="truncate text-xs text-muted">Select a file</p>
      </div>
    </div>
    <div class="flex flex-wrap gap-2">
      <button type="button" data-editor-action="reload" class="blocks-button blocks-button-secondary min-h-10"><i class="fas fa-sync" aria-hidden="true"></i> Reload plugin</button>
      <button type="button" data-editor-action="save" id="saveBtn" class="blocks-button blocks-button-primary min-h-10"><i class="fas fa-save" aria-hidden="true"></i> Save file (Ctrl+S)</button>
    </div>
  </header>

  <div data-editor-notice class="blocks-workspace-notice" role="status" aria-live="polite" tabindex="-1" hidden></div>

  <section class="editor-container" aria-label="Plugin file editor">
    <aside class="file-tree" aria-label="Plugin files">
      <div class="tree-header"><span>Files</span><button type="button" data-editor-action="refresh-tree" class="blocks-button blocks-button-secondary min-h-10 px-3" aria-label="Refresh file list"><i class="fas fa-sync-alt" aria-hidden="true"></i></button></div>
      <div class="tree-content" id="fileTree"><p class="p-4 text-center text-sm text-muted" role="status">Loading files…</p></div>
    </aside>

    <div class="code-area min-w-0">
      <div class="code-header flex-wrap gap-3">
        <span class="current-file flex min-w-0 items-center gap-2"><span id="unsavedIndicator" class="unsaved-dot" hidden aria-label="Unsaved changes"></span><span id="currentFileLabel" class="truncate">Choose a file</span></span>
        <div class="flex flex-wrap items-center gap-2">
          <div id="viewToggle" class="flex gap-1" role="group" aria-label="Editor mode" hidden>
            <button type="button" class="blocks-button blocks-button-secondary min-h-10" id="btnCode" data-editor-action="switch-view" data-view="code" aria-pressed="true">Code</button>
            <button type="button" class="blocks-button blocks-button-secondary min-h-10" id="btnVisual" data-editor-action="switch-view" data-view="visual" aria-pressed="false">Visual</button>
          </div>
          <span id="saveStatus" class="text-sm font-medium text-success" role="status" aria-live="polite" hidden></span>
        </div>
      </div>
      <div id="editor" aria-label="Source code"></div>
      <div id="visualEditor" class="min-h-0 flex-1 overflow-hidden" hidden><textarea id="tinymce-editor" aria-label="Visual HTML editor"></textarea></div>

      <button type="button" data-editor-action="toggle-test-panel" id="testPanelToggle" class="flex min-h-11 items-center justify-between border-t border-divider bg-canvas px-4 text-left text-sm font-semibold text-foreground hover:bg-surface" aria-controls="testPanel" aria-expanded="false">
        <span><i class="fas fa-flask mr-2 text-brand" aria-hidden="true"></i>Test plugin route</span>
        <i class="fas fa-chevron-down" id="testPanelIcon" aria-hidden="true"></i>
      </button>
      <section id="testPanel" class="flex min-h-0 flex-1 flex-col gap-3 border-t border-divider bg-canvas p-3 sm:p-4" aria-label="Route test controls" hidden>
        <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
          <label class="sr-only" for="testMethod">Request method</label>
          <select id="testMethod" class="blocks-input sm:w-32"><option value="GET">GET</option><option value="POST">POST</option></select>
          <div class="flex min-w-0 flex-1 items-center gap-2 rounded-lg border border-divider bg-surface px-3">
            <span class="shrink-0 text-xs text-muted">/plugins/{{ plugin_name }}/</span>
            <label class="sr-only" for="testPath">Plugin route</label>
            <input type="text" id="testPath" class="blocks-input min-w-0 border-0 bg-transparent" placeholder="api/lead-count">
          </div>
          <button type="button" data-editor-action="run-test" class="blocks-button blocks-button-primary min-h-11"><i class="fas fa-paper-plane" aria-hidden="true"></i> Send</button>
        </div>
        <div class="grid min-h-0 flex-1 grid-cols-1 gap-3 lg:grid-cols-2">
          <div class="flex min-h-40 min-w-0 flex-col gap-2">
            <label for="testBody" class="text-sm font-semibold text-foreground">Request body (JSON)</label>
            <textarea id="testBody" class="blocks-input min-h-32 flex-1 resize-y font-mono text-xs" placeholder="{}"></textarea>
          </div>
          <div class="flex min-h-40 min-w-0 flex-col gap-2">
            <div class="flex flex-wrap items-center justify-between gap-2">
              <h2 class="text-sm font-semibold text-foreground">Response <span id="testStatus" class="ml-2 text-xs" role="status" aria-live="polite"></span></h2>
              <div class="flex gap-1" role="group" aria-label="Response view">
                <button type="button" class="blocks-button blocks-button-secondary min-h-9 px-3" id="btnRaw" data-editor-action="response-tab" data-tab="raw" aria-pressed="true">Raw</button>
                <button type="button" class="blocks-button blocks-button-secondary min-h-9 px-3" id="btnPreview" data-editor-action="response-tab" data-tab="preview" aria-pressed="false">Preview</button>
              </div>
            </div>
            <div id="responseRaw" class="relative min-h-32 flex-1 overflow-hidden"><pre id="testResponse" class="absolute inset-0 m-0 overflow-auto whitespace-pre-wrap rounded-lg border border-divider bg-surface p-3 font-mono text-xs text-foreground" role="status">Response will appear here.</pre></div>
            <div id="responsePreview" class="relative min-h-32 flex-1 overflow-hidden" hidden><iframe id="testPreviewFrame" class="absolute inset-0 size-full rounded-lg border border-divider bg-surface" title="Plugin route response preview" sandbox="allow-scripts"></iframe></div>
          </div>
        </div>
      </section>

      <footer class="status-bar"><span id="editorLanguage">Text</span><span>Ln <span id="ln">1</span>, Col <span id="col">1</span></span></footer>
    </div>
  </section>
  <input type="hidden" id="pluginName" value="{{ plugin_name }}">
</main>
{% endblock %}