// ─── Sidebar Navigation Config ────────────────────────────────────
const NAV = [
  { key:'dashboard', label:'驾驶舱', icon:'◈', group:null },
  { key:'map-dashboard', label:'仪表板', icon:'◈', group:null },
  { group:'物资管理', items:[
    { key:'material-catalog', label:'物资名录', icon:'◇' },
    { key:'stock', label:'实物储备', icon:'◇' },
  ]},
  { group:'仓储管理', items:[
    { key:'warehouse', label:'仓库管理', icon:'◇' },
    { key:'inbound', label:'入库管理', icon:'◇' },
    { key:'outbound', label:'出库管理', icon:'◇' },
    { key:'inventory', label:'库存盘点', icon:'◇' },
  ]},
  { group:'调拨管理', items:[
    { key:'transfer', label:'调拨列表', icon:'◇' },
    { key:'create-transfer', label:'发起调拨', icon:'◇' },
    { key:'demand', label:'需求登记', icon:'◇' },
  ]},
  { group:'基础信息', items:[
    { key:'supplier', label:'供应商管理', icon:'◇' },
    { key:'warning', label:'预警管理', icon:'◇' },
    { key:'system', label:'系统管理', icon:'◇' },
  ]},
  { key:'statistics', label:'统计分析', icon:'◈', group:null },
];

