// ─── Mock Data ───────────────────────────────────────────────────
const MOCK_MATERIALS = [
  {id:'M001',code:'WZ-FS-001',name:'防汛编织袋',category:'防汛抗旱',spec:'60×100cm',unit:'条',stock:25000,status:'正常'},
  {id:'M002',code:'WZ-JY-001',name:'救援帐篷',category:'生活保障',spec:'4×5m军绿',unit:'顶',stock:320,status:'正常'},
  {id:'M003',code:'WZ-ZB-001',name:'柴油发电机',category:'应急装备',spec:'5kW三相',unit:'台',stock:45,status:'正常'},
  {id:'M004',code:'WZ-YL-001',name:'医疗急救包',category:'医疗保障',spec:'标准型A',unit:'套',stock:180,status:'近效期'},
  {id:'M005',code:'WZ-FS-002',name:'橡皮艇',category:'防汛抗旱',spec:'4人充气型',unit:'艘',stock:12,status:'低库存'},
  {id:'M006',code:'WZ-FS-003',name:'冲锋舟',category:'防汛抗旱',spec:'8人动力型',unit:'艘',stock:8,status:'正常'},
  {id:'M007',code:'WZ-FS-004',name:'救生衣',category:'防汛抗旱',spec:'成人M码',unit:'件',stock:1500,status:'正常'},
  {id:'M008',code:'WZ-JY-002',name:'矿泉水',category:'生活保障',spec:'550ml×24瓶/箱',unit:'箱',stock:800,status:'近效期'},
  {id:'M009',code:'WZ-ZB-002',name:'应急无人机',category:'应急装备',spec:'大疆M300RTK',unit:'架',stock:6,status:'正常'},
  {id:'M010',code:'WZ-JH-001',name:'应急照明灯',category:'生活保障',spec:'LED 30W',unit:'套',stock:240,status:'正常'},
  {id:'M011',code:'WZ-TX-001',name:'卫星电话',category:'通讯资源',spec:'铱星9575A',unit:'部',stock:20,status:'正常'},
  {id:'M012',code:'WZ-ZB-003',name:'手持对讲机',category:'通讯资源',spec:'摩托罗拉XT',unit:'套',stock:150,status:'正常'},
];

const MOCK_WAREHOUSES = [
  {id:'W001',code:'CK-SJ-001',name:'省级综合应急物资储备库',level:'省级',address:'西安市未央区北辰路18号',area:5000,manager:'张建国',phone:'029-88001234',items:23,status:'正常'},
  {id:'W002',code:'CK-XA-001',name:'西安市应急物资储备库',level:'市级',address:'西安市雁塔区高新路88号',area:2000,manager:'李明华',phone:'029-85001234',items:15,status:'正常'},
  {id:'W003',code:'CK-BJ-001',name:'宝鸡市应急物资储备库',level:'市级',address:'宝鸡市渭滨区高新大道168号',area:1800,manager:'王志远',phone:'0917-3221001',items:12,status:'正常'},
  {id:'W004',code:'CK-XY-001',name:'咸阳市应急物资储备库',level:'市级',address:'咸阳市秦都区人民路56号',area:1500,manager:'赵海波',phone:'029-33221234',items:10,status:'维护中'},
  {id:'W005',code:'CK-TC-001',name:'铜川市应急物资储备库',level:'市级',address:'铜川市王益区朝阳路12号',area:1200,manager:'刘建华',phone:'0919-3331002',items:8,status:'正常'},
];

const MOCK_INBOUND = [
  {id:'R001',code:'RK-2026-0421',material:'防汛编织袋',qty:5000,unit:'条',warehouse:'省级综合应急物资储备库',supplier:'陕西防汛物资有限公司',operator:'王大明',time:'2026-04-21 09:30',status:'已完成'},
  {id:'R002',code:'RK-2026-0420',material:'救援帐篷',qty:50,unit:'顶',warehouse:'西安市应急物资储备库',supplier:'西安帐篷制造厂',operator:'李小红',time:'2026-04-20 14:20',status:'待验收'},
  {id:'R003',code:'RK-2026-0419',material:'医疗急救包',qty:100,unit:'套',warehouse:'省级综合应急物资储备库',supplier:'陕西医疗器械有限公司',operator:'赵建国',time:'2026-04-19 10:00',status:'已完成'},
  {id:'R004',code:'RK-2026-0418',material:'柴油发电机',qty:5,unit:'台',warehouse:'宝鸡市应急物资储备库',supplier:'宝鸡工业设备有限公司',operator:'张志强',time:'2026-04-18 15:45',status:'已完成'},
  {id:'R005',code:'RK-2026-0415',material:'救生衣',qty:300,unit:'件',warehouse:'省级综合应急物资储备库',supplier:'陕西防汛物资有限公司',operator:'王大明',time:'2026-04-15 08:30',status:'已完成'},
];

