// File: frontend/app/chat/page.tsx (更新以使用 API)
// Description: 对接后端 API 实现助手和会话的加载与管理

"use client";

import React, { useState, useRef, useEffect, useCallback } from "react";
import {
  SendHorizontal,
  Loader2,
  PanelRightOpen,
  PanelRightClose,
  UserPlus,
  Settings2,
  Trash2,
  Edit,
  RefreshCw,
} from "lucide-react"; // 添加刷新图标
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";

// Shadcn UI Components
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogFooter,
  DialogClose,
} from "@/components/ui/dialog";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Slider } from "@/components/ui/slider";
import { Toaster, toast } from "sonner";
import { Skeleton } from "@/components/ui/skeleton"; // 导入骨架屏

// API 函数和类型
import {
  sendChatMessage,
  getAssistants,
  createAssistant,
  updateAssistant,
  deleteAssistant,
  getSessionsByAssistant,
  deleteSession,
  getMessagesBySession,
  Session,
  ChatApiResponse,
  Message as ApiMessage,
} from "@/lib/api"; // 确保路径正确
import {
  Assistant,
  AssistantCreateData,
  AssistantUpdateData,
} from "@/types/assistant";

// --- Frontend specific Message type (includes optional isError) ---
interface Message extends ApiMessage {
  // Extend the type from API
  isError?: boolean; // Optional flag for frontend error styling
}

interface ChatSession {
  id: string;
  title: string;
  createdAt: Date;
  assistantId: string;
  isTemporary?: boolean;
}

// --- Zod Schema for Assistant Form Validation ---
const assistantFormSchema = z.object({
  name: z
    .string()
    .min(1, { message: "助手名称不能为空" })
    .max(50, { message: "名称过长" }),
  description: z.string().max(200, { message: "描述过长" }).optional(),
  avatar: z.string().max(5, { message: "头像/Emoji 过长" }).optional(), // 简单限制长度
  system_prompt: z
    .string()
    .min(1, { message: "系统提示不能为空" })
    .max(4000, { message: "系统提示过长" }),
  model: z.string({ required_error: "请选择一个模型" }),
  temperature: z.number().min(0).max(1),
});

type AssistantFormData = z.infer<typeof assistantFormSchema>;

// 可选的模型列表
const availableModels = [
  { value: "gpt-3.5-turbo", label: "GPT-3.5 Turbo" },
  { value: "gpt-4", label: "GPT-4" },
  { value: "gpt-4-turbo", label: "GPT-4 Turbo" },
  { value: "gemini-2.0-flash", label: "Gemini 2.0 Flash" },
  { value: "deepseek-coder", label: "DeepSeek Coder" }, // 示例
  // 添加更多模型...
];

// --- Helper Function ---
const findLastSession = (
  sessions: ChatSession[],
  assistantId: string
): ChatSession | undefined => {
  return sessions
    .filter((s) => s.assistantId === assistantId && !s.isTemporary)
    .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())[0];
};

// --- Assistant Form Component ---
interface AssistantFormProps {
  assistant?: Assistant | null; // 传入表示编辑，否则是创建
  onSave: (data: AssistantFormData, id?: string) => void; // 保存回调
  onClose: () => void; // 关闭 Dialog 的回调
}

