"use client"

import React, { useState, useRef, useEffect } from 'react';
import { Settings, Help, Message as MessageIcon } from '@mui/icons-material';
import { 
  Box, 
  Paper, 
  Typography, 
  Container,
  useMediaQuery,
  useTheme,
  Alert,
  IconButton,
  Snackbar,
  Avatar
} from '@mui/material';
import type { Message as MessageType } from './types/types';
import { initializeCoze, getCozeService, isCozeInitialized } from './service/initializeCoze';
import type { CozeConfig } from './types/types';
import MuiThemeProvider from './components/MuiThemeProvider';
import Message from './components/Message';
import { MessageInput } from './components/MessageInput';
import { Sidebar } from './components/Sidebar';

// 欢迎消息
const welcomeMessage: MessageType = {
  id: '1',
  content: '终于等到你了！我是你的爆款文案策划师，开始之前，我需要你提供一些简单的信息，让我能给你更有针对性的运营方案。\n1. 你的行业/背调/产品/服务（即使没有现有产品，可以说想要的产品/服务）\n2. 你的目标用户（根据你从业经验描绘的目标用户）',
  sender: 'bot',
  timestamp: new Date(Date.now() - 60000),
};

const ChatInterface: React.FC = () => {
  // 状态管理
  const [messages, setMessages] = useState<MessageType[]>([welcomeMessage]);
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [isConfigured, setIsConfigured] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [showError, setShowError] = useState(false);
  const [activeTab, setActiveTab] = useState<'chat' | 'help'>('chat');
  
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  
  // 聊天容器的引用，用于自动滚动到底部
  const chatContainerRef = useRef<HTMLDivElement>(null);

  // 组件挂载时，使用提供的API密钥和Bot ID初始化Coze服务
  useEffect(() => {
    // 客户端初始化代码
    
    // 使用用户提供的API密钥和Bot ID
    const apiKey = 'sat_XLx0k9rgirVutzov6ADylmscgU0zXufCZJHU13xorno5d7JzVCSrFkl1kJpQsJX0';
    const botId = '7560159608908939283'; // 从环境变量获取Bot ID
    
    // 添加日志记录配置状态
    console.log('Coze API Key provided:', !!apiKey);
    console.log('Coze Bot ID:', botId);
    
    if (apiKey && botId) {
      const cozeConfig: CozeConfig = { apiKey, botId };
      const initialized = initializeCoze(cozeConfig);
      setIsConfigured(initialized);
      console.log('Coze service initialization result:', initialized);
    } else {
      console.warn('Coze API 配置不完整');
    }
  }, []);

  // 当消息更新时，自动滚动到底部
  useEffect(() => {
    if (chatContainerRef.current) {
      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
    }
  }, [messages]);



  // 处理消息发送
  const handleSendMessage = async () => {
    if (!input.trim()) return;

    // 添加用户消息到对话中
    const userMessage: MessageType = {
      id: Date.now().toString(),
      content: input,
      sender: 'user',
      timestamp: new Date(),
    };

    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setIsLoading(true);
    setError(null);

    // 创建临时的bot消息ID，用于流式更新
    const tempBotMessageId = (Date.now() + 1).toString();
    
    try {
      if (isConfigured && isCozeInitialized()) {
        // 使用Coze服务发送消息
        const cozeService = getCozeService();
        
        // 流式响应处理函数
        const handleStreamResponse = (partialText: string) => {
          // 更新消息列表，找到临时消息或创建新消息
          setMessages(prev => {
            // 检查是否已存在临时bot消息
            const hasTempMessage = prev.some(msg => msg.id === tempBotMessageId && msg.sender === 'bot');
            
            if (hasTempMessage) {
              // 更新已存在的临时消息
              return prev.map(msg => 
                msg.id === tempBotMessageId && msg.sender === 'bot' 
                  ? { ...msg, content: partialText }
                  : msg
              );
            } else {
              // 创建新的临时bot消息
              const tempBotMessage: MessageType = {
                id: tempBotMessageId,
                content: partialText,
                sender: 'bot',
                timestamp: new Date(),
              };
              return [...prev, tempBotMessage];
            }
          });
        };
        
        // 发送消息并传入流式回调
        await cozeService.sendMessage(input.trim(), handleStreamResponse);
      } else {
        // 如果未配置或初始化失败，使用模拟的回复
        await new Promise(resolve => setTimeout(resolve, 1000));
        const mockBotMessage: MessageType = {
          id: (Date.now() + 1).toString(),
          content: '您的消息已收到！这是一条智能回复，为您提供专业的文案建议。\n\n根据您的需求，我可以为您提供：\n- 吸引人的标题创意\n- 产品描述优化\n- 社交媒体文案\n- 广告标语设计\n\n请继续告诉我更多关于您的产品或服务信息，我会提供更有针对性的建议！',
          sender: 'bot',
          timestamp: new Date(),
        };
        setMessages(prev => [...prev, mockBotMessage]);
      }
    } catch (error) {
      console.error('发送消息失败:', error);
      // 获取具体的错误信息
      const errorMsg = error instanceof Error ? error.message : '未知错误';
      const errorMessage: MessageType = {
        id: (Date.now() + 2).toString(),
        content: `抱歉，处理您的请求时遇到了问题。请稍后再试，或刷新页面重试。`,
        sender: 'bot',
        timestamp: new Date(),
      };
      setMessages(prev => [...prev, errorMessage]);
      setError(`消息发送失败: ${errorMsg}`);
      setShowError(true);
    } finally {
      setIsLoading(false);
    }
  };

  // 处理错误提示关闭
  const handleCloseError = () => {
    setShowError(false);
  };

  // 处理回车键发送消息
  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSendMessage();
    }
  };
  
  // 处理新建对话
  const handleNewConversation = () => {
    if (isConfigured && isCozeInitialized()) {
      const cozeService = getCozeService();
      cozeService.resetConversation();
    }
    // 重置消息列表，只保留欢迎消息
    setMessages([welcomeMessage]);
    console.log('已开始新对话');
  };

  // 渲染聊天界面
  return (
    <MuiThemeProvider>
      <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', backgroundColor: theme.palette.background.default }}>
        {/* 顶部导航 */}
        <Paper 
          elevation={2}
          sx={{
            backgroundColor: theme.palette.primary.main,
            color: 'white',
            px: { xs: 2, md: 4 },
            py: 2.5,
            position: 'relative',
            zIndex: 10,
          }}
        >
          <Container maxWidth="xl">
            <Box display="flex" justifyContent="space-between" alignItems="center">
              <Box>
                <Typography variant="h5" component="h1" sx={{ fontWeight: 700, mb: 0.5 }}>
                  爆款文案助手
                </Typography>
                <Typography variant="subtitle2" sx={{ opacity: 0.9, fontSize: '0.9rem' }}>
                  让AI帮你生成吸引人的文案内容
                </Typography>
              </Box>
              
              <Box sx={{ display: 'flex', gap: 1.5 }}>
                <IconButton 
                  size="small" 
                  color="inherit"
                  onClick={handleNewConversation}
                  title="新建对话"
                  sx={{
                    backgroundColor: 'rgba(255,255,255,0.15)',
                    '&:hover': {
                      backgroundColor: 'rgba(255,255,255,0.25)',
                    },
                  }}
                >
                  <MessageIcon fontSize="small" />
                </IconButton>
                <IconButton 
                  size="small" 
                  color="inherit"
                  onClick={() => setActiveTab(activeTab === 'chat' ? 'help' : 'chat')}
                  title={activeTab === 'chat' ? '帮助' : '返回聊天'}
                  sx={{
                    backgroundColor: 'rgba(255,255,255,0.15)',
                    '&:hover': {
                      backgroundColor: 'rgba(255,255,255,0.25)',
                    },
                  }}
                >
                  <Help fontSize="small" />
                </IconButton>
                <IconButton 
                  size="small" 
                  color="inherit"
                  title="设置"
                  sx={{
                    backgroundColor: 'rgba(255,255,255,0.15)',
                    '&:hover': {
                      backgroundColor: 'rgba(255,255,255,0.25)',
                    },
                  }}
                >
                  <Settings fontSize="small" />
                </IconButton>
              </Box>
            </Box>
          </Container>
        </Paper>

        {/* 主内容区域 */}
        <Box sx={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
          {/* 侧边栏 - 仅在中等及以上屏幕显示 */}
          {!isMobile && <Sidebar />}
          
          {/* 聊天内容区 */}
          <Box 
            sx={{
              flex: 1,
              display: 'flex',
              flexDirection: 'column',
              backgroundColor: theme.palette.background.paper,
              position: 'relative',
              overflow: 'hidden',
            }}
          >
            {/* 内容切换标签 */}
            <Box 
              sx={{
                display: 'flex',
                borderBottom: `1px solid ${theme.palette.divider}`,
                backgroundColor: theme.palette.background.default,
                px: 2,
              }}
            >
              <Box 
                sx={{
                  px: 3,
                  py: 2,
                  cursor: 'pointer',
                  borderBottom: activeTab === 'chat' 
                    ? `2px solid ${theme.palette.primary.main}` 
                    : 'none',
                  color: activeTab === 'chat' 
                    ? theme.palette.primary.main 
                    : theme.palette.text.secondary,
                  fontWeight: activeTab === 'chat' ? 600 : 400,
                  '&:hover': {
                    backgroundColor: theme.palette.action.hover,
                  },
                }}
                onClick={() => setActiveTab('chat')}
              >
                对话
              </Box>
              <Box 
                sx={{
                  px: 3,
                  py: 2,
                  cursor: 'pointer',
                  borderBottom: activeTab === 'help' 
                    ? `2px solid ${theme.palette.primary.main}` 
                    : 'none',
                  color: activeTab === 'help' 
                    ? theme.palette.primary.main 
                    : theme.palette.text.secondary,
                  fontWeight: activeTab === 'help' ? 600 : 400,
                  '&:hover': {
                    backgroundColor: theme.palette.action.hover,
                  },
                }}
                onClick={() => setActiveTab('help')}
              >
                使用帮助
              </Box>
            </Box>
            
            {/* 帮助页面内容 */}
            {activeTab === 'help' && (
              <Box 
                sx={{
                  flex: 1,
                  p: { xs: 2, md: 4 },
                  overflow: 'auto',
                }}
              >
                <Typography variant="h5" component="h2" sx={{ mb: 3, fontWeight: 600 }}>
                  如何使用爆款文案助手
                </Typography>
                
                <Paper elevation={1} sx={{ p: 3, mb: 3 }}>
                  <Typography variant="h6" sx={{ mb: 2, color: theme.palette.primary.main }}>
                    开始对话
                  </Typography>
                  <Typography variant="body1" sx={{ mb: 2 }}>
                    1. 简单描述您的产品或服务，包括行业、目标用户和核心卖点
                  </Typography>
                  <Typography variant="body1" sx={{ mb: 2 }}>
                    2. 告诉我们您需要的文案类型（如产品描述、广告文案、社交媒体内容等）
                  </Typography>
                  <Typography variant="body1">
                    3. 提供任何特定要求或偏好，如风格、长度、关键词等
                  </Typography>
                </Paper>
                
                <Paper elevation={1} sx={{ p: 3, mb: 3 }}>
                  <Typography variant="h6" sx={{ mb: 2, color: theme.palette.primary.main }}>
                    常见问题
                  </Typography>
                  <Typography variant="subtitle1" sx={{ mb: 1, fontWeight: 500 }}>
                    • 助手可以生成哪些类型的文案？
                  </Typography>
                  <Typography variant="body2" sx={{ mb: 2, ml: 4, color: theme.palette.text.secondary }}>
                    产品描述、广告标语、社交媒体文案、标题创意、邮件营销内容等
                  </Typography>
                  
                  <Typography variant="subtitle1" sx={{ mb: 1, fontWeight: 500 }}>
                    • 如何获得更好的回复？
                  </Typography>
                  <Typography variant="body2" sx={{ mb: 2, ml: 4, color: theme.palette.text.secondary }}>
                    提供越详细的信息，获得的文案质量越好。包括目标受众、产品特点、品牌调性等
                  </Typography>
                </Paper>
              </Box>
            )}
            
            {/* 聊天消息区域 */}
            {activeTab === 'chat' && (
              <>
                <Box 
                  sx={{
                    flex: 1,
                    overflow: 'auto',
                    p: { xs: 2, md: 4 },
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 2,
                    backgroundColor: (theme) => theme.palette.mode === 'dark' 
                      ? theme.palette.background.default 
                      : '#fafafa',
                  }}
                  ref={chatContainerRef}
                >
                  {messages.map((message, index) => (
                    <Message 
                      key={message.id} 
                      message={message} 
                      isLast={index === messages.length - 1 && !isLoading}
                    />
                  ))}
                  
                  {isLoading && (
                    <Box display="flex" alignItems="flex-end" gap={1.5} maxWidth={isMobile ? "85%" : "70%"}>
                      <Avatar 
                        sx={{
                          width: 36, 
                          height: 36, 
                          bgcolor: theme.palette.primary.main,
                          boxShadow: theme.shadows[1],
                        }}
                      >
                        🤖
                      </Avatar>
                      <Paper 
                        elevation={1} 
                        sx={{
                          padding: 2,
                          backgroundColor: theme.palette.background.default,
                          color: theme.palette.text.primary,
                          borderRadius: '18px 18px 18px 4px',
                          minWidth: '120px',
                          display: 'flex',
                          justifyContent: 'center',
                          alignItems: 'center',
                        }}
                      >
                        <Box sx={{ display: 'flex', gap: 1 }}>
                          <Box 
                            sx={{
                              width: 8,
                              height: 8,
                              borderRadius: '50%',
                              backgroundColor: theme.palette.primary.main,
                              animation: 'pulse 1.4s infinite ease-in-out',
                            }}
                          />
                          <Box 
                            sx={{
                              width: 8,
                              height: 8,
                              borderRadius: '50%',
                              backgroundColor: theme.palette.primary.main,
                              animation: 'pulse 1.4s infinite ease-in-out 0.2s',
                            }}
                          />
                          <Box 
                            sx={{
                              width: 8,
                              height: 8,
                              borderRadius: '50%',
                              backgroundColor: theme.palette.primary.main,
                              animation: 'pulse 1.4s infinite ease-in-out 0.4s',
                            }}
                          />
                        </Box>
                      </Paper>
                    </Box>
                  )}
                </Box>
                
                {/* 输入区域 */}
                <MessageInput 
                  value={input}
                  onChange={setInput}
                  onSend={handleSendMessage}
                  onKeyDown={handleKeyPress}
                  disabled={isLoading}
                />
              </>
            )}
          </Box>
        </Box>
        
        {/* 错误提示 */}
        <Snackbar 
          open={showError} 
          autoHideDuration={6000} 
          onClose={handleCloseError}
          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
        >
          <Alert 
            onClose={handleCloseError} 
            severity="error" 
            variant="filled"
            sx={{ width: '100%' }}
          >
            {error}
          </Alert>
        </Snackbar>
      </Box>
    </MuiThemeProvider>
  );
};

export default ChatInterface;