{% extends "studio/base_studio.html" %}

{% block studio_content %}
<div class="studio-container studio-container--full">

  <!-- Page Header -->
  <div class="studio-header">
    <div class="studio-header__left">
      <div class="studio-header__icon">&#9881;</div>
      <div>
        <div class="studio-header__title">Workflow Studio</div>
        <div class="studio-header__subtitle">Design, test, and deploy automated workflows</div>
      </div>
    </div>
    <div class="studio-header__actions">
      <button class="studio-btn studio-btn--secondary" onclick="StudioWF.loadTemplate()">
        <span>&#128196;</span> Templates
      </button>
      <button class="studio-btn studio-btn--secondary" onclick="StudioWF.importYAML()">
        <span>&#128228;</span> Import YAML
      </button>
      <button class="studio-btn studio-btn--primary studio-btn--lg" onclick="StudioWF.createNew()">
        <span>&#43;</span> New Workflow
      </button>
    </div>
  </div>

  <!-- Tabs -->
  <div class="studio-tabs">
    <button class="studio-tab studio-tab--active" data-tab="editor" onclick="StudioWF.switchTab(this)">
      <span>&#9998;</span> Editor
    </button>
    <button class="studio-tab" data-tab="saved" onclick="StudioWF.switchTab(this)">
      <span>&#128451;</span> Saved Workflows
      <span class="studio-tab__count" id="wf-saved-count">0</span>
    </button>
    <button class="studio-tab" data-tab="templates" onclick="StudioWF.switchTab(this)">
      <span>&#128218;</span> Template Library
    </button>
    <button class="studio-tab" data-tab="runs" onclick="StudioWF.switchTab(this)">
      <span>&#9654;</span> Run History
    </button>
  </div>

  <!-- Tab: Editor -->
  <div class="studio-tab-panel" id="panel-editor">
    <div class="wf-studio">
      <!-- Toolbar -->
      <div class="wf-studio__toolbar">
        <input type="text" class="studio-input" id="wf-name"
               placeholder="Workflow name..." value="Untitled Workflow"
               style="max-width:260px; font-weight:600;">
        <div class="studio-toolbar__separator"></div>
        <button class="studio-btn studio-btn--ghost studio-btn--sm studio-tooltip"
                data-tooltip="Undo" onclick="StudioWF.undo()">&#8630;</button>
        <button class="studio-btn studio-btn--ghost studio-btn--sm studio-tooltip"
                data-tooltip="Redo" onclick="StudioWF.redo()">&#8631;</button>
        <div class="studio-toolbar__separator"></div>
        <button class="studio-btn studio-btn--ghost studio-btn--sm studio-tooltip"
                data-tooltip="Zoom In" onclick="StudioWF.zoomIn()">&#43;</button>
        <button class="studio-btn studio-btn--ghost studio-btn--sm studio-tooltip"
                data-tooltip="Zoom Out" onclick="StudioWF.zoomOut()">&#8722;</button>
        <button class="studio-btn studio-btn--ghost studio-btn--sm studio-tooltip"
                data-tooltip="Fit View" onclick="StudioWF.fitView()">&#9634;</button>
        <div class="studio-toolbar__spacer"></div>
        <span class="studio-badge studio-badge--neutral" id="wf-node-count">0 steps</span>
        <button class="studio-btn studio-btn--secondary" onclick="StudioWF.validate()">
          &#10003; Validate
        </button>
        <button class="studio-btn studio-btn--secondary" onclick="StudioWF.exportYAML()">
          &#128190; Export YAML
        </button>
        <button class="studio-btn studio-btn--primary" onclick="StudioWF.save()">
          Save Workflow
        </button>
      </div>

      <!-- Tool Palette -->
      <div class="wf-studio__palette" id="wf-palette">
        <div class="wf-studio__palette-header">Tool Palette</div>
        <div class="wf-studio__palette-search">
          <input type="text" class="studio-input studio-input"
                 placeholder="Search tools..." id="wf-tool-search"
                 oninput="StudioWF.filterTools(this.value)">
        </div>
        <div id="wf-palette-groups">
          <!-- Populated by JS -->
          <div class="studio-empty" style="padding:32px 16px;">
            <div class="studio-spinner"></div>
            <div class="studio-text-muted studio-mt-4" style="font-size:0.75rem;">Loading tools...</div>
          </div>
        </div>
      </div>

      <!-- Canvas -->
      <div class="wf-canvas" id="wf-canvas"
           ondragover="event.preventDefault()"
           ondrop="StudioWF.handleDrop(event)">
        <svg class="wf-canvas__svg" id="wf-edges"></svg>
        <div id="wf-nodes">
          <!-- Nodes rendered by JS -->
        </div>
        <!-- Empty state -->
        <div class="studio-empty" id="wf-empty-state">
          <div class="studio-empty__icon">&#128640;</div>
          <div class="studio-empty__title">Start Building</div>
          <div class="studio-empty__description">
            Drag tools from the palette to create workflow steps,
            or start from a template.
          </div>
          <button class="studio-btn studio-btn--primary" onclick="StudioWF.loadTemplate()">
            Browse Templates
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Tab: Saved Workflows -->
  <div class="studio-tab-panel" id="panel-saved" style="display:none;">
    <div class="studio-flex studio-items-center studio-justify-between studio-mb-6">
      <div class="studio-search">
        <span class="studio-search__icon">&#128269;</span>
        <input type="text" class="studio-input studio-search__input"
               placeholder="Search workflows..." id="wf-search-saved">
      </div>
    </div>
    <div class="studio-grid studio-grid--auto" id="wf-saved-grid">
      <div class="studio-empty">
        <div class="studio-empty__icon">&#128451;</div>
        <div class="studio-empty__title">No saved workflows</div>
        <div class="studio-empty__description">
          Create your first workflow in the editor tab.
        </div>
      </div>
    </div>
  </div>

  <!-- Tab: Template Library -->
  <div class="studio-tab-panel" id="panel-templates" style="display:none;">
    <div class="studio-stats" id="wf-template-stats">
      <div class="studio-stat studio-animate-in">
        <div class="studio-stat__label">Built-in</div>
        <div class="studio-stat__value" id="tpl-builtin-count">-</div>
      </div>
      <div class="studio-stat studio-animate-in">
        <div class="studio-stat__label">Community</div>
        <div class="studio-stat__value" id="tpl-community-count">-</div>
      </div>
      <div class="studio-stat studio-animate-in">
        <div class="studio-stat__label">Categories</div>
        <div class="studio-stat__value" id="tpl-category-count">-</div>
      </div>
    </div>
    <div class="studio-grid studio-grid--auto" id="wf-template-grid">
      <div class="studio-spinner studio-spinner--lg" style="margin:48px auto;"></div>
    </div>
  </div>

  <!-- Tab: Run History -->
  <div class="studio-tab-panel" id="panel-runs" style="display:none;">
    <div class="studio-table-wrap">
      <table class="studio-table">
        <thead>
          <tr>
            <th>Workflow</th>
            <th>Status</th>
            <th>Steps</th>
            <th>Duration</th>
            <th>Started</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="wf-runs-body">
          <tr>
            <td colspan="6" class="studio-text-muted" style="text-align:center; padding:32px;">
              No workflow runs yet
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</div>

