{{> header}}

<style>
  .designer-container {
    display: flex;
    min-height: calc(100vh - 64px);
    background: var(--color-background);
  }
  
  /* Sidebar */
  .designer-sidebar {
    width: 320px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .sidebar-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    background: rgba(0,0,0,0.2);
  }
  
  .sidebar-tab {
    flex: 1;
    padding: 0.75rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }
  
  .sidebar-tab:hover { background: rgba(255,255,255,0.05); }
  .sidebar-tab.active { color: var(--color-primary); background: rgba(99, 102, 241, 0.1); border-bottom: 2px solid var(--color-primary); }
  .sidebar-tab svg { width: 18px; height: 18px; }
  
  .sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
  }
  
  /* Panel sections */
  .panel-section {
    margin-bottom: 1.5rem;
  }
  
  .panel-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  
  .panel-section-title:hover { color: var(--color-text); }
  
  /* Color picker */
  .color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }
  
  .color-label {
    font-size: 0.85rem;
    color: var(--color-text);
  }
  
  .color-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid var(--color-border);
    cursor: pointer;
    transition: transform 0.2s;
  }
  
  .color-swatch:hover { transform: scale(1.1); }
  
  .color-hex {
    width: 70px;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    font-family: monospace;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
  }
  
  /* Typography */
  .font-select {
    width: 100%;
    padding: 0.5rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    margin-bottom: 0.75rem;
  }
  
  .slider-row {
    margin-bottom: 0.75rem;
  }
  
  .slider-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--color-text);
    margin-bottom: 0.35rem;
  }
  
  .slider-value {
    color: var(--color-primary);
    font-weight: 600;
  }
  
  input[type="range"] {
    width: 100%;
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
  }
  
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
  }
  
  /* Preview area */
  .designer-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #1a1a2e;
  }
  
  .preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid var(--color-border);
  }
</style>

