import React, { useState, useEffect } from 'react'
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import {
  Layout,
  Menu,
  Button,
  Avatar,
  Dropdown,
  Typography,
  Space,
  Drawer,
  Modal,
  theme
} from 'antd'
import {
  DashboardOutlined,
  ProjectOutlined,
  DollarOutlined,
  FileTextOutlined,
  BarChartOutlined,
  UserOutlined,
  LogoutOutlined,
  SettingOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  CalculatorOutlined,
  ToolOutlined,
  WalletOutlined,
  MoneyCollectOutlined,
  AuditOutlined,
  FileSearchOutlined,
  ShoppingCartOutlined,
  TeamOutlined,
  ShopOutlined,
  SolutionOutlined,
  HomeOutlined,
  FileDoneOutlined,
  AppstoreOutlined,
  CheckCircleOutlined,
  InboxOutlined,
  DollarCircleOutlined,
  CarOutlined
} from '@ant-design/icons'
import { useAuthStore } from '../../store/authStore'
import { useLanguageStore } from '../../store/languageStore'
import CompanyLogo from '../common/CompanyLogo'
import LanguageSelector from '../common/LanguageSelector'

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

const menuItems = [
  {
    key: '/dashboard',
    icon: <DashboardOutlined />,
    label: '工作台'
  },
  {
    key: '/projects',
    icon: <ProjectOutlined />,
    label: '项目管理'
  },
  {
    key: '/budget-projects',
    icon: <CalculatorOutlined />,
    label: '预算报价'
  },
  {
    key: '/construction',
    icon: <ToolOutlined />,
    label: '施工管理',
    children: [
      {
        key: '/construction',
        label: '施工总览'
      }
    ]
  },
  {
    key: 'approval',
    icon: <SolutionOutlined />,
    label: '审批管理',
    children: [
      {
        key: '/approval',
        icon: <CheckCircleOutlined />,
        label: '待审批'
      },
      {
        key: '/execution',
        icon: <DollarOutlined />,
        label: '待执行'
      }
    ]
  },
  {
    key: 'finance-docs',
    icon: <FileDoneOutlined />,
    label: '财务申请',
    children: [
      {
        key: '/advances',
        icon: <WalletOutlined />,
        label: '预支申请'
      },
      {
        key: '/reimbursements',
        icon: <FileTextOutlined />,
        label: '报销申请'
      },
      {
        key: '/payment-requests',
        icon: <MoneyCollectOutlined />,
        label: '付款申请'
      },
      {
        key: '/verification',
        icon: <AuditOutlined />,
        label: '核销申请'
      }
    ]
  },
  {
    key: 'finance-group',
    icon: <BarChartOutlined />,
    label: '财务管理',
    children: [
      {
        key: '/finance',
        label: '财务概览'
      },
      {
        key: '/exchange-rates',
        icon: <DollarOutlined />,
        label: '汇率管理'
      },
      {
        key: '/project-cost',
        icon: <DollarCircleOutlined />,
        label: '项目成本'
      },
      {
        key: '/advances/verification-status',
        icon: <AuditOutlined />,
        label: '预支核销状态'
      }
    ]
  },
  {
    key: '/reports',
    icon: <FileSearchOutlined />,
    label: '报表分析'
  },
  {
    key: 'procurement',
    icon: <ShoppingCartOutlined />,
    label: '采购管理',
    children: [
      {
        key: '/products',
        icon: <AppstoreOutlined />,
        label: '商品管理'
      },
      {
        key: '/purchase-requests',
        icon: <FileTextOutlined />,
        label: '采购申请'
      },
      {
        key: '/purchase-orders',
        icon: <ShoppingCartOutlined />,
        label: '采购订单'
      },
      {
        key: '/payment-plans',
        icon: <MoneyCollectOutlined />,
        label: '付款计划'
      },
      {
        key: '/inventory',
        icon: <InboxOutlined />,
        label: '库存管理'
      }
    ]
  },
  {
    key: 'partners',
    icon: <TeamOutlined />,
    label: '合作伙伴',
    children: [
      {
        key: '/suppliers',
        icon: <ShopOutlined />,
        label: '供应商管理'
      },
      {
        key: '/subcontractors',
        icon: <SolutionOutlined />,
        label: '分包商管理'
      },
      {
        key: '/customers',
        icon: <HomeOutlined />,
        label: '客户管理'
      },
      {
        key: '/logistics-companies',
        icon: <CarOutlined />,
        label: '物流管理'
      }
    ]
  }
]

