"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { ChatMessages } from "@/components/chat/chat-messages";
import { ChatInput } from "@/components/chat/chat-input";
import { Sidebar } from "@/components/sidebar/sidebar";
import { TopNav } from "@/components/layout/top-nav";
import { ImageDetailPanel } from "@/components/detail/image-detail-panel";
import { useApp } from "@/lib/app-context";
import { sendChat, getImageUrl, uploadRefImage } from "@/lib/api";
import { generateId } from "@/lib/store";
import type { ChatMessage, ImageAsset, ApiMessage, AnnotationData } from "@/lib/types";

export default function Home() {
  const {
    activeSession,
    activeSessionId,
    appendMessage,
    addAsset,
    updateSessionThumbnail,
    detailImage,
    sidebarCollapsed,
    setSidebarCollapsed,
  } = useApp();

  const messages = activeSession?.messages ?? [];

  const [isLoading, setIsLoading] = useState(false);
  const [streamingText, setStreamingText] = useState("");
  const [streamingImages, setStreamingImages] = useState<ImageAsset[]>([]);
  const [statusText, setStatusText] = useState("");
  const [pendingAnnotation, setPendingAnnotation] = useState<AnnotationData | null>(null);
  const scrollRef = useRef<HTMLDivElement>(null);
  const scrollPositions = useRef<Map<string, number>>(new Map());
  const prevSessionId = useRef<string | null>(null);
  const isSwitching = useRef(false);
  const [showScrollBtn, setShowScrollBtn] = useState(false);

  const scrollToBottom = useCallback((instant?: boolean) => {
    if (isSwitching.current && !instant) return;
    const el = scrollRef.current;
    if (!el) return;
    if (instant) {
      el.scrollTop = el.scrollHeight;
    } else {
      setTimeout(() => {
        scrollRef.current?.scrollTo({
          top: scrollRef.current.scrollHeight,
          behavior: "smooth",
        });
      }, 50);
    }
  }, []);

  // 实时记录当前会话的滚动位置 + 判断是否显示"回到底部"按钮
  useEffect(() => {
    const el = scrollRef.current;
    if (!el || !activeSessionId) return;
    const handler = () => {
      if (!isSwitching.current) {
        scrollPositions.current.set(activeSessionId, el.scrollTop);
      }
      const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
      setShowScrollBtn(distFromBottom > 200);
    };
    el.addEventListener("scroll", handler, { passive: true });
    return () => el.removeEventListener("scroll", handler);
  }, [activeSessionId]);

  // 会话切换：标记 switching，等 DOM 更新后恢复位置
  useEffect(() => {
    if (!activeSessionId) return;
    if (prevSessionId.current && prevSessionId.current !== activeSessionId) {
      isSwitching.current = true;
    }
    prevSessionId.current = activeSessionId;
  }, [activeSessionId]);

  useEffect(() => {
    if (!activeSessionId || !isSwitching.current) return;
    requestAnimationFrame(() => {
      const el = scrollRef.current;
      if (!el) return;
      const saved = scrollPositions.current.get(activeSessionId);
      if (saved !== undefined) {
        el.scrollTop = saved;
      } else {
        el.scrollTop = el.scrollHeight;
      }
      const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
      setShowScrollBtn(distFromBottom > 200);
      isSwitching.current = false;
    });
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [activeSessionId, messages.length]);

  const handleSend = useCallback(
    async (text: string, refImageServerUrl: string | null, imageModel: string | null = null) => {
      if (!activeSessionId || !activeSession) return;

      let finalText = text;
      let finalRefServerUrl = refImageServerUrl;

      if (pendingAnnotation) {
        const annotationDescs = pendingAnnotation.annotations
          .filter((a) => a.text)
          .map((a) => {
            if (a.type === "rect") {
              return `[区域 (${Math.round(a.x * 100)}%, ${Math.round(a.y * 100)}%) 大小 ${Math.round((a.w ?? 0) * 100)}%×${Math.round((a.h ?? 0) * 100)}%]: ${a.text}`;
            }
            return `[标注]: ${a.text}`;
          })
          .join("\n");

        if (annotationDescs) {
          finalText = `${text}\n\n--- 图片标注 ---\n${annotationDescs}`;
        }

        // 标注截图作为参考图：需要先上传再获取 URL
        if (pendingAnnotation.snapshot && !refImageServerUrl) {
          try {
            const res = await fetch(pendingAnnotation.snapshot);
            const blob = await res.blob();
            const file = new File([blob], "annotation.png", { type: "image/png" });
            const uploadResult = await uploadRefImage(file);
            finalRefServerUrl = uploadResult.url;
          } catch {
            // 忽略转换/上传失败
          }
        }

        setPendingAnnotation(null);
      }

      // 用户消息中的参考图预览：优先使用服务端路径（通过 getImageUrl 转为完整 URL）
      let previewUrl: string | undefined;
      if (finalRefServerUrl) {
        previewUrl = getImageUrl(finalRefServerUrl);
      }

      const userMessage: ChatMessage = {
        id: generateId("msg-"),
        role: "user",
        content: finalText,
        refImageUrl: previewUrl,
      };
      appendMessage(activeSessionId, userMessage);
      setIsLoading(true);
      setStreamingText("");
      setStreamingImages([]);
      setStatusText("");
      scrollToBottom();

      const apiMessages: ApiMessage[] = [
        ...activeSession.messages.map((m) => ({ role: m.role, content: m.content })),
        { role: userMessage.role, content: userMessage.content },
      ];

      let assistantText = "";
      let collectedImages: ImageAsset[] = [];
      let usedModelName = "";

      try {
        for await (const event of sendChat(apiMessages, finalRefServerUrl, imageModel, activeSessionId)) {
          switch (event.type) {
            case "text_delta":
              assistantText += event.data.text as string;
              setStreamingText(assistantText);
              scrollToBottom();
              break;

            case "tool_start":
              setStatusText(event.data.message as string);
              scrollToBottom();
              break;

            case "image_result": {
              const rawUrls = (event.data.images as string[]) || [];
              const newUrls = rawUrls.filter((u) => u && !u.startsWith("["));
              const prompt = (event.data.prompt_used as string) || "";
              const modelName = (event.data.model_name as string) || "";

              if (newUrls.length === 0) break;

              const newAssets: ImageAsset[] = newUrls.map((url) => ({
                id: generateId("img-"),
                url,
                prompt,
                sessionId: activeSessionId,
                tags: activeSession.tags ? [...activeSession.tags] : [],
                favorited: false,
                createdAt: Date.now(),
              }));
              newAssets.forEach((a) => addAsset(a));

              if (newAssets.length > 0) {
                updateSessionThumbnail(activeSessionId, newAssets[0].url);
              }

              collectedImages = [...collectedImages, ...newAssets];
              setStreamingImages([...collectedImages]);
              if (modelName) {
                usedModelName = modelName;
                setStatusText(`由 ${modelName} 生成`);
              } else {
                setStatusText("");
              }
              scrollToBottom();
              break;
            }

            case "tool_error": {
              const errors = (event.data.errors as string[]) || [];
              const modelName = (event.data.model_name as string) || "";
              const errorDetail = errors.join("\n");
              const modelHint = modelName ? ` (${modelName})` : "";
              assistantText += `\n\n⚠️ 图片生成失败${modelHint}:\n${errorDetail}`;
              setStreamingText(assistantText);
              setStatusText("");
              scrollToBottom();
              break;
            }

            case "memory_warning":
              console.warn("[记忆系统]", event.data.message);
              setStatusText(`⚠ ${event.data.message}`);
              break;

            case "error":
              assistantText += `\n\n[错误: ${event.data.message}]`;
              setStreamingText(assistantText);
              break;

            case "done":
              break;
          }
        }
      } catch (e) {
        assistantText += `\n\n[请求失败: ${e instanceof Error ? e.message : "未知错误"}]`;
      }

      const assistantMessage: ChatMessage = {
        id: generateId("msg-"),
        role: "assistant",
        content: assistantText || "（生成完成）",
        images: collectedImages.length > 0 ? collectedImages : undefined,
        modelName: usedModelName || undefined,
      };
      appendMessage(activeSessionId, assistantMessage);
      setIsLoading(false);
      setStreamingText("");
      setStreamingImages([]);
      setStatusText("");
      scrollToBottom();
    },
    [activeSession, activeSessionId, appendMessage, addAsset, updateSessionThumbnail, pendingAnnotation, scrollToBottom]
  );

  const handleAnnotationComplete = useCallback((data: AnnotationData) => {
    setPendingAnnotation(data);
  }, []);

  return (
    <div className="h-screen flex flex-col">
      <TopNav />

      <div className="flex-1 flex overflow-hidden">
        <Sidebar />

        <main className="flex-1 flex flex-col min-w-0 relative">
          {/* 桌面端侧边栏展开按钮（移动端用顶栏汉堡菜单替代） */}
          {sidebarCollapsed && (
            <button
              onClick={() => setSidebarCollapsed(false)}
              className="absolute left-1 top-2 z-10 p-1.5 rounded-md
                         bg-[var(--bg-secondary)] border border-[var(--border)]
                         text-[var(--text-secondary)] hover:text-[var(--text-primary)]
                         transition-colors cursor-pointer
                         hidden md:flex"
              title="展开侧边栏"
            >
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M13 17l5-5-5-5M6 17l5-5-5-5" />
              </svg>
            </button>
          )}

          {/* 标注提示条 */}
          {pendingAnnotation && (
            <div className="flex-shrink-0 px-4 py-2 bg-[var(--accent)]/10 border-b border-[var(--accent)]/30
                            flex items-center gap-3">
              <img
                src={pendingAnnotation.snapshot}
                alt="标注预览"
                className="w-10 h-10 rounded object-cover border border-[var(--accent)]"
              />
              <span className="text-xs text-[var(--accent)]">
                标注已就绪（{pendingAnnotation.annotations.length} 处）— 输入修改意见后发送
              </span>
              <button
                onClick={() => setPendingAnnotation(null)}
                className="ml-auto text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)]
                           cursor-pointer"
              >
                取消
              </button>
            </div>
          )}

          <div ref={scrollRef} className="flex-1 overflow-y-auto">
            {messages.length === 0 && !isLoading ? (
              <div className="h-full flex items-center justify-center">
                <div className="text-center space-y-3">
                  <div className="text-4xl">🎨</div>
                  <h2 className="text-xl font-medium text-[var(--text-primary)]">
                    欢迎使用 EPEEKit
                  </h2>
                  <p className="text-sm text-[var(--text-secondary)] max-w-md">
                    描述你想要的美术资源，我来帮你生成。
                    <br />
                    你可以上传参考图来引导风格方向。
                  </p>
                  <div className="flex flex-wrap justify-center gap-2 mt-4">
                    {[
                      "画一个赛博朋克风格的退出按钮",
                      "设计一个卡通风格的金币图标",
                      "画一个奇幻风格的游戏角色立绘",
                    ].map((hint) => (
                      <button
                        key={hint}
                        onClick={() => handleSend(hint, null, null)}
                        className="text-xs px-3 py-1.5 rounded-full
                                   border border-[var(--border)] text-[var(--text-secondary)]
                                   hover:border-[var(--accent)] hover:text-[var(--accent)]
                                   transition-colors cursor-pointer"
                      >
                        {hint}
                      </button>
                    ))}
                  </div>
                </div>
              </div>
            ) : (
              <ChatMessages
                messages={messages}
                isLoading={isLoading}
                streamingText={streamingText}
                streamingImages={streamingImages}
                statusText={statusText}
              />
            )}
          </div>

          {showScrollBtn && (
            <button
              onClick={() => scrollToBottom()}
              className="absolute bottom-16 right-4 z-10
                         w-8 h-8 rounded-full flex items-center justify-center
                         bg-[var(--bg-tertiary)] border border-[var(--border)]
                         text-[var(--text-secondary)] hover:text-[var(--text-primary)]
                         hover:border-[var(--accent)] shadow-lg
                         transition-all duration-200 cursor-pointer
                         animate-[fadeIn_150ms_ease-out]"
              title="回到底部"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="6 9 12 15 18 9" />
              </svg>
            </button>
          )}

          <ChatInput onSend={handleSend} disabled={isLoading} />
        </main>

        {detailImage && (
          <ImageDetailPanel onAnnotationComplete={handleAnnotationComplete} />
        )}
      </div>
    </div>
  );
}