const MOCK_OUTBOUND = [
  {id:'O001',code:'CK-2026-0423',material:'救援帐篷',qty:20,unit:'顶',warehouse:'省级综合应急物资储备库',dest:'西安市雁塔区应急队',reason:'防汛备勤',operator:'李明华',time:'2026-04-23 08:00',status:'已出库'},
  {id:'O002',code:'CK-2026-0422',material:'柴油发电机',qty:3,unit:'台',warehouse:'西安市应急物资储备库',dest:'宝鸡市防汛指挥部',reason:'电网抢修保障',operator:'张志强',time:'2026-04-22 11:30',status:'已出库'},
  {id:'O003',code:'CK-2026-0421',material:'矿泉水',qty:100,unit:'箱',warehouse:'省级综合应急物资储备库',dest:'咸阳市救灾现场',reason:'灾区生活保障',operator:'赵建国',time:'2026-04-21 16:00',status:'待出库'},
  {id:'O004',code:'CK-2026-0420',material:'救生衣',qty:200,unit:'件',warehouse:'省级综合应急物资储备库',dest:'铜川市防汛队伍',reason:'防汛备勤',operator:'刘建华',time:'2026-04-20 09:00',status:'已出库'},
];

window.MOCK_MATERIALS = MOCK_MATERIALS;
window.MOCK_WAREHOUSES = MOCK_WAREHOUSES;

