<template>
  <div style="display:flex; flex-direction:column; height:100%; overflow:hidden;">
    <!-- Settings Header -->
    <div class="cw-lp-settings-hdr">
      <button type="button" class="cw-lp-back-btn" @click="deselectBlock">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="14" height="14">
          <path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd"/>
        </svg>
        Blocks
      </button>
      <span class="cw-lp-block-type">{{ blockTypeLabel(selectedBlock.type) }}</span>
      <button type="button" class="cw-lp-del-btn" @click="deleteBlock(selectedBlock.id)" title="Delete block">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="#ef4444" width="14" height="14" class="lucide lucide-trash-2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2M10 11v6M14 11v6"/></svg>
      </button>
    </div>

    <!-- Settings Body -->
    <div class="cw-lp-settings-body" style="flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 24px;">

      <!-- ── LOGO SETTINGS ── -->
      <template v-if="selectedBlock.type === 'logo'">
        <input
          ref="logoFileInputRef"
          type="file"
          accept="image/jpeg,image/png,image/gif,image/webp,image/svg+xml"
          style="display:none"
          @change="onImageFileSelected(selectedBlock, $event)"
        />

        <div class="cw-lp-section">
          <div class="cw-lp-section-title">Logo Type</div>
          <div class="cw-settings-row">
            <span class="cw-settings-lbl">Type</span>
            <select class="cw-field-select" v-model="selectedBlock.logoType" style="width: 100%;">
              <option value="image">Image Only</option>
              <option value="text">Text Only</option>
              <option value="image-text-side">Image & Text (Side-by-Side)</option>
              <option value="image-text-stacked">Image & Text (Stacked)</option>
            </select>
          </div>
          
          <div v-if="selectedBlock.logoType !== 'text'" style="margin-top:12px;">
            <div class="cw-img-preview" @click="logoFileInputRef?.click()" style="margin-bottom: 10px;">
              <img v-if="selectedBlock.src" :src="selectedBlock.src" alt="logo preview" />
              <div v-else class="cw-img-preview-empty">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-from-line-icon lucide-arrow-up-from-line"><path d="m18 9-6-6-6 6"/><path d="M12 3v14"/><path d="M5 21h14"/></svg>
                <span>Click to upload logo</span>
              </div>
              <div v-if="imageUploading" class="cw-img-uploading">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20" class="cw-spin">
                  <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>
                Uploading…
              </div>
            </div>
            
            <div class="cw-img-actions" style="margin-bottom: 12px;">
              <button type="button" class="cw-img-action-btn" @click="logoFileInputRef?.click()" :disabled="imageUploading">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="13" height="13">
                  <path d="M9.25 13.25a.75.75 0 001.5 0V4.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 101.09 1.03L9.25 4.636v8.614z"/>
                  <path d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z"/>
                </svg>
                {{ selectedBlock.src ? 'Replace' : 'Upload logo' }}
              </button>
              <button type="button" class="cw-img-action-btn" @click="openLibrary(selectedBlock, 'src', 'image', 'campaign-image')">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="13" height="13"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
                Library
              </button>
              <button v-if="selectedBlock.src" type="button" class="cw-img-action-btn cw-img-remove-btn" @click="selectedBlock.src = ''; saveHistory();" title="Remove logo">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="#ef4444" width="14" height="14" class="lucide lucide-trash-2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2M10 11v6M14 11v6"/></svg>
                Remove
              </button>
            </div>

            <div class="form-group-sm">
              <label class="cw-field-label">Logo Image URL</label>
              <input type="text" class="cw-field-input" v-model="selectedBlock.src" placeholder="https://..." />
            </div>
            <div class="form-group-sm" style="margin-top:10px;">
              <label class="cw-field-label">Alt Text</label>
              <input type="text" class="cw-field-input" v-model="selectedBlock.alt" />
            </div>
          </div>

          <div v-if="selectedBlock.logoType !== 'image'" style="margin-top:12px; border-top: 1px solid #f3f4f6; padding-top: 12px;">
            <div class="form-group-sm">
              <label class="cw-field-label">Brand Text</label>
              <input type="text" class="cw-field-input" v-model="selectedBlock.brandText" placeholder="Brand Name" />
            </div>
            <div class="cw-settings-row" style="margin-top:10px;">
              <span class="cw-settings-lbl">Font Family</span>
              <select class="cw-field-select" v-model="selectedBlock.styles.fontFamily">
                <option value="sans-serif">Sans Serif</option>
                <option value="serif">Serif</option>
                <option value="monospace">Monospace</option>
                <option value="'Inter', sans-serif">Inter</option>
                <option value="'Outfit', sans-serif">Outfit</option>
                <option value="'Playfair Display', serif">Playfair</option>
                <option value="'Roboto', sans-serif">Roboto</option>
              </select>
            </div>
            <div class="cw-settings-row" style="margin-top:10px;">
              <span class="cw-settings-lbl">Font Weight</span>
              <select class="cw-field-select" v-model="selectedBlock.styles.fontWeight">
                <option value="normal">Normal</option>
                <option value="medium">Medium</option>
                <option value="bold">Bold</option>
                <option value="800">Extra Bold</option>
              </select>
            </div>
            <div class="cw-settings-row" style="margin-top:10px;">
              <span class="cw-settings-lbl">Font Size</span>
              <div class="cw-unit-input">
                <input type="number" class="cw-field-input" v-model.number="selectedBlock.styles.fontSize" min="12" max="64" style="width:60px" />
                <span class="cw-unit-tag">px</span>
              </div>
            </div>
            <div class="cw-settings-row" style="margin-top:10px;">
              <span class="cw-settings-lbl">Text Color</span>
              <CwColorPicker v-model="selectedBlock.styles.color" />
            </div>
          </div>

          <div class="form-group-sm" style="margin-top:10px;">
            <label class="cw-field-label">Logo Link URL</label>
            <input type="url" class="cw-field-input" v-model="selectedBlock.link" placeholder="https://..." />
          </div>
        </div>
      </template>

      <!-- ── IMAGE SETTINGS ── -->
      <template v-if="selectedBlock.type === 'image'">
        <input
          ref="imageFileInputRef"
          type="file"
          accept="image/jpeg,image/png,image/gif,image/webp,image/svg+xml"
          style="display:none"
          @change="onImageFileSelected(selectedBlock, $event)"
        />

        <div class="cw-lp-section">
          <div class="cw-lp-section-title">Visual</div>

          <div class="cw-img-preview" @click="imageFileInputRef?.click()">
            <img v-if="selectedBlock.src" :src="selectedBlock.src" alt="preview" />
            <div v-else class="cw-img-preview-empty">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="28" height="28">
                <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/>
              </svg>
              <span>Click to upload</span>
            </div>
            <div v-if="imageUploading" class="cw-img-uploading">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20" class="cw-spin">
                <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>
              Uploading…
            </div>
          </div>

          <div class="cw-img-actions">
            <button type="button" class="cw-img-action-btn" @click="imageFileInputRef?.click()" :disabled="imageUploading">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="13" height="13">
                <path d="M9.25 13.25a.75.75 0 001.5 0V4.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 101.09 1.03L9.25 4.636v8.614z"/>
                <path d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z"/>
              </svg>
              {{ selectedBlock.src ? 'Replace' : 'Upload image' }}
            </button>
            <button type="button" class="cw-img-action-btn" @click="openLibrary(selectedBlock, 'src', 'image', 'campaign-image')">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="13" height="13"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
              Library
            </button>
            <button v-if="selectedBlock.src" type="button" class="cw-img-action-btn cw-img-remove-btn" @click="selectedBlock.src = ''" title="Remove image">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="#ef4444" width="14" height="14" class="lucide lucide-trash-2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2M10 11v6M14 11v6"/></svg>
              Remove
            </button>
          </div>
        </div>

        <div class="cw-lp-section">
          <div class="cw-lp-section-title">Or paste URL</div>
          <input type="url" class="cw-field-input" v-model="selectedBlock.src" placeholder="https://example.com/image.jpg" />
        </div>

        <div class="cw-lp-section">
          <div class="cw-lp-section-title">Size</div>
          <div style="display: flex; background: #f3f4f6; border-radius: 8px; padding: 2px; gap: 2px; width: 100%;">
            <button 
              type="button"
              class="cw-size-tab-btn" 
              :class="{ 'is-active': selectedBlock.sizeMode === 'original' }" 
              @click="selectedBlock.sizeMode = 'original'; selectedBlock.styles.width = 'auto'; saveHistory();"
              style="flex: 1; border: none; background: transparent; cursor: pointer; padding: 6px; font-size: 12px; font-weight: 500; color: #4b5563; border-radius: 6px; transition: all 150ms; text-align: center;"
            >
              Original
            </button>
            <button 
              type="button"
              class="cw-size-tab-btn" 
              :class="{ 'is-active': selectedBlock.sizeMode === 'fill' }" 
              @click="selectedBlock.sizeMode = 'fill'; selectedBlock.styles.width = 100; saveHistory();"
              style="flex: 1; border: none; background: transparent; cursor: pointer; padding: 6px; font-size: 12px; font-weight: 500; color: #4b5563; border-radius: 6px; transition: all 150ms; text-align: center;"
            >
              Fill
            </button>
            <button 
              type="button"
              class="cw-size-tab-btn" 
              :class="{ 'is-active': selectedBlock.sizeMode === 'scale' }" 
              @click="selectedBlock.sizeMode = 'scale'; if (selectedBlock.styles.width === 'auto' || !selectedBlock.styles.width) selectedBlock.styles.width = 100; saveHistory();"
              style="flex: 1; border: none; background: transparent; cursor: pointer; padding: 6px; font-size: 12px; font-weight: 500; color: #4b5563; border-radius: 6px; transition: all 150ms; text-align: center;"
            >
              Scale
            </button>
          </div>
          
          <div v-if="selectedBlock.sizeMode === 'scale'" style="margin-top: 12px; display: flex; flex-direction: column; gap: 6px;">
            <div style="display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #6b7280;">
              <span>Scale</span>
              <span>{{ selectedBlock.styles.width }}%</span>
            </div>
            <input 
              type="range" 
              min="10" 
              max="100" 
              v-model.number="selectedBlock.styles.width" 
              @change="saveHistory"
              style="width: 100%; accent-color: #8b5cf6;"
            />
          </div>
        </div>

        <div class="cw-lp-section">
          <div class="cw-lp-section-title">Alt text</div>
          <input type="text" class="cw-field-input" v-model="selectedBlock.alt" placeholder="Describe this image…" />
        </div>

        <div class="cw-lp-section">
          <div class="cw-lp-section-title">Link</div>
          <input type="url" class="cw-field-input" v-model="selectedBlock.link" placeholder="https://…" />
        </div>
      </template>

      <!-- ── BUTTON SETTINGS ── -->
      <template v-if="selectedBlock.type === 'button'">
        <div class="cw-lp-section">
          <div class="cw-lp-section-title">Button</div>
          <div class="form-group-sm">
            <label class="cw-field-label">Label</label>
            <input type="text" class="cw-field-input" v-model="selectedBlock.text" />
          </div>
          <div class="form-group-sm">
            <label class="cw-field-label">Link URL</label>
            <input type="url" class="cw-field-input" v-model="selectedBlock.href" placeholder="https://..." />
          </div>
          <div class="cw-settings-row">
            <span class="cw-settings-lbl">Background</span>
            <CwColorPicker v-model="selectedBlock.styles.backgroundColor" />
          </div>
          <div class="cw-settings-row">
            <span class="cw-settings-lbl">Text color</span>
            <CwColorPicker v-model="selectedBlock.styles.textColor" />
          </div>
          <div class="cw-settings-row">
            <span class="cw-settings-lbl">Font size</span>
            <div class="cw-unit-input">
              <input type="number" class="cw-field-input" v-model.number="selectedBlock.styles.fontSize" min="10" max="32" style="width:60px" />
              <span class="cw-unit-tag">px</span>
            </div>
          </div>
        </div>
      </template>

      <!-- ── COLUMN SETTINGS ── -->
      <template v-if="selectedBlock.type === 'column'">
        <div class="cw-lp-section">
          <div class="cw-lp-section-title">Columns Layout</div>
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px;">
            <button 
              v-for="preset in COLUMN_PALETTE_PRESETS" 
              :key="preset.label" 
              type="button"
              class="cw-col-preset-card"
              :class="{ 'is-active-preset': selectedBlock.columnCount === preset.columnCount && JSON.stringify(selectedBlock.colWidths || []) === JSON.stringify(preset.colWidths) }"
              @click="setColumnPreset(selectedBlock, preset)"
              style="display: flex; align-items: center; gap: 8px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px 10px; background: #ffffff; cursor: pointer; transition: all 150ms;"
            >
              <div class="cw-col-preset-preview" style="width: 36px; height: 12px; border-color: #d1d5db; display: flex;">
                <div v-for="(width, idx) in preset.colWidths" :key="idx" :style="{ flex: width }" class="cw-col-preset-bar" style="height:100%; border-right:1px solid #e5e7eb; background:#cbd5e1"></div>
              </div>
              <span style="font-size: 11px; color: #374151; font-weight: 500;">{{ preset.label }}</span>
            </button>
          </div>
        </div>
      </template>

      <!-- ── DIVIDER SETTINGS ── -->
      <template v-if="selectedBlock.type === 'divider'">
        <div class="cw-lp-section">
          <div class="cw-lp-section-title">Appearance</div>
          <div class="cw-settings-row">
            <span class="cw-settings-lbl">Thickness</span>
            <div class="cw-unit-input">
              <input type="number" class="cw-field-input" v-model.number="selectedBlock.styles.dividerThickness" min="1" max="20" style="width:60px" />
              <span class="cw-unit-tag">px</span>
            </div>
          </div>
          <div class="cw-settings-row">
            <span class="cw-settings-lbl">Color</span>
            <CwColorPicker v-model="selectedBlock.styles.borderColor" />
          </div>
          <div class="cw-settings-row">
            <span class="cw-settings-lbl">Style</span>
            <div class="cw-divider-styles">
              <button 
                v-for="s in [['solid','-'],['dashed','- - -'],['dotted','· · ·'],['double','═']]" 
                :key="s[0]"
                type="button"
                class="cw-divider-style-btn"
                :class="{ 'is-active': (selectedBlock.styles.borderStyle || 'solid') === s[0] }"
                @click="selectedBlock.styles.borderStyle = s[0]"
                :title="s[0]"
              >
                {{ s[1] }}
              </button>
            </div>
          </div>
        </div>
      </template>

      <!-- ── VIDEO SETTINGS ── -->
      <template v-if="selectedBlock.type === 'video'">
        <input
          ref="videoFileInputRef"
          type="file"
          accept="video/mp4,video/webm,video/ogg,video/quicktime"
          style="display:none"
          @change="onVideoFileSelected(selectedBlock, $event)"
        />

        <div class="cw-lp-section">
          <div class="cw-lp-section-title">Video Source</div>

          <div class="cw-video-src-tabs">
            <button type="button" :class="['cw-video-src-tab', videoSourceTab === 'upload' && 'is-active']" @click="videoSourceTab = 'upload'">Upload</button>
            <button type="button" :class="['cw-video-src-tab', videoSourceTab === 'url' && 'is-active']" @click="videoSourceTab = 'url'">3rd Party URL</button>
          </div>

          <template v-if="videoSourceTab === 'upload'">
            <div class="cw-img-preview" @click="videoFileInputRef?.click()">
              <video v-if="selectedBlock.url && !isThirdPartyUrl(selectedBlock.url)" :src="selectedBlock.url" style="width:100%;height:100%;object-fit:contain" />
              <div v-else class="cw-img-preview-empty">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="28" height="28"><rect x="3" y="3" width="18" height="18" rx="2"/><path fill="currentColor" stroke="none" d="M9.5 8l7 4-7 4V8z"/></svg>
                <span>Click to upload video</span>
              </div>
              <div v-if="videoUploading" class="cw-img-uploading">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20" class="cw-spin"><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>
                Uploading…
              </div>
            </div>
            <div class="cw-img-actions">
              <button type="button" class="cw-img-action-btn" @click="videoFileInputRef?.click()" :disabled="videoUploading">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="13" height="13"><path d="M9.25 13.25a.75.75 0 001.5 0V4.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 101.09 1.03L9.25 4.636v8.614z"/><path d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z"/></svg>
                {{ selectedBlock.url && !isThirdPartyUrl(selectedBlock.url) ? 'Replace' : 'Upload video' }}
              </button>
              <button type="button" class="cw-img-action-btn" @click="openLibrary(selectedBlock, 'url', 'video', 'campaign-video')">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="13" height="13"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
                Library
              </button>
              <button v-if="selectedBlock.url && !isThirdPartyUrl(selectedBlock.url)" type="button" class="cw-img-action-btn cw-img-remove-btn" @click="selectedBlock.url = ''">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="13" height="13"><path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clip-rule="evenodd"/></svg>
                Remove
              </button>
            </div>
          </template>

          <template v-if="videoSourceTab === 'url'">
            <label class="cw-field-label" style="margin-top:8px">YouTube / Vimeo / other URL</label>
            <input type="url" class="cw-field-input" v-model="selectedBlock.url" placeholder="https://youtube.com/watch?v=..." />
            <div v-if="selectedBlock.url && isThirdPartyUrl(selectedBlock.url)" class="cw-video-embed-preview">
              <iframe :src="getVideoEmbedUrl(selectedBlock.url)" frameborder="0" allowfullscreen style="width:100%;aspect-ratio:16/9;border:0;border-radius:6px;margin-top:8px;display:block"></iframe>
            </div>
          </template>
        </div>
      </template>

      <!-- ── SOCIAL SETTINGS ── -->
      <template v-if="selectedBlock.type === 'social'">
        <div class="cw-lp-section">
          <div class="cw-lp-section-title">Social links</div>
          <draggable
            :list="selectedBlock.links"
            item-key="id"
            handle=".cw-social-drag"
            :animation="150"
          >
            <template #item="{ element: link }">
              <div class="cw-social-link-row">
                <span class="cw-social-drag">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="12" height="12"><path d="M10 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10 8.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM11.5 15.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z"/><path d="M5 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM5 8.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM6.5 15.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z"/></svg>
                </span>
                <span class="cw-social-link-icon" :style="{ background: getSocialPlatform(link.platform)?.color || '#6b7280' }" v-html="getSocialPlatform(link.platform)?.iconSvg"></span>
                <span class="cw-social-link-name">{{ getSocialPlatform(link.platform)?.name || link.platform }}</span>
                <button type="button" class="cw-social-link-del" @click="selectedBlock.links.splice(selectedBlock.links.indexOf(link), 1)" title="Remove">×</button>
                <div class="cw-social-link-url">
                  <input type="url" class="cw-field-input" v-model="link.url" placeholder="https://..." />
                </div>
              </div>
            </template>
          </draggable>
          <button type="button" class="cw-add-icons-btn" @click="openSocialPicker(selectedBlock)">Add icons</button>
        </div>

        <div class="cw-lp-section">
          <div class="cw-lp-section-title">Icon Design</div>
          <div class="cw-settings-row">
            <span class="cw-settings-lbl">Icon Size</span>
            <div class="cw-unit-input">
              <input type="number" class="cw-field-input" v-model.number="selectedBlock.iconSize" min="16" max="64" style="width:60px" />
              <span class="cw-unit-tag">px</span>
            </div>
          </div>
          <div class="cw-settings-row">
            <span class="cw-settings-lbl">Shape</span>
            <select class="cw-field-select" v-model="selectedBlock.iconShape">
              <option value="circle">Circle</option>
              <option value="rounded">Rounded</option>
              <option value="square">Square</option>
            </select>
          </div>
          <div class="cw-settings-row">
            <span class="cw-settings-lbl">Theme</span>
            <select class="cw-field-select" v-model="selectedBlock.iconTheme">
              <option value="colored">Colored</option>
              <option value="black">Black</option>
              <option value="white">White</option>
            </select>
          </div>
        </div>
      </template>

      <!-- ── HTML SETTINGS ── -->
      <template v-if="selectedBlock.type === 'html'">
        <div class="cw-lp-section">
          <div class="cw-lp-section-title-row">
            <span class="cw-lp-section-title" style="margin:0">Code editor</span>
            <button type="button" class="cw-expand-btn" @click="openHtmlEditor(selectedBlock)">Expand</button>
          </div>
          <div class="cw-code-editor">
            <div class="cw-code-lines" aria-hidden="true">
              <span v-for="n in htmlLineCount(selectedBlock.html)" :key="n">{{ n }}</span>
            </div>
            <textarea
              class="cw-code-textarea"
              v-model="selectedBlock.html"
              spellcheck="false"
              placeholder="<p>Your HTML here…</p>"
              @scroll="syncCodeScroll"
              ref="codeEditorRef"
            ></textarea>
          </div>
        </div>
      </template>

      <!-- ── TYPOGRAPHY (heading/text) ── -->
      <template v-if="['text', 'heading', 'column', 'footer'].includes(selectedBlock.type)">
        <div class="cw-lp-section">
          <div class="cw-lp-section-title">Typography</div>
          <div class="cw-settings-row">
            <span class="cw-settings-lbl">Font size</span>
            <div class="cw-unit-input">
              <input type="number" class="cw-field-input" v-model.number="selectedBlock.styles.fontSize" min="8" max="96" style="width:60px" />
              <span class="cw-unit-tag">px</span>
            </div>
          </div>
          <div class="cw-settings-row">
            <span class="cw-settings-lbl">Text color</span>
            <CwColorPicker v-model="selectedBlock.styles.color" />
          </div>
        </div>
      </template>

      <!-- Listing Type Selector for Text Block -->
      <template v-if="selectedBlock.type === 'text'">
        <div class="cw-lp-section">
          <div class="cw-lp-section-title">Listing Type</div>
          <div style="display: flex; background: #f3f4f6; border-radius: 8px; padding: 2px; gap: 2px; width: 100%;">
            <button
              type="button"
              class="cw-size-tab-btn"
              :class="{ 'is-active': (selectedBlock.listType || 'none') === 'none' }"
              @click="selectedBlock.listType = 'none'; saveHistory(); focusText(selectedBlock.id);"
              style="flex: 1; border: none; background: transparent; cursor: pointer; padding: 6px; font-size: 11px; font-weight: 500; color: #4b5563; border-radius: 6px; transition: all 150ms; text-align: center;"
            >
              None
            </button>
            <button
              type="button"
              class="cw-size-tab-btn"
              :class="{ 'is-active': selectedBlock.listType === 'bullet' }"
              @click="selectedBlock.listType = 'bullet'; saveHistory(); focusText(selectedBlock.id);"
              style="flex: 1; border: none; background: transparent; cursor: pointer; padding: 6px; font-size: 11px; font-weight: 500; color: #4b5563; border-radius: 6px; transition: all 150ms; text-align: center;"
            >
              Bulleted
            </button>
            <button
              type="button"
              class="cw-size-tab-btn"
              :class="{ 'is-active': selectedBlock.listType === 'numbered' }"
              @click="selectedBlock.listType = 'numbered'; saveHistory(); focusText(selectedBlock.id);"
              style="flex: 1; border: none; background: transparent; cursor: pointer; padding: 6px; font-size: 11px; font-weight: 500; color: #4b5563; border-radius: 6px; transition: all 150ms; text-align: center;"
            >
              Numbered
            </button>
          </div>
        </div>
      </template>

      <!-- ── FOOTER CONTENT SETTINGS ── -->
      <template v-if="selectedBlock.type === 'footer'">
        <div class="cw-lp-section">
          <div class="cw-lp-section-title">Footer Content</div>
          <div class="cw-settings-row" style="flex-direction: column; align-items: stretch; gap: 6px;">
            <span class="cw-settings-lbl">Notice Text</span>
            <textarea class="cw-field-input" v-model="selectedBlock.content" placeholder="You're receiving this email because you subscribed to our newsletter." rows="3" style="width: 100%; height: auto; padding: 6px;"></textarea>
          </div>
          <div class="cw-settings-row" style="flex-direction: column; align-items: stretch; gap: 6px; margin-top: 12px;">
            <span class="cw-settings-lbl">Copyright Text</span>
            <input type="text" class="cw-field-input" v-model="selectedBlock.copyright" placeholder="© 2026 Your Company · All rights reserved" style="width: 100%;" />
          </div>
          <div class="cw-settings-row" style="margin-top: 12px; align-items: center; gap: 8px;">
            <input type="checkbox" id="settings_show_unsub" v-model="selectedBlock.showUnsubscribe" />
            <label for="settings_show_unsub" class="cw-settings-lbl" style="margin:0; cursor:pointer;">Show Unsubscribe Link</label>
          </div>
          <div class="cw-settings-row" style="margin-top: 10px; align-items: center; gap: 8px;">
            <input type="checkbox" id="settings_show_privacy" v-model="selectedBlock.showPrivacy" />
            <label for="settings_show_privacy" class="cw-settings-lbl" style="margin:0; cursor:pointer;">Show Privacy Link</label>
          </div>
          <div class="form-group-sm" v-if="selectedBlock.showPrivacy" style="margin-top: 10px;">
            <label class="cw-field-label">Privacy Policy URL</label>
            <input type="url" class="cw-field-input" v-model="selectedBlock.privacyUrl" placeholder="https://..." />
          </div>
        </div>
      </template>

      <!-- ── LAYOUT SETTINGS (Common to most block types) ── -->
      <div class="cw-lp-section">
        <div class="cw-lp-section-title">Layout</div>

        <!-- Width -->
        <div v-if="selectedBlock.type !== 'image'" class="cw-settings-row">
          <span class="cw-settings-lbl">Width</span>
          <div class="cw-unit-input">
            <input type="number" v-model.number="selectedBlock.styles.width" min="10" max="100" class="cw-field-input" style="width:60px" />
            <span class="cw-unit-tag">%</span>
          </div>
        </div>

        <!-- Height (spacer only) -->
        <div v-if="selectedBlock.type === 'spacer'" class="cw-settings-row">
          <span class="cw-settings-lbl">Height</span>
          <div class="cw-unit-input">
            <input type="number" class="cw-field-input" v-model.number="selectedBlock.styles.height" min="4" max="400" style="width:60px" />
            <span class="cw-unit-tag">px</span>
          </div>
        </div>

        <!-- Block Alignment -->
        <div class="cw-settings-row">
          <span class="cw-settings-lbl">Block Alignment</span>
          <div class="cw-icon-btns">
            <button v-for="a in ['left','center','right']" :key="a" type="button" class="cw-icon-btn" :class="{ 'is-active': selectedBlock.styles.blockAlign === a }" @click="selectedBlock.styles.blockAlign = a" :title="a">
              <svg v-if="a==='left'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="13" height="13"><path d="M1 2h14v2H1zm0 4h9v2H1zm0 4h11v2H1z"/></svg>
              <svg v-else-if="a==='center'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="13" height="13"><path d="M1 2h14v2H1zm2 4h10v2H3zm-1 4h12v2H2z"/></svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="13" height="13"><path d="M1 2h14v2H1zm5 4h9v2H6zm-5 4h14v2H1z"/></svg>
            </button>
          </div>
        </div>

        <!-- Text Alignment (for text blocks) -->
        <template v-if="['text','heading','column','button','footer','logo'].includes(selectedBlock.type)">
          <div class="cw-settings-row">
            <span class="cw-settings-lbl">Text Alignment</span>
            <div class="cw-icon-btns">
              <button v-for="a in ['left','center','right','justify']" :key="a" type="button" class="cw-icon-btn" :class="{ 'is-active': selectedBlock.styles.textAlign === a }" @click="selectedBlock.styles.textAlign = a" :title="a">
                <svg v-if="a==='left'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="13" height="13"><path d="M1 2h14v1.5H1zm0 3.5h9v1.5H1zm0 3.5h11v1.5H1zm0 3.5h8v1.5H1z"/></svg>
                <svg v-else-if="a==='center'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="13" height="13"><path d="M1 2h14v1.5H1zm2 3.5h10v1.5H3zm-1 3.5h12v1.5H2zm2 3.5h8v1.5H4z"/></svg>
                <svg v-else-if="a==='right'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="13" height="13"><path d="M1 2h14v1.5H1zm5 3.5h9v1.5H6zm3 3.5h5v1.5h-5zm-7 3.5h12v1.5H2z"/></svg>
                <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="13" height="13"><path d="M1 2h14v1.5H1zm0 3.5h14v1.5H1zm0 3.5h14v1.5H1zm0 3.5h14v1.5H1z"/></svg>
              </button>
            </div>
          </div>
          <div class="cw-settings-row" v-if="['text','heading','column','footer'].includes(selectedBlock.type)">
            <span class="cw-settings-lbl">Line height</span>
            <div class="cw-unit-input">
              <input
                type="number"
                class="cw-field-input"
                :value="Math.round((selectedBlock.styles.lineHeight || 1.6) * 100)"
                @change="selectedBlock.styles.lineHeight = Math.max(50, Math.min(300, +$event.target.value)) / 100"
                min="80"
                max="300"
                step="10"
                style="width:60px"
              />
              <span class="cw-unit-tag">%</span>
            </div>
          </div>
        </template>
      </div>

      <!-- ── SPACING SETTINGS (Common to all except spacer) ── -->
      <div v-if="selectedBlock.type !== 'spacer'" class="cw-lp-section">
        <div class="cw-lp-section-title">Spacing</div>
        <div class="cw-spacing-label-row">
          <span class="cw-settings-lbl">Padding</span>
          <label class="cw-group-sides-label" style="display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-secondary); cursor:pointer;">
            <input type="checkbox" v-model="selectedBlock.styles.paddingGrouped" @change="onGroupPadding" />
            Group sides
          </label>
        </div>
        <div class="cw-4side-grid">
          <div class="cw-side-input">
            <input type="number" class="cw-field-input" v-model.number="selectedBlock.styles.paddingTop" min="0" @input="syncPadding(selectedBlock, 'Top')" />
            <span class="cw-side-label">T</span>
          </div>
          <div class="cw-side-input">
            <input type="number" class="cw-field-input" v-model.number="selectedBlock.styles.paddingRight" min="0" @input="syncPadding(selectedBlock, 'Right')" />
            <span class="cw-side-label">R</span>
          </div>
          <div class="cw-side-input">
            <input type="number" class="cw-field-input" v-model.number="selectedBlock.styles.paddingBottom" min="0" @input="syncPadding(selectedBlock, 'Bottom')" />
            <span class="cw-side-label">B</span>
          </div>
          <div class="cw-side-input">
            <input type="number" class="cw-field-input" v-model.number="selectedBlock.styles.paddingLeft" min="0" @input="syncPadding(selectedBlock, 'Left')" />
            <span class="cw-side-label">L</span>
          </div>
        </div>
        
        <div class="cw-spacing-label-row" style="margin-top:10px">
          <span class="cw-settings-lbl">Margin</span>
        </div>
        <div class="cw-4side-grid">
          <div class="cw-side-input">
            <input type="number" class="cw-field-input" v-model.number="selectedBlock.styles.marginTop" min="0" />
            <span class="cw-side-label">T</span>
          </div>
          <div class="cw-side-input">
            <input type="number" class="cw-field-input" v-model.number="selectedBlock.styles.marginRight" min="0" />
            <span class="cw-side-label">R</span>
          </div>
          <div class="cw-side-input">
            <input type="number" class="cw-field-input" v-model.number="selectedBlock.styles.marginBottom" min="0" />
            <span class="cw-side-label">B</span>
          </div>
          <div class="cw-side-input">
            <input type="number" class="cw-field-input" v-model.number="selectedBlock.styles.marginLeft" min="0" />
            <span class="cw-side-label">L</span>
          </div>
        </div>
      </div>

      <!-- ── BACKGROUND COLOR SETTINGS (Common to all except button) ── -->
      <div v-if="selectedBlock.type !== 'button'" class="cw-lp-section">
        <div class="cw-lp-section-title">Background</div>
        <div class="cw-settings-row">
          <span class="cw-settings-lbl">Color</span>
          <div style="display:flex; align-items:center; gap:8px;">
            <CwColorPicker v-model="selectedBlock.styles.bgColor" />
            <button 
              v-if="selectedBlock.styles.bgColor" 
              type="button" 
              class="btn btn-outline btn-xs" 
              style="padding: 2px 6px; font-size: 11px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-surface); cursor: pointer;"
              @click="selectedBlock.styles.bgColor = ''; saveHistory()"
            >
              Clear
            </button>
          </div>
        </div>
      </div>

      <!-- ── ROUNDED CORNERS SETTINGS (Common to all except spacer) ── -->
      <div v-if="selectedBlock.type !== 'spacer'" class="cw-lp-section">
        <div class="cw-lp-section-title">Rounded Corners</div>
        <div class="cw-settings-row">
          <span class="cw-settings-lbl">Radius</span>
          <div class="cw-unit-input">
            <input type="number" class="cw-field-input" v-model.number="selectedBlock.styles.borderRadius" min="0" max="60" style="width:60px" />
            <span class="cw-unit-tag">px</span>
          </div>
        </div>
      </div>

      <!-- ── BORDERS SETTINGS (Common to all except spacer) ── -->
      <div v-if="selectedBlock.type !== 'spacer'" class="cw-lp-section">
        <div class="cw-lp-section-title">Borders</div>
        <div class="cw-settings-row" style="margin-bottom:8px">
          <span class="cw-settings-lbl">Apply to all sides</span>
          <input type="checkbox" v-model="selectedBlock.styles.borderAllSides" style="accent-color:#6366f1;width:14px;height:14px" />
        </div>
        <div class="cw-settings-row">
          <span class="cw-settings-lbl">Size</span>
          <div class="cw-unit-input">
            <input type="number" class="cw-field-input" v-model.number="selectedBlock.styles.borderWidth" min="0" max="20" style="width:60px" />
            <span class="cw-unit-tag">px</span>
          </div>
        </div>
        <div class="cw-settings-row">
          <span class="cw-settings-lbl">Color</span>
          <CwColorPicker v-model="selectedBlock.styles.borderColor" />
        </div>
      </div>

    </div>

    <!-- Social Picker Overlay Modal -->
    <div v-if="showSocialPicker" class="modal-overlay is-open" @click.self="showSocialPicker = false">
      <div class="modal" style="max-width: 420px; width: 100%;">
        <div class="modal-header">
          <h3 class="modal-title">Select Social Icons</h3>
          <button type="button" class="modal-close" @click="showSocialPicker = false">✕</button>
        </div>
        <div class="modal-body" style="padding: 16px;">
          <input 
            type="text" 
            class="cw-field-input" 
            v-model="socialPickerSearch" 
            placeholder="Search platform..." 
            style="margin-bottom: 12px; width: 100%;" 
          />
          <div style="max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;">
            <label 
              v-for="platform in filteredSocialPlatforms" 
              :key="platform.id" 
              style="display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px; border-radius: 6px; transition: background 0.1s;"
              onmouseover="this.style.background='#f3f4f6'"
              onmouseout="this.style.background='transparent'"
            >
              <input 
                type="checkbox" 
                :value="platform.id" 
                v-model="socialPickerSelected" 
              />
              <span 
                style="display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;" 
                :style="{ background: platform.color }"
                v-html="platform.iconSvg"
              ></span>
              <span style="font-size: 13px; font-weight: 500; color: #374151;">{{ platform.name }}</span>
            </label>
          </div>
        </div>
        <div class="modal-footer" style="padding: 12px 16px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #e5e7eb;">
          <button type="button" class="btn btn-ghost btn-sm" @click="showSocialPicker = false">Cancel</button>
          <button type="button" class="btn btn-primary btn-sm" @click="applySocialIcons">Apply</button>
        </div>
      </div>
    </div>

    <MediaLibraryModal
      :open="libraryOpen"
      :type="libraryType"
      :collection="libraryCollection"
      @close="libraryOpen = false"
      @select="onLibrarySelect"
    />

  </div>
