/**
 * SSAChatPane - V11 对话区（Phase II 升级）
 *
 * Phase II 改造：
 *   - handleSend 走统一 /chat SSE API（替换 parseIntent → generateWorkflowPlan）
 *   - 流式消息渲染（替换 TypeWriter 逐字效果）
 *   - ThinkingBlock 深度思考折叠
 *   - 意图标签（intent badge）
 *   - H3：streaming 期间锁定输入
 *
 * 保留不变：Header、文件上传、DataProfileCard、SAP/Result 卡片
 */
import React, { useState, useRef, useEffect, useCallback } from 'react';
import {
  Bot,
  User,
  Paperclip,
  ArrowUp,
  FileSpreadsheet,
  X,
  ArrowLeft,
  FileSignature,
  ArrowRight,
  Loader2,
  AlertCircle,
  CheckCircle,
  BarChart2,
  Square,
} from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { useSSAStore } from '../stores/ssaStore';
import type { AnalysisRecord } from '../stores/ssaStore';
import { useAnalysis } from '../hooks/useAnalysis';
import { useWorkflow } from '../hooks/useWorkflow';
import { useSSAChat } from '../hooks/useSSAChat';
import type { ChatMessage, ChatIntentType } from '../hooks/useSSAChat';
import type { SSAMessage } from '../types';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { TypeWriter } from './TypeWriter';
import { DataProfileCard } from './DataProfileCard';
import { ClarificationCard } from './ClarificationCard';
import { AskUserCard } from './AskUserCard';
import type { AskUserResponseData } from './AskUserCard';
import { ThinkingBlock } from '@/shared/components/Chat';
import { ModeToggle } from './ModeToggle';
import type { ClarificationCardData, IntentResult } from '../types';