// ─── 1. Login Page ────────────────────────────────────────────────
function LoginPage({ onLogin }) {
  const [user, setUser] = React.useState('admin');
  const [pass, setPass] = React.useState('');
  const [err, setErr] = React.useState('');
  const handleLogin = () => {
    if (!pass) { setErr('请输入密码'); return; }
    if (pass !== '123456') { setErr('用户名或密码错误'); return; }
    onLogin({ name:'张建国', role:'系统管理员' });
  };
  return (
    <div style={{minHeight:'100vh',background:`linear-gradient(135deg, ${T.blue800} 0%, ${T.blue600} 60%, #1340A0 100%)`,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',position:'relative',overflow:'hidden'}}>
      <div style={{position:'absolute',top:0,left:0,right:0,height:4,background:T.red600}}/>
      {/* decorative circles */}
      {[['-10%','10%',300,'rgba(255,255,255,.04)'],['-5%','60%',200,'rgba(255,255,255,.03)'],['80%','-5%',250,'rgba(255,255,255,.04)'],['70%','75%',180,'rgba(255,255,255,.03)']].map(([l,t,s,c],i)=>(
        <div key={i} style={{position:'absolute',left:l,top:t,width:s,height:s,borderRadius:'50%',background:c,border:'1px solid rgba(255,255,255,.08)'}}/>
      ))}
      <div style={{textAlign:'center',marginBottom:32,color:'white'}}>
        <div style={{fontSize:32,fontWeight:700,letterSpacing:2,marginBottom:6}}>应急物资管理系统</div>
        <div style={{fontSize:14,color:'rgba(255,255,255,.65)'}}>陕西省应急管理厅 · 物资保障平台</div>
      </div>
      <div style={{background:'white',borderRadius:4,padding:32,width:360,boxShadow:'0 16px 48px rgba(0,0,0,.25)'}}>
        <div style={{fontSize:16,fontWeight:500,marginBottom:20,color:T.gray900,textAlign:'center'}}>用户登录</div>
        <div style={{marginBottom:14}}>
          <div style={{fontSize:13,color:T.gray600,marginBottom:6}}>用户名</div>
          <Input value={user} onChange={e=>setUser(e.target.value)} placeholder="请输入用户名"/>
        </div>
        <div style={{marginBottom:14}}>
          <div style={{fontSize:13,color:T.gray600,marginBottom:6}}>密码</div>
          <Input type="password" value={pass} onChange={e=>{setPass(e.target.value);setErr('');}} placeholder="请输入密码（123456）"
            onKeyDown={e=>e.key==='Enter'&&handleLogin()}/>
        </div>
        {err&&<div style={{color:T.red600,fontSize:13,marginBottom:10}}>{err}</div>}
        <button onClick={handleLogin} style={{width:'100%',background:T.blue600,color:'white',border:'none',borderRadius:4,padding:'10px 0',fontSize:15,fontWeight:500,cursor:'pointer',marginTop:4}}>
          登 录
        </button>
        <div style={{marginTop:12,fontSize:12,color:T.gray400,textAlign:'center'}}>演示账号：admin / 123456</div>
      </div>
    </div>
  );
}

// ─── 2. Dashboard ─────────────────────────────────────────────────
function DashboardPage({ nav }) {
  const kpis = [
    {label:'物资种类',value:23,unit:'种',color:T.blue600,sub:'较上月 +2 种'},
    {label:'仓库总数',value:5,unit:'座',color:'#2E8B57',sub:'覆盖5个地市'},
    {label:'活跃预警',value:3,unit:'条',color:T.red600,sub:'需及时处理'},
    {label:'本月出入库',value:47,unit:'次',color:T.warning,sub:'入库28 / 出库19'},
  ];
  const cats = [
    {name:'防汛抗旱',count:5,pct:82},{name:'生活保障',count:4,pct:65},
    {name:'应急装备',count:4,pct:58},{name:'医疗保障',count:3,pct:42},
    {name:'通讯资源',count:2,pct:30},{name:'森林防火',count:2,pct:25},
  ];
  const alerts = [
    {text:'橡皮艇库存低于安全阈值',loc:'省级综合储备库',level:'warning'},
    {text:'医疗急救包临近效期(180天)',loc:'省级综合储备库',level:'warning'},
    {text:'矿泉水临近效期(60天)',loc:'西安市储备库',level:'error'},
  ];
  const activity = [
    {time:'04-23 08:00',text:'调拨单 DB-2026-0423 已下发，救援帐篷20顶'},
    {time:'04-21 09:30',text:'防汛编织袋 5000条 入库完成（省级库）'},
    {time:'04-20 14:20',text:'救援帐篷 50顶 待验收入库（西安市库）'},
    {time:'04-19 10:00',text:'医疗急救包 100套 入库完成（省级库）'},
    {time:'04-18 15:45',text:'柴油发电机 5台 入库完成（宝鸡市库）'},
  ];
  return (
    <div>
      <PageHeader title="驾驶舱" crumb="首页 › 驾驶舱"/>
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12,marginBottom:16}}>
        {kpis.map(k=><StatCard key={k.label} {...k}/>)}
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12,marginBottom:12}}>
        <Card title="物资类别分布">
          {cats.map(c=>(
            <div key={c.name} style={{display:'flex',alignItems:'center',gap:10,marginBottom:10}}>
              <div style={{width:72,fontSize:13,color:T.gray600,textAlign:'right',flexShrink:0}}>{c.name}</div>
              <div style={{flex:1,height:20,background:T.gray100,borderRadius:2,overflow:'hidden'}}>
                <div style={{height:'100%',width:`${c.pct}%`,background:T.blue600,borderRadius:2,transition:'width .5s',display:'flex',alignItems:'center',paddingLeft:6}}>
                  <span style={{fontSize:11,color:'white',fontWeight:500}}>{c.count}种</span>
                </div>
              </div>
              <div style={{width:32,fontSize:12,color:T.gray400}}>{c.pct}%</div>
            </div>
          ))}
        </Card>
        <Card title="活跃预警" extra={<Btn size="sm" variant="text" onClick={()=>nav('warning')}>查看全部</Btn>}>
          {alerts.map((a,i)=>(
            <div key={i} style={{display:'flex',alignItems:'flex-start',gap:10,padding:'10px 0',borderBottom:i<alerts.length-1?`1px solid ${T.gray100}`:'none'}}>
              <div style={{width:6,height:6,borderRadius:'50%',background:a.level==='error'?T.red600:T.warning,marginTop:5,flexShrink:0}}/>
              <div style={{flex:1}}>
                <div style={{fontSize:13,color:T.gray900}}>{a.text}</div>
                <div style={{fontSize:12,color:T.gray400,marginTop:2}}>{a.loc}</div>
              </div>
              <Badge type={a.level==='error'?'error':'warning'}>{a.level==='error'?'紧急':'预警'}</Badge>
            </div>
          ))}
        </Card>
      </div>
      <Card title="最新动态">
        {activity.map((a,i)=>(
          <div key={i} style={{display:'flex',gap:12,padding:'8px 0',borderBottom:i<activity.length-1?`1px dashed ${T.gray100}`:'none',alignItems:'center'}}>
            <span style={{fontSize:12,color:T.gray400,whiteSpace:'nowrap'}}>{a.time}</span>
            <span style={{fontSize:13,color:T.gray700}}>{a.text}</span>
          </div>
        ))}
      </Card>
    </div>
  );
}