</template>

<script setup>
import { ref, computed, inject } from 'vue';
import draggable from 'vuedraggable';
import CwColorPicker from '@/Components/CwColorPicker.vue';
import MediaLibraryModal from '@/Components/MediaLibrary/MediaLibraryModal.vue';
import {
  blockTypeLabel,
  COLUMN_PALETTE_PRESETS,
  SOCIAL_PLATFORMS,
  getSocialPlatform,
  isThirdPartyUrl,
  getVideoEmbedUrl
} from './editorUtils';

// Inject shared state and logic from EmailEditor wrapper
const {
  selectedBlockId,
  selectedBlock,
  saveHistory,
  deleteBlock,
  openHtmlEditor,
  focusText
} = inject('editorState');

const logoFileInputRef = ref(null);
const imageFileInputRef = ref(null);
const videoFileInputRef = ref(null);

const imageUploading = ref(false);
const videoUploading = ref(false);
const videoSourceTab = ref('upload');

// ── Media library picker ──
const libraryOpen = ref(false);
const libraryType = ref(null);
const libraryCollection = ref('library');
const libraryTarget = ref(null);

function openLibrary(block, field, type, collection) {
  libraryTarget.value = { block, field };
  libraryType.value = type;
  libraryCollection.value = collection;
  libraryOpen.value = true;
}

