const products = Array.from({length:11},(_,i)=>[
  ['测试产品1','测试2','zxcv','体验产品','示例计划','样例产品','测试本金返还2','测试2233','测试本金返还','测试3','测试4'][i],
  [30,60,3,1,2,1,1,7,3,2,5][i],i===2?3000:10,i===1?1000:100,i===1?100:10,
  i===9?'关闭':'开启',[1,2,6,7].includes(i)?'置顶':'关闭',i===8?'否':'是',i%3?'关闭':'开启',i+1
]);
const users = Array.from({length:10},(_,i)=>[
  40829225+i*3691,'132****'+(5811+i),i>1?'188****8888':'—',i===2?'1代：1':'—',0,0,'未绑定','正常','2025-11-01 '+(23-i)+':12:00'
]);
const sections = {
  products:{group:'产品管理',title:'产品配置',search:'产品名称',fields:['产品名称','总天数','数量','价格','日利润','状态','置顶','是否返还本金','到期领取收益','排序'],rows:products,add:true},
  userProducts:{group:'产品管理',title:'用户产品',search:'产品名称',fields:['产品名称','用户','状态'],rows:[['测试产品1','132****5811','正常']]},
  users:{group:'用户管理',title:'用户列表',search:'手机号',searchIndex:1,fields:['邀请码','手机号','上级','下级','充值金额','提现金额','卡信息','状态','注册时间'],rows:users},
  deposits:{group:'用户管理',title:'充值记录',search:'订单号',fields:['订单号','用户','充值金额','状态'],rows:[['DEMO-001','132****5811',4000,'演示成功']]},
  withdrawals:{group:'用户管理',title:'提现列表',search:'订单号',fields:['订单号','用户','提现金额','状态'],rows:[['DEMO-002','132****5811',171000,'待审核']]},
  draws:{group:'抽奖管理',title:'抽奖配置',fields:['金额','比例'],rows:[2,5,10,40,100,200,500,1000].map((amount,i)=>[amount,[99,1][i]||0])},
  drawRecords:{group:'抽奖管理',title:'抽奖记录',fields:['用户','金额','时间'],rows:[['132****5811',2,'2025-11-01 20:02:07']]},
  cash:{group:'红包管理',title:'红包配置',fields:['名称','金额','状态'],rows:[['演示红包',10,'开启']]}
};
const byId = id=>document.getElementById(id);
const editor = byId('editor');
const perPage=10;
let active='products', query='', page=1, editing=-1;
function el(tag,text='',className='') {
  const node=document.createElement(tag);
  node.textContent=text;
  node.className=className;
  return node;
}
function button(text,key,value,className='') {
  const node=el('button',text,className);
  node.type='button';
  node.dataset[key]=value;
  return node;
}
function renderTable() {
  const {fields,rows,searchIndex=0}=sections[active];
  const results=rows.map((row,index)=>({row,index})).filter(({row})=>String(row[searchIndex]).toLowerCase().includes(query));
  const totalPages=Math.max(1,Math.ceil(results.length/perPage));
  page=Math.min(page,totalPages);
  const table=el('table');
  const headers=active==='products'?['图片',...fields.slice(0,5),'总利润',...fields.slice(5),'操作']:[...fields,'操作'];
  const header=table.createTHead().insertRow();
  headers.forEach(label=>{const cell=el('th',label);cell.scope='col';header.append(cell);});
  const body=table.createTBody();
  for(const {row,index} of results.slice((page-1)*perPage,page*perPage)){
    const tr=body.insertRow();
    if(active==='products'){
      const image=el('img');image.src='project.jpg';image.alt='演示产品';
      tr.insertCell().append(image);
    }
    row.forEach((value,i)=>{
      tr.insertCell().textContent=value;
      if(active==='products' && i===4) tr.insertCell().textContent=Number(row[1])*Number(value);
    });
    tr.insertCell().append(button('✎ 修改','edit',index,'edit'));
  }
  if(!results.length){
    const cell=body.insertRow().insertCell();
    cell.colSpan=headers.length;cell.className='empty';cell.textContent='暂无匹配数据';
  }
  byId('table').replaceChildren(table);
  const previous=button('‹','page',page-1),next=button('›','page',page+1);
  previous.disabled=page===1;next.disabled=page===totalPages;
  byId('footer').replaceChildren(el('span','共 '+results.length+' 条'),previous,el('span',page+' / '+totalPages),next);
}
function render() {
  const section=sections[active];
  byId('crumb').textContent='☰　 首页 / '+section.group+' / '+section.title;
  for(const item of document.querySelectorAll('[data-section]')){
    if(item.dataset.section===active) item.setAttribute('aria-current','page');
    else item.removeAttribute('aria-current');
  }
  byId('filters').replaceChildren();
  if(section.search){
    const form=el('form','','filters');
    const label=el('label',section.search);
    const input=el('input');input.name='query';input.placeholder='请输入'+section.search;
    label.append(input);
    const submit=el('button','⌕ 搜索','primary');submit.type='submit';
    form.append(label,submit,button('↻ 重置','reset',''));
    form.addEventListener('submit',event=>{
      event.preventDefault();query=input.value.trim().toLowerCase();page=1;renderTable();
    });
    byId('filters').append(form);
  }
  byId('toolbar').replaceChildren(...(section.add?[button('＋ 新增','edit',-1,'add')]:[]));
  renderTable();
}
function edit(index) {
  editing=index;
  const {fields,rows}=sections[active];
  byId('editor-title').textContent=(index<0?'新增':'修改')+sections[active].title;
  const values=rows[index] || ['',1,1,100,10,'开启','关闭','是','开启',rows.length+1];
  byId('fields').replaceChildren(...fields.map((field,i)=>{
    const label=el('label',field);
    const input=el('input');
    input.name='field'+i;input.value=values[i];input.required=true;
    if(typeof values[i]==='number'){input.type='number';input.min='0';input.step='any';}
    label.append(input);
    return label;
  }));
  editor.showModal();
}
document.addEventListener('click',event=>{
  const item=event.target.closest('button');
  if(!item) return;
  if(item.dataset.section){
    active=item.dataset.section;query='';page=1;render();
  }
  if(item.dataset.page){page=Number(item.dataset.page);renderTable();}
  if(item.dataset.edit) edit(Number(item.dataset.edit));
  if('reset' in item.dataset){item.form.reset();query='';page=1;renderTable();}
});
byId('cancel').addEventListener('click',()=>editor.close());
byId('edit-form').addEventListener('submit',event=>{
  event.preventDefault();
  const {fields,rows}=sections[active];
  const values=fields.map((_,i)=>{
    const input=event.target.elements['field'+i];
    return input.type==='number'?input.valueAsNumber:input.value.trim();
  });
  if(editing<0){
    rows.unshift(values);query='';page=1;render();
  }else{
    rows[editing]=values;renderTable();
  }
  editor.close();
});
render();