'use client';

import { useState } from 'react';
import { Copy, ThumbsUp, ThumbsDown, RefreshCw, ChevronDown, ChevronUp, Brain, Loader2, AlertCircle, Check, FileText, FileCode } from 'lucide-react';
import { Avatar } from '@/components/ui/Avatar';
import { AILogo } from '@/components/ui/AILogo';
import { MarkdownRenderer } from '@/components/markdown/MarkdownRenderer';
import { CodeExecutionResult, PyodideLoading } from '@/components/features/CodeExecutionResult';
import { ImageLightbox } from '@/components/ui/ImageLightbox';
import { DocumentPreview, type DocumentData } from '@/components/ui/DocumentPreview';
import { cn } from '@/lib/utils';
import type { Message, User, ToolResult } from '@/types';
import type { UploadedDocument } from '@/hooks/useStreamChat';

interface MessageBubbleProps {
  message: Message;
  user?: User;
  thinkingContent?: string;
  isStreaming?: boolean;
  error?: string;
  /** 代码执行产生的图片（Base64） */
  images?: string[];
  /** 用户上传的图片（Base64 或 URL） */
  uploadedImages?: string[];
  /** 用户上传的文档 */
  uploadedDocuments?: UploadedDocument[];
  /** Pyodide 加载状态 */
  pyodideStatus?: {
    stage: 'loading' | 'ready' | 'error';
    message: string;
    progress?: number;
  };
}

// 格式化文件大小
function formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// 根据文件类型获取图标
function getDocumentIcon(type: string) {
  if (type === 'code' || type === 'markdown') {
    return FileCode;
  }
  return FileText;
}