function onLibrarySelect(item) {
  if (libraryTarget.value) {
    libraryTarget.value.block[libraryTarget.value.field] = item.url;
    saveHistory();
  }
  libraryOpen.value = false;
}

const showSocialPicker = ref(false);
const socialPickerSearch = ref('');
const socialPickerSelected = ref([]);
let socialPickerBlock = null;

const filteredSocialPlatforms = computed(() => {
  const q = socialPickerSearch.value.toLowerCase();
  return q ? SOCIAL_PLATFORMS.filter(p => p.name.toLowerCase().includes(q)) : SOCIAL_PLATFORMS;
});

function deselectBlock() {
  selectedBlockId.value = null;
}

function syncPadding(block, changed) {
  if (!block.styles.paddingGrouped) return;
  const val = block.styles[`padding${changed}`];
  block.styles.paddingTop = block.styles.paddingRight = block.styles.paddingBottom = block.styles.paddingLeft = val;
}

function onGroupPadding(e) {
  if (e.target.checked && selectedBlock.value) {
    const v = selectedBlock.value.styles.paddingTop;
    selectedBlock.value.styles.paddingRight = selectedBlock.value.styles.paddingBottom = selectedBlock.value.styles.paddingLeft = v;
  }
}

function setColumnPreset(block, preset) {
  block.columnCount = preset.columnCount;
  block.colWidths = preset.colWidths;
  const targetCount = preset.columnCount;
  while (block.columns.length < targetCount) {
    block.columns.push({ id: crypto.randomUUID(), blocks: [] });
  }
  while (block.columns.length > targetCount) {
    block.columns.pop();
  }
  saveHistory();
}