<div class="designer-container">
  <!-- Sidebar -->
  <aside class="designer-sidebar">
    <div class="sidebar-header">
      <h2 style="font-size: 1.1rem; font-weight: 600; color: var(--color-text);">🎨 Theme Designer</h2>
      <button id="save-theme-btn" class="btn btn-primary btn-sm">Save</button>
    </div>

    <!-- Tabs -->
    <div class="sidebar-tabs">
      <button class="sidebar-tab active" data-tab="colors">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
        Colors
      </button>
      <button class="sidebar-tab" data-tab="typography">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>
        Type
      </button>
      <button class="sidebar-tab" data-tab="layout">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
        Layout
      </button>
      <button class="sidebar-tab" data-tab="presets">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
        Presets
      </button>
    </div>

    <!-- Content panels -->
    <div class="sidebar-content">
      <!-- Colors Panel -->
      <div id="colors-panel" class="panel">
        <div class="panel-section">
          <div class="panel-section-title">Brand Colors</div>
          <div class="color-row">
            <span class="color-label">Primary</span>
            <div class="color-input-group">
              <input type="color" class="color-swatch" id="color-primary" value="#6366F1">
              <input type="text" class="color-hex" id="hex-primary" value="#6366F1">
            </div>
          </div>
          <div class="color-row">
            <span class="color-label">Secondary</span>
            <div class="color-input-group">
              <input type="color" class="color-swatch" id="color-secondary" value="#8B5CF6">
              <input type="text" class="color-hex" id="hex-secondary" value="#8B5CF6">
            </div>
          </div>
          <div class="color-row">
            <span class="color-label">Accent</span>
            <div class="color-input-group">
              <input type="color" class="color-swatch" id="color-accent" value="#EC4899">
              <input type="text" class="color-hex" id="hex-accent" value="#EC4899">
            </div>
          </div>
        </div>

        <div class="panel-section">
          <div class="panel-section-title">Background</div>
          <div class="color-row">
            <span class="color-label">Background</span>
            <div class="color-input-group">
              <input type="color" class="color-swatch" id="color-background" value="#0F0F1A">
              <input type="text" class="color-hex" id="hex-background" value="#0F0F1A">
            </div>
          </div>
          <div class="color-row">
            <span class="color-label">Surface</span>
            <div class="color-input-group">
              <input type="color" class="color-swatch" id="color-surface" value="#1E1E2E">
              <input type="text" class="color-hex" id="hex-surface" value="#1E1E2E">
            </div>
          </div>
        </div>

        <div class="panel-section">
          <div class="panel-section-title">Text</div>
          <div class="color-row">
            <span class="color-label">Text</span>
            <div class="color-input-group">
              <input type="color" class="color-swatch" id="color-text" value="#E2E8F0">
              <input type="text" class="color-hex" id="hex-text" value="#E2E8F0">
            </div>
          </div>
          <div class="color-row">
            <span class="color-label">Muted</span>
            <div class="color-input-group">
              <input type="color" class="color-swatch" id="color-muted" value="#94A3B8">
              <input type="text" class="color-hex" id="hex-muted" value="#94A3B8">
            </div>
          </div>
          <div class="color-row">
            <span class="color-label">Heading</span>
            <div class="color-input-group">
              <input type="color" class="color-swatch" id="color-heading" value="#F8FAFC">
              <input type="text" class="color-hex" id="hex-heading" value="#F8FAFC">
            </div>
          </div>
        </div>

        <div class="panel-section">
          <div class="panel-section-title">Links & Borders</div>
          <div class="color-row">
            <span class="color-label">Link</span>
            <div class="color-input-group">
              <input type="color" class="color-swatch" id="color-link" value="#818CF8">
              <input type="text" class="color-hex" id="hex-link" value="#818CF8">
            </div>
          </div>
          <div class="color-row">
            <span class="color-label">Border</span>
            <div class="color-input-group">
              <input type="color" class="color-swatch" id="color-border" value="#3F3F5A">
              <input type="text" class="color-hex" id="hex-border" value="#3F3F5A">
            </div>
          </div>
        </div>
      </div>

      <!-- Typography Panel -->
      <div id="typography-panel" class="panel" style="display: none;">
        <div class="panel-section">
          <div class="panel-section-title">Fonts</div>
          <label style="font-size: 0.85rem; color: var(--color-text); margin-bottom: 0.25rem; display: block;">Heading Font</label>
          <select class="font-select" id="heading-font">
            <option value="system-ui">System UI</option>
            <option value="Inter" selected>Inter</option>
            <option value="Roboto">Roboto</option>
            <option value="Poppins">Poppins</option>
            <option value="Montserrat">Montserrat</option>
            <option value="Georgia">Georgia</option>
            <option value="Playfair Display">Playfair Display</option>
          </select>

          <label style="font-size: 0.85rem; color: var(--color-text); margin-bottom: 0.25rem; display: block;">Body Font</label>
          <select class="font-select" id="body-font">
            <option value="system-ui">System UI</option>
            <option value="Inter" selected>Inter</option>
            <option value="Roboto">Roboto</option>
            <option value="Open Sans">Open Sans</option>
            <option value="Lato">Lato</option>
            <option value="Nunito">Nunito</option>
          </select>
        </div>

        <div class="panel-section">
          <div class="panel-section-title">Sizes</div>
          <div class="slider-row">
            <div class="slider-label">
              <span>Base Font Size</span>
              <span class="slider-value" id="font-size-value">16px</span>
            </div>
            <input type="range" id="base-font-size" min="12" max="24" value="16">
          </div>

          <div class="slider-row">
            <div class="slider-label">
              <span>Line Height</span>
              <span class="slider-value" id="line-height-value">1.6</span>
            </div>
            <input type="range" id="line-height" min="1.2" max="2.2" step="0.1" value="1.6">
          </div>

          <div class="slider-row">
            <div class="slider-label">
              <span>Heading Weight</span>
              <span class="slider-value" id="heading-weight-value">600</span>
            </div>
            <input type="range" id="heading-weight" min="400" max="900" step="100" value="600">
          </div>
        </div>
      </div>

      <!-- Layout Panel -->
      <div id="layout-panel" class="panel" style="display: none;">
        <div class="panel-section">
          <div class="panel-section-title">Content Width</div>
          <div class="slider-row">
            <div class="slider-label">
              <span>Max Width</span>
              <span class="slider-value" id="content-width-value">1200px</span>
            </div>
            <input type="range" id="content-width" min="800" max="1600" step="50" value="1200">
          </div>
        </div>

        <div class="panel-section">
          <div class="panel-section-title">Spacing</div>
          <div class="slider-row">
            <div class="slider-label">
              <span>Section Padding</span>
              <span class="slider-value" id="section-padding-value">48px</span>
            </div>
            <input type="range" id="section-padding" min="16" max="96" step="8" value="48">
          </div>

          <div class="slider-row">
            <div class="slider-label">
              <span>Element Spacing</span>
              <span class="slider-value" id="element-spacing-value">24px</span>
            </div>
            <input type="range" id="element-spacing" min="8" max="48" step="4" value="24">
          </div>

          <div class="slider-row">
            <div class="slider-label">
              <span>Border Radius</span>
              <span class="slider-value" id="border-radius-value">12px</span>
            </div>
            <input type="range" id="border-radius" min="0" max="24" step="2" value="12">
          </div>
        </div>

        <div class="panel-section">
          <div class="panel-section-title">Header Style</div>
          <select class="font-select" id="header-style">
            <option value="default">Default</option>
            <option value="centered">Centered</option>
            <option value="minimal">Minimal</option>
            <option value="sticky">Sticky</option>
          </select>
        </div>
      </div>

      <!-- Presets Panel -->
      <div id="presets-panel" class="panel" style="display: none;">
        <div class="panel-section">
          <div class="panel-section-title">Theme Presets</div>
          <div class="presets-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;">
            <button class="preset-card" data-preset="cyber-dark">
              <div class="preset-preview" style="background: linear-gradient(135deg, #6366F1, #8B5CF6);"></div>
              <span>Cyber Dark</span>
            </button>
            <button class="preset-card" data-preset="midnight-blue">
              <div class="preset-preview" style="background: linear-gradient(135deg, #3B82F6, #1E3A8A);"></div>
              <span>Midnight Blue</span>
            </button>
            <button class="preset-card" data-preset="minimal-dark">
              <div class="preset-preview" style="background: linear-gradient(135deg, #60a5fa, #0f172a);"></div>
              <span>Minimal Dark</span>
            </button>
            <button class="preset-card" data-preset="portfolio">
              <div class="preset-preview" style="background: linear-gradient(135deg, #8b5cf6, #0f0f0f);"></div>
              <span>Portfolio</span>
            </button>
            <button class="preset-card" data-preset="minimal-light">
              <div class="preset-preview" style="background: linear-gradient(135deg, #2563eb, #ffffff);"></div>
              <span>Minimal Light</span>
            </button>
            <button class="preset-card" data-preset="ecommerce">
              <div class="preset-preview" style="background: linear-gradient(135deg, #059669, #f9fafb);"></div>
              <span>E-Commerce</span>
            </button>
          </div>
        </div>

        <div class="panel-section" style="margin-top: 1.5rem;">
          <div class="panel-section-title">AI Generator</div>
          <textarea id="ai-prompt" placeholder="Describe the theme you want, e.g., 'A modern dark theme for a tech startup with blue and purple accents'" style="width: 100%; min-height: 80px; padding: 0.75rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text); font-size: 0.85rem; resize: vertical;"></textarea>
          <button id="generate-ai-btn" class="btn btn-primary" style="width: 100%; margin-top: 0.75rem;">
            ✨ Generate with AI
          </button>
        </div>

        <div class="panel-section" style="margin-top: 1.5rem;">
          <div class="panel-section-title">Import / Export</div>
          <div style="display: flex; gap: 0.5rem;">
            <button id="export-theme-btn" class="btn btn-outline" style="flex: 1;">Export</button>
            <button id="import-theme-btn" class="btn btn-outline" style="flex: 1;">Import</button>
          </div>
          <input type="file" id="import-file" accept=".json" style="display: none;">
        </div>
      </div>
    </div>
  </aside>

  <!-- Preview Area -->
  <main class="designer-preview">
    <div class="preview-toolbar">
      <div class="device-switcher" style="display: flex; gap: 0.5rem;">
        <button class="device-btn active" data-device="desktop" title="Desktop">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
        </button>
        <button class="device-btn" data-device="tablet" title="Tablet">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
        </button>
        <button class="device-btn" data-device="mobile" title="Mobile">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
        </button>
      </div>

      <div style="height: 24px; width: 1px; background: var(--color-border);"></div>

      <div class="mode-switcher" style="display: flex; gap: 0.5rem;">
        <button class="mode-btn" data-mode="light" title="Light Mode">☀️</button>
        <button class="mode-btn active" data-mode="dark" title="Dark Mode">🌙</button>
      </div>

      <div style="height: 24px; width: 1px; background: var(--color-border);"></div>

      <button id="undo-btn" class="toolbar-btn" title="Undo">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>
      </button>
      <button id="redo-btn" class="toolbar-btn" title="Redo">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></svg>
      </button>
    </div>

    <div class="preview-container" style="flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 2rem; overflow: auto;">
      <div id="preview-frame-wrapper" class="preview-frame-wrapper desktop">
        <iframe id="preview-frame" src="/" style="width: 100%; height: 100%; border: none; border-radius: 8px;"></iframe>
      </div>
    </div>
  </main>
