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

const opsLinks = [
  { to: '/', label: '审核队列', end: true },
  { to: '/reports', label: '举报处理' },
  { to: '/featured', label: '精选管理' },
  { to: '/creators', label: '创作者' },
  { to: '/analytics', label: '数据看板' },
];

export function OpsLayout() {
  const { user } = useAuth();

  return (
    <div className="layout">
      <header>
        <h1>Plaza 运营后台</h1>
        <p style={{ color: '#68716c' }}>内容审核、精选与数据概览</p>
      </header>
      <nav className="nav">
        {opsLinks.map((link) => (
          <NavLink
            key={link.to}
            to={link.to}
            end={link.end}
            className={({ isActive }) => (isActive ? 'active' : undefined)}
          >
            {link.label}
          </NavLink>
        ))}
        {user?.role === 'admin' ? (
          <>
            <NavLink
              to="/admin/wechat"
              className={({ isActive }) => (isActive ? 'active' : undefined)}
              style={{ marginLeft: 'auto' }}
            >
              通知推送
            </NavLink>
            <NavLink
              to="/admin"
              className={({ isActive }) => (isActive ? 'active' : undefined)}
              style={{ opacity: 0.75 }}
            >
              ⚙ 超管
            </NavLink>
          </>
        ) : null}
      </nav>
      <Outlet />
    </div>
  );
}