{{define "shopee/detail_modal"}}
{{with .D}}
<div class="modal-head">
  <h2>商品 {{.GoodsID}}</h2>
  <button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
</div>

<div class="modal-body form-stack">
  <dl class="detail">
    <dt>商品名称</dt><dd>{{.Title}}</dd>
    <dt>蝦皮状态</dt><dd>{{.ShopeeStatus}}</dd>
    <dt>主商品货号</dt><dd>{{.MainSKUCode}}</dd>
    <dt>蝦皮店铺</dt><dd>{{if .ShopName}}{{.ShopName}}{{else}}—{{end}}</dd>
    <dt>店铺来源 / 观测时间</dt><dd>{{.ShopNameSourceText}} / {{if .ShopNameObservedAt}}{{.ShopNameObservedAt}}{{else}}—{{end}}</dd>
    <dt>蝦皮主图</dt><dd>{{if .ImageURL}}<a href="{{.ImageURL}}" target="_blank" rel="noopener noreferrer"><img src="{{.ImageURL}}" alt="{{.Title}} 主图" class="detail-product-image" loading="lazy" referrerpolicy="no-referrer"></a>{{else}}无图{{end}}</dd>
    <dt>图片来源 / 观测时间</dt><dd>{{.ImageSourceText}} / {{if .ImageObservedAt}}{{.ImageObservedAt}}{{else}}—{{end}}</dd>
    <dt>PDD 商品 ID</dt><dd{{if .PddMissing}} class="missing"{{end}}>{{if .PddGoodsID}}{{.PddGoodsID}}{{else}}未关联{{end}}</dd>
    <dt>采集状态</dt><dd>{{.StatusText}}{{if .CollectMsg}}：{{.CollectMsg}}{{end}}</dd>
  </dl>

  <p><a class="button-link primary" href="{{$.ColorMappingURL}}">进入颜色匹配</a></p>

  <form method="post" action="/shopee/save" class="form-stack">
    <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
    <input type="hidden" name="shopee_goods_id" value="{{.GoodsID}}">
    <input type="hidden" name="q" value="{{$.Keyword}}">
    <input type="hidden" name="search_field" value="{{$.SearchField}}">
    <input type="hidden" name="status" value="{{$.StatusFilter}}">
    <input type="hidden" name="deleted" value="{{if $.DeletedFilter}}1{{end}}">
    <input type="hidden" name="unlinked" value="{{if $.UnlinkedFilter}}1{{end}}">
    <input type="hidden" name="page" value="{{$.CurrentPage}}">
    <input type="hidden" name="page_size" value="{{$.CurrentPageSize}}">
    <div class="field">
      <label for="shopee-pdd-url">PDD 商品链接</label>
      <input id="shopee-pdd-url" type="url" name="pdd_url" value="{{.PddURL}}" required placeholder="https://mobile.yangkeduo.com/goods.html?goods_id=...">
      <small>保存后会按链接中的 goods_id 建立或复用 PDD 商品档案。</small>
    </div>
    {{if .PddGoodsID}}
    <label class="check-line">
      <input type="checkbox" name="confirm_replace" value="1">
      如果新链接是其他商品，我确认更换当前关联（现有规格映射不会删除）
    </label>
    {{end}}
    <div><button type="submit" class="primary">保存 PDD 关联</button></div>
  </form>

  {{if .PddGoodsID}}
  <form method="post" action="/shopee/collect" class="inline">
    <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
    <input type="hidden" name="shopee_goods_id" value="{{.GoodsID}}">
    <input type="hidden" name="q" value="{{$.Keyword}}">
    <input type="hidden" name="search_field" value="{{$.SearchField}}">
    <input type="hidden" name="status" value="{{$.StatusFilter}}">
    <input type="hidden" name="deleted" value="{{if $.DeletedFilter}}1{{end}}">
    <input type="hidden" name="unlinked" value="{{if $.UnlinkedFilter}}1{{end}}">
    <input type="hidden" name="page" value="{{$.CurrentPage}}">
    <input type="hidden" name="page_size" value="{{$.CurrentPageSize}}">
    {{if .CanCollect}}
    <button type="submit">{{if eq .CollectStatus "failed"}}重新创建采集任务{{else}}创建采集任务{{end}}</button>
    {{else}}
    <span class="hint">{{if eq .CollectStatus "collecting"}}采集任务正在执行，请稍后刷新。{{else}}PDD 数据已采集，可继续处理顺运宝规格映射。{{end}}</span>
    {{end}}
  </form>
  {{end}}

  <h3>规格（{{len .SKUs}} 个{{if gt .PendingCount 0}}，{{.PendingCount}} 个待人工补{{end}}）</h3>
  {{$product := .}}
  {{if not .SKUs}}
  <p class="missing">这个商品在报表里没有任何 SKU。</p>
  {{else}}
  <div class="table-wrap">
    <table>
      <thead><tr><th>蝦皮 SKU ID</th><th>规格原文</th><th>颜色</th><th>尺码</th><th>建议说明</th><th>状态</th><th>操作</th></tr></thead>
      <tbody>
        {{range .SKUs}}
        <tr{{if .Pending}} class="row-warn"{{end}}>
          <td>{{if .SKUID}}{{.SKUID}}{{else}}—{{end}}</td>
          <td class="truncate" title="{{.SpecRaw}}">{{if .SpecRaw}}{{.SpecRaw}}{{else}}—{{end}}</td>
          <td>{{if .Color}}{{.Color}}{{else}}—{{end}}</td>
          <td>{{if .Size}}{{.Size}}{{else}}—{{end}}</td>
          <td>{{if .Advice}}{{.Advice}}{{else}}—{{end}}</td>
          <td>{{.StatusText}}</td>
          <td>
            <details class="sku-editor">
              <summary>编辑</summary>
              <form method="post" action="/shopee/spec/save" class="sku-edit-form">
                <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
                <input type="hidden" name="shopee_goods_id" value="{{$product.GoodsID}}">
                <input type="hidden" name="sku_record_id" value="{{.RecordID}}">
                <input type="hidden" name="open_id" value="{{$product.GoodsID}}">
                <input type="hidden" name="q" value="{{$.Keyword}}">
                <input type="hidden" name="search_field" value="{{$.SearchField}}">
                <input type="hidden" name="status" value="{{$.StatusFilter}}">
                <input type="hidden" name="deleted" value="{{if $.DeletedFilter}}1{{end}}">
                <input type="hidden" name="unlinked" value="{{if $.UnlinkedFilter}}1{{end}}">
                <input type="hidden" name="page" value="{{$.CurrentPage}}">
                <input type="hidden" name="page_size" value="{{$.CurrentPageSize}}">
                <div class="sku-edit-grid">
                  <label class="sku-edit-field"><span>颜色</span><input type="text" name="color" value="{{.Color}}" maxlength="500" required></label>
                  <label class="sku-edit-field"><span>尺码</span><input type="text" name="size" value="{{.Size}}" maxlength="500" required></label>
                  <label class="sku-edit-field sku-edit-advice"><span>建议说明</span><input type="text" name="advice" value="{{.Advice}}" maxlength="500"></label>
                </div>
                <small>规格原文和 SKU 身份不会修改；保存后这三个字段按人工值保护。</small>
                <div><button type="submit" class="primary">保存规格</button></div>
              </form>
            </details>
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
  {{end}}

  <h3>顺运宝观测规格（{{len .SybObservations}} 个）</h3>
  <p class="hint">以下是历史货运单观测数据，不是正式蝦皮 SKU；价格为最近货运单售价（台币），不是 PDD 人民币采购价。</p>
  {{if .SybObservations}}
  <div class="table-wrap"><table><thead><tr><th>规格原文</th><th>最近售价</th><th>订单数</th><th>累计数量</th><th>最近图片</th><th>最后出现</th><th>正式 SKU 匹配</th></tr></thead><tbody>
  {{range .SybObservations}}<tr><td>{{.SpecRaw}}</td><td>{{.PriceText}}</td><td>{{.OrderCount}}</td><td>{{.TotalQuantity}}</td><td>{{if .ImageURL}}<a href="{{.ImageURL}}" target="_blank" rel="noopener"><img src="{{.ImageURL}}" alt="顺运宝观测图片" class="thumb" loading="lazy"></a>{{else}}—{{end}}</td><td>{{.LastObservedAt}}</td><td>{{.MatchText}}{{if .MatchedSKUID}}：{{.MatchedSKUID}}（{{.Color}} / {{.Size}}）{{end}}</td></tr>{{end}}
  </tbody></table></div>
  {{else}}<p class="hint">顺运宝尚未观测到这个商品的有效规格。</p>{{end}}
</div>

<div class="modal-foot"><button type="button" data-modal-close>关闭</button></div>
{{end}}
{{end}}