</div>

<style>
  /* Additional styles */
  .preset-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .preset-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
  }

  .preset-preview {
    width: 100%;
    height: 40px;
    border-radius: 4px;
  }

  .preset-card span {
    font-size: 0.75rem;
    color: var(--color-text);
  }

  .device-btn, .mode-btn, .toolbar-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s;
  }

  .device-btn:hover, .mode-btn:hover, .toolbar-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--color-text);
  }

  .device-btn.active, .mode-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
  }

  .preview-frame-wrapper {
    background: white;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .preview-frame-wrapper.desktop {
    width: 100%;
    max-width: 1200px;
    height: 700px;
  }

  .preview-frame-wrapper.tablet {
    width: 768px;
    height: 1024px;
  }

  .preview-frame-wrapper.mobile {
    width: 375px;
    height: 667px;
  }

  /* Theme selector dropdown */
  .theme-selector {
    position: relative;
  }

  .theme-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
    display: none;
  }

  .theme-dropdown.show { display: block; }

  .theme-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background 0.2s;
  }

  .theme-dropdown-item:hover { background: rgba(255,255,255,0.05); }
  .theme-dropdown-item:last-child { border-bottom: none; }

  /* Loading overlay */
  .loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    display: none;
  }

  .loading-overlay.show { display: flex; }

  .loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin { to { transform: rotate(360deg); } }
</style>

<div class="loading-overlay" id="loading-overlay">
  <div class="loading-spinner"></div>
</div>

<script src="/theme-assets/js/theme-designer.js"></script>
{{> footer}}

