/**
 * Chat Input Component
 * Textarea with send button and universal file upload support.
 * Enter to send, Shift+Enter for new line.
 * Supports: native file picker, clipboard paste, drag & drop.
 * Files are staged to disk via IPC — only lightweight path references
 * are sent with the message (no base64 over WebSocket).
 */
import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
import { Check, ChevronDown, SendHorizontal, Square, X, Paperclip, FileText, Film, Music, FileArchive, File, Loader2, BookOpen } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { hostApiFetch } from '@/lib/host-api';
import { invokeIpc } from '@/lib/api-client';
import { buildQuickTaskPrompt } from '@/lib/quick-task-prompt';
import { cn } from '@/lib/utils';
import { useGatewayStore } from '@/stores/gateway';
import { useQuickTasksStore } from '@/stores/quick-tasks';
import { useTranslation } from 'react-i18next';

// ── Types ────────────────────────────────────────────────────────

export interface FileAttachment {
  id: string;
  fileName: string;
  mimeType: string;
  fileSize: number;
  stagedPath: string;        // disk path for gateway
  preview: string | null;    // data URL for images, null for others
  status: 'staging' | 'ready' | 'error';
  error?: string;
}

export interface KnowledgeContextDocument {
  id: string;
  name: string;
  mimeType: string;
  storedPath: string;
  textPath?: string;
}

const EMPTY_KNOWLEDGE_DOCUMENTS: KnowledgeContextDocument[] = [];

interface ChatInputProps {
  onSend: (
    text: string,
    attachments?: FileAttachment[],
    targetAgentId?: string | null,
    options?: {
      useKnowledgeBase?: boolean;
      workspaceId?: string;
      selectedKnowledgeDocumentIds?: string[];
      quickTaskContext?: { taskNames: string[]; skillIds: string[]; prompt: string };
    },
  ) => void;
  onStop?: () => void;
  disabled?: boolean;
  sending?: boolean;
  isEmpty?: boolean;
  knowledgeDocuments?: KnowledgeContextDocument[];
  workspaceId?: string;
}

// ── Helpers ──────────────────────────────────────────────────────

function formatFileSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
}

function FileIcon({ mimeType, className }: { mimeType: string; className?: string }) {
  if (mimeType.startsWith('video/')) return <Film className={className} />;
  if (mimeType.startsWith('audio/')) return <Music className={className} />;
  if (mimeType.startsWith('text/') || mimeType === 'application/json' || mimeType === 'application/xml') return <FileText className={className} />;
  if (mimeType.includes('zip') || mimeType.includes('compressed') || mimeType.includes('archive') || mimeType.includes('tar') || mimeType.includes('rar') || mimeType.includes('7z')) return <FileArchive className={className} />;
  if (mimeType === 'application/pdf') return <FileText className={className} />;
  return <File className={className} />;
}

/**
 * Read a browser File object as base64 string (without the data URL prefix).
 */
function readFileAsBase64(file: globalThis.File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      const dataUrl = reader.result as string;
      if (!dataUrl || !dataUrl.includes(',')) {
        reject(new Error(`Invalid data URL from FileReader for ${file.name}`));
        return;
      }
      const base64 = dataUrl.split(',')[1];
      if (!base64) {
        reject(new Error(`Empty base64 data for ${file.name}`));
        return;
      }
      resolve(base64);
    };
    reader.onerror = () => reject(new Error(`Failed to read file: ${file.name}`));
    reader.readAsDataURL(file);
  });
}

// ── Component ────────────────────────────────────────────────────

