import { Layout, Menu, Space, Tag, Typography } from 'antd';
import type { MainSidebarProps } from './types';

const { Sider } = Layout;
const { Text } = Typography;

export function MainSidebar({
  activeTopMenu,
  hasAccess,
  sidebarCollapsed,
  isMobileViewport,
  openKeys: controlledOpenKeys,
  apiMenuItems,
  docsMenuItems,
  planMenuItems,
  chatMenuItems,
  playMenuItems,
  selectedApiMenu,
  selectedDocsMenu,
  selectedPlanMenu,
  selectedChatMenu,
  selectedPlayMenu,
  introColor,
  introTag,
  introDescription,
  onOpenKeysChange,
  onSelectApiMenu,
  onSelectDocsMenu,
  onSelectPlanMenu,
  onSelectChatMenu,
  onSelectPlayMenu,
}: MainSidebarProps) {
  const effectiveTopMenu = !hasAccess ? 'docs' : activeTopMenu;
  const isDocsGroup = effectiveTopMenu === 'docs' || effectiveTopMenu === 'apis';
  const visibleOpenKeys = sidebarCollapsed
    ? []
    : controlledOpenKeys.length
      ? controlledOpenKeys
      : isDocsGroup
        ? !hasAccess
          ? ['docs-group']
          : ['docs-group', 'api-group']
        : effectiveTopMenu === 'play'
          ? ['play-group', 'play-layout-group']
          : ['plan-group', 'codex-live-group', 'app-log-group', 'chat-manage-group'];
  const selectedKeys =
    effectiveTopMenu === 'docs'
      ? [selectedDocsMenu]
      : effectiveTopMenu === 'apis'
        ? [selectedApiMenu]
        : effectiveTopMenu === 'plans'
          ? [selectedPlanMenu]
          : effectiveTopMenu === 'play'
            ? [selectedPlayMenu]
            : [selectedChatMenu];
  const sidebarItems =
    isDocsGroup
      ? !hasAccess
        ? [...(docsMenuItems ?? [])]
        : [...(docsMenuItems ?? []), ...(apiMenuItems ?? [])]
      : effectiveTopMenu === 'play'
        ? [...(playMenuItems ?? [])]
        : [...(planMenuItems ?? []), ...(chatMenuItems ?? [])];

  return (
    <Sider
      width={isMobileViewport ? '100%' : 260}
      collapsed={sidebarCollapsed}
      collapsedWidth={isMobileViewport ? 0 : 72}
      className={isMobileViewport ? 'app-sider app-sider--mobile' : 'app-sider'}
      theme="light"
    >
      <div className="app-sider__inner">
        <Space direction="vertical" size={8} className="app-sider__intro">
          <Tag color={introColor}>{introTag}</Tag>
          {!sidebarCollapsed ? (
            <Text type="secondary">{introDescription}</Text>
          ) : null}
        </Space>

        <Menu
          mode="inline"
          inlineCollapsed={sidebarCollapsed}
          selectedKeys={selectedKeys}
          openKeys={visibleOpenKeys}
          items={sidebarItems}
          onOpenChange={(keys) => {
            onOpenKeysChange(keys as string[]);
          }}
          onClick={({ key, keyPath }) => {
            if (keyPath.includes('docs-group')) {
              onSelectDocsMenu(key);
              return;
            }

            if (keyPath.includes('api-group')) {
              onSelectApiMenu(key as MainSidebarProps['selectedApiMenu']);
              return;
            }

            if (keyPath.includes('plan-group') || keyPath.includes('server-group')) {
              onSelectPlanMenu(key as MainSidebarProps['selectedPlanMenu']);
              return;
            }

            if (keyPath.includes('codex-live-group') || keyPath.includes('app-log-group') || keyPath.includes('chat-manage-group')) {
              onSelectChatMenu(key as MainSidebarProps['selectedChatMenu']);
              return;
            }

            if (keyPath.includes('play-group') || keyPath.includes('play-layout-group')) {
              onSelectPlayMenu(key as MainSidebarProps['selectedPlayMenu']);
            }
          }}
        />
      </div>
    </Sider>
  );
}