<!-- 悬浮球模板 -->
<template id="tmpl-ball">
  <div class="nm-ball" id="nm-ball">
    <img src="{{EXTENSION_URL}}icons/logo48.png" alt="Logo">
  </div>
</template>

<!-- 主面板模板 -->
<template id="tmpl-panel">
  <div class="nm-panel">
    <div class="nm-header" id="nm-header">
      <div class="nm-header-btn" id="btn-minimize" title="最小化">
        <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
      </div>
      
      <div class="nm-header-title">3Q牛马-重尺信息工具</div>

      <!-- 动态进度环 (Replaces Heart Icon) -->
      <div class="progress-ring-container" id="header-progress">
        <svg class="progress-ring" width="40" height="40" viewBox="0 0 40 40">
            <circle class="progress-ring__circle" stroke="#f0f0f0" stroke-width="3" fill="transparent" r="16" cx="20" cy="20"/>
            <circle id="progress-circle" class="progress-ring__circle" stroke="#1890ff" stroke-width="3" fill="transparent" r="16" cx="20" cy="20" stroke-dasharray="100.53" stroke-dashoffset="100.53"/>
        </svg>
        <div class="progress-text" id="progress-text">0%</div>
      </div>
    </div>
    
    <div class="nm-content">
      <!-- Custom Fill Content (Default) -->
      <div id="custom-fill-content">
          
          <div style="display: flex; gap: 10px; margin-bottom: 15px;">
            <button class="nm-btn" id="btn-extract-excel" style="flex: 1; padding: 12px 0; font-size: 13px;">提取商品信息</button>
            <button class="nm-btn" id="btn-copy-data" style="flex: 1; padding: 12px 0; font-size: 13px;">导出商品数据</button>
          </div>
          
          <div id="upload-area" class="nm-upload-area">
            <p style="margin: 0;">点击或拖拽 Excel 文件到此处</p>
            <input type="file" id="file-input" accept=".xlsx, .xls" style="display: none;">
          </div>

          <!-- Status Bar -->
          <div class="status-bar" style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px; margin-bottom: 10px; font-size: 12px;">
             <div id="plugin-status" style="color: #faad14; font-weight: bold;">● 待机中</div>
             <div id="file-status" style="color: #67c23a; display: none; align-items: center;">
                准备就绪: <span id="file-name" style="margin-right: 5px;"></span>
                <span id="btn-copy-uploaded" title="复制上传数据" style="cursor: pointer; display: inline-flex; align-items: center;">
                  <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
                </span>
             </div>
          </div>

          <!-- 嵌入式控制台 (Moved below upload) -->
          <div class="mini-console" id="console">
            <div class="console-header">
                <span>EXECUTION LOG</span>
                <span id="btn-clear-log" style="cursor: pointer; color: #888;">清空</span>
            </div>
            <div class="console-body" id="console-body">
                <div class="log-line">> 系统初始化完成...</div>
                <div class="log-line">> 等待任务指令...</div>
            </div>
          </div>

      </div>
    </div>

    <div class="nm-footer">
      <button class="nm-btn nm-btn-start-custom" id="btn-start" style="flex: 1;">开始</button>
      <button class="nm-btn nm-btn-danger" id="btn-stop" style="flex: 1;">停止</button>
      <button class="nm-btn nm-btn-tutorial-custom" id="btn-tutorial" style="flex: 1;">教程</button>
    </div>
  </div>

  <!-- Generic Modal (Existing) -->
  <div id="nm-modal" class="nm-modal hidden">
    <div class="nm-modal-content">
      <div class="nm-modal-header">
        <span class="nm-modal-title">提示</span>
        <span class="nm-modal-close">&times;</span>
      </div>
      <div class="nm-modal-body" id="nm-modal-body"></div>
      <div class="nm-modal-footer">
        <button class="nm-btn nm-btn-primary" id="nm-modal-confirm">确定</button>
      </div>
    </div>
  </div>

  <!-- Achievement Modal (New) -->
  <div class="achievement-modal" id="result-modal">
    <h2 style="margin: 0 0 10px 0;">🎉 任务完成!</h2>
    <div class="stat-card">
        <div class="stat-val" id="stat-count">0</div>
        <div class="stat-label">成功填充 SKU</div>
    </div>
    <div class="stat-card">
        <div class="stat-val" id="stat-time">0s</div>
        <div class="stat-label">耗时</div>
    </div>
    <p style="font-size: 12px; color: #888;">
        <a href="https://www.3qniuma.com/" target="_blank" style="color: #888; text-decoration: none; border-bottom: 1px dashed #888; transition: color 0.3s;">
            3Q牛马，一个为躺平而创造的打工人
        </a>
    </p>
    <button class="nm-btn nm-btn-primary" id="btn-close-achievement">关闭</button>
  </div>

  <!-- Drop Zone Overlay (New) -->
  <div class="drop-zone-overlay" id="drop-zone">
    <div class="drop-box">
        <div class="drop-icon">📂</div>
        <div class="drop-text">释放文件以极速上传</div>
        <div style="margin-top: 10px; color: var(--cyber-color); font-size: 14px;">支持 .xlsx 格式</div>
    </div>
  </div>
</template>

  <!-- Generic Modal (Existing) -->
  <div id="nm-modal" class="nm-modal hidden">
    <div class="nm-modal-content">
      <div class="nm-modal-header">
        <span class="nm-modal-title">提示</span>
        <span class="nm-modal-close">&times;</span>
      </div>
      <div class="nm-modal-body" id="nm-modal-body"></div>
      <div class="nm-modal-footer">
        <button class="nm-btn nm-btn-primary" id="nm-modal-confirm">确定</button>
      </div>
    </div>
  </div>

  <!-- Achievement Modal (New) -->
  <div class="achievement-modal" id="result-modal">
    <h2 style="margin: 0 0 10px 0;">🎉 任务完成!</h2>
    <div class="stat-card">
        <div class="stat-val" id="stat-count">0</div>
        <div class="stat-label">成功填充 SKU</div>
    </div>
    <div class="stat-card">
        <div class="stat-val" id="stat-time">0s</div>
        <div class="stat-label">耗时</div>
    </div>
    <p style="font-size: 12px; color: #888;">
        <a href="https://www.3qniuma.com/" target="_blank" style="color: #888; text-decoration: none; border-bottom: 1px dashed #888; transition: color 0.3s;">
            3Q牛马，一个为躺平而创造的打工人
        </a>
    </p>
    <button class="nm-btn nm-btn-primary" id="btn-close-achievement">关闭</button>
  </div>

  <!-- Drop Zone Overlay (New) -->
  <div class="drop-zone-overlay" id="drop-zone">
    <div class="drop-box">
        <div class="drop-icon">📂</div>
        <div class="drop-text">释放文件以极速上传</div>
        <div style="margin-top: 10px; color: var(--cyber-color); font-size: 14px;">支持 .xlsx .csv 格式</div>
    </div>
  </div>

</template>