import { ReactNode, useState } from 'react'
import { Layout, Menu, Typography, Button, Space } from 'antd'
import {
  DashboardOutlined,
  DatabaseOutlined,
  UserOutlined,
  SettingOutlined,
  BarChartOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons'
import { Link, useLocation } from 'react-router-dom'
import { useAuthStore } from '../../stores/auth'
import packageJson from '../../../package.json'

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

interface AppLayoutProps {
  children: ReactNode
}

function AppLayout({ children }: AppLayoutProps) {
  const location = useLocation()
  const { user, logout } = useAuthStore()
  const [collapsed, setCollapsed] = useState(false)
  const showBanner = true
  const appVersion = `v${packageJson.version}`

  const menuItems = [
    { key: '/', icon: <DashboardOutlined />, label: <Link to="/">仪表盘</Link> },
    { key: '/datasources', icon: <DatabaseOutlined />, label: <Link to="/datasources">数据源</Link> },
    { key: '/data', icon: <BarChartOutlined />, label: <Link to="/data">采集数据</Link> },
    { key: '/users', icon: <UserOutlined />, label: <Link to="/users">用户管理</Link> },
    { key: '/settings', icon: <SettingOutlined />, label: <Link to="/settings">系统配置</Link> },
  ]

  return (
    <Layout className="dashboard-layout">
      <Sider
        width={208}
        collapsedWidth={72}
        collapsible
        collapsed={collapsed}
        onCollapse={setCollapsed}
        className="dashboard-sider"
      >
        <div className="dashboard-sider-inner">
          <div>
            <div className={`dashboard-brand ${collapsed ? 'dashboard-brand--collapsed' : ''}`} onClick={collapsed ? () => setCollapsed(false) : undefined}>
              <Button
                type="text"
                icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                onClick={(event) => {
                  event.stopPropagation()
                  setCollapsed(!collapsed)
                }}
                className={`dashboard-sider-toggle ${collapsed ? 'dashboard-sider-toggle--collapsed' : ''}`}
              />
              {!collapsed ? (
                <Text strong style={{ color: 'white', fontSize: 18 }}>智能星球</Text>
              ) : null}
            </div>
            <Menu
              theme="dark"
              mode="inline"
              selectedKeys={[location.pathname]}
              items={menuItems}
            />
          </div>

          {showBanner && !collapsed ? (
            <div className="dashboard-sider-banner">
              <Space direction="vertical" size={10} style={{ width: '100%' }}>
                <div>
                  <Text className="dashboard-sider-banner-label">当前账号</Text>
                  <Text strong className="dashboard-sider-banner-value">{user?.username}</Text>
                </div>
                <div>
                  <Text className="dashboard-sider-banner-label">版本号</Text>
                  <Text strong className="dashboard-sider-banner-value">{appVersion}</Text>
                </div>
                <Button type="primary" danger ghost block onClick={logout}>
                  退出登录
                </Button>
              </Space>
            </div>
          ) : null}
        </div>
      </Sider>
      <Layout style={{ minWidth: 0, minHeight: 0, height: '100%' }}>
        <Content className="dashboard-content" style={{ padding: 24, minHeight: 0, height: '100%' }}>
          <div className="dashboard-content-inner">{children}</div>
        </Content>
      </Layout>
    </Layout>
  )
}

export default AppLayout
