// 我的售后页面 v2
const { useState, useEffect, useMemo } = React;

const APPEAL_TYPE_MAP = {
  'after_sale':'申请售后','feedback':'问题反馈','dispute':'交易纠纷',
  'inspection_dispute':'验号纠纷','rebind_issue':'换绑问题'
};
const APPEAL_STATUS_MAP = {
  0:{label:'待处理',color:'#D97706',bg:'#FFF7ED'},
  1:{label:'处理中',color:'#2563EB',bg:'#EFF6FF'},
  2:{label:'已完成',color:'#16A34A',bg:'#F0FDF4'},
  3:{label:'已关闭',color:'#94A3B8',bg:'#F8FAFC'}
};

function MyAppealsPage() {
function svgArrL(c){return React.createElement('svg',{width:20,height:20,viewBox:'0 0 24 24',fill:'none',stroke:c||'#334155',strokeWidth:1.875,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M15 18l-6-6 6-6'}));}
function svgShield(c){return React.createElement('svg',{width:44,height:44,viewBox:'0 0 24 24',fill:'none',stroke:c||'#CBD5E1',strokeWidth:1.8,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('path',{d:'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'}));}
function svgLock(c){return React.createElement('svg',{width:44,height:44,viewBox:'0 0 24 24',fill:'none',stroke:c||'#CBD5E1',strokeWidth:1.8,strokeLinecap:'round',strokeLinejoin:'round'},React.createElement('rect',{x:3,y:11,width:18,height:11,rx:2,ry:2}),React.createElement('path',{d:'M7 11V7a5 5 0 0110 0v4'}));}

  var h = React.createElement;
  const [appeals, setAppeals] = useState([]);
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [initLoading, setInitLoading] = useState(true);
  const [tab, setTab] = useState('all');
  const pageSize = 10;

  const fetchAppeals = async function(p, append){
    if (!NK.Store.isLoggedIn()) { setInitLoading(false); return; }
    setLoading(true);
    try {
      const res = await NK.Api.Appeals.my({page:p||1,pageSize});
      if (res.code===0){
        const list = res.data.list||[];
        setAppeals(append?prev=>[...prev,...list]:list);
        setTotal(res.data.total||0);
        setPage(res.data.page||1);
      }
    } catch(e){}
    finally { setLoading(false); setInitLoading(false); }
  };

  useEffect(function(){ fetchAppeals(1,false); }, []);

  var fmtTime = function(t){return t?new Date(t).toLocaleDateString('zh-CN',{month:'2-digit',day:'2-digit',hour:'2-digit',minute:'2-digit'}):'';};
  var fmtPrice = function(p){return '¥'+Number(p||0).toFixed(2);};

  // Filter logic: pure frontend
  var filtered = useMemo(function(){
    if (tab === 'all') return appeals;
    if (tab === 'active') return appeals.filter(function(a){ return a.status === 0 || a.status === 1; });
    if (tab === 'done') return appeals.filter(function(a){ return a.status === 2; });
    if (tab === 'closed') return appeals.filter(function(a){ return a.status === 3; });
    return appeals;
  }, [appeals, tab]);

  var renderHeader = function(){
    return React.createElement('div',{className:'back-header'},
      React.createElement('div',{className:'bbtn',onClick:function(){NK.Store.back('mine');}},svgArrL()),
      React.createElement('div',{className:'btitle'},'我的售后')
    );
  };

  // Not logged in
  if (!NK.Store.isLoggedIn()) {
    return React.createElement('div',{className:'detail-page'},
      renderHeader(),
      React.createElement('div',{className:'appeal-empty'},
        React.createElement('div',{className:'appeal-empty-icon'},svgLock()),
        React.createElement('div',{className:'appeal-empty-title'},'请先登录'),
        React.createElement('div',{style:{color:'#3B82F6',marginTop:8,cursor:'pointer',fontSize:14},onClick:function(){NK.Store.navigate('login');}},'去登录')
      )
    );
  }

  // Loading
  if (initLoading) {
    return React.createElement('div',{className:'detail-page'},
      renderHeader(),
      React.createElement('div',{className:'page-loading'},
        React.createElement('div',{className:'spinner'}),
        React.createElement('div',{style:{color:'#94A3B8',fontSize:14,marginTop:12}},'加载中...')
      )
    );
  }

  var TABS = [
    {key:'all',label:'全部'},
    {key:'active',label:'处理中'},
    {key:'done',label:'已完成'},
    {key:'closed',label:'已关闭'}
  ];

  var renderTabs = function(){
    return React.createElement('div',{className:'appeal-tabs'},
      TABS.map(function(t){
        var active = tab === t.key;
        return React.createElement('div',{
          key:t.key,
          className:'appeal-tab' + (active?' active':''),
          onClick:function(){ setTab(t.key); }
        }, t.label);
      })
    );
  };

  var renderCard = function(a){
    var st = APPEAL_STATUS_MAP[a.status]||{label:'未知',color:'#94A3B8',bg:'#F8FAFC'};
    var typeLabel = APPEAL_TYPE_MAP[a.dispute_type||a.type]||'售后';
    var title = a.account_title || ('订单#'+(a.order_no||a.order_id||a.id));
    var orderNo = a.order_no || a.order_id || '';

    return React.createElement('div',{key:a.id,className:'appeal-card'},
      // Top row: title + status tag
      React.createElement('div',{className:'appeal-card-top'},
        React.createElement('div',{className:'appeal-card-title'},title),
        React.createElement('span',{className:'appeal-card-tag',style:{background:st.bg,color:st.color}},st.label)
      ),
      // Order number
      orderNo ? React.createElement('div',{className:'appeal-card-order'},'订单 ' + orderNo) : null,
      // Type + reason
      React.createElement('div',{className:'appeal-card-meta'},typeLabel + (a.reason?' · '+a.reason:'')),
      // Bottom row: time + amount + button
      React.createElement('div',{className:'appeal-card-bottom'},
        React.createElement('div',null,
          React.createElement('div',{className:'appeal-card-time'},fmtTime(a.create_time)),
          (a.order_amount||a.amount) ? React.createElement('div',{className:'appeal-card-amount'},fmtPrice(a.order_amount||a.amount)) : null
        ),
        React.createElement('button',{
          className:'appeal-card-btn',
          onClick:function(e){ e.stopPropagation(); NK.Store.navigate('appealDetail',{id:a.id}); }
        },'查看详情')
      )
    );
  };

  return React.createElement('div',{className:'detail-page'},
    renderHeader(),

    // Intro card
    React.createElement('div',{className:'appeal-intro'},
      React.createElement('div',{className:'appeal-intro-title'},'售后服务'),
      React.createElement('div',{className:'appeal-intro-sub'},'查看账号交易中的售后与纠纷处理进度')
    ),

    // Filter tabs
    renderTabs(),

    // List or empty
    filtered.length === 0 && !loading
      ? React.createElement('div',{className:'appeal-empty'},
          React.createElement('div',{className:'appeal-empty-icon'},svgShield()),
          React.createElement('div',{className:'appeal-empty-title'}, tab==='all'?'暂无售后记录':'暂无该状态的售后记录'),
          React.createElement('div',{className:'appeal-empty-sub'},'交易中遇到问题后，售后进度会显示在这里')
        )
      : React.createElement('div',null,
          filtered.map(function(a){ return renderCard(a); }),
          loading && React.createElement('div',{style:{textAlign:'center',padding:16,color:'#94A3B8',fontSize:13}},'加载中...'),
          appeals.length > 0 && appeals.length < total && React.createElement('div',{style:{textAlign:'center',padding:'8px 0 24px'}},
            React.createElement('button',{onClick:function(){fetchAppeals(page+1,true);},
              style:{padding:'8px 32px',borderRadius:8,border:'1px solid #CBD5E1',background:'#fff',color:'#3B82F6',fontSize:13,cursor:'pointer',fontWeight:500}},'加载更多')
          )
        )
  );
}

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