// ─── 3. Material Catalog ──────────────────────────────────────────
function MaterialCatalogPage() {
  const [data, setData] = React.useState(MOCK_MATERIALS);
  const [search, setSearch] = React.useState('');
  const [cat, setCat] = React.useState('全部');
  const [modal, setModal] = React.useState(false);
  const [form, setForm] = React.useState({code:'',name:'',category:'防汛抗旱',spec:'',unit:'件',status:'正常'});
  const cats = ['全部','防汛抗旱','生活保障','应急装备','医疗保障','通讯资源','森林防火'];
  const statusType = s=>s==='正常'?'success':s==='近效期'?'warning':s==='低库存'?'error':'default';
  const filtered = data.filter(d=>(cat==='全部'||d.category===cat)&&(!search||d.name.includes(search)||d.code.includes(search)));
  const cols = [
    {key:'code',title:'物资编码',width:140},
    {key:'name',title:'物资名称'},
    {key:'category',title:'物资类别',width:100},
    {key:'spec',title:'规格型号'},
    {key:'unit',title:'计量单位',width:80,align:'center'},
    {key:'stock',title:'当前库存',width:100,align:'right',render:v=><span style={{fontWeight:500}}>{v?.toLocaleString()}</span>},
    {key:'status',title:'状态',width:80,align:'center',render:v=><Badge type={statusType(v)}>{v}</Badge>},
    {key:'_op',title:'操作',width:120,render:(_,row)=>(
      <div style={{display:'flex',gap:6}}>
        <Btn size="sm" variant="text">编辑</Btn>
        <Btn size="sm" variant="text">详情</Btn>
      </div>
    )},
  ];
  const addItem = () => {
    if(!form.name||!form.code){return;}
    setData([...data,{...form,id:`M${Date.now()}`,stock:0}]);
    setModal(false);
    setForm({code:'',name:'',category:'防汛抗旱',spec:'',unit:'件',status:'正常'});
  };
  return (
    <div>
      <PageHeader title="物资名录" crumb="物资管理 › 物资名录" extra={<Btn onClick={()=>setModal(true)}>＋ 新增物资</Btn>}/>
      <SearchBar onSearch={()=>{}} onReset={()=>{setSearch('');setCat('全部');}}>
        <Input value={search} onChange={e=>setSearch(e.target.value)} placeholder="物资名称/编码" style={{width:180}}/>
        <Select value={cat} onChange={e=>setCat(e.target.value)} options={cats}/>
      </SearchBar>
      <Card noPad>
        <Table columns={cols} data={filtered}/>
        <div style={{padding:'0 16px 12px'}}><Pagination total={filtered.length} page={1} onChange={()=>{}}/></div>
      </Card>
      <Modal open={modal} title="新增物资" onClose={()=>setModal(false)}
        footer={<><Btn variant="default" onClick={()=>setModal(false)}>取消</Btn><Btn onClick={addItem}>确定</Btn></>}>
        <FormRow label="物资编码" required><Input value={form.code} onChange={e=>setForm({...form,code:e.target.value})} placeholder="如：WZ-FS-001"/></FormRow>
        <FormRow label="物资名称" required><Input value={form.name} onChange={e=>setForm({...form,name:e.target.value})} placeholder="物资名称"/></FormRow>
        <FormRow label="物资类别" required><Select value={form.category} onChange={e=>setForm({...form,category:e.target.value})} options={cats.slice(1)}/></FormRow>
        <FormRow label="规格型号"><Input value={form.spec} onChange={e=>setForm({...form,spec:e.target.value})} placeholder="如：5kW三相"/></FormRow>
        <FormRow label="计量单位" required><Input value={form.unit} onChange={e=>setForm({...form,unit:e.target.value})} placeholder="如：台、件、箱" style={{width:120}}/></FormRow>
      </Modal>
    </div>
  );
}