export function ChatInput({
  onSend,
  onStop,
  disabled = false,
  sending = false,
  isEmpty = false,
  knowledgeDocuments = EMPTY_KNOWLEDGE_DOCUMENTS,
  workspaceId,
}: ChatInputProps) {
  const { t } = useTranslation('chat');
  const [input, setInput] = useState('');
  const [attachments, setAttachments] = useState<FileAttachment[]>([]);
  const [knowledgePickerOpen, setKnowledgePickerOpen] = useState(false);
  const [selectedKnowledgeIds, setSelectedKnowledgeIds] = useState<string[]>([]);
  const [selectedQuickTaskIds, setSelectedQuickTaskIds] = useState<string[]>([]);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const knowledgePickerRef = useRef<HTMLDivElement>(null);
  const isComposingRef = useRef(false);
  const quickTaskPromptRef = useRef('');
  const gatewayStatus = useGatewayStore((s) => s.status);
  const quickTasks = useQuickTasksStore((state) => state.tasks);
  const knowledgeBaseAvailable = knowledgeDocuments.length > 0;
  const composerQuickTasks = useMemo(
    () => quickTasks.filter((task) => task.enabled && task.showInComposer),
    [quickTasks],
  );
  const selectedQuickTasks = useMemo(
    () => composerQuickTasks.filter((task) => selectedQuickTaskIds.includes(task.id)),
    [composerQuickTasks, selectedQuickTaskIds],
  );
  const selectedQuickTaskPrompt = useMemo(
    () => buildQuickTaskPrompt(selectedQuickTasks),
    [selectedQuickTasks],
  );
  const selectedKnowledgeDocuments = knowledgeDocuments.filter((doc) => selectedKnowledgeIds.includes(doc.id));

  // Auto-resize textarea
  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 240)}px`;
    }
  }, [input]);

  // Focus textarea on mount (avoids Windows focus loss after session delete + native dialog)
  useEffect(() => {
    if (!disabled && textareaRef.current) {
      textareaRef.current.focus();
    }
  }, [disabled]);

  useEffect(() => {
    setSelectedKnowledgeIds((current) => {
      const next = current.filter((id) => knowledgeDocuments.some((doc) => doc.id === id));
      return next.length === current.length ? current : next;
    });
  }, [knowledgeDocuments]);

  useEffect(() => {
    setSelectedQuickTaskIds((current) => {
      const next = current.filter((id) => composerQuickTasks.some((task) => task.id === id));
      return next.length === current.length ? current : next;
    });
  }, [composerQuickTasks]);

  useEffect(() => {
    const previousPrompt = quickTaskPromptRef.current;
    const nextPrompt = selectedQuickTaskPrompt.trim();
    if (previousPrompt === nextPrompt) return;

    setInput((current) => {
      let body = current;
      if (previousPrompt) {
        if (body === previousPrompt) {
          body = '';
        } else if (body.startsWith(`${previousPrompt} `)) {
          body = body.slice(previousPrompt.length + 1);
        } else if (body.startsWith(`${previousPrompt}\n\n`)) {
          body = body.slice(previousPrompt.length + 2);
        }
      }
      return body.trimStart();
    });
    quickTaskPromptRef.current = nextPrompt;
  }, [selectedQuickTaskPrompt]);

  useEffect(() => {
    if (!knowledgePickerOpen) return;
    const handlePointerDown = (event: MouseEvent) => {
      if (!knowledgePickerRef.current?.contains(event.target as Node)) {
        setKnowledgePickerOpen(false);
      }
    };
    document.addEventListener('mousedown', handlePointerDown);
    return () => {
      document.removeEventListener('mousedown', handlePointerDown);
    };
  }, [knowledgePickerOpen]);

  // ── File staging via native dialog ─────────────────────────────

  const pickFiles = useCallback(async () => {
    try {
      const result = await invokeIpc('dialog:open', {
        properties: ['openFile', 'multiSelections'],
      }) as { canceled: boolean; filePaths?: string[] };
      if (result.canceled || !result.filePaths?.length) return;

      // Add placeholder entries immediately
      const tempIds: string[] = [];
      for (const filePath of result.filePaths) {
        const tempId = crypto.randomUUID();
        tempIds.push(tempId);
        // Handle both Unix (/) and Windows (\) path separators
        const fileName = filePath.split(/[\\/]/).pop() || 'file';
        setAttachments(prev => [...prev, {
          id: tempId,
          fileName,
          mimeType: '',
          fileSize: 0,
          stagedPath: '',
          preview: null,
          status: 'staging' as const,
        }]);
      }

      // Stage all files via IPC
      console.log('[pickFiles] Staging files:', result.filePaths);
      const staged = await hostApiFetch<Array<{
        id: string;
        fileName: string;
        mimeType: string;
        fileSize: number;
        stagedPath: string;
        preview: string | null;
      }>>('/api/files/stage-paths', {
        method: 'POST',
        body: JSON.stringify({ filePaths: result.filePaths }),
      });
      console.log('[pickFiles] Stage result:', staged?.map(s => ({ id: s?.id, fileName: s?.fileName, mimeType: s?.mimeType, fileSize: s?.fileSize, stagedPath: s?.stagedPath, hasPreview: !!s?.preview })));

      // Update each placeholder with real data
      setAttachments(prev => {
        let updated = [...prev];
        for (let i = 0; i < tempIds.length; i++) {
          const tempId = tempIds[i];
          const data = staged[i];
          if (data) {
            updated = updated.map(a =>
              a.id === tempId
                ? { ...data, status: 'ready' as const }
                : a,
            );
          } else {
            console.warn(`[pickFiles] No staged data for tempId=${tempId} at index ${i}`);
            updated = updated.map(a =>
              a.id === tempId
                ? { ...a, status: 'error' as const, error: 'Staging failed' }
                : a,
            );
          }
        }
        return updated;
      });
    } catch (err) {
      console.error('[pickFiles] Failed to stage files:', err);
      // Mark any stuck 'staging' attachments as 'error' so the user can remove them
      // and the send button isn't permanently blocked
      setAttachments(prev => prev.map(a =>
        a.status === 'staging'
          ? { ...a, status: 'error' as const, error: String(err) }
          : a,
      ));
    }
  }, []);

  // ── Stage browser File objects (paste / drag-drop) ─────────────

  const stageBufferFiles = useCallback(async (files: globalThis.File[]) => {
    for (const file of files) {
      const tempId = crypto.randomUUID();
      setAttachments(prev => [...prev, {
        id: tempId,
        fileName: file.name,
        mimeType: file.type || 'application/octet-stream',
        fileSize: file.size,
        stagedPath: '',
        preview: null,
        status: 'staging' as const,
      }]);

      try {
        console.log(`[stageBuffer] Reading file: ${file.name} (${file.type}, ${file.size} bytes)`);
        const base64 = await readFileAsBase64(file);
        console.log(`[stageBuffer] Base64 length: ${base64?.length ?? 'null'}`);
        const staged = await hostApiFetch<{
          id: string;
          fileName: string;
          mimeType: string;
          fileSize: number;
          stagedPath: string;
          preview: string | null;
        }>('/api/files/stage-buffer', {
          method: 'POST',
          body: JSON.stringify({
            base64,
            fileName: file.name,
            mimeType: file.type || 'application/octet-stream',
          }),
        });
        console.log(`[stageBuffer] Staged: id=${staged?.id}, path=${staged?.stagedPath}, size=${staged?.fileSize}`);
        setAttachments(prev => prev.map(a =>
          a.id === tempId ? { ...staged, status: 'ready' as const } : a,
        ));
      } catch (err) {
        console.error(`[stageBuffer] Error staging ${file.name}:`, err);
        setAttachments(prev => prev.map(a =>
          a.id === tempId
            ? { ...a, status: 'error' as const, error: String(err) }
            : a,
        ));
      }
    }
  }, []);

  // ── Attachment management ──────────────────────────────────────

  const removeAttachment = useCallback((id: string) => {
    setAttachments(prev => prev.filter(a => a.id !== id));
  }, []);

  const allReady = attachments.length === 0 || attachments.every(a => a.status === 'ready');
  const hasFailedAttachments = attachments.some((a) => a.status === 'error');
  const canSend = (input.trim() || attachments.length > 0 || selectedQuickTasks.length > 0) && allReady && !disabled && !sending;
  const canStop = sending && !disabled && !!onStop;

  const handleSend = useCallback(() => {
    if (!canSend) return;
    const readyAttachments = attachments.filter(a => a.status === 'ready');
    // Capture values before clearing — clear input immediately for snappy UX,
    // but keep attachments available for the async send
    const textToSend = [selectedQuickTaskPrompt, input.trim()].filter(Boolean).join(' ');
    const attachmentsToSend = readyAttachments.length > 0 ? readyAttachments : undefined;
    console.log(`[handleSend] text="${textToSend.substring(0, 50)}", attachments=${attachments.length}, ready=${readyAttachments.length}, sending=${!!attachmentsToSend}`);
    if (attachmentsToSend) {
      console.log('[handleSend] Attachment details:', attachmentsToSend.map(a => ({
        id: a.id, fileName: a.fileName, mimeType: a.mimeType, fileSize: a.fileSize,
        stagedPath: a.stagedPath, status: a.status, hasPreview: !!a.preview,
      })));
    }
    if (selectedQuickTasks.length > 0) {
      console.log('[handleSend] Quick task prompt:', selectedQuickTaskPrompt);
    }
    setInput('');
    setAttachments([]);
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
    }
    onSend(textToSend, attachmentsToSend, null, {
      useKnowledgeBase: selectedKnowledgeIds.length > 0,
      workspaceId,
      selectedKnowledgeDocumentIds: selectedKnowledgeIds,
    });
    setKnowledgePickerOpen(false);
    setSelectedQuickTaskIds([]);
    quickTaskPromptRef.current = '';
  }, [input, attachments, canSend, onSend, selectedKnowledgeIds, workspaceId, selectedQuickTasks, selectedQuickTaskPrompt]);

  const handleStop = useCallback(() => {
    if (!canStop) return;
    onStop?.();
  }, [canStop, onStop]);

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === 'Enter' && !e.shiftKey) {
        const nativeEvent = e.nativeEvent as KeyboardEvent;
        if (isComposingRef.current || nativeEvent.isComposing || nativeEvent.keyCode === 229) {
          return;
        }
        e.preventDefault();
        handleSend();
      }
    },
    [handleSend],
  );

  const toggleKnowledgeDocument = useCallback((id: string) => {
    setSelectedKnowledgeIds((current) => (
      current.includes(id)
        ? current.filter((item) => item !== id)
        : [...current, id]
    ));
  }, []);

  const toggleQuickTask = useCallback((id: string) => {
    setSelectedQuickTaskIds((current) => (
      current.includes(id)
        ? []
        : [id]
    ));
  }, []);

  // Handle paste (Ctrl/Cmd+V with files)
  const handlePaste = useCallback(
    (e: React.ClipboardEvent) => {
      const items = e.clipboardData?.items;
      if (!items) return;

      const pastedFiles: globalThis.File[] = [];
      for (const item of Array.from(items)) {
        if (item.kind === 'file') {
          const file = item.getAsFile();
          if (file) pastedFiles.push(file);
        }
      }
      if (pastedFiles.length > 0) {
        e.preventDefault();
        stageBufferFiles(pastedFiles);
      }
    },
    [stageBufferFiles],
  );

  // Handle drag & drop
  const [dragOver, setDragOver] = useState(false);

  const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragOver(true);
  }, []);

  const handleDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragOver(false);
  }, []);

  const handleDrop = useCallback(
    (e: React.DragEvent) => {
      e.preventDefault();
      e.stopPropagation();
      setDragOver(false);
      if (e.dataTransfer?.files?.length) {
        stageBufferFiles(Array.from(e.dataTransfer.files));
      }
    },
    [stageBufferFiles],
  );

  return (
    <div
      className={cn(
        "w-full shrink-0 px-0 pb-0 pt-3 mx-auto transition-all duration-300",
        isEmpty ? "max-w-4xl" : "max-w-4xl"
      )}
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
    >
      <div className="w-full">
        {/* Attachment Previews */}
        {attachments.length > 0 && (
          <div className="flex gap-2 mb-3 flex-wrap">
            {attachments.map((att) => (
              <AttachmentPreview
                key={att.id}
                attachment={att}
                onRemove={() => removeAttachment(att.id)}
              />
            ))}
          </div>
        )}

        {composerQuickTasks.length > 0 && (
          <div className="mb-2 flex flex-wrap gap-1.5">
            {composerQuickTasks.map((task) => {
              const selected = selectedQuickTaskIds.includes(task.id);
              const skillNames = task.skills.map((skill) => skill.name).filter(Boolean).join('、') || task.name;
              return (
                <div key={task.id} className="group relative">
                  <button
                    type="button"
                    onClick={() => toggleQuickTask(task.id)}
                    disabled={disabled || sending}
                    data-testid={`chat-quick-task-${task.id}`}
                    className={cn(
                      'inline-flex max-w-[220px] items-center gap-1.5 rounded-lg border px-2.5 py-1 text-[12px] font-medium transition-colors',
                      selected
                        ? 'border-[#7DBADB] bg-[#F4FAFD] text-[#075985]'
                        : 'border-slate-200/80 bg-white text-muted-foreground hover:bg-[#F8FBFE] dark:border-white/10 dark:bg-card dark:hover:bg-white/10',
                    )}
                  >
                    <span className="truncate">{task.name}</span>
                  </button>
                  <div className="pointer-events-none absolute bottom-full left-0 z-30 mb-2 hidden w-72 rounded-lg border border-slate-200/80 bg-white p-3 text-left shadow-[0_18px_48px_rgba(15,23,42,0.14)] group-hover:block dark:border-white/10 dark:bg-card">
                    <div className="text-[13px] font-semibold text-foreground">{task.name}</div>
                    <div className="mt-1 text-[12px] leading-5 text-muted-foreground">
                      {task.description || t('composer.quickTaskHelp')}
                    </div>
                    {skillNames && (
                      <div className="mt-2 rounded-md bg-slate-50 px-2 py-1.5 text-[11px] leading-4 text-slate-600 dark:bg-white/5 dark:text-slate-300">
                        {skillNames}
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {/* Input Container */}
        <div className={`relative rounded-lg border bg-white px-3 pb-2 pt-3 shadow-none transition-colors dark:bg-card ${dragOver ? 'border-[#0369A1] ring-1 ring-[#0369A1]' : 'border-slate-200/80 dark:border-white/10'}`}>
          {selectedKnowledgeDocuments.length > 0 && (
            <div className="flex flex-wrap gap-1.5 pb-1.5">
              {selectedKnowledgeDocuments.map((doc) => (
                <button
                  key={doc.id}
                  type="button"
                  onClick={() => toggleKnowledgeDocument(doc.id)}
                  className="inline-flex max-w-[220px] items-center gap-1.5 rounded-lg border border-[#7DBADB]/70 bg-[#F4FAFD] px-2.5 py-1 text-[13px] font-medium text-foreground transition-colors hover:bg-[#EAF5FA]"
                  title={doc.name}
                >
                  <BookOpen className="h-3 w-3 shrink-0 text-[#1E3A8A]" />
                  <span className="truncate">{doc.name}</span>
                  <X className="h-3 w-3 shrink-0 text-muted-foreground" />
                </button>
              ))}
            </div>
          )}

          {/* Text Row — flush-left */}
          <div className="flex min-h-[48px] items-start text-[14px] font-normal leading-6">
            {selectedQuickTaskPrompt && (
              <span
                onClick={() => textareaRef.current?.focus()}
                className="mt-0 select-none whitespace-nowrap pr-1.5 font-sans text-[14px] font-normal leading-6 text-muted-foreground/60"
              >
                {selectedQuickTaskPrompt}
              </span>
            )}
            <Textarea
              ref={textareaRef}
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={handleKeyDown}
              onCompositionStart={() => {
                isComposingRef.current = true;
              }}
              onCompositionEnd={() => {
                isComposingRef.current = false;
              }}
              onPaste={handlePaste}
              placeholder={disabled ? t('composer.gatewayDisconnectedPlaceholder') : ''}
              disabled={disabled}
              data-testid="chat-composer-input"
              className="block min-h-[48px] max-h-[240px] min-w-0 flex-1 resize-none border-0 bg-transparent p-0 font-sans text-[14px] font-normal leading-6 shadow-none placeholder:text-muted-foreground/60 focus-visible:ring-0 focus-visible:ring-offset-0"
              rows={1}
            />
          </div>

          {/* Action Row — icons on their own line */}
          <div className="mt-1.5 flex items-center gap-1">
            {/* Attach Button */}
            <Button
              variant="ghost"
              size="icon"
              className="h-8 w-8 shrink-0 rounded-lg text-muted-foreground transition-colors hover:bg-[#EAF5FA] hover:text-[#075985] dark:hover:bg-white/10"
              onClick={pickFiles}
              disabled={disabled || sending}
              title={t('composer.attachFiles')}
            >
              <Paperclip className="h-3.5 w-3.5" />
            </Button>

            <div ref={knowledgePickerRef} className="relative shrink-0">
              <Button
                variant="ghost"
                className={cn(
                  'h-8 rounded-lg px-2 text-[12px] text-muted-foreground transition-colors hover:bg-[#EAF5FA] hover:text-[#075985] dark:hover:bg-white/10',
                  selectedKnowledgeIds.length > 0 && 'bg-[#F4FAFD] text-[#075985] hover:bg-[#EAF5FA]',
                )}
                onClick={() => setKnowledgePickerOpen((open) => !open)}
                disabled={!knowledgeBaseAvailable || disabled || sending}
                data-testid="chat-composer-knowledge-button"
                title={knowledgeBaseAvailable ? '选择知识库文件作为上下文' : '当前组织空间暂无知识文件'}
              >
                <BookOpen className="mr-1.5 h-3.5 w-3.5" />
                知识库
                <span className="ml-1 text-muted-foreground">
                  {selectedKnowledgeIds.length > 0 ? selectedKnowledgeIds.length : knowledgeDocuments.length}
                </span>
                <ChevronDown className="ml-1 h-3 w-3" />
              </Button>

              {knowledgePickerOpen && (
                <div
                  data-testid="chat-composer-knowledge-popover"
                  className="absolute bottom-full left-0 z-30 mb-2 w-80 max-w-[calc(100vw-7rem)] overflow-hidden rounded-lg border border-slate-200/80 bg-white/95 p-2 shadow-[0_18px_48px_rgba(15,23,42,0.14)] backdrop-blur dark:border-white/10 dark:bg-card"
                >
                  <div className="flex items-center justify-between px-2 py-1.5">
                    <div className="text-[12px] font-medium text-foreground">选择知识库上下文</div>
                    {selectedKnowledgeIds.length > 0 && (
                      <button
                        type="button"
                        onClick={() => setSelectedKnowledgeIds([])}
                        className="text-[11px] text-muted-foreground transition-colors hover:text-foreground"
                      >
                        清空
                      </button>
                    )}
                  </div>
                  <div className="max-h-64 overflow-y-auto">
                    {knowledgeDocuments.map((doc) => {
                      const selected = selectedKnowledgeIds.includes(doc.id);
                      return (
                        <button
                          key={doc.id}
                          type="button"
                          onClick={() => toggleKnowledgeDocument(doc.id)}
                          className={cn(
                            'flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left transition-colors',
                            selected ? 'bg-[#EAF5FA] text-foreground' : 'hover:bg-[#F8FBFE] dark:hover:bg-white/5',
                          )}
                        >
                          <span className={cn(
                            'flex h-4 w-4 shrink-0 items-center justify-center rounded border',
                            selected ? 'border-[#1E3A8A] bg-[#1E3A8A] text-white' : 'border-slate-300 text-transparent',
                          )}>
                            <Check className="h-3 w-3" />
                          </span>
                          <span className="min-w-0 flex-1">
                            <span className="block truncate text-[13px] font-medium">{doc.name}</span>
                            <span className="block truncate text-[11px] text-muted-foreground">
                              {doc.textPath ? '已提取文本' : doc.mimeType}
                            </span>
                          </span>
                        </button>
                      );
                    })}
                  </div>
                </div>
              )}
            </div>

            {/* Send Button — pushed to the right */}
            <Button
              onClick={sending ? handleStop : handleSend}
              disabled={sending ? !canStop : !canSend}
              size="icon"
              data-testid="chat-composer-send"
              className={`ml-auto h-8 w-8 shrink-0 rounded-lg transition-colors ${
                (sending || canSend)
                  ? 'bg-[#0369A1] text-white hover:bg-[#075985]'
                  : 'text-muted-foreground/50 hover:bg-transparent bg-transparent'
              }`}
              variant="ghost"
              title={sending ? t('composer.stop') : t('composer.send')}
            >
              {sending ? (
                <Square className="h-3.5 w-3.5" fill="currentColor" />
              ) : (
                <SendHorizontal className="h-4 w-4" strokeWidth={2} />
              )}
            </Button>
          </div>
        </div>
        <div className="mt-2.5 flex items-center justify-between gap-2 px-1 text-[11px] text-muted-foreground/60">
          <div className="flex items-center gap-1.5">
            <div className={cn("w-1.5 h-1.5 rounded-full", gatewayStatus.state === 'running' ? "bg-green-500/80" : "bg-red-500/80")} />
            <span>
              {t('composer.gatewayStatus', {
                state: gatewayStatus.state === 'running'
                  ? t('composer.gatewayConnected')
                  : gatewayStatus.state,
                port: gatewayStatus.port,
                pid: gatewayStatus.pid ? `| pid: ${gatewayStatus.pid}` : '',
              })}
            </span>
          </div>
          {hasFailedAttachments && (
            <Button
              variant="link"
              size="sm"
              className="h-auto p-0 text-[11px]"
              onClick={() => {
                setAttachments((prev) => prev.filter((att) => att.status !== 'error'));
                void pickFiles();
              }}
            >
              {t('composer.retryFailedAttachments')}
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}

// ── Attachment Preview ───────────────────────────────────────────

function AttachmentPreview({
  attachment,
  onRemove,
}: {
  attachment: FileAttachment;
  onRemove: () => void;
}) {
  const isImage = attachment.mimeType.startsWith('image/') && attachment.preview;

  return (
    <div className="group relative overflow-hidden rounded-lg border border-slate-200/80 dark:border-white/10">
      {isImage ? (
        // Image thumbnail
        <div className="w-16 h-16">
          <img
            src={attachment.preview!}
            alt={attachment.fileName}
            className="w-full h-full object-cover"
          />
        </div>
      ) : (
        // Generic file card
        <div className="flex max-w-[200px] items-center gap-2 bg-slate-50 px-3 py-2 dark:bg-white/5">
          <FileIcon mimeType={attachment.mimeType} className="h-5 w-5 shrink-0 text-muted-foreground" />
          <div className="min-w-0 overflow-hidden">
            <p className="text-xs font-medium truncate">{attachment.fileName}</p>
            <p className="text-[10px] text-muted-foreground">
              {attachment.fileSize > 0 ? formatFileSize(attachment.fileSize) : '...'}
            </p>
          </div>
        </div>
      )}

      {/* Staging overlay */}
      {attachment.status === 'staging' && (
        <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
          <Loader2 className="h-4 w-4 text-white animate-spin" />
        </div>
      )}

      {/* Error overlay */}
      {attachment.status === 'error' && (
        <div className="absolute inset-0 bg-destructive/20 flex items-center justify-center">
          <span className="text-[10px] text-destructive font-medium px-1">Error</span>
        </div>
      )}

      {/* Remove button */}
      <button
        onClick={onRemove}
        className="absolute -top-1 -right-1 bg-destructive text-destructive-foreground rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
      >
        <X className="h-3 w-3" />
      </button>
    </div>
  );
}