export function MessageBubble({ message, user, thinkingContent, isStreaming, error, images, uploadedImages, uploadedDocuments, pyodideStatus }: MessageBubbleProps) {
  const isUser = message.role === 'user';
  const [thinkingExpanded, setThinkingExpanded] = useState(false);
  const [copied, setCopied] = useState(false);

  // 图片 Lightbox 状态
  const [lightboxOpen, setLightboxOpen] = useState(false);
  const [lightboxImages, setLightboxImages] = useState<string[]>([]);
  const [lightboxInitialIndex, setLightboxInitialIndex] = useState(0);

  // 文档预览状态
  const [documentPreviewOpen, setDocumentPreviewOpen] = useState(false);
  const [documentPreviewData, setDocumentPreviewData] = useState<DocumentData | null>(null);

  // 打开图片 Lightbox
  const openLightbox = (imageArray: string[], index: number) => {
    setLightboxImages(imageArray);
    setLightboxInitialIndex(index);
    setLightboxOpen(true);
  };

  // 关闭图片 Lightbox
  const closeLightbox = () => {
    setLightboxOpen(false);
  };

  // 打开文档预览
  const openDocumentPreview = (doc: UploadedDocument) => {
    setDocumentPreviewData({
      name: doc.name,
      content: doc.content,
      size: doc.size,
      type: doc.type,
    });
    setDocumentPreviewOpen(true);
  };

  // 关闭文档预览
  const closeDocumentPreview = () => {
    setDocumentPreviewOpen(false);
    setDocumentPreviewData(null);
  };

  // 复制消息内容
  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(message.content);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (error) {
      console.error('Failed to copy:', error);
    }
  };

  if (isUser) {
    return (
      <div className="flex justify-end items-start gap-3 mb-8 animate-fade-in group">
        <div className="max-w-[70%] relative">
          {/* 用户上传的图片 */}
          {uploadedImages && uploadedImages.length > 0 && (
            <div className="mb-2 flex flex-wrap gap-2 justify-end">
              {uploadedImages.map((img, index) => (
                <div
                  key={index}
                  className="relative rounded-lg overflow-hidden cursor-pointer group/img"
                  onClick={() => openLightbox(uploadedImages, index)}
                >
                  <img
                    src={img}
                    alt={`上传的图片 ${index + 1}`}
                    className="max-w-[200px] max-h-[200px] object-cover rounded-lg border border-[var(--color-border)] transition-transform duration-150 group-hover/img:scale-[1.02]"
                  />
                  <div className="absolute inset-0 bg-black/0 group-hover/img:bg-black/10 transition-colors duration-150 rounded-lg" />
                </div>
              ))}
            </div>
          )}
          {/* 用户上传的文档 */}
          {uploadedDocuments && uploadedDocuments.length > 0 && (
            <div className="mb-2 flex flex-wrap gap-2 justify-end">
              {uploadedDocuments.map((doc, index) => {
                const Icon = getDocumentIcon(doc.type);
                return (
                  <div
                    key={index}
                    className="flex items-center gap-2 px-3 py-2 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg cursor-pointer hover:bg-[var(--color-bg-hover)] hover:border-[var(--color-primary)] transition-colors duration-150"
                    onClick={() => openDocumentPreview(doc)}
                    title="点击预览"
                  >
                    <Icon size={18} className="text-[var(--color-primary)]" />
                    <div className="flex flex-col">
                      <span className="text-sm font-medium text-[var(--color-text-primary)] truncate max-w-[150px]">
                        {doc.name}
                      </span>
                      <span className="text-xs text-[var(--color-text-tertiary)]">
                        {formatFileSize(doc.size)}
                      </span>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
          <div className="bg-[var(--color-message-user)] text-[var(--color-text-primary)] px-4 py-3 rounded-[18px] text-base leading-relaxed">
            {message.content || ((uploadedImages && uploadedImages.length > 0) || (uploadedDocuments && uploadedDocuments.length > 0) ? '(附件)' : '')}
          </div>
          {/* 悬停显示复制按钮 */}
          <button
            onClick={handleCopy}
            className="absolute -bottom-8 right-0 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1 px-2 py-1 text-xs text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)] rounded-md"
            title={copied ? '已复制' : '复制'}
          >
            {copied ? (
              <>
                <Check size={14} className="text-green-500" />
                <span className="text-green-500">已复制</span>
              </>
            ) : (
              <>
                <Copy size={14} />
                <span>复制</span>
              </>
            )}
          </button>
        </div>
        {user && <Avatar name={user.name} size="md" />}

        {/* 图片 Lightbox */}
        <ImageLightbox
          images={lightboxImages}
          initialIndex={lightboxInitialIndex}
          isOpen={lightboxOpen}
          onClose={closeLightbox}
        />

        {/* 文档预览 */}
        <DocumentPreview
          documentData={documentPreviewData}
          isOpen={documentPreviewOpen}
          onClose={closeDocumentPreview}
        />
      </div>
    );
  }

  return (
    <div className="flex items-start gap-4 mb-8 animate-fade-in">
      {/* AI 图标 */}
      <div className="flex-shrink-0 mt-4">
        <AILogo size={28} />
      </div>

      {/* 消息内容 */}
      <div className="flex-1 max-w-full">
        {/* 思考内容 */}
        {thinkingContent && (
          <div className="mb-3">
            <button
              onClick={() => setThinkingExpanded(!thinkingExpanded)}
              className="inline-flex items-center gap-2 px-3 py-2 bg-purple-50 text-purple-700 rounded-lg text-sm hover:bg-purple-100 transition-colors"
            >
              <Brain size={16} />
              <span>思考过程</span>
              {thinkingExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
            </button>
            {thinkingExpanded && (
              <div className="mt-2 p-4 bg-purple-50 border border-purple-200 rounded-lg">
                <pre className="text-sm text-purple-800 whitespace-pre-wrap font-mono">
                  {thinkingContent}
                </pre>
              </div>
            )}
          </div>
        )}

        {/* 错误提示 */}
        {error && (
          <div className="mb-3 p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3">
            <AlertCircle size={20} className="text-red-500 flex-shrink-0 mt-0.5" />
            <div className="text-sm text-red-700">{error}</div>
          </div>
        )}

        {/* 主要内容 */}
        <div className="bg-[var(--color-message-assistant-bg)] border border-[var(--color-message-assistant-border)] rounded-2xl px-5 py-4 shadow-sm">
          <div className="text-sm text-[var(--color-text-primary)] leading-[1.75]">
            {message.content ? (
              <MarkdownRenderer content={message.content} />
            ) : isStreaming ? (
              <div className="flex items-center gap-2 text-[var(--color-text-tertiary)]">
                <Loader2 size={16} className="animate-spin" />
                <span>正在思考...</span>
              </div>
            ) : null}
          </div>

          {/* 工具调用结果 - 代码执行图片展示 */}
          {message.toolResults && message.toolResults.length > 0 && (
            <div className="mt-4">
              {message.toolResults.map((result, index) => (
                <ToolResultDisplay key={index} result={result} />
              ))}
            </div>
          )}

          {/* Pyodide 加载状态 */}
          {pyodideStatus && (
            <div className="mt-4">
              <PyodideLoading
                stage={pyodideStatus.stage}
                message={pyodideStatus.message}
                progress={pyodideStatus.progress}
              />
            </div>
          )}

          {/* 代码执行图片（从 props 传入） */}
          {images && images.length > 0 && (() => {
            // 规范化所有图片 URL 用于 lightbox
            const normalizedImages = images.map(i => i.startsWith('data:') ? i : `data:image/png;base64,${i}`);

            return (
              <div className="mt-4">
                <div className="flex flex-wrap gap-3">
                  {normalizedImages.map((img, index) => (
                    <div
                      key={index}
                      className="relative cursor-pointer hover:opacity-90 transition-opacity"
                      onClick={() => openLightbox(normalizedImages, index)}
                    >
                      <img
                        src={img}
                        alt={`图表 ${index + 1}`}
                        className="rounded-lg shadow-md max-w-full h-auto"
                        style={{ maxWidth: '400px', maxHeight: '300px', objectFit: 'contain' }}
                      />
                      <div className="absolute bottom-2 right-2 px-2 py-1 bg-black/50 text-white text-xs rounded">
                        图表 {index + 1}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            );
          })()}

          {/* 流式状态指示器 */}
          {isStreaming && message.content && (
            <div className="flex items-center gap-2 mt-3 text-sm text-[var(--color-text-tertiary)]">
              <Loader2 size={14} className="animate-spin" />
              <span>生成中...</span>
            </div>
          )}

          {/* 操作按钮（非流式状态下显示） */}
          {!isStreaming && message.content && (
            <>
              <div className="flex items-center gap-1 mt-4 pt-3">
                <button
                  onClick={handleCopy}
                  className="w-8 h-8 flex items-center justify-center rounded-lg text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-secondary)] transition-colors"
                  title={copied ? '已复制' : '复制'}
                >
                  {copied ? <Check size={16} className="text-green-500" /> : <Copy size={16} />}
                </button>
                <ActionButton icon={ThumbsUp} title="好的回答" />
                <ActionButton icon={ThumbsDown} title="不好的回答" />
                <ActionButton icon={RefreshCw} title="重新生成" />
              </div>

              {/* 免责声明 */}
              <div className="text-xs text-[var(--color-text-tertiary)] text-right mt-2">
                LionCode can make mistakes
              </div>
            </>
          )}
        </div>
      </div>

      {/* 图片 Lightbox */}
      <ImageLightbox
        images={lightboxImages}
        initialIndex={lightboxInitialIndex}
        isOpen={lightboxOpen}
        onClose={closeLightbox}
      />

      {/* 文档预览 */}
      <DocumentPreview
        documentData={documentPreviewData}
        isOpen={documentPreviewOpen}
        onClose={closeDocumentPreview}
      />
    </div>
  );
}

interface ActionButtonProps {
  icon: React.ComponentType<{ size?: number }>;
  title: string;
  onClick?: () => void;
}

function ActionButton({ icon: Icon, title, onClick }: ActionButtonProps) {
  return (
    <button
      onClick={onClick}
      className="w-8 h-8 flex items-center justify-center rounded-lg text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-secondary)] transition-colors"
      title={title}
    >
      <Icon size={16} />
    </button>
  );
}

/**
 * 工具调用结果显示组件
 * 专门处理代码执行结果和图片显示
 */
interface ToolResultDisplayProps {
  result: ToolResult;
}

function ToolResultDisplay({ result }: ToolResultDisplayProps) {
  // 只有代码执行工具才显示图片
  if (result.toolName !== 'code_execution') {
    return null;
  }

  // 如果没有图片，不显示
  if (!result.images || result.images.length === 0) {
    return null;
  }

  return (
    <CodeExecutionResult
      images={result.images}
      engine={result.engine}
      executionTime={result.executionTime}
      success={!result.isError}
    />
  );
}