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

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

  <div class="studio-header">
    <div class="studio-header__left">
      <div class="studio-header__icon">&#9889;</div>
      <div>
        <div class="studio-header__title">Automation Studio</div>
        <div class="studio-header__subtitle">Create event-driven rules — if X happens, do Y</div>
      </div>
    </div>
    <div class="studio-header__actions">
      <button class="studio-btn studio-btn--secondary" onclick="AutoBuilder.showTemplates()">
        <span>&#128218;</span> Templates
      </button>
      <button class="studio-btn studio-btn--primary studio-btn--lg" onclick="AutoBuilder.createNew()">
        <span>&#43;</span> New Automation
      </button>
    </div>
  </div>

  <!-- Tabs -->
  <div class="studio-tabs">
    <button class="studio-tab studio-tab--active" data-tab="builder" onclick="AutoBuilder.switchTab(this)">
      <span>&#9998;</span> Builder
    </button>
    <button class="studio-tab" data-tab="saved" onclick="AutoBuilder.switchTab(this)">
      <span>&#128451;</span> Automations
      <span class="studio-tab__count" id="at-saved-count">0</span>
    </button>
    <button class="studio-tab" data-tab="runs" onclick="AutoBuilder.switchTab(this)">
      <span>&#9654;</span> Run History
    </button>
  </div>

  <!-- Tab: Builder -->
  <div class="studio-tab-panel" id="panel-builder">
    <div class="studio-toolbar studio-mb-4">
      <input type="text" class="studio-input" id="at-name" placeholder="Automation name..."
             value="Untitled Automation" style="max-width:300px;font-weight:600;">
      <div class="studio-toolbar__spacer"></div>
      <button class="studio-btn studio-btn--secondary" onclick="AutoBuilder.simulate()">
        &#9654; Dry Run
      </button>
      <button class="studio-btn studio-btn--primary" onclick="AutoBuilder.save()">
        Save Automation
      </button>
    </div>

    <!-- Visual rule builder -->
    <div class="at-rule-flow">
      <!-- TRIGGER -->
      <div class="at-section">
        <div class="at-section__label">WHEN</div>
        <div class="at-section__card studio-card" id="at-trigger-card">
          <div class="studio-card__body">
            <div class="at-picker" id="at-trigger-picker">
              <div class="studio-text-muted" style="font-size:0.85rem;margin-bottom:12px;">Select a trigger event:</div>
              <div class="at-trigger-grid" id="at-trigger-grid">
                <!-- Populated by JS -->
              </div>
            </div>
            <div class="at-selected" id="at-trigger-selected" style="display:none;">
              <!-- Shows selected trigger -->
            </div>
          </div>
        </div>
      </div>

      <div class="at-connector">&#8595;</div>

      <!-- CONDITIONS -->
      <div class="at-section">
        <div class="at-section__label">IF</div>
        <div class="at-section__card studio-card">
          <div class="studio-card__body">
            <div id="at-conditions-list">
              <div class="studio-text-muted" style="font-size:0.85rem;">No conditions — all events will trigger actions.</div>
            </div>
            <button class="studio-btn studio-btn--ghost studio-btn--sm studio-mt-2" onclick="AutoBuilder.addCondition()">
              &#43; Add Condition
            </button>
          </div>
        </div>
      </div>

      <div class="at-connector">&#8595;</div>

      <!-- ACTIONS -->
      <div class="at-section">
        <div class="at-section__label">THEN</div>
        <div class="at-section__card studio-card">
          <div class="studio-card__body">
            <div id="at-actions-list">
              <div class="studio-text-muted" style="font-size:0.85rem;">No actions configured.</div>
            </div>
            <button class="studio-btn studio-btn--ghost studio-btn--sm studio-mt-2" onclick="AutoBuilder.showActionPicker()">
              &#43; Add Action
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Tab: Saved -->
  <div class="studio-tab-panel" id="panel-saved" style="display:none;">
    <div class="studio-grid studio-grid--auto" id="at-saved-grid"></div>
  </div>

  <!-- Tab: Runs -->
  <div class="studio-tab-panel" id="panel-runs" style="display:none;">
    <div class="studio-table-wrap">
      <table class="studio-table">
        <thead><tr><th>Automation</th><th>Trigger</th><th>Status</th><th>Started</th></tr></thead>
        <tbody id="at-runs-body">
          <tr><td colspan="4" class="studio-text-muted" style="text-align:center;padding:32px;">No runs yet</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Action Picker Modal -->
