import { useEffect } from 'react';
import { useChat } from '../context/ChatProvider';
import { INSUFFICIENT_BALANCE_NOTICE } from '../hooks/useTKMindChat';
import type { PageEditSubChatBridge } from '../hooks/usePageEditSubChat';
import type { MindSpaceChatContext, MindSpaceSaveCategory, PortalUser } from '../types';
import { formatContextChip } from '../utils/mindspaceChatContext';
import { ChatPanel } from './ChatPanel';
import { TKMindAvatar } from './TKMindAvatar';

export function SpaceChatPanel({
  open,
  context,
  user,
  onClose,
  onOpenFullChat,
  onPageSaved,
  chatBridge,
  hideOpenFullChat = false,
  title = 'TKMind',
}: {
  open: boolean;
  context: MindSpaceChatContext;
  user: PortalUser;
  onClose: () => void;
  onOpenFullChat: () => void;
  onPageSaved?: (result: {
    kind: 'page' | 'category';
    pageId?: string;
    categoryCode?: MindSpaceSaveCategory;
  }) => void;
  chatBridge?: PageEditSubChatBridge;
  hideOpenFullChat?: boolean;
  title?: string;
}) {
  const mainChat = useChat();
  const chat = chatBridge ?? mainChat;
  const {
    session,
    messages,
    chatState,
    pendingTool,
    submit,
    stop,
    approveTool,
    error,
    notice,
    dismissNotice,
    openRecharge,
    retryConnect,
  } = chat;

  useEffect(() => {
    if (!open) return;
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [open, onClose]);

  if (!open) return null;

  const contextLabel = formatContextChip(context);

  return (
    <div className="space-chat-panel" role="dialog" aria-modal="false" aria-label="Agent 对话">
      <header className="space-chat-panel-header">
        <div className="space-chat-panel-brand">
          <TKMindAvatar size="sm" />
          <div>
            <strong>{title}</strong>
            <span className="space-chat-context-chip" title={context.route}>
              {contextLabel}
            </span>
          </div>
        </div>
        <div className="space-chat-panel-actions">
          {!hideOpenFullChat ? (
            <button type="button" className="ghost-btn" onClick={onOpenFullChat}>
              打开完整聊天
            </button>
          ) : null}
          <button type="button" className="space-chat-panel-close" onClick={onClose} aria-label="关闭">
            ×
          </button>
        </div>
      </header>

      {notice && (
        <div className="space-chat-panel-error space-chat-panel-notice">
          <span>{notice}</span>
          {notice === INSUFFICIENT_BALANCE_NOTICE ? (
            <>
              <button type="button" onClick={() => openRecharge(false)}>
                去充值
              </button>
              <button type="button" onClick={dismissNotice}>
                知道了
              </button>
            </>
          ) : (
            <button type="button" onClick={dismissNotice}>
              知道了
            </button>
          )}
        </div>
      )}

      {error && (
        <div className="space-chat-panel-error">
          <span>{error}</span>
          <button type="button" onClick={() => void retryConnect()}>
            重试
          </button>
        </div>
      )}

      <ChatPanel
        variant="compact"
        user={user}
        messages={messages}
        chatState={chatState}
        pendingTool={pendingTool}
        session={session}
        onSubmit={(text) =>
          chatBridge
            ? void submit(text, context)
            : void submit(text, { mindspaceContext: context })
        }
        onStop={stop}
        onApproveTool={approveTool}
        onPageSaved={onPageSaved}
        onClose={onClose}
      />
    </div>
  );
}