<!-- Node Config Modal -->
<div class="studio-modal-overlay" id="wf-node-modal" style="display:none;">
  <div class="studio-modal">
    <div class="studio-modal__header">
      <div class="studio-modal__title" id="wf-modal-title">Configure Step</div>
      <button class="studio-btn studio-btn--ghost studio-btn--sm"
              onclick="StudioWF.closeModal()">&#10005;</button>
    </div>
    <div class="studio-modal__body" id="wf-modal-body">
      <!-- Dynamic form -->
    </div>
    <div class="studio-modal__footer">
      <button class="studio-btn studio-btn--ghost" onclick="StudioWF.closeModal()">Cancel</button>
      <button class="studio-btn studio-btn--primary" onclick="StudioWF.saveNodeConfig()">Save</button>
    </div>
  </div>
</div>

<!-- YAML Import Modal -->
<div class="studio-modal-overlay" id="wf-yaml-modal" style="display:none;">
  <div class="studio-modal studio-modal--lg">
    <div class="studio-modal__header">
      <div class="studio-modal__title">Import YAML Workflow</div>
      <button class="studio-btn studio-btn--ghost studio-btn--sm"
              onclick="document.getElementById('wf-yaml-modal').style.display='none'">&#10005;</button>
    </div>
    <div class="studio-modal__body">
      <div class="studio-form-group">
        <label class="studio-label">Paste YAML Template</label>
        <textarea class="studio-input studio-textarea" id="wf-yaml-input"
                  rows="16" placeholder="description: My workflow&#10;category: custom&#10;steps:&#10;  - id: step1&#10;    name: First Step&#10;    tool: tools/compliance/fips199_categorizer.py&#10;    depends_on: []"
                  style="font-family:var(--studio-font-mono); font-size:0.8rem;"></textarea>
      </div>
    </div>
    <div class="studio-modal__footer">
      <button class="studio-btn studio-btn--ghost"
              onclick="document.getElementById('wf-yaml-modal').style.display='none'">Cancel</button>
      <button class="studio-btn studio-btn--primary" onclick="StudioWF.doImportYAML()">Import</button>
    </div>
  </div>
</div>

<!-- Toast Container -->
<div class="studio-toast-container" id="studio-toasts"></div>

<script src="/static/js/workflow-studio.js"></script>
{% endblock %}