// src/App.jsx
import React, { useState, useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import Header  from './components/Header'
import Sidebar from './components/Sidebar'
import AppRoutes from './router/App'
import { getUserInfo } from './utils/auth'
import './App.css'

export default function App() {
  const location = useLocation()

  // 初始 role = null （未登录或刚进来时）
  const [role, setRole] = useState(null)

  // 每次路由变化（含登录後 navigate），都重新从 storage 读一遍 userInfo
  useEffect(() => {
    const u = getUserInfo()
    setRole(u?.role || null)
  }, [location.pathname])

  // 只有普通 user 才显示侧边栏
  const showSidebar = role === 'user'

  return (
    <div className="app">
      <Header />

      {showSidebar && <Sidebar />}

      <main
        className="main-content"
        style={{
          // 没侧边栏时去掉左边距
          marginLeft: showSidebar ? undefined : 0
        }}
      >
        <div className="content-wrapper">
          <AppRoutes />
        </div>
      </main>
    </div>
  )
}