// ─── 4. Stock (实物储备) ─────────────────────────────────────────
function StockPage() {
  const [filter, setFilter] = React.useState('全部');
  const items = [
    {id:'S001',name:'防汛编织袋',category:'防汛抗旱',warehouse:'省级综合应急物资储备库',qty:25000,unit:'条',expiry:'—',status:'正常'},
    {id:'S002',name:'救援帐篷',category:'生活保障',warehouse:'省级综合应急物资储备库',qty:200,unit:'顶',expiry:'—',status:'正常'},
    {id:'S003',name:'救援帐篷',category:'生活保障',warehouse:'西安市应急物资储备库',qty:120,unit:'顶',expiry:'—',status:'正常'},
    {id:'S004',name:'柴油发电机',category:'应急装备',warehouse:'省级综合应急物资储备库',qty:30,unit:'台',expiry:'—',status:'正常'},
    {id:'S005',name:'柴油发电机',category:'应急装备',warehouse:'宝鸡市应急物资储备库',qty:15,unit:'台',expiry:'—',status:'正常'},
    {id:'S006',name:'医疗急救包',category:'医疗保障',warehouse:'省级综合应急物资储备库',qty:180,unit:'套',expiry:'2026-08-01',status:'近效期'},
    {id:'S007',name:'橡皮艇',category:'防汛抗旱',warehouse:'省级综合应急物资储备库',qty:12,unit:'艘',expiry:'—',status:'低库存'},
    {id:'S008',name:'矿泉水',category:'生活保障',warehouse:'西安市应急物资储备库',qty:800,unit:'箱',expiry:'2026-06-15',status:'近效期'},
    {id:'S009',name:'救生衣',category:'防汛抗旱',warehouse:'省级综合应急物资储备库',qty:1500,unit:'件',expiry:'—',status:'正常'},
    {id:'S010',name:'应急照明灯',category:'生活保障',warehouse:'铜川市应急物资储备库',qty:80,unit:'套',expiry:'—',status:'正常'},
  ];
  const statusType = s=>s==='正常'?'success':s==='近效期'?'warning':'error';
  const filters = ['全部','正常','近效期','低库存'];
  const filtered = items.filter(d=>filter==='全部'||d.status===filter);
  const kpis = [
    {label:'在库物资种类',value:filtered.length,unit:'种',color:T.blue600},
    {label:'近效期预警',value:items.filter(x=>x.status==='近效期').length,unit:'项',color:T.warning},
    {label:'低库存预警',value:items.filter(x=>x.status==='低库存').length,unit:'项',color:T.red600},
  ];
  return (
    <div>
      <PageHeader title="实物储备" crumb="物资管理 › 实物储备"/>
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12,marginBottom:16}}>
        {kpis.map(k=><StatCard key={k.label} {...k}/>)}
      </div>
      <Card noPad extra={
        <div style={{display:'flex',gap:6,padding:'8px 12px'}}>
          {filters.map(f=>(
            <button key={f} onClick={()=>setFilter(f)} style={{padding:'3px 12px',borderRadius:2,border:`1px solid ${filter===f?T.blue600:T.gray200}`,background:filter===f?T.blue50:'white',color:filter===f?T.blue600:T.gray600,cursor:'pointer',fontSize:13}}>
              {f}{f!=='全部'&&<span style={{marginLeft:4,color:filter===f?T.blue600:T.gray400}}>({items.filter(x=>f==='全部'||x.status===f).length})</span>}
            </button>
          ))}
        </div>
      }>
        <Table columns={[
          {key:'name',title:'物资名称'},
          {key:'category',title:'类别',width:100},
          {key:'warehouse',title:'存储仓库'},
          {key:'qty',title:'在库数量',width:100,align:'right',render:(v,r)=>`${v.toLocaleString()} ${r.unit}`},
          {key:'expiry',title:'效期',width:110},
          {key:'status',title:'状态',width:80,align:'center',render:v=><Badge type={statusType(v)}>{v}</Badge>},
        ]} data={filtered}/>
        <div style={{padding:'0 16px 12px'}}><Pagination total={filtered.length} page={1} onChange={()=>{}}/></div>
      </Card>
    </div>
  );
}