// ─── Sidebar ──────────────────────────────────────────────────────
function Sidebar({ active, setActive, collapsed }) {
  const [openGroups, setOpenGroups] = React.useState(['物资管理','仓储管理','调拨管理','基础信息']);
  const toggleGroup = g => setOpenGroups(prev => prev.includes(g) ? prev.filter(x=>x!==g) : [...prev,g]);

  return (
    <div style={{
      width: collapsed ? 0 : 220, minWidth: collapsed ? 0 : 220,
      background: T.blue800, overflow:'hidden', display:'flex', flexDirection:'column',
      transition:'width 250ms', flexShrink:0,
    }}>
      {/* Logo */}
      <div style={{padding:'18px 16px 14px',borderBottom:'1px solid rgba(255,255,255,.08)'}}>
        <div style={{display:'flex',alignItems:'center',gap:8}}>
          <div style={{width:30,height:30,background:T.red600,borderRadius:4,display:'flex',alignItems:'center',justifyContent:'center',fontSize:15,color:'white',fontWeight:700,flexShrink:0}}>应</div>
          <div>
            <div style={{fontSize:13,fontWeight:700,color:'white',lineHeight:1.2}}>应急物资管理系统</div>
            <div style={{fontSize:11,color:'rgba(255,255,255,.4)',marginTop:2}}>陕西省应急管理厅</div>
          </div>
        </div>
      </div>

      {/* Nav */}
      <div style={{flex:1,overflowY:'auto',padding:'8px 0'}}>
        {NAV.map((item,i) => {
          // top-level single item
          if (!item.group) {
            const isActive = active === item.key;
            return (
              <div key={item.key} onClick={()=>setActive(item.key)}
                style={{
                  display:'flex', alignItems:'center', gap:10,
                  padding:'9px 16px', cursor:'pointer',
                  background: isActive ? 'rgba(255,255,255,.12)' : 'transparent',
                  borderLeft: isActive ? `3px solid ${T.gold500}` : '3px solid transparent',
                  color: isActive ? 'white' : 'rgba(255,255,255,.65)',
                  fontSize:14, transition:'all 150ms',
                  marginBottom: i === NAV.length-1 ? 0 : 0,
                }}
                onMouseEnter={e=>{ if(!isActive) e.currentTarget.style.background='rgba(255,255,255,.06)'; }}
                onMouseLeave={e=>{ if(!isActive) e.currentTarget.style.background='transparent'; }}
              >
                <span style={{fontSize:12}}>{item.icon}</span>
                <span>{item.label}</span>
              </div>
            );
          }
          // group
          const isOpen = openGroups.includes(item.group);
          const hasActive = item.items.some(x=>x.key===active);
          return (
            <div key={item.group}>
              <div onClick={()=>toggleGroup(item.group)}
                style={{
                  display:'flex', alignItems:'center', justifyContent:'space-between',
                  padding:'7px 16px', cursor:'pointer',
                  color: hasActive ? T.gold500 : 'rgba(255,255,255,.4)',
                  fontSize:12, fontWeight:500, letterSpacing:'.04em',
                  userSelect:'none',
                }}>
                <span>{item.group}</span>
                <span style={{fontSize:10,transition:'transform 200ms',transform:isOpen?'rotate(90deg)':'rotate(0deg)'}}>▶</span>
              </div>
              {isOpen && item.items.map(sub => {
                const isActive = active === sub.key;
                return (
                  <div key={sub.key} onClick={()=>setActive(sub.key)}
                    style={{
                      display:'flex', alignItems:'center', gap:8,
                      padding:'8px 16px 8px 32px', cursor:'pointer',
                      background: isActive ? 'rgba(255,255,255,.12)' : 'transparent',
                      borderLeft: isActive ? `3px solid ${T.gold500}` : '3px solid transparent',
                      color: isActive ? 'white' : 'rgba(255,255,255,.6)',
                      fontSize:13, transition:'all 150ms',
                    }}
                    onMouseEnter={e=>{ if(!isActive) e.currentTarget.style.background='rgba(255,255,255,.06)'; }}
                    onMouseLeave={e=>{ if(!isActive) e.currentTarget.style.background='transparent'; }}
                  >
                    <span style={{fontSize:9,opacity:.6}}>■</span>
                    <span>{sub.label}</span>
                  </div>
                );
              })}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── Header Bar ───────────────────────────────────────────────────
function HeaderBar({ user, onLogout, onToggleSidebar }) {
  const now = new Date();
  const dateStr = `${now.getFullYear()}年${String(now.getMonth()+1).padStart(2,'0')}月${String(now.getDate()).padStart(2,'0')}日`;
  return (
    <div style={{height:50,background:T.blue800,borderBottom:'1px solid rgba(255,255,255,.08)',display:'flex',alignItems:'center',justifyContent:'space-between',padding:'0 20px',flexShrink:0}}>
      <div style={{display:'flex',alignItems:'center',gap:12}}>
        <button onClick={onToggleSidebar} style={{background:'none',border:'none',cursor:'pointer',color:'rgba(255,255,255,.7)',fontSize:18,padding:'0 4px',lineHeight:1}}>☰</button>
        <span style={{fontSize:12,color:'rgba(255,255,255,.5)'}}>{dateStr} · 陕西省应急管理厅物资保障平台</span>
      </div>
      <div style={{display:'flex',alignItems:'center',gap:16}}>
        <div style={{position:'relative',cursor:'pointer'}}>
          <span style={{fontSize:16,color:'rgba(255,255,255,.7)'}}>🔔</span>
          <span style={{position:'absolute',top:-4,right:-6,background:T.red600,color:'white',fontSize:10,borderRadius:999,padding:'0 4px',lineHeight:'16px',fontWeight:700}}>3</span>
        </div>
        <div style={{display:'flex',alignItems:'center',gap:8}}>
          <div style={{width:28,height:28,background:T.blue600,borderRadius:'50%',display:'flex',alignItems:'center',justifyContent:'center',fontSize:12,color:'white',fontWeight:500,border:'2px solid rgba(255,255,255,.2)'}}>
            {user.name[0]}
          </div>
          <span style={{fontSize:13,color:'rgba(255,255,255,.85)'}}>{user.name}</span>
          <span style={{fontSize:12,color:'rgba(255,255,255,.4)',borderLeft:'1px solid rgba(255,255,255,.15)',paddingLeft:8}}>{user.role}</span>
          <button onClick={onLogout} style={{background:'none',border:'1px solid rgba(255,255,255,.2)',borderRadius:4,cursor:'pointer',color:'rgba(255,255,255,.5)',fontSize:12,padding:'2px 8px',marginLeft:4}}>退出</button>
        </div>
      </div>
    </div>
  );
}

// ─── Main App ────────────────────────────────────────────────────
function App() {
  const [user, setUser] = React.useState(null);
  const [page, setPage] = React.useState('dashboard');
  const [collapsed, setCollapsed] = React.useState(false);

  const pageMap = {
    'dashboard': () => <DashboardPage nav={setPage}/>,
    'map-dashboard': () => <MapPage/>,
    'material-catalog': () => <MaterialCatalogPage/>,
    'stock': () => <StockPage/>,
    'warehouse': () => <WarehousePage/>,
    'inbound': () => <InboundPage/>,
    'outbound': () => <OutboundPage/>,
    'inventory': () => <InventoryPage/>,
    'transfer': () => <TransferPage nav={setPage}/>,
    'create-transfer': () => <CreateTransferPage nav={setPage}/>,
    'demand': () => <DemandPage/>,
    'supplier': () => <SupplierPage/>,
    'warning': () => <WarningPage/>,
    'statistics': () => <StatisticsPage/>,
    'system': () => <SystemPage/>,
  };

  if (!user) {
    return <LoginPage onLogin={u => { setUser(u); setPage('dashboard'); }}/>;
  }

  return (
    <div style={{display:'flex',flexDirection:'column',height:'100vh',overflow:'hidden'}}>
      {/* Red top stripe */}
      <div style={{height:3,background:T.red600,flexShrink:0}}/>
      <HeaderBar user={user} onLogout={()=>setUser(null)} onToggleSidebar={()=>setCollapsed(c=>!c)}/>
      <div style={{display:'flex',flex:1,overflow:'hidden'}}>
        <Sidebar active={page} setActive={setPage} collapsed={collapsed}/>
        <div style={{flex:1,overflow:'auto',padding:20,background:T.gray50}}>
          {(pageMap[page] || pageMap['dashboard'])()}
        </div>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);