function openSocialPicker(block) {
  socialPickerBlock = block;
  socialPickerSelected.value = block.links.map(l => l.platform);
  socialPickerSearch.value = '';
  showSocialPicker.value = true;
}

function applySocialIcons() {
  if (!socialPickerBlock) return;
  const existing = new Map(socialPickerBlock.links.map(l => [l.platform, l]));
  const newLinks = socialPickerSelected.value.map(id =>
    existing.get(id) || { id: crypto.randomUUID(), platform: id, url: '' }
  );
  socialPickerBlock.links.splice(0, socialPickerBlock.links.length, ...newLinks);
  showSocialPicker.value = false;
  saveHistory();
}

async function onImageFileSelected(block, event) {
  const file = event.target.files?.[0];
  if (!file) return;
  imageUploading.value = true;
  try {
    const formData = new FormData();
    formData.append('image', file);
    const res = await window.axios.post(route('campaigns.upload-image'), formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
    });
    block.src = res.data.url;
    saveHistory();
  } catch (err) {
    alert('Image upload failed. Please try again.');
  } finally {
    imageUploading.value = false;
    if (imageFileInputRef.value) imageFileInputRef.value.value = '';
    if (logoFileInputRef.value) logoFileInputRef.value.value = '';
  }
}

async function onVideoFileSelected(block, event) {
  const file = event.target.files?.[0];
  if (!file) return;
  videoUploading.value = true;
  try {
    const formData = new FormData();
    formData.append('video', file);
    const res = await window.axios.post(route('campaigns.upload-video'), formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
    });
    block.url = res.data.url;
    videoSourceTab.value = 'upload';
    saveHistory();
  } catch (err) {
    alert('Video upload failed. Please try again.');
  } finally {
    videoUploading.value = false;
    if (videoFileInputRef.value) videoFileInputRef.value.value = '';
  }
}

function htmlLineCount(html) {
  const lines = (html || '').split('\n').length;
  return Array.from({ length: Math.max(lines, 1) }, (_, i) => i + 1);
}

function syncCodeScroll(e) {
  const codeLines = e.target.previousSibling;
  if (codeLines) codeLines.scrollTop = e.target.scrollTop;
}

</script>

<style scoped>
.cw-size-tab-btn.is-active {
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style>