// ─── 5. Warehouse ─────────────────────────────────────────────────
function WarehousePage() {
  const [modal, setModal] = React.useState(null);
  const [addModal, setAddModal] = React.useState(false);
  const [form, setForm] = React.useState({name:'',level:'省级',address:'',area:'',manager:'',phone:''});
  const statusType = s=>s==='正常'?'success':s==='维护中'?'warning':'default';
  return (
    <div>
      <PageHeader title="仓库管理" crumb="仓储管理 › 仓库管理" extra={<Btn onClick={()=>setAddModal(true)}>＋ 新增仓库</Btn>}/>
      <Card noPad>
        <Table columns={[
          {key:'code',title:'仓库编号',width:130},
          {key:'name',title:'仓库名称'},
          {key:'level',title:'级别',width:70,align:'center'},
          {key:'area',title:'面积(㎡)',width:90,align:'right',render:v=>v.toLocaleString()},
          {key:'manager',title:'负责人',width:90},
          {key:'items',title:'物资种类',width:80,align:'center'},
          {key:'status',title:'状态',width:80,align:'center',render:v=><Badge type={statusType(v)}>{v}</Badge>},
          {key:'_op',title:'操作',width:130,render:(_,row)=>(
            <div style={{display:'flex',gap:6}}>
              <Btn size="sm" variant="text" onClick={()=>setModal(row)}>详情</Btn>
              <Btn size="sm" variant="text">编辑</Btn>
            </div>
          )},
        ]} data={MOCK_WAREHOUSES}/>
        <div style={{padding:'0 16px 12px'}}><Pagination total={MOCK_WAREHOUSES.length} page={1} onChange={()=>{}}/></div>
      </Card>
      <Modal open={!!modal} title="仓库详情" onClose={()=>setModal(null)} footer={<Btn variant="default" onClick={()=>setModal(null)}>关闭</Btn>}>
        {modal&&(
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
            {[['仓库编号',modal.code],['仓库名称',modal.name],['仓库级别',modal.level],['存储面积',`${modal.area.toLocaleString()} ㎡`],['负责人',modal.manager],['联系电话',modal.phone],['仓库地址',modal.address],['物资种类',`${modal.items} 种`]].map(([l,v])=>(
              <div key={l} style={{padding:'8px 12px',background:T.gray50,borderRadius:4}}>
                <div style={{fontSize:12,color:T.gray400,marginBottom:3}}>{l}</div>
                <div style={{fontSize:14,color:T.gray900,fontWeight:500}}>{v}</div>
              </div>
            ))}
          </div>
        )}
      </Modal>
      <Modal open={addModal} title="新增仓库" onClose={()=>setAddModal(false)}
        footer={<><Btn variant="default" onClick={()=>setAddModal(false)}>取消</Btn><Btn onClick={()=>setAddModal(false)}>确定</Btn></>}>
        <FormRow label="仓库名称" required><Input value={form.name} onChange={e=>setForm({...form,name:e.target.value})} placeholder="请输入仓库名称"/></FormRow>
        <FormRow label="仓库级别" required><Select value={form.level} onChange={e=>setForm({...form,level:e.target.value})} options={['省级','市级','县级']}/></FormRow>
        <FormRow label="仓库地址" required><Input value={form.address} onChange={e=>setForm({...form,address:e.target.value})} placeholder="详细地址"/></FormRow>
        <FormRow label="存储面积"><Input value={form.area} onChange={e=>setForm({...form,area:e.target.value})} placeholder="单位：㎡" style={{width:150}}/></FormRow>
        <FormRow label="负责人" required><Input value={form.manager} onChange={e=>setForm({...form,manager:e.target.value})} placeholder="姓名" style={{width:150}}/></FormRow>
        <FormRow label="联系电话"><Input value={form.phone} onChange={e=>setForm({...form,phone:e.target.value})} placeholder="联系方式"/></FormRow>
      </Modal>
    </div>
  );
}