<div class="studio-modal-overlay" id="at-action-modal" style="display:none;">
  <div class="studio-modal">
    <div class="studio-modal__header">
      <div class="studio-modal__title">Add Action</div>
      <button class="studio-btn studio-btn--ghost studio-btn--sm" onclick="AutoBuilder.closeModal('at-action-modal')">&times;</button>
    </div>
    <div class="studio-modal__body">
      <div class="studio-grid studio-grid--2" id="at-action-picker-grid"></div>
    </div>
  </div>
</div>

<!-- Templates Modal -->
<div class="studio-modal-overlay" id="at-templates-modal" style="display:none;">
  <div class="studio-modal studio-modal--lg">
    <div class="studio-modal__header">
      <div class="studio-modal__title">Automation Templates</div>
      <button class="studio-btn studio-btn--ghost studio-btn--sm" onclick="AutoBuilder.closeModal('at-templates-modal')">&times;</button>
    </div>
    <div class="studio-modal__body">
      <div class="studio-grid studio-grid--auto" id="at-templates-grid"></div>
    </div>
  </div>
</div>

<!-- Simulation Result Modal -->
<div class="studio-modal-overlay" id="at-sim-modal" style="display:none;">
  <div class="studio-modal">
    <div class="studio-modal__header">
      <div class="studio-modal__title">Dry Run Result</div>
      <button class="studio-btn studio-btn--ghost studio-btn--sm" onclick="AutoBuilder.closeModal('at-sim-modal')">&times;</button>
    </div>
    <div class="studio-modal__body" id="at-sim-body"></div>
  </div>
</div>

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

<style>
  .at-rule-flow { max-width: 700px; margin: 0 auto; }
  .at-section { margin-bottom: var(--studio-space-2); }
  .at-section__label {
    font-size: var(--studio-text-xs); font-weight: 700; color: var(--studio-accent-light);
    text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--studio-space-2);
  }
  .at-connector {
    text-align: center; color: var(--studio-text-muted); font-size: 1.2rem;
    margin: var(--studio-space-1) 0;
  }
  .at-trigger-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--studio-space-2);
  }
  .at-trigger-btn {
    display: flex; align-items: center; gap: var(--studio-space-2);
    padding: var(--studio-space-2) var(--studio-space-3);
    font-family: var(--studio-font); font-size: var(--studio-text-xs);
    color: var(--studio-text-secondary); background: var(--studio-bg-input);
    border: 1px solid var(--studio-border); border-radius: var(--studio-radius-sm);
    cursor: pointer; transition: all var(--studio-duration-fast) var(--studio-ease);
    text-align: left; width: 100%;
  }
  .at-trigger-btn:hover { border-color: var(--studio-accent); color: var(--studio-text-primary); }
  .at-trigger-btn--selected { border-color: var(--studio-accent); background: var(--studio-accent-glow); color: var(--studio-accent-light); }
  .at-trigger-icon {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
  }
  .at-condition-row {
    display: flex; gap: var(--studio-space-2); align-items: center;
    margin-bottom: var(--studio-space-2); animation: studioSlideUp var(--studio-duration-normal) var(--studio-ease);
  }
  .at-action-item {
    display: flex; align-items: center; gap: var(--studio-space-3);
    padding: var(--studio-space-3); background: var(--studio-bg-elevated);
    border: 1px solid var(--studio-border); border-radius: var(--studio-radius-sm);
    margin-bottom: var(--studio-space-2); animation: studioSlideUp var(--studio-duration-normal) var(--studio-ease);
  }
  .at-action-item__icon {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; font-weight: 700; flex-shrink: 0;
  }
  .at-action-item__label { font-size: var(--studio-text-sm); color: var(--studio-text-primary); font-weight: 500; }
  .at-action-item__desc { font-size: var(--studio-text-xs); color: var(--studio-text-muted); }
</style>

<script src="/static/js/automation-builder.js"></script>
{% endblock %}