import {
  ContainerOutlined,
  LogoutOutlined,
  ShoppingOutlined,
  UserOutlined,
} from '@ant-design/icons'
import { App, Button, Layout, Menu, Space, Typography } from 'antd'
import type { MenuProps } from 'antd'
import { Outlet, useLocation, useNavigate } from 'react-router'

import { logoutWorker } from '@/services/worker'
import { clearWorkerSession, getWorkerStatus, getWorkerUsername } from '@/utils/worker-auth'

const menuItems: MenuProps['items'] = [
  { key: '/worker/hall', icon: <ShoppingOutlined />, label: '抢单大厅' },
  { key: '/worker/orders', icon: <ContainerOutlined />, label: '我的订单' },
  { key: '/worker/profile', icon: <UserOutlined />, label: '个人中心' },
]

export default function WorkerLayout() {
  const navigate = useNavigate()
  const location = useLocation()
  const { message } = App.useApp()
  const username = getWorkerUsername() || '打手'
  const status = getWorkerStatus()

  async function submitLogout() {
    try {
      await logoutWorker()
    } catch {
      // 接单端退出为无状态操作，本地清理优先。
    } finally {
      clearWorkerSession()
      message.success('已退出登录')
      navigate('/worker/login', { replace: true })
    }
  }

  return (
    <Layout className="admin-shell worker-shell">
      <Layout.Sider width={220} className="admin-sider" trigger={null}>
        <div className="admin-sider-inner">
          <div className="admin-brand">
            <div className="admin-brand-copy">
              <strong>王大锤</strong>
              <span>接单平台</span>
            </div>
          </div>
          <div className="admin-sidebar-profile">
            <Typography.Text strong>{username}</Typography.Text>
            <Typography.Text type="secondary">{formatWorkerStatus(status)}</Typography.Text>
          </div>
          <Menu
            mode="inline"
            inlineIndent={16}
            selectedKeys={[resolveSelectedKey(location.pathname)]}
            items={menuItems}
            className="admin-menu"
            onClick={({ key }) => navigate(String(key))}
          />
          <div className="admin-sider-footer">
            <Button block icon={<LogoutOutlined />} onClick={submitLogout}>
              退出登录
            </Button>
          </div>
        </div>
      </Layout.Sider>
      <Layout className="admin-main-shell">
        <Layout.Header className="admin-topbar">
          <Space className="admin-user" size={12}>
            <Typography.Text type="secondary">{formatWorkerStatus(status)}</Typography.Text>
          </Space>
        </Layout.Header>
        <Layout.Content className="admin-content">
          <Outlet />
        </Layout.Content>
      </Layout>
    </Layout>
  )
}

function resolveSelectedKey(pathname: string) {
  if (pathname.startsWith('/worker/orders')) return '/worker/orders'
  if (pathname.startsWith('/worker/profile')) return '/worker/profile'
  return '/worker/hall'
}

function formatWorkerStatus(status: string) {
  if (status === 'active') return '已审核'
  if (status === 'pending_review') return '待审核'
  if (status === 'rejected') return '审核未通过'
  if (status === 'disabled') return '已停用'
  return '未登录'
}