import { CircleHelp, LogOut, UserRound } from 'lucide-react'
import { NavLink, Outlet } from 'react-router-dom'
import { Brand } from './Brand'
import { Footer } from './Footer'
import { useAuth } from '../AuthContext'

export function Layout() {
  const { user, logout } = useAuth()

  return (
    <div className="app-shell">
      <header className="topbar">
        <NavLink to="/" className="logo-link">
          <Brand />
        </NavLink>
        <nav>
          <NavLink to="/" end>
            我的课程
          </NavLink>
        </nav>
        <div className="top-actions">
          {user?.role !== 'ADMIN' && (
            <NavLink to="/profile?tab=points" className="points-balance-badge" title="查看积分消费记录">
              积分 {user?.pointsBalance ?? 0}
            </NavLink>
          )}
          <NavLink to="/profile" className="user-link">
            <UserRound size={16} />
            <span>{user?.contactName || user?.phone}</span>
          </NavLink>
          <NavLink to="/help" className="icon-button" title="使用帮助">
            <CircleHelp size={19} />
          </NavLink>
          <button className="icon-button" title="退出登录" onClick={logout}>
            <LogOut size={18} />
          </button>
        </div>
      </header>
      <main className="app-main">
        <Outlet />
      </main>
      <Footer />
    </div>
  )
}