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

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

  <div class="studio-header">
    <div class="studio-header__left">
      <div class="studio-header__icon">&#128202;</div>
      <div>
        <div class="studio-header__title">Dashboard Builder</div>
        <div class="studio-header__subtitle">Create custom dashboards with drag-and-drop widgets</div>
      </div>
    </div>
    <div class="studio-header__actions">
      <div class="studio-dropdown">
        <button class="studio-btn studio-btn--secondary" onclick="DashBuilder.toggleRoleMenu()">
          <span>&#128100;</span> Role Defaults
        </button>
        <div class="studio-dropdown__menu" id="db-role-menu" style="display:none;">
          <button class="studio-dropdown__item" onclick="DashBuilder.createFromRole('pm')">&#128188; Program Manager</button>
          <button class="studio-dropdown__item" onclick="DashBuilder.createFromRole('isso')">&#128274; ISSO</button>
          <button class="studio-dropdown__item" onclick="DashBuilder.createFromRole('developer')">&#128187; Developer</button>
        </div>
      </div>
      <button class="studio-btn studio-btn--primary studio-btn--lg" onclick="DashBuilder.createNew()">
        <span>&#43;</span> New Dashboard
      </button>
    </div>
  </div>

  <!-- Tabs -->
  <div class="studio-tabs">
    <button class="studio-tab studio-tab--active" data-tab="editor" onclick="DashBuilder.switchTab(this)">
      <span>&#9998;</span> Editor
    </button>
    <button class="studio-tab" data-tab="saved" onclick="DashBuilder.switchTab(this)">
      <span>&#128451;</span> Saved
      <span class="studio-tab__count" id="db-saved-count">0</span>
    </button>
  </div>

  <!-- Tab: Editor -->
  <div class="studio-tab-panel" id="panel-editor">
    <div class="db-editor">
      <!-- Widget palette (sidebar) -->
      <div class="db-palette">
        <div class="db-palette__header">Widgets</div>
        <div class="db-palette__hint">Click to add to dashboard</div>
        <div id="db-widget-types">
          <!-- Populated by JS -->
        </div>
      </div>

      <!-- Dashboard canvas -->
      <div class="db-canvas-area">
        <div class="studio-toolbar studio-mb-4">
          <input type="text" class="studio-input" id="db-dash-name" value="My Dashboard"
                 placeholder="Dashboard name..." style="max-width:260px;font-weight:600;">
          <div class="studio-toolbar__spacer"></div>
          <span class="studio-badge studio-badge--neutral" id="db-widget-count">0 widgets</span>
          <label style="font-size:0.75rem;color:var(--studio-text-muted);display:flex;align-items:center;gap:4px;">
            <input type="checkbox" id="db-shared" style="margin:0;"> Shared
          </label>
          <button class="studio-btn studio-btn--primary" onclick="DashBuilder.save()">Save Dashboard</button>
        </div>

        <div class="db-grid" id="db-grid">
          <div class="studio-empty" id="db-empty">
            <div class="studio-empty__icon">&#128202;</div>
            <div class="studio-empty__title">Start Building</div>
            <div class="studio-empty__description">
              Click widgets on the left, or start from a role-based default.
            </div>
          </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="db-saved-grid"></div>
  </div>
</div>

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

<style>
  .db-editor {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--studio-space-6);
    min-height: calc(100vh - 280px);
  }
  @media (max-width: 768px) { .db-editor { grid-template-columns: 1fr; } }

  .db-palette {
    background: var(--studio-bg-surface);
    border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius-lg);
    padding: var(--studio-space-4);
    max-height: calc(100vh - 260px);
    overflow-y: auto;
  }
  .db-palette__header {
    font-size: var(--studio-text-xs); font-weight: 600; color: var(--studio-text-muted);
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--studio-space-2);
  }
  .db-palette__hint {
    font-size: 0.7rem; color: var(--studio-text-muted); margin-bottom: var(--studio-space-3);
  }
  .db-widget-btn {
    display: flex; align-items: center; gap: var(--studio-space-2);
    width: 100%; 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: none;
    border: 1px solid transparent; border-radius: var(--studio-radius-sm);
    cursor: pointer; text-align: left;
    transition: all var(--studio-duration-fast) var(--studio-ease); margin-bottom: 2px;
  }
  .db-widget-btn:hover {
    background: var(--studio-bg-hover); border-color: var(--studio-border); color: var(--studio-text-primary);
  }
  .db-widget-icon {
    width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
    background: rgba(99,102,241,0.1); color: var(--studio-accent-light);
    border-radius: 5px; font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
  }

  .db-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--studio-space-3);
    min-height: 400px;
    background:
      linear-gradient(var(--studio-border-subtle) 1px, transparent 1px),
      linear-gradient(90deg, var(--studio-border-subtle) 1px, transparent 1px);
    background-size: calc(100%/12) 60px;
    border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius-lg);
    padding: var(--studio-space-3);
    position: relative;
  }

  .db-widget {
    background: var(--studio-bg-card);
    border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius-md);
    padding: var(--studio-space-3);
    position: relative;
    transition: all var(--studio-duration-fast) var(--studio-ease);
    animation: studioSlideUp var(--studio-duration-normal) var(--studio-ease);
    display: flex;
    flex-direction: column;
  }
  .db-widget:hover {
    border-color: var(--studio-accent);
    box-shadow: var(--studio-shadow-sm);
  }
  .db-widget__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--studio-space-2); min-height: 20px;
  }
  .db-widget__title {
    font-size: var(--studio-text-xs); font-weight: 600; color: var(--studio-text-primary);
  }
  .db-widget__remove {
    font-size: 0.7rem; color: var(--studio-text-muted); cursor: pointer;
    background: none; border: none; padding: 2px 4px; border-radius: 3px;
    opacity: 0; transition: opacity var(--studio-duration-fast);
  }
  .db-widget:hover .db-widget__remove { opacity: 1; }
  .db-widget__remove:hover { color: var(--studio-error); background: var(--studio-error-bg); }
  .db-widget__body { flex: 1; display: flex; align-items: center; justify-content: center; }
  .db-widget__placeholder {
    font-size: var(--studio-text-xs); color: var(--studio-text-muted); text-align: center;
  }
  .db-widget__value {
    font-size: var(--studio-text-2xl); font-weight: 700; color: var(--studio-text-primary);
  }
</style>

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