// 商品详情视图 - 共享 UI 组件（首页详情 + 我的详情复用）
// Props: product, curImg, setCurImg, statusBadge (optional), topHint (optional)

function ProductDetailView(props) {
  var product = props.product;
  var curImg = props.curImg || 0;
  var setCurImg = props.setCurImg || function(){};
  var statusBadge = props.statusBadge;
  var topHint = props.topHint;

  if (!product) {
    return React.createElement('div',{style:{textAlign:'center',padding:40,color:'#999'}},'商品数据为空');
  }

  var productNo = product.product_no ? String(product.product_no).trim() : '';
  var cfg = (window.NK && window.NK.ConfigUtil && window.NK.ConfigUtil.parse) ? window.NK.ConfigUtil.parse(product) : null;
  console.log('ProductDetailView DEBUG - raw detailConfig:', product.detailConfig);
  console.log('ProductDetailView DEBUG - parsed cfg:', cfg);
  if (cfg && cfg.legendaryMount) console.log('ProductDetailView DEBUG - legendaryMount:', JSON.stringify(cfg.legendaryMount));
  var legDigest = (window.NK && window.NK.ConfigUtil) ? NK.ConfigUtil.legendary(cfg) : "";
  var legColored = (window.NK && window.NK.ConfigUtil) ? NK.ConfigUtil.legendaryColored(cfg) : [];
  var mtDigest = (window.NK && window.NK.ConfigUtil) ? NK.ConfigUtil.mount(cfg) : "";
  var unDigest = (window.NK && window.NK.ConfigUtil) ? NK.ConfigUtil.unlock(cfg) : "";
  var attrUnDigest = unDigest ? unDigest.replace(/^T8\s*/, '').replace(/\s*\|\s*(法师)/, '\n$1') : '无';
  var flyLevel = (window.NK && window.NK.ConfigUtil) ? NK.ConfigUtil.flyingLevel(cfg) : "";
  var flyCombo = (window.NK && window.NK.ConfigUtil) ? NK.ConfigUtil.flyingCombo(cfg) : "";
  var _preview=React.useState(null);var preview=_preview[0],setPreview=_preview[1];
  var _toast=React.useState('');var toast=_toast[0],setToast=_toast[1];

  var _shotIdx=React.useState(null);var shotIdx=_shotIdx[0],setShotIdx=_shotIdx[1];
  var _tgCfg=React.useState({enabled:true,groupName:'奶块交流①群',groupNumber:'791661701'});var tgCfg=_tgCfg[0],setTgCfg=_tgCfg[1];

  React.useEffect(function(){
    if(!toast)return;
    var t=setTimeout(function(){setToast('');},2000);
    return function(){clearTimeout(t);};
  },[toast]);

  React.useEffect(function(){
    fetch('/api/site-config/trade-group').then(function(r){return r.json();}).then(function(d){
      if(d&&d.code===0&&d.data){setTgCfg(d.data);}
    }).catch(function(){});
  },[]);

  var coverImages = (product.coverImages && product.coverImages.length>0) ? product.coverImages.filter(function(ci){return ci && ci.image_url;}) : ((product.images||[]).filter(function(ci){return ci && ci.image_url;}));
  var detailImages = (product.detailImages||[]).filter(function(di){return di && di.image_url;});
  var totalImgs = coverImages.length;

  var fmtPrice = function(p){ return '¥' + Number(p).toFixed(2); };

  // 账号类型
  var accountType = '普通账号';
  try {
    if (cfg) {
      var hasLeg=false, hasMount=false, hasUnlock=false;
      if (cfg.legendaryEquipment) {
        if (cfg.legendaryEquipment.none === true) { hasLeg = false; }
        else {
          var keys = Object.keys(cfg.legendaryEquipment);
          for (var i=0;i<keys.length;i++) {
            if (keys[i] === 'none') continue;
            if (Array.isArray(cfg.legendaryEquipment[keys[i]]) && cfg.legendaryEquipment[keys[i]].length>0) { hasLeg=true; break; }
          }
        }
      }
      if (cfg.legendaryMount) {
        var lm2 = cfg.legendaryMount;
        if (lm2.mc && !lm2.mountCount) lm2.mountCount = lm2.mc;
        if (lm2.zods && !lm2.zodiacs) lm2.zodiacs = lm2.zods;
        if ((parseInt(lm2.mountCount)||0) >= 4) hasMount=true;
        else if (lm2.flyCount || (lm2.zodiacs&&lm2.zodiacs.length)) hasMount=true;
      }
      if (cfg.equipmentUnlock) {
        var tkeys = Object.keys(cfg.equipmentUnlock);
        for (var j=0;j<tkeys.length;j++) {
          var t = cfg.equipmentUnlock[tkeys[j]];
          if (t&&t.profs) { var pkeys=Object.keys(t.profs); for (var k=0;k<pkeys.length;k++) { if (t.profs[pkeys[k]]&&t.profs[pkeys[k]].length) { hasUnlock=true; break; } } }
          if (hasUnlock) break;
        }
      }
      if (hasLeg&&hasMount&&hasUnlock) accountType='综合号';
      else if (hasLeg) accountType='传说装备号';
      else if (hasMount) accountType='坐骑号';
      else if (hasUnlock) accountType='解锁号';
    }
  } catch(_){}

  // 渲染带颜色的传说装备摘要
  var renderColoredLeg = function() {
    if (!legColored || !legColored.length) return legDigest || '暂无高阶传说';
    return React.createElement('span', null,
      legColored.map(function(item, i) {
        if (item.color) {
          return React.createElement('span', { key: i, style: { color: item.color, fontWeight: 700 } }, item.text);
        }
        return React.createElement('span', { key: i, style: { color: '#999' } }, item.text);
      })
    );
  };

  var renderConfigLeg = function() {
    if (!legColored || !legColored.length) return legDigest;
    return React.createElement('span', null,
      legColored.map(function(item, i) {
        if (item.color) {
          return React.createElement('span', { key: i, style: { color: item.color, fontWeight: 700 } }, item.text);
        }
        return React.createElement('span', { key: i, style: { color: '#999' } }, item.text);
      })
    );
  };

  return React.createElement('div',null,
    topHint && React.createElement('div',{className:'dt-hint'},topHint),
    statusBadge && React.createElement('div',{style:{padding:'6px 16px 0'}},statusBadge),

    // 1. 封面图
    totalImgs>0
      ? React.createElement('div',{className:'dt-gallery'},
          React.createElement('div',{className:'dt-gallery-view'},
            React.createElement('img',{src:coverImages[curImg]?coverImages[curImg].image_url:'',alt:product.title,
              className:'dt-gallery-img',onError:function(e){e.target.style.display='none';}}),
            // Left tap zone (prev)
            React.createElement('div',{className:'dt-gallery-nav dt-gallery-prev',onClick:function(e){e.stopPropagation();if(totalImgs>1)setCurImg((curImg-1+totalImgs)%totalImgs);}},
              React.createElement('span',{className:'dt-gallery-arrow'},'\u2039')
            ),
            // Center tap zone (zoom)
            React.createElement('div',{className:'dt-gallery-nav dt-gallery-center',onClick:function(e){e.stopPropagation();var src=coverImages[curImg]?coverImages[curImg].image_url:'';if(src){console.log('[detail zoom] center clicked:',src);setPreview(src)};}},
            ),
            // Right tap zone (next)
            React.createElement('div',{className:'dt-gallery-nav dt-gallery-next',onClick:function(e){e.stopPropagation();if(totalImgs>1)setCurImg((curImg+1)%totalImgs);}},
              React.createElement('span',{className:'dt-gallery-arrow'},'\u203A')
            )
          ),
          totalImgs>1 && React.createElement('div',{className:'dt-gallery-counter'},(curImg+1)+'/'+totalImgs),
          totalImgs>1 && React.createElement('div',{className:'dt-gallery-dots'},
            coverImages.map(function(_,i){return React.createElement('span',{key:i,className:'dt-gallery-dot'+(i===curImg?' active':'')});})
          )
        )
      : React.createElement('div',{className:'dt-gallery-empty'},
          React.createElement('span',{style:{fontSize:48}},'\u{1f3ae}'),
          React.createElement('div',{style:{color:'#999',fontSize:13,marginTop:8}},'暂无封面图')
        ),

    // 2. 价格 + 浏览
    React.createElement('div',{className:'dt-price-row'},
      React.createElement('span',{className:'dt-price'},fmtPrice(product.price)),
      React.createElement('span',{className:'dt-views'},'\u{1f441} '+(product.view_count||0)+' 次浏览')
    ),

    // 3. 标题
    React.createElement('div',{className:'dt-title'},(productNo ? '\u3010'+productNo+'\u3011' : '\u3010\u7F16\u53F7\u5F85\u8865\u9F50\u3011') + product.title),

    // 4. 服务器和 T8 并排
    (product.server||unDigest) && React.createElement("div",{className:"dt-config-tags"},
      product.server && React.createElement("span",{className:"dt-server-tag"},product.server),
      unDigest && React.createElement("span",{className:"dt-config-unlock"},unDigest)
    ),

    // 5. 传说装备和坐骑
    (legDigest||mtDigest)
      ? React.createElement("div",{className:"dt-config-tags"},
          legDigest && React.createElement("span",{className:"dt-config-leg"},React.createElement("img",{src:"/assets/items/jian.png",style:{width:16,height:16,verticalAlign:"middle",marginRight:4},onError:function(e){e.target.style.display="none";}}),renderConfigLeg()),
          mtDigest && React.createElement("span",{className:"dt-config-mount"},React.createElement("img",{src:"/assets/items/long.png",style:{width:16,height:16,verticalAlign:"middle",marginRight:4},onError:function(e){e.target.style.display="none";}}),mtDigest)
        )
      : (product.server||unDigest) ? null : React.createElement("div",{className:"dt-config-tags"},
          React.createElement("span",{style:{fontSize:12,color:"#bbb"}},"暂无配置信息")
        ),

    // 6. 账号属性
    React.createElement('div',{className:'dt-section'},
      React.createElement('div',{className:'dt-section-title'},'账号属性'),
      React.createElement('div',{className:'dt-attr-grid'},
        makeAttr('商品编号',productNo || '编号待补齐'),
        makeAttr('服务器',product.server||'未填写'),
        makeAttr('传说装备',legDigest ? renderColoredLeg() : '无'),
        makeAttr('T8装备解锁',attrUnDigest),
        makeAttr('飞行等级',flyLevel||'未填写'),
        makeAttr('飞行组合',mtDigest||'无')
      )
    ),

    // 6. 商品描述
    React.createElement('div',{className:'dt-section'},
      React.createElement('div',{className:'dt-section-title'},'商品描述'),
      React.createElement('div',{className:'dt-desc'},
        product.description ? product.description : '卖家暂未填写商品描述'
      )
    ),


    // 7. 详细截图
    React.createElement('div',{className:'dt-section'},
      React.createElement('div',{className:'dt-section-title'},'商品详细截图'),
      detailImages.length>0
        ? React.createElement('div',{className:'dt-detail-imgs'},
            detailImages.map(function(img,i){return React.createElement('img',{key:i,src:img.image_url,alt:'详情图'+(i+1),
              className:'dt-detail-img',onClick:function(){setShotIdx(i);},onError:function(e){e.target.style.display='none';}});})
          )
        : React.createElement('div',{style:{color:'#bbb',fontSize:13,textAlign:'center',padding:'20px 0'}},'暂无更多截图')
    ),


    // 玩家交流群
    tgCfg.enabled !== false ? React.createElement('div',{className:'dt-section'},
      React.createElement('div',{className:'dt-section-title'},'玩家交流群'),
      React.createElement('div',{className:'dt-desc',style:{padding:'12px 16px',display:'flex',alignItems:'center',justifyContent:'space-between'}},
        React.createElement('span',{style:{fontSize:14,color:'#666'}},tgCfg.groupName||'奶块交流①群'),
        React.createElement('div',{style:{display:'flex',alignItems:'center',gap:8}},
          React.createElement('span',{style:{fontSize:14,color:'#999'}},tgCfg.groupNumber||'791661701'),
          React.createElement('span',{
            style:{fontSize:12,color:'#1677ff',cursor:'pointer',userSelect:'none'},
            onClick:function(){
              if(navigator.clipboard){navigator.clipboard.writeText(tgCfg.groupNumber||'791661701').catch(function(){})}
              var ta=document.createElement('textarea');ta.value=tgCfg.groupNumber||'791661701';ta.style.position='fixed';ta.style.left='-9999px';document.body.appendChild(ta);ta.select();document.execCommand('copy');document.body.removeChild(ta);
              setToast('群号已复制');
            }
          },'复制')
        )
      )
    ) : null,

    // Toast notification
    toast && React.createElement('div',{
      style:{
        position:'fixed',top:60,left:'50%',transform:'translateX(-50%)',
        background:'rgba(0,0,0,0.75)',color:'#fff',padding:'10px 24px',
        borderRadius:20,fontSize:14,zIndex:9999,whiteSpace:'nowrap',
        pointerEvents:'none'
      }
    },toast),
        // Image zoom overlay
    preview&&React.createElement("div",{className:"dt-zoom-overlay",onClick:function(){setPreview(null);}},React.createElement("img",{src:preview,className:"dt-zoom-img",onClick:function(e){e.stopPropagation();}})),
    // Screenshot preview overlay
    shotIdx!==null&&React.createElement('div',{className:'dt-shot-overlay',onClick:function(){setShotIdx(null);}},
      React.createElement('img',{src:detailImages[shotIdx]?detailImages[shotIdx].image_url:'',className:'dt-shot-img',onClick:function(e){e.stopPropagation();}}),
      detailImages.length>1&&React.createElement('div',{className:'dt-shot-nav dt-shot-prev',onClick:function(e){e.stopPropagation();setShotIdx(function(i){return(i-1+detailImages.length)%detailImages.length;});}},
        React.createElement('span',{className:'dt-shot-arrow'},'‹')
      ),
      detailImages.length>1&&React.createElement('div',{className:'dt-shot-nav dt-shot-next',onClick:function(e){e.stopPropagation();setShotIdx(function(i){return(i+1)%detailImages.length;});}},
        React.createElement('span',{className:'dt-shot-arrow'},'›')
      ),
      React.createElement('div',{className:'dt-shot-close',onClick:function(e){e.stopPropagation();setShotIdx(null);}},'✕'),
      React.createElement('div',{className:'dt-shot-count'},(shotIdx+1)+'/'+detailImages.length)
    )
  );
}

function makeAttr(label, value) {
  return React.createElement('div',{className:'dt-attr-item'},
    React.createElement('div',{className:'dt-attr-label'},label),
    React.createElement('div',{className:'dt-attr-val'},value)
  );
}
function makeAttrWide(label, value) {
  return React.createElement('div',{className:'dt-attr-item dt-attr-wide'},
    React.createElement('div',{className:'dt-attr-label'},label),
    React.createElement('div',{className:'dt-attr-val',style:{fontSize:12}},value||'暂无')
  );
}

window.NK = window.NK || {};
NK.ProductDetailView = ProductDetailView;