// ─── 6. Inbound ───────────────────────────────────────────────────
function InboundPage() {
  const [tab, setTab] = React.useState('全部');
  const [modal, setModal] = React.useState(false);
  const [form, setForm] = React.useState({material:'',warehouse:'',qty:'',supplier:'',note:''});
  const statusType = s=>s==='已完成'?'success':s==='待验收'?'warning':'info';
  const tabs = ['全部','待验收','已完成'];
  const filtered = tab==='全部'?MOCK_INBOUND:MOCK_INBOUND.filter(d=>d.status===tab);
  return (
    <div>
      <PageHeader title="入库管理" crumb="仓储管理 › 入库管理" extra={<Btn onClick={()=>setModal(true)}>＋ 新建入库单</Btn>}/>
      <Card noPad>
        <div style={{padding:'12px 16px 0',borderBottom:`1px solid ${T.gray100}`}}><Tabs tabs={tabs} active={tab} onChange={setTab}/></div>
        <Table columns={[
          {key:'code',title:'入库单号',width:160},
          {key:'material',title:'物资名称'},
          {key:'qty',title:'数量',width:90,align:'right',render:(v,r)=>`${v.toLocaleString()} ${r.unit}`},
          {key:'warehouse',title:'入库仓库'},
          {key:'supplier',title:'供应商'},
          {key:'operator',title:'操作员',width:90},
          {key:'time',title:'时间',width:140},
          {key:'status',title:'状态',width:90,align:'center',render:v=><Badge type={statusType(v)}>{v}</Badge>},
          {key:'_op',title:'操作',width:100,render:(_,row)=><Btn size="sm" variant="text">{row.status==='待验收'?'验收确认':'查看'}</Btn>},
        ]} data={filtered}/>
        <div style={{padding:'0 16px 12px'}}><Pagination total={filtered.length} page={1} onChange={()=>{}}/></div>
      </Card>
      <Modal open={modal} title="新建入库单" onClose={()=>setModal(false)}
        footer={<><Btn variant="default" onClick={()=>setModal(false)}>取消</Btn><Btn onClick={()=>setModal(false)}>提交入库</Btn></>}>
        <FormRow label="物资名称" required>
          <Select value={form.material} onChange={e=>setForm({...form,material:e.target.value})} options={['请选择',...MOCK_MATERIALS.map(m=>m.name)]}/>
        </FormRow>
        <FormRow label="入库仓库" required>
          <Select value={form.warehouse} onChange={e=>setForm({...form,warehouse:e.target.value})} options={['请选择',...MOCK_WAREHOUSES.map(w=>w.name)]}/>
        </FormRow>
        <FormRow label="入库数量" required><Input value={form.qty} onChange={e=>setForm({...form,qty:e.target.value})} placeholder="请输入数量" type="number" style={{width:150}}/></FormRow>
        <FormRow label="供应商"><Input value={form.supplier} onChange={e=>setForm({...form,supplier:e.target.value})} placeholder="供应商名称"/></FormRow>
        <FormRow label="备注"><textarea value={form.note} onChange={e=>setForm({...form,note:e.target.value})} placeholder="备注信息（选填）" style={{width:'100%',border:`1px solid ${T.gray200}`,borderRadius:4,padding:'6px 10px',fontSize:14,resize:'vertical',minHeight:72,fontFamily:'inherit',outline:'none'}}/></FormRow>
      </Modal>
    </div>
  );
}

// ─── 7. Outbound ──────────────────────────────────────────────────
function OutboundPage() {
  const [tab, setTab] = React.useState('全部');
  const [modal, setModal] = React.useState(false);
  const [form, setForm] = React.useState({material:'',warehouse:'',qty:'',dest:'',reason:''});
  const statusType = s=>s==='已出库'?'success':'warning';
  const tabs = ['全部','待出库','已出库'];
  const filtered = tab==='全部'?MOCK_OUTBOUND:MOCK_OUTBOUND.filter(d=>d.status===tab);
  return (
    <div>
      <PageHeader title="出库管理" crumb="仓储管理 › 出库管理" extra={<Btn onClick={()=>setModal(true)}>＋ 新建出库单</Btn>}/>
      <Card noPad>
        <div style={{padding:'12px 16px 0',borderBottom:`1px solid ${T.gray100}`}}><Tabs tabs={tabs} active={tab} onChange={setTab}/></div>
        <Table columns={[
          {key:'code',title:'出库单号',width:160},
          {key:'material',title:'物资名称'},
          {key:'qty',title:'数量',width:90,align:'right',render:(v,r)=>`${v} ${r.unit}`},
          {key:'warehouse',title:'出库仓库'},
          {key:'dest',title:'去向单位'},
          {key:'reason',title:'出库事由'},
          {key:'time',title:'时间',width:140},
          {key:'status',title:'状态',width:90,align:'center',render:v=><Badge type={statusType(v)}>{v}</Badge>},
        ]} data={filtered}/>
        <div style={{padding:'0 16px 12px'}}><Pagination total={filtered.length} page={1} onChange={()=>{}}/></div>
      </Card>
      <Modal open={modal} title="新建出库单" onClose={()=>setModal(false)}
        footer={<><Btn variant="default" onClick={()=>setModal(false)}>取消</Btn><Btn onClick={()=>setModal(false)}>提交出库</Btn></>}>
        <FormRow label="物资名称" required><Select value={form.material} onChange={e=>setForm({...form,material:e.target.value})} options={['请选择',...MOCK_MATERIALS.map(m=>m.name)]}/></FormRow>
        <FormRow label="出库仓库" required><Select value={form.warehouse} onChange={e=>setForm({...form,warehouse:e.target.value})} options={['请选择',...MOCK_WAREHOUSES.map(w=>w.name)]}/></FormRow>
        <FormRow label="出库数量" required><Input value={form.qty} onChange={e=>setForm({...form,qty:e.target.value})} placeholder="数量" type="number" style={{width:150}}/></FormRow>
        <FormRow label="去向单位" required><Input value={form.dest} onChange={e=>setForm({...form,dest:e.target.value})} placeholder="接收单位全称"/></FormRow>
        <FormRow label="出库事由" required><Input value={form.reason} onChange={e=>setForm({...form,reason:e.target.value})} placeholder="如：防汛备勤、灾区救助"/></FormRow>
      </Modal>
    </div>
  );
}

