import { Link, useLocation } from 'react-router-dom'

const NAV_ITEMS = [
  { path: '/', label: '仪表盘' },
  { path: '/models', label: '模型' },
  { path: '/datasets', label: '数据集' },
  { path: '/training', label: '训练' },
  { path: '/evaluation', label: '评估' },
  { path: '/deployment', label: '部署' },
  { path: '/inference', label: '推理' },
]

export function Layout({ children }: { children: React.ReactNode }) {
  const location = useLocation()

  return (
    <div style={{ display: 'flex', minHeight: '100vh', fontFamily: 'system-ui, sans-serif' }}>
      <nav style={{
        width: 200, background: '#1a1a2e', color: '#fff', padding: '24px 0',
        display: 'flex', flexDirection: 'column', gap: 4,
      }}>
        <h2 style={{ padding: '0 16px 20px', fontSize: 16, fontWeight: 700, margin: 0 }}>
          PEFT Platform
        </h2>
        {NAV_ITEMS.map((item) => (
          <Link
            key={item.path}
            to={item.path}
            style={{
              padding: '10px 16px',
              textDecoration: 'none',
              color: location.pathname === item.path ? '#fff' : '#999',
              background: location.pathname === item.path ? '#16213e' : 'transparent',
              borderLeft: location.pathname === item.path ? '3px solid #e94560' : '3px solid transparent',
              fontSize: 14,
            }}
          >
            {item.label}
          </Link>
        ))}
      </nav>
      <main style={{ flex: 1, padding: 24, background: '#f5f5f5' }}>{children}</main>
    </div>
  )
}