/**
 * Protocol Agent 页面
 * 
 * V2: 支持动态布局 + 文档预览
 * - 要素收集阶段: Chat 65% : Context 35%
 * - 方案生成阶段: Chat 35% : Document 65%
 */

import React, { useState, useEffect, useRef, useCallback } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { 
  Bot, Settings, ChevronLeft, Menu, Plus, 
  MessageSquare, Trash2 
} from 'lucide-react';
import { ChatArea } from './components/ChatArea';
import { StatePanel } from './components/StatePanel';
import { DocumentPanel } from './components/DocumentPanel';
import { ResizableSplitPane } from '@/shared/components/Layout';
import { ViewSwitcher } from './components/ViewSwitcher';
import { useProtocolContext } from './hooks/useProtocolContext';
import { useProtocolConversations } from './hooks/useProtocolConversations';
import { useProtocolGeneration } from './hooks/useProtocolGeneration';
import { getAccessToken } from '../../../framework/auth/api';
import './styles/protocol-agent.css';

// 布局比例配置
const LAYOUT_RATIOS = {
  context: 65,   // 要素收集阶段：Chat 65%
  document: 35,  // 方案生成阶段：Chat 35%
};

export const ProtocolAgentPage: React.FC = () => {
  const navigate = useNavigate();
  const { conversationId } = useParams<{ conversationId?: string }>();
  
  // 侧边栏折叠状态
  const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
  
  // 会话管理
  const {
    conversations,
    currentConversation,
    createConversation,
    selectConversation,
    deleteConversation,
    updateConversationTitle,
  } = useProtocolConversations(conversationId);

  // 上下文状态
  const { context, refreshContext } = useProtocolContext(currentConversation?.id);

  // 方案生成状态
  const {
    generatedContent,
    currentSection,
    isGenerating,
    hasGeneratedContent,
    viewMode,
    setViewMode,
    startGeneration,
    exportWord,
  } = useProtocolGeneration({ conversationId: currentConversation?.id });

  // Word 导出状态
  const [isExporting, setIsExporting] = useState(false);

  // 处理阶段数据编辑更新
  const handleStageUpdate = useCallback(async (stageCode: string, data: Record<string, unknown>) => {
    if (!currentConversation?.id) return;
    
    const token = getAccessToken();
    const response = await fetch('/api/v1/aia/protocol-agent/sync', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`,
      },
      body: JSON.stringify({
        conversationId: currentConversation.id,
        stageCode,
        data,
      }),
    });

    if (!response.ok) {
      throw new Error('更新失败');
    }

    // 刷新上下文
    await refreshContext();
  }, [currentConversation?.id, refreshContext]);

  // 自动创建会话（首次进入时）
  const hasAutoCreated = useRef(false);
  
  useEffect(() => {
    // 如果已有 conversationId 或 currentConversation，无需创建
    if (conversationId || currentConversation || hasAutoCreated.current) {
      return;
    }
    
    hasAutoCreated.current = true;
    console.log('[ProtocolAgentPage] 自动创建新对话...');
    
    createConversation().then(newConv => {
      if (newConv) {
        console.log('[ProtocolAgentPage] 新对话创建成功:', newConv.id);
        navigate(`/ai-qa/protocol-agent/${newConv.id}`, { replace: true });
      }
    });
  }, [conversationId, currentConversation, createConversation, navigate]);

  // 获取当前阶段信息
  const currentStageName = context?.stageName || '科学问题梳理';
  const currentStageIndex = context?.stages?.findIndex(s => s.status === 'current') ?? 0;

  // 创建新对话（立即创建，保证功能正常）
  const handleNewConversation = async () => {
    const newConv = await createConversation();
    if (newConv) {
      navigate(`/ai-qa/protocol-agent/${newConv.id}`);
      setSidebarCollapsed(true);
    }
  };

  // 选择对话
  const handleSelectConversation = (id: string) => {
    selectConversation(id);
    navigate(`/ai-qa/protocol-agent/${id}`);
    setSidebarCollapsed(true);
  };

  // 返回AgentHub
  const handleBack = () => {
    navigate('/ai-qa');
  };

  // 更新对话标题
  const handleTitleUpdate = (title: string) => {
    if (currentConversation?.id) {
      updateConversationTitle(currentConversation.id, title);
    }
  };

  // 处理 Word 导出
  const handleExportWord = async () => {
    setIsExporting(true);
    try {
      await exportWord();
    } catch (error) {
      alert(`导出失败: ${error instanceof Error ? error.message : '未知错误'}`);
    } finally {
      setIsExporting(false);
    }
  };

  // 处理章节讨论（Phase 2）
  const handleSectionDiscuss = (sectionId: string, sectionTitle: string) => {
    // TODO: 实现章节讨论模式
    console.log('讨论章节:', sectionId, sectionTitle);
    alert(`"讨论与优化" 功能将在 Phase 2 实现\n\n章节: ${sectionTitle}`);
  };

  // 计算当前布局比例
  const currentLayoutRatio = LAYOUT_RATIOS[viewMode];

  // 如果没有conversationId，显示等待状态
  if (!conversationId) {
    return (
      <div className="protocol-agent-page">
        <div style={{ 
          display: 'flex', 
          alignItems: 'center', 
          justifyContent: 'center', 
          height: '100vh',
          flexDirection: 'column',
          gap: '16px'
        }}>
          <div style={{ 
            width: '40px', 
            height: '40px', 
            border: '4px solid #E5E7EB', 
            borderTopColor: '#6366F1',
            borderRadius: '50%',
            animation: 'spin 1s linear infinite'
          }} />
          <p style={{ color: '#6B7280', fontSize: '14px' }}>正在初始化...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="protocol-agent-page">
      {/* 可折叠侧边栏 - Gemini风格 */}
      <aside className={`sidebar ${sidebarCollapsed ? 'collapsed' : 'expanded'}`}>
        {/* 折叠状态：图标栏 */}
        <div className="sidebar-icons">
          <button 
            className="icon-btn menu-btn" 
            onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
            title="展开会话列表"
          >
            <Menu size={20} />
          </button>
          <button 
            className="icon-btn new-btn"
            onClick={handleNewConversation}
            title="新建对话"
          >
            <Plus size={20} />
          </button>
          
          {/* 最近会话图标 */}
          <div className="recent-icons">
            {conversations.slice(0, 5).map((conv) => (
              <button
                key={conv.id}
                className={`icon-btn conv-icon ${conv.id === currentConversation?.id ? 'active' : ''}`}
                onClick={() => handleSelectConversation(conv.id)}
                title={conv.title}
              >
                <MessageSquare size={18} />
              </button>
            ))}
          </div>

          <div className="sidebar-bottom">
            <button className="icon-btn" title="设置">
              <Settings size={20} />
            </button>
          </div>
        </div>

        {/* 展开状态：完整列表 */}
        <div className="sidebar-content">
          <div className="sidebar-header">
            <button 
              className="back-to-hub-btn" 
              onClick={handleBack}
            >
              <ChevronLeft size={18} />
              <span>返回</span>
            </button>
          </div>

          <button className="new-chat-btn compact" onClick={handleNewConversation}>
            <Plus size={14} />
            <span>新建对话</span>
          </button>

          <div className="conversations-list">
            {conversations.map((conv) => (
              <div 
                key={conv.id}
                className={`conv-item ${conv.id === currentConversation?.id ? 'active' : ''}`}
                onClick={() => handleSelectConversation(conv.id)}
              >
                <MessageSquare size={16} />
                <span className="conv-title">{conv.title}</span>
                <button 
                  className="conv-delete"
                  onClick={(e) => {
                    e.stopPropagation();
                    deleteConversation(conv.id);
                  }}
                >
                  <Trash2 size={14} />
                </button>
              </div>
            ))}
          </div>
        </div>
      </aside>

      {/* 主工作区 */}
      <main className="workspace">
        {/* 顶部导航 */}
        <header className="workspace-header">
          <div className="header-left">
            <button className="back-btn" onClick={handleBack}>
              <ChevronLeft size={20} />
            </button>
            <div className="agent-info">
              <div className="agent-icon">
                <Bot size={20} />
              </div>
              <div className="agent-meta">
                <h1 className="agent-name">研究方案制定 Agent</h1>
                <div className="agent-status">
                  <span className="status-dot" />
                  <span className="status-text">Orchestrator Online</span>
                </div>
              </div>
            </div>
          </div>
          <div className="header-right">
            {/* 视图切换器 */}
            <ViewSwitcher
              currentView={viewMode}
              onViewChange={setViewMode}
              documentDisabled={!hasGeneratedContent && !isGenerating}
              documentDisabledTooltip="请先生成研究方案"
            />
            <div className="current-stage-badge">
              <span className="badge-label">当前阶段:</span>
              <span className="badge-value">Step {currentStageIndex + 1}: {currentStageName}</span>
            </div>
            <button className="icon-btn">
              <Settings size={20} />
            </button>
          </div>
        </header>

        {/* 聊天 + 右侧面板（动态切换） */}
        <div className="workspace-body">
          <ResizableSplitPane
            defaultLeftRatio={currentLayoutRatio}
            minLeftRatio={25}
            maxLeftRatio={80}
            enableDrag={true}
            storageKey={`protocol-agent-split-${viewMode}`}
            leftPanel={
              <ChatArea 
                conversationId={currentConversation?.id}
                context={context}
                onContextUpdate={refreshContext}
                onTitleUpdate={handleTitleUpdate}
              />
            }
            rightPanel={
              viewMode === 'context' ? (
                <StatePanel 
                  context={context} 
                  onStageUpdate={handleStageUpdate}
                  onStartGeneration={startGeneration}
                  canGenerate={context?.canGenerate}
                  isGenerating={isGenerating}
                />
              ) : (
                <DocumentPanel
                  content={generatedContent}
                  isGenerating={isGenerating}
                  currentSection={currentSection || undefined}
                  onExportWord={handleExportWord}
                  isExporting={isExporting}
                  onSectionDiscuss={handleSectionDiscuss}
                />
              )
            }
          />
        </div>
      </main>
    </div>
  );
};

export default ProtocolAgentPage;