function AssistantForm({ assistant, onSave, onClose }: AssistantFormProps) {
  const form = useForm<AssistantFormData>({
    resolver: zodResolver(assistantFormSchema),
    defaultValues: {
      name: assistant?.name || "",
      description: assistant?.description || "",
      avatar: assistant?.avatar || "",
      system_prompt: assistant?.system_prompt || "",
      model: assistant?.model || availableModels[0].value, // 默认第一个模型
      temperature: assistant?.temperature ?? 0.7, // 默认 0.7
    },
  });
  const [isSaving, setIsSaving] = useState(false); // 添加保存状态
  async function onSubmit(data: AssistantFormData) {
    setIsSaving(true);
    try {
      await onSave(data, assistant?.id); // 调用异步保存函数
      onClose(); // 成功后关闭
    } catch (error) {
      // 错误已在 onSave 中处理并 toast
    } finally {
      setIsSaving(false);
    }
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        {/* Name */}
        <FormField
          control={form.control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>助手名称</FormLabel>
              <FormControl>
                <Input placeholder="例如：代码助手" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        {/* Description */}
        <FormField
          control={form.control}
          name="description"
          render={({ field }) => (
            <FormItem>
              <FormLabel>描述 (可选)</FormLabel>
              <FormControl>
                <Input placeholder="简单描述助手的功能" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        {/* Avatar */}
        <FormField
          control={form.control}
          name="avatar"
          render={({ field }) => (
            <FormItem>
              <FormLabel>头像 (可选)</FormLabel>
              <FormControl>
                <Input placeholder="输入 Emoji 或 URL" {...field} />
              </FormControl>
              <FormDescription>建议使用单个 Emoji。</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        {/* System Prompt */}
        <FormField
          control={form.control}
          name="system_prompt"
          render={({ field }) => (
            <FormItem>
              <FormLabel>系统提示 (System Prompt)</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="定义助手的角色和行为..."
                  className="resize-y min-h-[100px]" // 允许垂直调整大小
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        {/* Model Selection */}
        <FormField
          control={form.control}
          name="model"
          render={({ field }) => (
            <FormItem>
              <FormLabel>模型</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="选择一个 AI 模型" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  {availableModels.map((model) => (
                    <SelectItem key={model.value} value={model.value}>
                      {model.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          )}
        />
        {/* Temperature */}
        <FormField
          control={form.control}
          name="temperature"
          render={({ field }) => (
            <FormItem>
              <FormLabel>
                温度 (Temperature): {field.value.toFixed(1)}
              </FormLabel>
              <FormControl>
                {/* Shadcn Slider expects an array for value */}
                <Slider
                  min={0}
                  max={1}
                  step={0.1}
                  defaultValue={[field.value]} // Use defaultValue for initial render
                  onValueChange={(value) => field.onChange(value[0])} // Update form state on change
                  className="py-2" // Add padding for better interaction
                />
              </FormControl>
              <FormDescription>值越低越稳定，越高越有创造性。</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <DialogFooter>
          <DialogClose asChild>
            <Button type="button" variant="outline" disabled={isSaving}>
              取消
            </Button>
          </DialogClose>
          <Button type="submit" disabled={isSaving}>
            {isSaving ? (
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            ) : null}
            {isSaving ? "保存中..." : "保存助手"}
          </Button>
        </DialogFooter>
      </form>
    </Form>
  );
}

// --- Main Chat Page Component ---
export default function ChatPage() {
  // --- State Variables ---
  const [inputMessage, setInputMessage] = useState("");
  // Messages state now holds Message type from API
  const [messages, setMessages] = useState<Message[]>([]);

  const [isLoading, setIsLoading] = useState(false); // AI 回复加载状态
  const [error, setError] = useState<string | null>(null); // 通用错误显示 (可选)

  const [isSessionPanelOpen, setIsSessionPanelOpen] = useState(true);
  const [isAssistantDialogOpen, setIsAssistantDialogOpen] = useState(false); // 控制助手表单 Dialog 显隐
  const [editingAssistant, setEditingAssistant] = useState<Assistant | null>(
    null
  ); // 当前正在编辑的助手

  // Data Loading States
  const [assistantsLoading, setAssistantsLoading] = useState(true);
  const [sessionsLoading, setSessionsLoading] = useState(false);
  const [messagesLoading, setMessagesLoading] = useState(false);
  // Data State
  const [assistants, setAssistants] = useState<Assistant[]>([]);
  const [currentAssistantId, setCurrentAssistantId] = useState<string | null>(
    null
  ); // 初始为 null
  const [allSessions, setAllSessions] = useState<Session[]>([]);
  const [currentSessionId, setCurrentSessionId] = useState<string | null>(null); // 初始为 null

  // --- Refs ---
  const messagesEndRef = useRef<null | HTMLDivElement>(null);

  // --- Effects ---
  // Initial data loading (Assistants)
  // Initial Assistant loading
  useEffect(() => {
    const loadAssistants = async () => {
      setAssistantsLoading(true);
      try {
        const fetchedAssistants = await getAssistants();
        setAssistants(fetchedAssistants);
        const defaultAssistant =
          fetchedAssistants.find((a) => a.id === "asst-default") ||
          fetchedAssistants[0];
        if (defaultAssistant) {
          setCurrentAssistantId(defaultAssistant.id);
        } else {
          console.warn("No default or initial assistant found.");
        }
      } catch (apiError: any) {
        toast.error(`加载助手列表失败: ${apiError.message}`);
        setError(`无法加载助手: ${apiError.message}`);
      } finally {
        setAssistantsLoading(false);
      }
    };
    loadAssistants();
  }, []);
  // Load sessions when assistant changes (remains same, but calls handleSelectSession internally)
  useEffect(() => {
    if (!currentAssistantId) return;
    const loadSessions = async () => {
        setSessionsLoading(true);
        setCurrentSessionId(null);
        setMessages([]);
        try {
            const fetchedSessions = await getSessionsByAssistant(currentAssistantId);
            // Filter out sessions that might belong to a deleted assistant still in cache
            const validAssistants = new Set(assistants.map(a => a.id));
            setAllSessions(prev => [
                ...prev.filter(s => s.assistant_id !== currentAssistantId && validAssistants.has(s.assistant_id)),
                ...fetchedSessions
            ]);
            const lastSession = fetchedSessions.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())[0];
            if (lastSession) {
                setCurrentSessionId(lastSession.id); // Trigger message loading effect
            } else {
                setCurrentSessionId('temp-new-chat');
                 const currentAssistant = assistants.find(a => a.id === currentAssistantId);
                 setMessages([{ id: `init-temp-${currentAssistantId}`, session_id: 'temp-new-chat', sender: 'ai', text: `开始与 ${currentAssistant?.name || '助手'} 的新对话吧！`, order: 0, created_at: new Date().toISOString() }]);
            }
        } catch (apiError: any) { toast.error(`加载会话列表失败: ${apiError.message}`); }
        finally { setSessionsLoading(false); }
    };
    loadSessions();
  }, [currentAssistantId]); // 空依赖数组，只在挂载时运行一次

  // Load sessions when assistant changes
  useEffect(() => {
    if (!currentSessionId || currentSessionId === "temp-new-chat") {
      // If it's temp-new-chat, messages are already set or should be empty initially
      if (currentSessionId === "temp-new-chat" && messages.length === 0) {
        // Ensure initial message is set
        const currentAssistant = assistants.find(
          (a) => a.id === currentAssistantId
        );
        setMessages([
          {
            id: `init-temp-${currentAssistantId}`,
            session_id: "temp-new-chat",
            sender: "ai",
            text: `开始与 ${currentAssistant?.name || "助手"} 的新对话吧！`,
            order: 0,
            created_at: new Date().toISOString(),
          },
        ]);
      }
      return;
    }

    const loadMessages = async () => {
      setMessagesLoading(true);
      setError(null); // Clear previous errors
      console.log(`加载会话 ${currentSessionId} 的消息...`);
      try {
        const fetchedMessages = await getMessagesBySession(currentSessionId);
        setMessages(fetchedMessages);
        console.log(`成功加载 ${fetchedMessages.length} 条消息`);
      } catch (apiError: any) {
        toast.error(`加载消息失败: ${apiError.message}`);
        setError(`无法加载消息: ${apiError.message}`);
        setMessages([]); // Clear messages on error
      } finally {
        setMessagesLoading(false);
      }
    };
    loadMessages();
  }, [currentSessionId]); // 依赖助手 ID 和助手列表 (以防助手信息更新)

  // Auto scroll
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  // Filter sessions for the current assistant (UI display)
  const currentAssistantSessions = React.useMemo(() => {
    // 直接从 allSessions 过滤，因为加载时已经更新了
    return allSessions
      .filter((s) => s.assistant_id === currentAssistantId)
      .sort(
        (a, b) =>
          new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
      ); // 按时间倒序
  }, [allSessions, currentAssistantId]);

  // --- Assistant CRUD Handlers (Updated with API calls) ---
  const handleSaveAssistant = async (data: AssistantFormData, id?: string) => {
    try {
      let savedAssistant: Assistant;
      if (id) {
        // 编辑
        savedAssistant = await updateAssistant(id, data);
        setAssistants((prev) =>
          prev.map((a) => (a.id === id ? savedAssistant : a))
        );
        toast.success(`助手 "${savedAssistant.name}" 已更新`);
      } else {
        // 创建
        savedAssistant = await createAssistant(data);
        setAssistants((prev) => [...prev, savedAssistant]);
        toast.success(`助手 "${savedAssistant.name}" 已创建`);
        // 创建后自动选中
        handleSelectAssistant(savedAssistant.id);
      }
    } catch (apiError: any) {
      toast.error(`保存助手失败: ${apiError.message}`);
      throw apiError; // 重新抛出错误，让表单的 finally 处理 isSaving
    }
  };

  const handleDeleteAssistant = async (idToDelete: string) => {
    if (idToDelete === "asst-default" || assistants.length <= 1) {
      toast.error("不能删除默认助手或最后一个助手");
      return;
    }
    if (idToDelete === currentAssistantId) {
      toast.error("请先切换到其他助手再删除");
      return;
    }

    const assistantToDelete = assistants.find((a) => a.id === idToDelete);
    if (
      window.confirm(
        `确定要删除助手 "${assistantToDelete?.name}" 吗？相关会话也将被删除。`
      )
    ) {
      try {
        await deleteAssistant(idToDelete);
        // 后端应负责删除关联会话，前端只需更新助手列表
        setAssistants((prev) => prev.filter((a) => a.id !== idToDelete));
        // (可选) 如果需要立即清除前端的会话缓存
        // setAllSessions(prev => prev.filter(s => s.assistant_id !== idToDelete));
        toast.success(`助手 "${assistantToDelete?.name}" 已删除`);
      } catch (apiError: any) {
        toast.error(`删除助手失败: ${apiError.message}`);
      }
    }
  };

  const handleEditAssistant = (assistant: Assistant) => {
    setEditingAssistant(assistant);
    setIsAssistantDialogOpen(true);
  };

  const handleOpenCreateAssistantDialog = () => {
    setEditingAssistant(null);
    setIsAssistantDialogOpen(true);
  };

  // --- Send Message Handler (Updated - handles new session ID from response) ---
  const handleSendMessage = async (e?: React.FormEvent<HTMLFormElement>) => {
    e?.preventDefault();
    const trimmedMessage = inputMessage.trim();
    if (
      !trimmedMessage ||
      isLoading ||
      !currentSessionId ||
      !currentAssistantId
    )
      return;
    setError(null);
    setIsLoading(true); // Start loading (for AI reply)

    const tempUserMessageId = `temp-user-${Date.now()}`; // Temporary ID for optimistic update
    const userMessageOptimistic: Message = {
      id: tempUserMessageId,
      session_id:
        currentSessionId === "temp-new-chat" ? "temp" : currentSessionId, // Use temp session id if needed
      text: trimmedMessage,
      sender: "user",
      order: (messages[messages.length - 1]?.order || 0) + 1, // Estimate order
      created_at: new Date().toISOString(),
    };

    // Optimistic UI update: Add user message immediately
    setMessages((prev) => [...prev, userMessageOptimistic]);
    setInputMessage("");

    let targetSessionId = currentSessionId; // Will be updated if new session is created

    try {
      const response: ChatApiResponse = await sendChatMessage(
        trimmedMessage,
        currentSessionId, // Send 'temp-new-chat' or actual ID
        currentAssistantId
      );

      // Process successful response
      const aiMessage: Message = {
        id: `ai-${Date.now()}`, // Use temporary or actual ID from backend if provided
        session_id: response.session_id || targetSessionId, // Use new session ID if available
        text: response.reply,
        sender: "ai",
        order: userMessageOptimistic.order + 1, // Estimate order
        created_at: new Date().toISOString(),
      };

      // Update messages: Replace temp user message with potential real one (if backend returned it)
      // and add AI message. For simplicity, we just add the AI message.
      // A more robust solution would involve matching IDs.
      setMessages((prev) => [
        ...prev.filter((m) => m.id !== tempUserMessageId),
        userMessageOptimistic,
        aiMessage,
      ]); // Keep optimistic user msg for now

      // If a new session was created by the backend
      if (
        response.session_id &&
        response.session_title &&
        currentSessionId === "temp-new-chat"
      ) {
        const newSession: Session = {
          id: response.session_id,
          title: response.session_title,
          assistant_id: currentAssistantId,
          created_at: new Date().toISOString(), // Or use time from backend if available
        };
        setAllSessions((prev) => [...prev, newSession]);
        setCurrentSessionId(newSession.id); // Switch to the new session ID
        // Update the session_id of the messages just added
        setMessages((prev) =>
          prev.map((m) =>
            m.session_id === "temp" ? { ...m, session_id: newSession.id } : m
          )
        );
        console.log(
          `前端已更新新会话信息: ID=${newSession.id}, Title=${newSession.title}`
        );
      }
    } catch (apiError: any) {
      // Handle error: Remove optimistic user message and show error
      setMessages((prev) => prev.filter((m) => m.id !== tempUserMessageId));
      const errorMessageText = apiError.message || "发生未知错误";
      toast.error(`发送消息失败: ${errorMessageText}`);
      setError(`发送消息失败: ${errorMessageText}`);
      // Optionally add an error message to the chat
      const errorMessage: Message = {
        /* ... */ id: `err-${Date.now()}`,
        session_id: targetSessionId,
        text: `错误: ${errorMessageText}`,
        sender: "ai",
        order: userMessageOptimistic.order + 1,
        created_at: new Date().toISOString(),
      };
      setMessages((prevMessages) => [...prevMessages, errorMessage]);
    } finally {
      setIsLoading(false); // Stop AI reply loading
    }
  };

  // --- Other Handlers (基本不变, 但需要检查 currentAssistantId/currentSessionId 是否存在) ---
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputMessage(e.target.value);
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter" && !e.shiftKey && !isLoading) {
      e.preventDefault();
      handleSendMessage();
    }
  };

  const toggleSessionPanel = () => {
    setIsSessionPanelOpen(!isSessionPanelOpen);
  };

  const handleSelectAssistant = (assistantId: string) => {
    console.log("选择助手id",assistantId)
    if (assistantId !== currentAssistantId) {
      setCurrentAssistantId(assistantId); // 触发 useEffect 加载会话
      console.log("当前助手id",currentAssistantId)
    }
  };
  // Updated handleSelectSession to just set the ID, useEffect handles loading

  const handleSelectSession = (sessionId: string) => {
    if (sessionId !== currentSessionId) {
      setCurrentSessionId(sessionId); // Trigger useEffect to load messages
    }
  };

  const handleNewTopic = () => {
    if (currentSessionId !== "temp-new-chat" && currentAssistantId) {
      // 确保有助手被选中
      setCurrentSessionId("temp-new-chat");
      console.log("手动创建临时新对话");
    }
  };

  // --- JSX Rendering ---
  return (
    // 最外层 Flex 容器
    <div className="flex h-full gap-1">
      {" "}
      {/* 使用 gap 添加间距 */}
      <Toaster position="top-center" richColors />
      {/* 左侧助手面板 */}
      <aside className="w-64 bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 flex flex-col">
        <h2 className="w-full text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 flex items-center justify-between">
          <span>助手列表</span>
          {/* 添加刷新按钮 */}
          <Button
            variant="ghost"
            size="icon"
            className="h-7 w-7"
            onClick={() => {
              // 重新加载助手列表
              const loadAssistants = async () => {
                setAssistantsLoading(true);
                try {
                  const fetchedAssistants = await getAssistants();
                  setAssistants(fetchedAssistants);
                  const defaultAssistant =
                    fetchedAssistants.find((a) => a.id === "asst-default") ||
                    fetchedAssistants[0];
                  if (defaultAssistant) {
                    setCurrentAssistantId(defaultAssistant.id);
                  } else {
                    console.warn("No default or initial assistant found.");
                  }
                } catch (apiError: any) {
                  toast.error(`加载助手列表失败: ${apiError.message}`);
                  setError(`无法加载助手: ${apiError.message}`);
                } finally {
                  setAssistantsLoading(false);
                }
              }; // 将加载逻辑提取出来
              loadAssistants();
            }}
            disabled={assistantsLoading}
          >
            <RefreshCw
              size={16}
              className={assistantsLoading ? "animate-spin" : ""}
            />
          </Button>
        </h2>
        <Dialog
          open={isAssistantDialogOpen}
          onOpenChange={setIsAssistantDialogOpen}
        >
          <DialogTrigger asChild>
            <Button
              variant="default" // 使用 shadcn Button
              size="sm" // 调整大小
              className="mb-4 w-full bg-red-500 hover:bg-red-600 text-white" // 样式调整
              onClick={handleOpenCreateAssistantDialog} // 点击时重置编辑状态并打开
            >
              <UserPlus size={16} className="mr-2" /> 添加助手
            </Button>
          </DialogTrigger>
          {/* Dialog 内容 */}
          <DialogContent className="sm:max-w-[600px]">
            {" "}
            {/* 调整宽度 */}
            <DialogHeader>
              <DialogTitle>
                {editingAssistant ? "编辑助手" : "创建新助手"}
              </DialogTitle>
              <DialogDescription>
                {editingAssistant
                  ? "修改助手的配置信息。"
                  : "定义一个新助手的名称、行为和参数。"}
              </DialogDescription>
            </DialogHeader>
            {/* 渲染助手表单 */}
            <AssistantForm
              key={editingAssistant?.id || "create"} // 添加 key 确保编辑时表单重置
              assistant={editingAssistant}
              onSave={handleSaveAssistant}
              onClose={() => setIsAssistantDialogOpen(false)} // 传递关闭回调
            />
          </DialogContent>
        </Dialog>
        <div className="flex-1 overflow-y-auto space-y-2 pr-1">
          {" "}
          {/* 添加右内边距防止滚动条遮挡 */}
          {/* 渲染助手列表 */}
          {assistantsLoading ? (
            // 显示骨架屏
            Array.from({ length: 3 }).map((_, index) => (
              <div
                key={index}
                className="p-3 rounded-lg flex items-center gap-3"
              >
                <Skeleton className="h-8 w-8 rounded-full" />
                <div className="flex-1 space-y-1">
                  <Skeleton className="h-4 w-3/4" />
                  <Skeleton className="h-3 w-1/2" />
                </div>
              </div>
            ))
          ) : assistants.length === 0 ? (
            <p className="text-center text-sm text-gray-500 dark:text-gray-400 mt-4">
              没有找到助手。
            </p>
          ) : (
            // 渲染助手列表
            assistants.map((assistant) => (
              <div
                key={assistant.id}
                onClick={() => handleSelectAssistant(assistant.id)}
                className={`group p-2 rounded-lg cursor-pointer flex items-center gap-3 relative ${
                  currentAssistantId === assistant.id
                    ? "bg-red-100 dark:bg-red-900/50 ring-1 ring-red-300 dark:ring-red-700"
                    : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
                }`}
                title={assistant.description || ""}
              >
                {/* ... 助手头像和名称 ... */}
                <span className="text-lg flex-shrink-0 w-6 text-center">
                  {assistant.avatar || "👤"}
                </span>
                <div className="flex-1 overflow-hidden">
                  <p
                    className={`text-sm font-medium truncate ${
                      currentAssistantId === assistant.id
                        ? "text-red-800 dark:text-red-200"
                        : "text-gray-800 dark:text-gray-200"
                    }`}
                  >
                    {assistant.name}
                  </p>
                </div>
                {/* 编辑和删除按钮 */}
                <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-6 w-6 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                    onClick={(e) => {
                      e.stopPropagation();
                      handleEditAssistant(assistant);
                    }} // 阻止事件冒泡
                    title="编辑助手"
                  >
                    <Edit size={14} />
                  </Button>
                  {assistant.id !== "asst-default" && ( // 不显示默认助手的删除按钮
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-6 w-6 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
                      onClick={(e) => {
                        e.stopPropagation();
                        handleDeleteAssistant(assistant.id);
                      }}
                      title="删除助手"
                    >
                      <Trash2 size={14} />
                    </Button>
                  )}
                </div>
              </div>
            ))
          )}
        </div>
      </aside>
      {/* 中间主聊天区域 */}
      <div className="flex flex-col flex-1 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        {/* 聊天窗口标题 - 显示当前助手和切换会话按钮 */}
        <div className="flex justify-between items-center p-4 border-b dark:border-gray-700">
          {currentAssistantId ? (
            <div className="flex items-center gap-2">
              <span className="text-xl">
                {assistants.find((a) => a.id === currentAssistantId)?.avatar ||
                  "👤"}
              </span>
              <h1 className="text-lg font-semibold text-gray-800 dark:text-gray-200">
                {assistants.find((a) => a.id === currentAssistantId)?.name ||
                  "加载中..."}
                <span className="text-sm font-normal text-gray-500 dark:text-gray-400 ml-2">
                  (
                  {currentSessionId === "temp-new-chat"
                    ? "新话题"
                    : allSessions.find((s) => s.id === currentSessionId)
                        ?.title || (sessionsLoading ? "加载中..." : "选择话题")}
                  )
                </span>
              </h1>
            </div>
          ) : (
            <Skeleton className="h-6 w-48" /> // 助手加载中显示骨架屏
          )}
          <button
            onClick={toggleSessionPanel}
            className="p-1 rounded text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
            title={isSessionPanelOpen ? "关闭会话面板" : "打开会话面板"}
          >
            {isSessionPanelOpen ? (
              <PanelRightClose size={20} />
            ) : (
              <PanelRightOpen size={20} />
            )}
          </button>
        </div>

        {/* 消息显示区域 */}
        <div className="flex-1 overflow-y-auto p-4 space-y-4">
          {/* 可以添加一个全局错误提示 */}
          {error && (
            <p className="text-center text-sm text-red-500 dark:text-red-400">
              {error}
            </p>
          )}
          {messagesLoading ? (
            // Message loading skeleton
            <div className="space-y-4">
              <Skeleton className="h-10 w-3/5 rounded-lg" />
              <Skeleton className="h-12 w-4/5 ml-auto rounded-lg" />
              <Skeleton className="h-8 w-1/2 rounded-lg" />
            </div>
          ) : messages.length === 0 && currentSessionId !== "temp-new-chat" ? (
            <p className="text-center text-sm text-gray-500 dark:text-gray-400 mt-8">
              {currentAssistantId
                ? "选择或新建一个话题开始聊天。"
                : "请先选择一个助手。"}
            </p>
          ) : (
            // Render actual messages
            messages.map((message) => (
              <div
                key={message.id} // Use message ID from DB
                className={`flex ${
                  message.sender === "user" ? "justify-end" : "justify-start"
                }`}
              >
                <div
                  className={`max-w-xs md:max-w-md lg:max-w-lg px-4 py-2 rounded-lg shadow ${
                    message.sender === "user"
                      ? "bg-red-500 text-white"
                      : message.isError // Check if it's an error message added by frontend
                      ? "bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300"
                      : "bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
                  }`}
                >
                  <p className="text-sm whitespace-pre-wrap">{message.text}</p>
                </div>
              </div>
            ))
          )}
          {isLoading && (
            <div className="flex justify-center items-center p-2">
              <Loader2 className="h-5 w-5 animate-spin text-gray-500 dark:text-gray-400" />
              <span className="ml-2 text-sm text-gray-500 dark:text-gray-400">
                AI 正在思考...
              </span>
            </div>
          )}
          <div ref={messagesEndRef} />
        </div>

        {/* 消息输入区域 */}
        <div className="p-4 border-t dark:border-gray-700">
          <form
            onSubmit={handleSendMessage}
            className="flex items-center space-x-2"
          >
            <input
              type="text"
              value={inputMessage}
              onChange={handleInputChange}
              onKeyDown={handleKeyDown}
              placeholder={isLoading ? "AI 正在回复..." : "输入你的消息..."}
              disabled={
                isLoading ||
                messagesLoading ||
                sessionsLoading ||
                !currentAssistantId ||
                !currentSessionId
              } // 添加禁用条件
              className="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:focus:ring-red-600 disabled:opacity-70 transition-opacity"
              aria-label="聊天输入框"
            />
            <Button
              type="submit"
              disabled={
                !inputMessage.trim() ||
                isLoading ||
                messagesLoading ||
                sessionsLoading ||
                !currentAssistantId ||
                !currentSessionId
              } // 添加禁用条件
              className="p-2 rounded-lg bg-red-500 text-white hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center justify-center h-10 w-10"
              aria-label={isLoading ? "正在发送" : "发送消息"}
            >
              {isLoading ? (
                <Loader2 className="h-5 w-5 animate-spin" />
              ) : (
                <SendHorizontal size={20} />
              )}
            </Button>
          </form>
        </div>
      </div>
      {/* 右侧会话管理面板 */}
      <aside
        className={`bg-white dark:bg-gray-800 rounded-lg shadow-md p-2 flex flex-col transition-all duration-300 ease-in-out ${
          isSessionPanelOpen
            ? "w-64"
            : "w-0 p-0 border-0 overflow-hidden opacity-0"
        }`}
      >
        {" "}
        {/* 调整关闭时的样式 */}
        <h2 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 whitespace-nowrap items-center justify-center">
          话题列表
        </h2>{" "}
        {/* 改为话题 */}
        <Button
          onClick={handleNewTopic} // 绑定新建话题事件
          className="mb-4 w-full px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors text-sm whitespace-nowrap flex items-center justify-center gap-2 disabled:opacity-50"
          disabled={
            currentSessionId === "temp-new-chat" ||
            sessionsLoading ||
            !currentAssistantId
          } // 添加禁用条件
        >
          + 新建话题
        </Button>
        <div className="flex-1 overflow-y-auto space-y-4 pr-1">
          {sessionsLoading ? (
            // 会话加载骨架屏
            Array.from({ length: 5 }).map((_, index) => (
              <Skeleton key={index} className="h-8 w-full my-1.5 rounded-lg" />
            ))
          ) : currentAssistantSessions.length === 0 &&
            currentSessionId !== "temp-new-chat" ? (
            <p className="text-center text-sm text-gray-500 dark:text-gray-400 mt-4">
              没有历史话题。
            </p>
          ) : (
            <>
              {/* 渲染会话列表 */}
              {currentAssistantSessions.map((session) => (
                <div
                  key={session.id}
                  onClick={() => handleSelectSession(session.id)}
                  className={`p-2 rounded-lg cursor-pointer text-sm truncate whitespace-nowrap ${
                    currentSessionId === session.id
                      ? "bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-400 font-medium"
                      : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
                  }`}
                  title={session.title}
                >
                  {session.title}
                  {/* TODO: 添加删除会话按钮 */}
                </div>
              ))}
              {/* 新话题占位符 */}
              {currentSessionId === "temp-new-chat" && (
                <div className="p-2 rounded-lg text-sm truncate whitespace-nowrap bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-400 font-medium">
                  新话题...
                </div>
              )}
            </>
          )}
        </div>
      </aside>
    </div>
  );
}