import { ReactNode, useState } from 'react'
import { Layout, Menu, Typography, Button } 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'

const { Header, 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 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={240} 
        collapsedWidth={80}
        collapsible 
        collapsed={collapsed} 
        onCollapse={setCollapsed}
        className="dashboard-sider"
      >
        <div style={{ height: 64, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {collapsed ? (
            <Text strong style={{ color: 'white', fontSize: 20 }}>🌏</Text>
          ) : (
            <Text strong style={{ color: 'white', fontSize: 18 }}>智能星球</Text>
          )}
        </div>
        <Menu 
          theme="dark" 
          mode="inline" 
          selectedKeys={[location.pathname]} 
          items={menuItems} 
        />
      </Sider>
      <Layout>
        <Header className="dashboard-header" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 16px' }}>
          <Button 
            type="text" 
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} 
            onClick={() => setCollapsed(!collapsed)}
            style={{ fontSize: 16 }}
          />
          <Text strong>欢迎, {user?.username}</Text>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Button type="link" danger onClick={logout}>退出登录</Button>
          </div>
        </Header>
        <Content className="dashboard-content" style={{ padding: 24, minHeight: '100%', overflow: 'auto' }}>
          {children}
        </Content>
      </Layout>
    </Layout>
  )
}

export default AppLayout