import { Suspense, useEffect, useState } from 'react'
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import { Layout, Menu, Button, Typography } from 'antd'
import {
  DashboardOutlined, VideoCameraOutlined, PlusOutlined, MonitorOutlined,
  CloudServerOutlined, SettingOutlined, LogoutOutlined,
} from '@ant-design/icons'
import { clearToken } from '../api/client'
import { useBrand } from '../brand/BrandContext'

const { Sider, Content, Header } = Layout
const { Text } = Typography

const menuItems = [
  { key: '/admin', icon: <DashboardOutlined />, label: '概览' },
  { key: '/admin/board', icon: <MonitorOutlined />, label: '直播看板' },
  { key: '/admin/streams', icon: <VideoCameraOutlined />, label: '节目列表' },
  { key: '/admin/streams/new', icon: <PlusOutlined />, label: '创建节目' },
  { key: '/admin/nodes', icon: <CloudServerOutlined />, label: '边缘节点' },
  { key: '/admin/settings', icon: <SettingOutlined />, label: '系统设置' },
]

const adminPageImports = [
  () => import('./pages/Dashboard'),
  () => import('./pages/LiveBoard'),
  () => import('./pages/StreamList'),
  () => import('./pages/StreamForm'),
  () => import('./pages/ReplayEditor'),
  () => import('./pages/NodeManager'),
  () => import('./pages/Settings'),
]

export default function AdminLayout() {
  const { brand } = useBrand()
  const [collapsed, setCollapsed] = useState(false)
  const navigate = useNavigate()
  const location = useLocation()

  const selectedKey = menuItems.find(
    item => location.pathname === item.key || (location.pathname === '/' && item.key === '/admin')
  )?.key || '/admin'

  const handleLogout = () => { clearToken(); navigate('/admin/login') }

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        collapsible collapsed={collapsed} onCollapse={setCollapsed}
        width={220}
        style={{
          borderRight: '1px solid #EBE5DB',
          background: '#fff',
        }}
      >
        <div style={{
          height: 60, display: 'flex', alignItems: 'center', justifyContent: 'center',
          borderBottom: '1px solid #EBE5DB',
        }}>
          <Text strong style={{
            fontSize: collapsed ? 14 : 17, letterSpacing: '-0.02em',
            fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
            color: '#C2693A',
          }}>
            {collapsed ? brand.brand_name.slice(0, 2) : brand.brand_name}
          </Text>
        </div>
        <Menu mode="inline" selectedKeys={[selectedKey]} items={menuItems}
          onClick={({ key }) => navigate(key)}
          style={{ border: 'none', marginTop: 8 }} />
      </Sider>
      <Layout>
        <Header style={{
          background: '#fff', borderBottom: '1px solid #EBE5DB',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '0 48px',
        }}>
          <Text style={{ color: '#949088', fontSize: 13 }}>{brand.brand_tagline}</Text>
          <Button type="text" icon={<LogoutOutlined />} onClick={handleLogout}>退出登录</Button>
        </Header>
        <Content style={{ padding: 40, overflow: 'auto' }}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  )
}