// ─── 8. Inventory Check ───────────────────────────────────────────
function InventoryPage() {
  const [modal, setModal] = React.useState(false);
  const checks = [
    {id:'PD001',code:'PD-2026-0415',warehouse:'省级综合应急物资储备库',planTime:'2026-04-15',actualTime:'2026-04-15',total:23,diff:2,status:'已完成'},
    {id:'PD002',code:'PD-2026-0401',warehouse:'西安市应急物资储备库',planTime:'2026-04-01',actualTime:'2026-04-02',total:15,diff:0,status:'已完成'},
    {id:'PD003',code:'PD-2026-0320',warehouse:'宝鸡市应急物资储备库',planTime:'2026-03-20',actualTime:'2026-03-20',total:12,diff:1,status:'已完成'},
    {id:'PD004',code:'PD-2026-0501',warehouse:'省级综合应急物资储备库',planTime:'2026-05-01',actualTime:'—',total:23,diff:0,status:'待执行'},
  ];
  const statusType = s=>s==='已完成'?'success':'info';
  return (
    <div>
      <PageHeader title="库存盘点" crumb="仓储管理 › 库存盘点" extra={<Btn onClick={()=>setModal(true)}>＋ 发起盘点</Btn>}/>
      <Card noPad>
        <Table columns={[
          {key:'code',title:'盘点单号',width:160},
          {key:'warehouse',title:'盘点仓库'},
          {key:'planTime',title:'计划时间',width:120},
          {key:'actualTime',title:'完成时间',width:120},
          {key:'total',title:'盘点种类',width:90,align:'center'},
          {key:'diff',title:'差异种类',width:90,align:'center',render:v=><span style={{color:v>0?T.red600:T.success,fontWeight:500}}>{v}</span>},
          {key:'status',title:'状态',width:90,align:'center',render:v=><Badge type={statusType(v)}>{v}</Badge>},
          {key:'_op',title:'操作',width:120,render:(_,r)=><div style={{display:'flex',gap:6}}><Btn size="sm" variant="text">查看报告</Btn>{r.status==='待执行'&&<Btn size="sm" variant="text">开始盘点</Btn>}</div>},
        ]} data={checks}/>
        <div style={{padding:'0 16px 12px'}}><Pagination total={checks.length} page={1} onChange={()=>{}}/></div>
      </Card>
      <Modal open={modal} title="发起盘点任务" onClose={()=>setModal(false)}
        footer={<><Btn variant="default" onClick={()=>setModal(false)}>取消</Btn><Btn onClick={()=>setModal(false)}>确定发起</Btn></>}>
        <FormRow label="盘点仓库" required><Select value="" onChange={()=>{}} options={['请选择',...MOCK_WAREHOUSES.map(w=>w.name)]}/></FormRow>
        <FormRow label="计划时间" required><Input type="date" style={{width:180}}/></FormRow>
        <FormRow label="盘点负责人"><Input placeholder="负责人姓名"/></FormRow>
        <FormRow label="备注"><textarea placeholder="盘点说明（选填）" style={{width:'100%',border:`1px solid ${T.gray200}`,borderRadius:4,padding:'6px 10px',fontSize:14,resize:'vertical',minHeight:60,fontFamily:'inherit',outline:'none'}}/></FormRow>
      </Modal>
    </div>
  );
}

Object.assign(window, { LoginPage, DashboardPage, MaterialCatalogPage, StockPage, WarehousePage, InboundPage, OutboundPage, InventoryPage });