const MainLayout: React.FC = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const [collapsed, setCollapsed] = useState(false)
  const [isMobile, setIsMobile] = useState(false)
  const [mobileMenuVisible, setMobileMenuVisible] = useState(false)
  const [settingsVisible, setSettingsVisible] = useState(false)
  const [openKeys, setOpenKeys] = useState<string[]>([])
  const { user, logout } = useAuthStore()
  const { t } = useLanguageStore()
  
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken()
  
  useEffect(() => {
    const checkMobile = () => {
      const mobile = window.innerWidth <= 768
      setIsMobile(mobile)
      if (mobile) {
        setCollapsed(true)
      }
    }
    
    checkMobile()
    window.addEventListener('resize', checkMobile)
    return () => window.removeEventListener('resize', checkMobile)
  }, [])
  
  const userMenuItems = [
    {
      key: 'profile',
      icon: <UserOutlined />,
      label: '个人信息'
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: '系统设置'
    },
    ...(user?.role === 'admin' ? [{
      type: 'divider' as const
    }, {
      key: '/admin',
      icon: <SettingOutlined />,
      label: '后台管理'
    }] : []),
    {
      type: 'divider' as const
    },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录'
    }
  ]
  
  const handleMenuClick = ({ key }: { key: string }) => {
    if (key === 'logout') {
      logout()
      navigate('/login')
    } else if (key === 'settings') {
      setSettingsVisible(true)
    } else if (key === 'profile') {
      navigate('/profile')
    } else if (key.startsWith('/')) {
      navigate(key)
      if (isMobile) {
        setMobileMenuVisible(false)
      }
    }
  }
  
  const getSelectedKey = () => {
    return location.pathname
  }
  
  const getOpenKeys = () => {
    const path = location.pathname
    if (path.startsWith('/suppliers') || 
        path.startsWith('/subcontractors') || 
        path.startsWith('/customers') ||
        path.startsWith('/logistics-companies')) {
      return ['partners']
    }
    if (path.startsWith('/advances') || 
        path.startsWith('/reimbursements') || 
        path.startsWith('/payment-requests') ||
        path.startsWith('/verification')) {
      return ['finance-docs']
    }
    if (path.startsWith('/approval') || path.startsWith('/execution')) {
      return ['approval']
    }
    if (path.startsWith('/products') || 
        path.startsWith('/purchase-requests') || 
        path.startsWith('/purchase-orders') || 
        path.startsWith('/payment-plans') || 
        path.startsWith('/inventory')) {
      return ['procurement']
    }
    if (path.startsWith('/project-cost')) {
      return ['finance-group']
    }
    return []
  }

  useEffect(() => {
    setOpenKeys(getOpenKeys())
  }, [location.pathname])
  
  return (
    <Layout style={{ minHeight: '100vh' }}>
      {!isMobile && (
        <Sider
          trigger={null}
          collapsible
          collapsed={collapsed}
          style={{
            overflow: 'auto',
            height: '100vh',
            position: 'fixed',
            left: 0,
            top: 0,
            bottom: 0,
            background: colorBgContainer,
            borderRight: '1px solid #f0f0f0'
          }}
          width={220}
          collapsedWidth={80}
        >
          <div style={{
            height: 64,
            display: 'flex',
            alignItems: 'center',
            justifyContent: collapsed ? 'center' : 'flex-start',
            padding: collapsed ? 0 : '0 20px',
            borderBottom: '1px solid #f0f0f0'
          }}>
            <CompanyLogo collapsed={collapsed} />
          </div>
          
          <div style={{ 
            height: 'calc(100vh - 64px - 56px)', 
            overflow: 'auto',
            paddingBottom: 8
          }}>
            <Menu
              mode="inline"
              selectedKeys={[getSelectedKey()]}
              openKeys={openKeys}
              onOpenChange={(keys) => setOpenKeys(keys as string[])}
              items={menuItems}
              onClick={handleMenuClick}
              style={{ borderRight: 0 }}
            />
          </div>
          
          <div style={{
            position: 'absolute',
            bottom: 0,
            left: 0,
            right: 0,
            height: 56,
            display: 'flex',
            alignItems: 'center',
            justifyContent: collapsed ? 'center' : 'flex-start',
            padding: collapsed ? 0 : '0 16px',
            borderTop: '1px solid #f0f0f0',
            background: colorBgContainer
          }}>
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              style={{ width: collapsed ? '100%' : 'auto' }}
            >
              {!collapsed && '收起菜单'}
            </Button>
          </div>
        </Sider>
      )}
      
      {isMobile && (
        <Drawer
          placement="left"
          onClose={() => setMobileMenuVisible(false)}
          open={mobileMenuVisible}
          width={280}
          styles={{ body: { padding: 0 } }}
        >
          <div style={{ height: 64, padding: '0 20px', display: 'flex', alignItems: 'center', borderBottom: '1px solid #f0f0f0' }}>
            <CompanyLogo collapsed={false} />
          </div>
          <Menu
            mode="inline"
            selectedKeys={[getSelectedKey()]}
            openKeys={openKeys}
            onOpenChange={(keys) => setOpenKeys(keys as string[])}
            items={menuItems}
            onClick={handleMenuClick}
            style={{ borderRight: 0 }}
          />
        </Drawer>
      )}
      
      <Layout style={{ marginLeft: isMobile ? 0 : (collapsed ? 80 : 220), transition: 'margin-left 0.2s' }}>
        <Header style={{
          padding: '0 24px',
          background: colorBgContainer,
          position: 'sticky',
          top: 0,
          zIndex: 1,
          borderBottom: '1px solid #f0f0f0',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        }}>
          {isMobile && (
            <Button
              type="text"
              icon={<MenuFoldOutlined />}
              onClick={() => setMobileMenuVisible(true)}
            />
          )}
          
          <div style={{ flex: 1 }} />
          
          <Space size="middle">
            <LanguageSelector />
            
            <Dropdown menu={{ items: userMenuItems, onClick: handleMenuClick }} placement="bottomRight">
              <Space style={{ cursor: 'pointer' }}>
                <Avatar icon={<UserOutlined />} style={{ backgroundColor: '#1890ff' }} />
                {!isMobile && <Text>{user?.name || user?.username || '用户'}</Text>}
              </Space>
            </Dropdown>
          </Space>
        </Header>
        
        <Content style={{
          margin: 0,
          minHeight: 280,
          background: '#f5f5f5'
        }}>
          <Outlet />
        </Content>
      </Layout>
      
      <Modal
        title="系统设置"
        open={settingsVisible}
        onCancel={() => setSettingsVisible(false)}
        footer={null}
      >
        <p>系统设置功能开发中...</p>
      </Modal>
    </Layout>
  )
}

export default MainLayout
