import { useState, useMemo } from 'react';
import { useNavigate, useLocation } from 'react-router';
import { Layout, Breadcrumb, Dropdown, Avatar, Switch, theme } from 'antd';
import type { MenuProps } from 'antd';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  LogoutOutlined,
  SettingOutlined,
  SunOutlined,
  MoonOutlined,
  GlobalOutlined,
} from '@ant-design/icons';
import StyleSettings from './StyleSettings';
import { useTranslation } from 'react-i18next';
import { useAppStore } from '@/stores/useAppStore';
import { useAuthStore } from '@/stores/useAuthStore';
import { findBreadcrumb } from '@/router/dynamicRoutes';

const Header: React.FC = () => {
  const { t } = useTranslation('header');
  const { token: themeToken } = theme.useToken();
  const collapsed = useAppStore((s) => s.collapsed);
  const toggleCollapsed = useAppStore((s) => s.toggleCollapsed);
  const darkMode = useAppStore((s) => s.darkMode);
  const toggleDarkMode = useAppStore((s) => s.toggleDarkMode);
  const setLanguage = useAppStore((s) => s.setLanguage);
  const userInfo = useAuthStore((s) => s.userInfo);
  const menus = useAuthStore((s) => s.menus);
  const logout = useAuthStore((s) => s.logout);
  const navigate = useNavigate();
  const location = useLocation();
  const [styleOpen, setStyleOpen] = useState(false);

  const breadcrumbItems = useMemo(
    () => findBreadcrumb(location.pathname, menus),
    [location.pathname, menus],
  );

  const langItems: MenuProps['items'] = [
    {
      key: 'zh-CN',
      label: t('chinese'),
      onClick: () => setLanguage('zh-CN'),
    },
    {
      key: 'en-US',
      label: t('english'),
      onClick: () => setLanguage('en-US'),
    },
  ];

  const userMenuItems: MenuProps['items'] = [
    { key: 'profile', icon: <UserOutlined />, label: t('profile') },
    { key: 'style', icon: <SettingOutlined />, label: t('styleSettings') },
    { type: 'divider' },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: t('logout'),
      danger: true,
    },
  ];

  const handleMenuClick: MenuProps['onClick'] = async ({ key }) => {
    if (key === 'logout') {
      await logout();
      navigate('/login', { replace: true });
    } else if (key === 'style') {
      setStyleOpen(true);
    } else if (key === 'profile') {
      navigate('/profile');
    }
  };

  return (
    <Layout.Header
      style={{
        padding: '0 24px',
        height: '50px',
        background: themeToken.colorBgContainer,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderBottom: `1px solid ${themeToken.colorBorderSecondary}`,
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <span
          onClick={toggleCollapsed}
          style={{ cursor: 'pointer', fontSize: 18 }}
        >
          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </span>
        <Breadcrumb items={breadcrumbItems} />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <Dropdown menu={{ items: langItems }} placement="bottomRight" arrow>
          <span style={{ cursor: 'pointer', fontSize: 16, display: 'flex', alignItems: 'center', gap: 4 }}>
            <GlobalOutlined />
            <span style={{ fontSize: 12 }}>{t('language_indicator')}</span>
          </span>
        </Dropdown>
        <Switch
          checkedChildren={<MoonOutlined />}
          unCheckedChildren={<SunOutlined />}
          checked={darkMode}
          onChange={toggleDarkMode}
        />
        <Dropdown
          menu={{ items: userMenuItems, onClick: handleMenuClick }}
          placement="bottomRight" arrow
        >
          <span
            style={{
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: 8,
            }}
          >
            <Avatar
              icon={<UserOutlined />}
              src={userInfo?.avatar || undefined}
              size="small"
            />
            <span>{userInfo?.nickname || userInfo?.username}</span>
          </span>
        </Dropdown>
      </div>
      <StyleSettings open={styleOpen} onClose={() => setStyleOpen(false)} />
    </Layout.Header>
  );
};

export default Header;