import React from 'react';
import { NavLink, Outlet } from 'react-router-dom';
import { useAuth } from '../lib/auth';
import { Role } from '../types';

const NAV = [
  { to: '/', label: '概览', roles: ['ADMIN', 'MANAGER', 'EMPLOYEE'] as Role[] },
  { to: '/attendance', label: '考勤', roles: ['ADMIN', 'MANAGER', 'EMPLOYEE'] as Role[] },
  { to: '/leave', label: '请假', roles: ['ADMIN', 'MANAGER', 'EMPLOYEE'] as Role[] },
  { to: '/approvals', label: '审批', roles: ['ADMIN', 'MANAGER'] as Role[] },
  { to: '/users', label: '用户管理', roles: ['ADMIN', 'MANAGER'] as Role[] },
  { to: '/notifications', label: '通知', roles: ['ADMIN', 'MANAGER', 'EMPLOYEE'] as Role[] },
];

export default function Layout() {
  const { user, logout } = useAuth();
  const role = user?.role;

  return (
    <div className="app-shell">
      <aside className="sidebar">
        <div className="brand">
          <div className="brand-mark" />
          <div>
            <div className="brand-title">Smart Office</div>
            <div className="brand-sub">Enterprise Suite</div>
          </div>
        </div>
        <nav className="nav">
          {NAV.filter((n) => role && n.roles.includes(role)).map((n) => (
            <NavLink key={n.to} to={n.to} className="nav-link">
              {n.label}
            </NavLink>
          ))}
        </nav>
      </aside>

      <div className="main">
        <header className="topbar">
          <div className="topbar-title">智能办公管理系统</div>
          <div className="topbar-user">
            <span className="badge">{user?.role}</span>
            <div className="user-meta">
              <div className="user-name">{user?.fullName}</div>
              <div className="user-sub">@{user?.username}</div>
            </div>
            <button className="btn btn-ghost" onClick={logout}>
              退出
            </button>
          </div>
        </header>
        <main className="content">
          <Outlet />
        </main>
      </div>
    </div>
  );
}
