import type { ComponentProps } from 'react';
import { MessageCircle, MessageSquareText, X } from 'lucide-react';

import { LucentIconButton } from '../../../components/lucent/LucentIconButton';
import { CreateBotWizardModal } from '../../onboarding/CreateBotWizardModal';
import { TopicFeedPanel } from '../topic/TopicFeedPanel';
import type { CompactPanelTab, RuntimeViewMode } from '../types';
import { BotListPanel } from './BotListPanel';
import { DashboardChatPanel } from './DashboardChatPanel';
import { DashboardModalStack } from './DashboardModalStack';
import { RuntimePanel } from './RuntimePanel';

export interface BotDashboardViewProps {
  compactMode: boolean;
  hasForcedBot: boolean;
  showBotListPanel: boolean;
  botListPanelProps: ComponentProps<typeof BotListPanel>;
  hasSelectedBot: boolean;
  isCompactListPage: boolean;
  compactPanelTab: CompactPanelTab;
  showCompactBotPageClose: boolean;
  forcedBotId?: string;
  selectBotText: string;
  isZh: boolean;
  runtimeViewMode: RuntimeViewMode;
  hasTopicUnread: boolean;
  onRuntimeViewModeChange: (mode: RuntimeViewMode) => void;
  topicFeedPanelProps: ComponentProps<typeof TopicFeedPanel>;
  dashboardChatPanelProps: ComponentProps<typeof DashboardChatPanel>;
  runtimePanelProps: ComponentProps<typeof RuntimePanel>;
  onCompactClose: () => void;
  dashboardModalStackProps: ComponentProps<typeof DashboardModalStack>;
  createBotModalProps: ComponentProps<typeof CreateBotWizardModal>;
}

export function BotDashboardView({
  compactMode,
  hasForcedBot,
  showBotListPanel,
  botListPanelProps,
  hasSelectedBot,
  isCompactListPage,
  compactPanelTab,
  showCompactBotPageClose,
  selectBotText,
  isZh,
  runtimeViewMode,
  hasTopicUnread,
  onRuntimeViewModeChange,
  topicFeedPanelProps,
  dashboardChatPanelProps,
  runtimePanelProps,
  onCompactClose,
  dashboardModalStackProps,
  createBotModalProps,
}: BotDashboardViewProps) {
  return (
    <>
      <div className={`grid-ops ${compactMode ? 'grid-ops-compact' : ''} ${hasForcedBot && !compactMode ? 'grid-ops-forced' : ''}`}>
        {showBotListPanel ? <BotListPanel {...botListPanelProps} /> : null}

        <section className={`panel ops-chat-panel ${compactMode && (isCompactListPage || compactPanelTab !== 'chat') ? 'ops-compact-hidden' : ''} ${showCompactBotPageClose ? 'ops-compact-bot-surface' : ''}`}>
          {hasSelectedBot ? (
            <div className="ops-chat-shell">
              <div className="ops-main-content-shell">
                <div className="ops-main-content-frame">
                  <div className="ops-main-content-head">
                    <div className="ops-main-mode-rail" role="tablist" aria-label={isZh ? '主面板视图切换' : 'Main panel view switch'}>
                      <button
                        className={`ops-main-mode-tab ${runtimeViewMode === 'visual' ? 'is-active' : ''}`}
                        onClick={() => onRuntimeViewModeChange('visual')}
                        aria-label={isZh ? '对话视图' : 'Conversation view'}
                        role="tab"
                        aria-selected={runtimeViewMode === 'visual'}
                      >
                        <MessageCircle size={14} />
                        <span className="ops-main-mode-label">{isZh ? '对话' : 'Chat'}</span>
                      </button>
                      <button
                        className={`ops-main-mode-tab has-dot ${runtimeViewMode === 'topic' ? 'is-active' : ''}`}
                        onClick={() => onRuntimeViewModeChange('topic')}
                        aria-label={isZh ? '主题视图' : 'Topic view'}
                        role="tab"
                        aria-selected={runtimeViewMode === 'topic'}
                      >
                        <MessageSquareText size={14} />
                        <span className="ops-main-mode-label-wrap">
                          <span className="ops-main-mode-label">{isZh ? '主题' : 'Topic'}</span>
                          {hasTopicUnread ? <span className="ops-switch-dot" aria-hidden="true" /> : null}
                        </span>
                      </button>
                    </div>
                  </div>
                  <div className="ops-main-content-body">
                    {runtimeViewMode === 'topic' ? <TopicFeedPanel {...topicFeedPanelProps} /> : <DashboardChatPanel {...dashboardChatPanelProps} />}
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <div style={{ color: 'var(--muted)' }}>{selectBotText}</div>
          )}
        </section>

        <RuntimePanel {...runtimePanelProps} />
      </div>

      {showCompactBotPageClose ? (
        <LucentIconButton
          className="ops-compact-close-btn"
          onClick={onCompactClose}
          tooltip={isZh ? '关闭并返回 Bot 列表' : 'Close and back to bot list'}
          aria-label={isZh ? '关闭并返回 Bot 列表' : 'Close and back to bot list'}
        >
          <X size={16} />
        </LucentIconButton>
      ) : null}

      <DashboardModalStack {...dashboardModalStackProps} />
      <CreateBotWizardModal {...createBotModalProps} />
    </>
  );
}