{{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>

  <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="list_goods_id" value="{{$.Keyword}}">
    <input type="hidden" name="status" value="{{$.StatusFilter}}">
    <input type="hidden" name="shop" value="{{$.ShopFilter}}">
    <input type="hidden" name="image" value="{{$.ImageFilter}}">
    <input type="hidden" name="page" value="{{$.CurrentPage}}">
    <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="list_goods_id" value="{{$.Keyword}}">
    <input type="hidden" name="status" value="{{$.StatusFilter}}">
    <input type="hidden" name="shop" value="{{$.ShopFilter}}">
    <input type="hidden" name="image" value="{{$.ImageFilter}}">
    <input type="hidden" name="page" value="{{$.CurrentPage}}">
    {{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>
  {{if not .SKUs}}
  <p class="missing">这个商品在报表里没有任何 SKU。</p>
  {{else}}
  <div class="table-wrap">
    <table>
      <thead><tr><th>规格ID</th><th>颜色</th><th>尺码</th><th>建議</th><th>状态</th></tr></thead>
      <tbody>
        {{range .SKUs}}
        <tr{{if .Pending}} class="row-warn"{{end}}><td>{{.SKUID}}</td><td>{{.Color}}</td><td>{{.Size}}</td><td>{{.Advice}}</td><td>{{.StatusText}}</td></tr>
        {{if .Pending}}<tr class="row-warn"><td colspan="5"><small>原文：{{.SpecRaw}}</small></td></tr>{{end}}
        {{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}}