export const SSAChatPane: React.FC = () => {
  const navigate = useNavigate();
  const {
    currentSession,
    messages,
    mountedFile,
    setMountedFile,
    setCurrentSession,
    setWorkspaceOpen,
    isLoading,
    isExecuting,
    error,
    setError,
    addToast,
    addMessage,
    selectRecord,
    analysisHistory,
    dataProfile,
    dataProfileLoading,
  } = useSSAStore();

  const { uploadData, generatePlan, isUploading, uploadProgress } = useAnalysis();
  const { generateDataProfile, handleClarify, isProfileLoading, isPlanLoading } = useWorkflow();
  const {
    chatMessages,
    isGenerating,
    currentIntent,
    pendingQuestion,
    sendChatMessage,
    respondToQuestion,
    skipQuestion,
    loadHistory,
    abort: abortChat,
    clearMessages,
  } = useSSAChat();

  const [inputValue, setInputValue] = useState('');
  const [uploadStatus, setUploadStatus] = useState<'idle' | 'uploading' | 'parsing' | 'success' | 'error'>('idle');
  const [pendingClarification, setPendingClarification] = useState<{
    cards: ClarificationCardData[];
    originalQuery: string;
    intent: IntentResult;
  } | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const chatEndRef = useRef<HTMLDivElement>(null);
  const messagesContainerRef = useRef<HTMLDivElement>(null);

  // Phase II: session 切换时加载对话历史
  useEffect(() => {
    if (currentSession?.id) {
      loadHistory(currentSession.id);
    } else {
      clearMessages();
    }
  }, [currentSession?.id, loadHistory, clearMessages]);

  // 自动滚动到底部，确保最新内容可见
  const scrollToBottom = useCallback(() => {
    if (messagesContainerRef.current) {
      messagesContainerRef.current.scrollTo({
        top: messagesContainerRef.current.scrollHeight,
        behavior: 'smooth'
      });
    }
  }, []);

  useEffect(() => {
    const timer = setTimeout(scrollToBottom, 100);
    return () => clearTimeout(timer);
  }, [messages, chatMessages, isGenerating, scrollToBottom]);

  const handleBack = () => {
    navigate(-1);
  };

  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setUploadStatus('uploading');
    setError(null);

    try {
      setUploadStatus('parsing');
      const result = await uploadData(file);
      
      setCurrentSession({
        id: result.sessionId,
        title: file.name.replace(/\.(csv|xlsx|xls)$/i, ''),
        mode: 'analysis',
        status: 'active',
        dataSchema: {
          columns: result.schema.columns.map((c: any) => ({
            name: c.name,
            type: c.type as 'numeric' | 'categorical' | 'datetime' | 'text',
            uniqueValues: c.uniqueValues,
            nullCount: c.nullCount,
          })),
          rowCount: result.schema.rowCount,
          preview: [],
        },
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      });
      setMountedFile({
        name: file.name,
        size: file.size,
        rowCount: result.schema.rowCount,
      });
      setUploadStatus('success');
      addToast('数据读取成功，正在进行质量核查...', 'success');
      
      // Phase 2A: 自动触发数据质量核查
      try {
        await generateDataProfile(result.sessionId);
      } catch (profileErr) {
        console.warn('数据画像生成失败，继续使用基础模式:', profileErr);
      }
    } catch (err: any) {
      setUploadStatus('error');
      const errorMsg = err?.message || '上传失败，请检查文件格式';
      setError(errorMsg);
      addToast(errorMsg, 'error');
    }
  };

  const handleRemoveFile = () => {
    setMountedFile(null);
    setWorkspaceOpen(false);
    setUploadStatus('idle');
    setError(null);
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  const handleSend = async () => {
    if (!inputValue.trim()) return;
    if (isGenerating) return;

    const query = inputValue.trim();
    setInputValue('');

    if (currentSession?.id) {
      // Phase II: 统一走 /chat SSE API
      // useSSAChat 内部处理 user message 添加 + assistant placeholder + 流式接收
      try {
        await sendChatMessage(currentSession.id, query);
      } catch (err: any) {
        addToast(err?.message || '对话失败', 'error');
      }
    } else {
      // 没有 session（未上传数据）：走老的 generatePlan 流程
      addMessage({
        id: crypto.randomUUID(),
        role: 'user',
        content: query,
        createdAt: new Date().toISOString(),
      });
      try {
        await generatePlan(query);
      } catch (err: any) {
        addToast(err?.message || '生成计划失败', 'error');
      }
    }
  };

  const handleClarificationSelect = async (selections: Record<string, string>) => {
    if (!currentSession?.id || !pendingClarification) return;

    setPendingClarification(null);

    const selectedLabel = Object.values(selections).join(', ');
    addMessage({
      id: crypto.randomUUID(),
      role: 'user',
      content: selectedLabel,
      createdAt: new Date().toISOString(),
    });

    try {
      const resp = await handleClarify(
        currentSession.id,
        pendingClarification.originalQuery,
        selections
      );

      if (resp.needsClarification && resp.clarificationCards?.length > 0) {
        addMessage({
          id: crypto.randomUUID(),
          role: 'assistant',
          content: '还需要确认一下：',
          createdAt: new Date().toISOString(),
        });
        setPendingClarification({
          cards: resp.clarificationCards,
          originalQuery: pendingClarification.originalQuery,
          intent: resp.intent,
        });
      }
    } catch (err: any) {
      addToast(err?.message || '处理追问失败', 'error');
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  const handleOpenWorkspace = useCallback((recordId?: string) => {
    if (recordId) {
      selectRecord(recordId);
    } else {
      setWorkspaceOpen(true);
    }
  }, [selectRecord, setWorkspaceOpen]);

  const formatFileSize = (bytes: number) => {
    if (bytes < 1024) return `${bytes}B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
  };

  return (
    <section className="ssa-chat-pane">
      {/* Chat Header */}
      <header className="chat-header">
        <div className="chat-header-left">
          <button className="back-btn" onClick={handleBack}>
            <ArrowLeft size={16} />
            <span>返回</span>
          </button>
          <span className="header-divider" />
          <span className="header-title">
            {currentSession?.title || '新的统计分析'}
          </span>
        </div>
        <div className="chat-header-right">
          {currentSession && <ModeToggle />}
          <EngineStatus
            isExecuting={isExecuting}
            isLoading={isLoading || isPlanLoading}
            isUploading={uploadStatus === 'uploading' || uploadStatus === 'parsing'}
            isProfileLoading={isProfileLoading || dataProfileLoading}
            isStreaming={isGenerating}
            streamIntent={currentIntent}
          />
        </div>
      </header>

      {/* Chat Messages */}
      <div className="chat-messages" ref={messagesContainerRef}>
        <div className="chat-messages-inner">
          {/* 欢迎语 */}
          <div className="message message-ai slide-up">
            <div className="message-avatar ai-avatar">
              <Bot size={12} />
            </div>
            <div className="message-bubble ai-bubble">
              你好！我是 SSA-Pro 智能统计助手。
              <br />
              你可以直接描述研究目标，我将为你生成分析方案；或者点击下方 📎 <b>上传数据文件</b>，我们将直接开始分析。
            </div>
          </div>

          {/* Phase 2A: 数据质量核查报告卡片 - 在欢迎语之后、用户消息之前显示 */}
          {dataProfile && (
            <div className="message message-ai slide-up">
              <div className="message-avatar ai-avatar">
                <Bot size={12} />
              </div>
              <div className="message-bubble ai-bubble profile-bubble">
                <DataProfileCard profile={dataProfile} />
              </div>
            </div>
          )}

          {/* 旧消息（store 中的 SSAMessage，保留向后兼容） */}
          {messages.map((msg: SSAMessage, idx: number) => {
            const isLastAiMessage = msg.role === 'assistant' && idx === messages.length - 1;
            const showTypewriter = isLastAiMessage && !msg.artifactType;

            return (
              <div
                key={msg.id || idx}
                className={`message ${msg.role === 'user' ? 'message-user' : 'message-ai'} slide-up`}
                style={{ animationDelay: `${idx * 0.1}s` }}
              >
                <div className={`message-avatar ${msg.role === 'user' ? 'user-avatar' : 'ai-avatar'}`}>
                  {msg.role === 'user' ? <User size={12} /> : <Bot size={12} />}
                </div>
                <div className={`message-bubble ${msg.role === 'user' ? 'user-bubble' : 'ai-bubble'}`}>
                  {showTypewriter ? (
                    <TypeWriter content={msg.content} speed={15} />
                  ) : (
                    msg.content
                  )}

                  {(msg.artifactType === 'sap' || msg.artifactType === 'result') && msg.recordId && (() => {
                    const rec = analysisHistory.find((r: AnalysisRecord) => r.id === msg.recordId);
                    const isCompleted = rec?.status === 'completed';
                    const isSap = msg.artifactType === 'sap';
                    return (
                      <button className="sap-card" onClick={() => handleOpenWorkspace(msg.recordId)}>
                        <div className="sap-card-left">
                          <div className="sap-card-icon">
                            {isSap ? <FileSignature size={16} /> : <BarChart2 size={16} />}
                          </div>
                          <div className="sap-card-content">
                            <div className="sap-card-title">
                              {isSap ? '查看分析计划' : '查看分析结果'}
                              {isCompleted && <span className="sap-card-badge">已完成</span>}
                            </div>
                            <div className="sap-card-hint">
                              {rec?.plan?.title || '点击打开工作区查看详情'}
                            </div>
                          </div>
                        </div>
                        <ArrowRight size={16} className="sap-card-arrow" />
                      </button>
                    );
                  })()}
                </div>
              </div>
            );
          })}

          {/* Phase II: 流式对话消息（来自 useSSAChat） */}
          {chatMessages.map((msg: ChatMessage) => (
            <div
              key={msg.id}
              className={`message ${msg.role === 'user' ? 'message-user' : 'message-ai'} slide-up`}
            >
              <div className={`message-avatar ${msg.role === 'user' ? 'user-avatar' : 'ai-avatar'}`}>
                {msg.role === 'user' ? <User size={12} /> : <Bot size={12} />}
              </div>
              <div className={`message-bubble ${msg.role === 'user' ? 'user-bubble' : 'ai-bubble'}`}>
                {/* 意图标签 */}
                {msg.role === 'assistant' && msg.intent && (
                  <IntentBadge intent={msg.intent} />
                )}

                {/* 深度思考折叠 */}
                {msg.role === 'assistant' && msg.thinking && (
                  <ThinkingBlock
                    content={msg.thinking}
                    isThinking={msg.status === 'generating'}
                    defaultExpanded={false}
                  />
                )}

                {/* 消息内容 */}
                {msg.status === 'generating' && !msg.content ? (
                  <div className="thinking-dots">
                    <span className="dot" />
                    <span className="dot" />
                    <span className="dot" />
                  </div>
                ) : msg.status === 'error' ? (
                  <div className="chat-error-msg">
                    <AlertCircle size={14} className="text-red-500" />
                    <span>{msg.content}</span>
                  </div>
                ) : (
                  <div className="chat-msg-content">
                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
                      {msg.content}
                    </ReactMarkdown>
                  </div>
                )}
              </div>
            </div>
          ))}

          {/* 数据画像生成中指示器 */}
          {dataProfileLoading && (
            <div className="message message-ai slide-up">
              <div className="message-avatar ai-avatar">
                <Bot size={12} />
              </div>
              <div className="message-bubble ai-bubble">
                <div className="profile-loading">
                  <BarChart2 size={16} className="spin text-blue-500" />
                  <span>正在进行数据质量核查...</span>
                </div>
              </div>
            </div>
          )}

          {/* AI 正在思考指示器（仅老流程使用，Phase II 由 chatMessages 中的 generating 状态处理） */}
          {(isLoading || isPlanLoading) && !isGenerating && (
            <div className="message message-ai slide-up">
              <div className="message-avatar ai-avatar">
                <Bot size={12} />
              </div>
              <div className="message-bubble ai-bubble thinking-bubble">
                <div className="thinking-dots">
                  <span className="dot" />
                  <span className="dot" />
                  <span className="dot" />
                </div>
              </div>
            </div>
          )}

          {/* Phase Q: 追问卡片（保留向后兼容） */}
          {pendingClarification && (
            <div className="message-row assistant">
              <div className="avatar-col"><Bot size={18} /></div>
              <div className="msg-content">
                <ClarificationCard
                  cards={pendingClarification.cards}
                  onSelect={handleClarificationSelect}
                  disabled={isLoading || isGenerating}
                />
              </div>
            </div>
          )}

          {/* Phase III/IV: AskUser 交互卡片（H3 统一模型） */}
          {pendingQuestion && currentSession?.id && (
            <div className="message-row assistant">
              <div className="avatar-col"><Bot size={18} /></div>
              <div className="msg-content">
                <AskUserCard
                  event={pendingQuestion}
                  onRespond={(response: AskUserResponseData) => respondToQuestion(currentSession.id, response)}
                  onSkip={(questionId: string) => skipQuestion(currentSession.id, questionId)}
                  disabled={isGenerating || isExecuting}
                />
              </div>
            </div>
          )}

          {/* 自动滚动锚点与占位垫片 - 解决底部输入框遮挡的终极方案 */}
          <div ref={chatEndRef} className="scroll-spacer" />
        </div>
      </div>

      {/* Chat Input */}
      <div className="chat-input-wrapper">
        <div className="chat-input-container">
          <div className="input-box">
            {/* 上传进度条 */}
            {uploadStatus === 'uploading' && (
              <div className="upload-progress-zone pop-in">
                <div className="upload-progress-card">
                  <Loader2 size={16} className="spin text-blue-500" />
                  <div className="upload-progress-info">
                    <span className="upload-progress-text">正在上传...</span>
                    <div className="upload-progress-bar">
                      <div 
                        className="upload-progress-fill" 
                        style={{ width: `${uploadProgress}%` }} 
                      />
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* 解析中状态 */}
            {uploadStatus === 'parsing' && (
              <div className="upload-progress-zone pop-in">
                <div className="upload-progress-card parsing">
                  <Loader2 size={16} className="spin text-amber-500" />
                  <span className="upload-progress-text">正在解析数据结构...</span>
                </div>
              </div>
            )}

            {/* 上传错误 */}
            {uploadStatus === 'error' && error && (
              <div className="upload-error-zone pop-in">
                <div className="upload-error-card">
                  <AlertCircle size={16} className="text-red-500" />
                  <span className="upload-error-text">{error}</span>
                  <button 
                    className="upload-retry-btn"
                    onClick={() => {
                      setUploadStatus('idle');
                      setError(null);
                    }}
                  >
                    重试
                  </button>
                </div>
              </div>
            )}

            {/* 数据挂载区 */}
            {mountedFile && uploadStatus !== 'error' && (
              <div className="data-mount-zone pop-in">
                <div className="mount-file-card">
                  <div className="mount-file-icon">
                    <FileSpreadsheet size={14} />
                  </div>
                  <div className="mount-file-info">
                    <span className="mount-file-name">{mountedFile.name}</span>
                    <span className="mount-file-meta">
                      {mountedFile.rowCount} rows • {formatFileSize(mountedFile.size)}
                    </span>
                  </div>
                  <CheckCircle size={14} className="text-green-500" />
                  <div className="mount-divider" />
                  <button className="mount-remove-btn" onClick={handleRemoveFile}>
                    <X size={12} />
                  </button>
                </div>
              </div>
            )}

            {/* 输入行 */}
            <div className="input-row">
              <input
                type="file"
                ref={fileInputRef}
                accept=".csv,.xlsx,.xls"
                onChange={handleFileSelect}
                style={{ display: 'none' }}
              />
              <button
                className={`upload-btn ${mountedFile ? 'disabled' : ''}`}
                onClick={() => fileInputRef.current?.click()}
                disabled={!!mountedFile || isUploading || isGenerating}
              >
                <Paperclip size={18} />
              </button>

              <textarea
                className="message-input"
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
                onKeyDown={handleKeyDown}
                placeholder={isGenerating ? 'AI 正在回复...' : '发送消息，或点击回形针 📎 上传数据触发分析...'}
                rows={1}
                disabled={isLoading || isGenerating}
              />

              {isGenerating ? (
                <button
                  className="send-btn abort-btn"
                  onClick={abortChat}
                  title="中断回复"
                >
                  <Square size={14} />
                </button>
              ) : (
                <button
                  className="send-btn"
                  onClick={handleSend}
                  disabled={!inputValue.trim() || isLoading}
                >
                  <ArrowUp size={14} />
                </button>
              )}
            </div>
          </div>
          <div className="input-hint">
            AI 可能会犯错，请核实生成的统计结论。
          </div>
        </div>
      </div>
    </section>
  );
};

interface EngineStatusProps {
  isExecuting: boolean;
  isLoading: boolean;
  isUploading: boolean;
  isProfileLoading?: boolean;
  isStreaming?: boolean;
  streamIntent?: ChatIntentType | null;
}

const INTENT_LABELS: Record<ChatIntentType, string> = {
  chat: '对话',
  explore: '数据探索',
  consult: '方法咨询',
  analyze: '统计分析',
  discuss: '结果讨论',
  feedback: '结果改进',
};

const EngineStatus: React.FC<EngineStatusProps> = ({
  isExecuting,
  isLoading,
  isUploading,
  isProfileLoading,
  isStreaming,
  streamIntent,
}) => {
  const getStatus = () => {
    if (isStreaming) {
      const label = streamIntent ? INTENT_LABELS[streamIntent] : 'AI';
      return { text: `${label} 生成中...`, className: 'status-streaming' };
    }
    if (isExecuting) {
      return { text: 'R Engine Running...', className: 'status-running' };
    }
    if (isLoading) {
      return { text: 'AI Processing...', className: 'status-processing' };
    }
    if (isProfileLoading) {
      return { text: 'Data Profiling...', className: 'status-profiling' };
    }
    if (isUploading) {
      return { text: 'Parsing Data...', className: 'status-uploading' };
    }
    return { text: 'R Engine Ready', className: 'status-ready' };
  };

  const { text, className } = getStatus();

  return (
    <div className={`engine-status ${className}`}>
      <span className="status-dot" />
      <span>{text}</span>
    </div>
  );
};

/**
 * 意图标签组件
 */
const IntentBadge: React.FC<{ intent: ChatIntentType }> = ({ intent }) => {
  const label = INTENT_LABELS[intent] || intent;
  return (
    <span className={`intent-badge intent-${intent}`}>
      {label}
    </span>
  );
};

export default SSAChatPane;