import { useChat } from "@ai-sdk/react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Banner, Button, Select, Spin, Tag } from "@douyinfe/semi-ui-19";
import { api, post } from "../api";
import type { Job } from "../types";
import { AssistantDialogue } from "./AssistantDialogue";
import { ResearchInput } from "./ResearchInput";
import {
  IconAIFilledLevel3,
  IconPlus,
  IconChevronRight,
} from "@douyinfe/semi-icons";
import { contextLabel, contextReferences } from "./workspace";
import { chatTransport } from "./transport";
import { runLabels } from "./types";
import type {
  ChatMessage,
  Conversation,
  ConversationDetail,
  ModelSettings,
  PageContext,
  RunSnapshot,
  Resource,
  UIAction,
} from "./types";

export function ChatPanel({
  open,
  context,
  onClose,
  onAction,
  onChanged,
  onSettings,
  width,
  onWidth,
  timezone,
  jobs,
  action,
}: {
  open: boolean;
  context: PageContext;
  onClose: () => void;
  onAction: (action: UIAction) => void;
  onChanged: (resources: Resource[]) => void;
  onSettings: () => void;
  width: number;
  onWidth: (width: number) => void;
  timezone?: string;
  jobs: Job[];
  action: UIAction | null;
}) {
  const [settings, setSettings] = useState<ModelSettings | null>(null);
  const [conversations, setConversations] = useState<Conversation[]>([]);
  const [conversationId, setConversationId] = useState("");
  const [runs, setRuns] = useState<RunSnapshot[]>([]);
  const [text, setText] = useState("");
  const [failure, setFailure] = useState("");
  const [loading, setLoading] = useState(false);
  const root = useRef<HTMLElement>(null);
  const input = useRef<HTMLDivElement>(null);
  const messagesViewport = useRef<HTMLDivElement>(null);
  const previousFocus = useRef<HTMLElement | null>(null);
  const seenChanges = useRef(new Set<string>());
  const current = useRef({ conversationId, context });
  current.current = { conversationId, context };
  const refreshRef = useRef<() => Promise<void>>(async () => {});
  const changedRef = useRef(onChanged);
  changedRef.current = onChanged;
  const observeChanges = useCallback((items: RunSnapshot[]) => {
    const changed = new Set<Resource>();
    for (const run of items)
      for (const call of run.tools ?? []) {
        if (
          call.status === "completed" &&
          call.presentation?.refresh.length &&
          !seenChanges.current.has(call.id)
        ) {
          seenChanges.current.add(call.id);
          call.presentation.refresh.forEach((resource) =>
            changed.add(resource),
          );
        }
      }
    if (changed.size) changedRef.current([...changed]);
  }, []);
  const transport = useMemo(() => chatTransport(() => current.current), []);
  const chat = useChat<ChatMessage>({
    id: conversationId || "unselected",
    transport,
    experimental_throttle: 50,
    onData: (part) => {
      if (part.type === "data-run") {
        const next = part.data;
        if (next.conversation_id !== current.current.conversationId) return;
        observeChanges([next]);
        setRuns((items) => {
          const old = items.find((run) => run.id === next.id);
          const merged = {
            ...old,
            ...next,
            tools: next.tools ?? old?.tools ?? [],
          };
          return [...items.filter((run) => run.id !== next.id), merged];
        });
      }
    },
    onFinish: async () => {
      await refreshRef.current();
    },
    onError: (error) => {
      setFailure(error.message);
      void refreshRef.current();
    },
  });
  const refreshConversation = useCallback(async () => {
    const id = current.current.conversationId;
    if (!id) return;
    try {
      const detail = await api<ConversationDetail>(`/ai/conversations/${id}`);
      if (current.current.conversationId !== id) return;
      chat.setMessages(detail.messages);
      setRuns(detail.runs);
      observeChanges(detail.runs);
      setConversations((items) =>
        items.map((item) =>
          item.id === id ? { id, title: detail.title } : item,
        ),
      );
    } catch (e) {
      setFailure((e as Error).message);
    }
  }, [chat.setMessages, observeChanges]);
  refreshRef.current = refreshConversation;

  useEffect(() => {
    let active = true;
    const loadSettings = () =>
      api<ModelSettings>("/ai/settings")
        .then((value) => {
          if (active) setSettings(value);
        })
        .catch((e) => {
          if (active) setFailure(e.message);
        });
    void loadSettings();
    api<Conversation[]>("/ai/conversations")
      .then((items) => {
        if (active) {
          setConversations(items);
          setConversationId(items[0]?.id ?? "");
        }
      })
      .catch((e) => {
        if (active) setFailure(e.message);
      });
    window.addEventListener("ai-settings-changed", loadSettings);
    return () => {
      active = false;
      window.removeEventListener("ai-settings-changed", loadSettings);
    };
  }, []);
  useEffect(() => {
    setRuns([]);
    setFailure("");
    setLoading(true);
    void refreshConversation().finally(() => setLoading(false));
  }, [conversationId, refreshConversation]);
  useEffect(() => {
    if (action?.type !== "open_conversation") return;
    let live = true;
    void api<ConversationDetail>(
      `/ai/conversations/${encodeURIComponent(action.conversation_id)}`,
    )
      .then(async (detail) => {
        if (!live) return;
        await chat.stop();
        if (!live) return;
        setConversations((items) =>
          items.some((item) => item.id === detail.id)
            ? items
            : [{ id: detail.id, title: detail.title }, ...items],
        );
        setConversationId(detail.id);
        setText("");
        setFailure("");
      })
      .catch((e) => {
        if (live) setFailure(e.message);
      });
    return () => {
      live = false;
    };
  }, [action]);
  const streaming = chat.status === "streaming" || chat.status === "submitted";
  const activeRun = runs.find((run) =>
    ["running", "waiting_approval"].includes(run.status),
  );
  useEffect(() => {
    if (!conversationId || streaming || activeRun?.status !== "running") return;
    const timer = window.setInterval(() => void refreshRef.current(), 3000);
    return () => clearInterval(timer);
  }, [conversationId, streaming, activeRun?.status]);
  useEffect(() => {
    if (!open) return;
    previousFocus.current = document.activeElement as HTMLElement;
    const editor = input.current?.querySelector<HTMLElement>(
      '[contenteditable="true"]',
    );
    if (editor) editor.focus({ preventScroll: true });
    else
      root.current
        ?.querySelector<HTMLButtonElement>('button[aria-label="收起研究助手"]')
        ?.focus();
    return () => {
      requestAnimationFrame(() => {
        if (
          previousFocus.current?.isConnected &&
          previousFocus.current !== document.body
        )
          previousFocus.current.focus();
        else
          document
            .querySelector<HTMLElement>('[aria-label="打开研究助手"]')
            ?.focus();
      });
    };
  }, [open]);
  useEffect(() => {
    if (!open || !messagesViewport.current) return;
    // Scroll only the message region; empty conversations always start at the welcome.
    messagesViewport.current.scrollTop = chat.messages.length
      ? messagesViewport.current.scrollHeight
      : 0;
  }, [chat.messages, open]);

  async function createConversation() {
    setLoading(true);
    try {
      await chat.stop();
      const value = await post<Conversation>("/ai/conversations");
      setConversations((items) => [value, ...items]);
      setConversationId(value.id);
      setText("");
    } catch (e) {
      setFailure((e as Error).message);
    } finally {
      setLoading(false);
    }
  }
  async function send() {
    if (
      !ready ||
      loading ||
      !text.trim() ||
      text.length > 20000 ||
      !conversationId ||
      activeRun ||
      streaming
    )
      return;
    const message = text;
    setText("");
    setFailure("");
    chat.clearError();
    try {
      await chat.sendMessage({ text: message });
    } catch (e) {
      setFailure((e as Error).message);
    }
  }
  async function decide(id: string, approved: boolean) {
    setFailure("");
    chat.clearError();
    try {
      await chat.sendMessage(undefined, {
        body: { decision: { id, approved } },
      });
    } catch (e) {
      setFailure((e as Error).message);
    }
  }
  async function stop() {
    if (!activeRun) return;
    try {
      await post(`/ai/runs/${activeRun.id}/cancel`);
      await chat.stop();
      await refreshConversation();
      // Completed tools are reconciled by refreshConversation; cancelling has no new business effect.
    } catch (e) {
      setFailure((e as Error).message);
    }
  }
  const cards = new Map(
    runs.flatMap((run) => run.tools ?? []).map((call) => [call.id, call]),
  );
  const lastRun = runs.at(-1);
  const ready = !!settings?.enabled && settings.ready;
  return (
    <aside
      ref={root}
      hidden={!open}
      className="ai-chat"
      id="research-assistant"
      aria-label="AI 研究助手"
      onKeyDownCapture={(event) => {
        // Semi consumes Escape in its editor even without a suggestion popup.
        if (
          event.key === "Escape" &&
          (event.target as HTMLElement).closest('[contenteditable="true"]')
        ) {
          event.preventDefault();
          event.stopPropagation();
          onClose();
        }
      }}
      onKeyDown={(event) => {
        if (event.key === "Escape") {
          event.stopPropagation();
          onClose();
        }
        if (event.key === "Tab" && window.innerWidth < 1440) {
          const elements = [
            ...(root.current?.querySelectorAll<HTMLElement>(
              'button:not(:disabled), [contenteditable="true"], input:not(:disabled), [tabindex="0"]',
            ) ?? []),
          ].filter((el) => el.offsetParent !== null);
          if (event.shiftKey && document.activeElement === elements[0]) {
            event.preventDefault();
            elements.at(-1)?.focus();
          } else if (
            !event.shiftKey &&
            document.activeElement === elements.at(-1)
          ) {
            event.preventDefault();
            elements[0]?.focus();
          }
        }
      }}
    >
      <div
        className="ai-resize"
        role="separator"
        aria-label="调整助手宽度"
        aria-orientation="vertical"
        aria-valuemin={360}
        aria-valuemax={640}
        aria-valuenow={width}
        tabIndex={0}
        onKeyDown={(event) => {
          if (event.key === "ArrowLeft") onWidth(Math.min(640, width + 20));
          if (event.key === "ArrowRight") onWidth(Math.max(360, width - 20));
        }}
        onPointerDown={(event) => {
          event.currentTarget.setPointerCapture(event.pointerId);
        }}
        onPointerMove={(event) => {
          if (event.currentTarget.hasPointerCapture(event.pointerId))
            onWidth(
              Math.max(360, Math.min(640, window.innerWidth - event.clientX)),
            );
        }}
      />
      <header className="ai-header">
        <h2>
          <IconAIFilledLevel3 size="large" aria-hidden="true" />
          AI 研究助手
        </h2>
        <Button
          type="tertiary"
          aria-label="收起研究助手"
          icon={<IconChevronRight aria-hidden="true" />}
          theme="borderless"
          onClick={onClose}
        >
          收起
        </Button>
      </header>
      <div className="ai-conversations">
        <Select
          aria-label="选择聊天会话"
          value={conversationId || undefined}
          placeholder="选择会话"
          optionList={conversations.map((item) => ({
            value: item.id,
            label: item.title,
          }))}
          onChange={async (value) => {
            await chat.stop();
            setConversationId(String(value));
          }}
          disabled={loading}
        />
        <Button
          colorful
          icon={<IconPlus aria-hidden="true" />}
          onClick={() => void createConversation()}
          disabled={loading}
        >
          新会话
        </Button>
      </div>
      {!ready && (
        <Banner
          type="info"
          description={
            <span>
              配置并测试模型服务后即可聊天。
              <button className="text-link" onClick={onSettings}>
                前往配置
              </button>
            </span>
          }
        />
      )}
      {failure && <Banner type="danger" description={failure} />}
      <div
        ref={messagesViewport}
        className="ai-messages"
        aria-live="polite"
        aria-busy={streaming}
      >
        {loading && <Spin />}
        {!chat.messages.length && (
          <div className="ai-empty">
            <h3>从当前研究出发</h3>
            <p>
              可以让我选择数据字段、构建候选并预览回测，也可以查询 Alpha
              和已有结果。
            </p>
            {!conversationId && (
              <Button
                colorful
                icon={<IconAIFilledLevel3 aria-hidden="true" />}
                onClick={() => void createConversation()}
                disabled={loading}
              >
                开始新会话
              </Button>
            )}
            <p className="ai-empty-note">
              修改和任务操作会先展示预览，确认后执行。
            </p>
          </div>
        )}
        <AssistantDialogue
          messages={chat.messages}
          streaming={streaming}
          cards={cards}
          awaitingApproval={activeRun?.status === "waiting_approval"}
          onDecision={decide}
          onAction={onAction}
          timezone={timezone}
          jobs={jobs}
        />
        {lastRun && (
          <div className="ai-run-state">
            <Tag color={lastRun.status === "failed" ? "red" : "grey"}>
              {runLabels[lastRun.status]}
            </Tag>
            {lastRun.error && <p className="error-text">{lastRun.error}</p>}
            {lastRun.usage && (
              <small>
                {lastRun.model} · {(lastRun.elapsed_ms / 1000).toFixed(1)} 秒 ·{" "}
                {lastRun.usage.token_usage_known &&
                (lastRun.usage.input_tokens ?? 0) +
                  (lastRun.usage.output_tokens ?? 0) >
                  0
                  ? `${lastRun.usage.input_tokens} 输入 / ${lastRun.usage.output_tokens} 输出 tokens`
                  : "用量未提供"}
              </small>
            )}
          </div>
        )}
      </div>
      <footer className="ai-composer" ref={input}>
        <div className="ai-context">{contextLabel(context)}</div>
        <ResearchInput
          value={text}
          onChange={setText}
          label="发送给研究助手"
          placeholder={
            conversationId ? "描述研究问题或要执行的操作…" : "请先新建会话"
          }
          references={contextReferences(context)}
          disabled={!ready || !conversationId || loading}
          canSubmit={!activeRun && !streaming}
          busy={!!activeRun || streaming}
          onSubmit={() => void send()}
          onStop={activeRun ? () => void stop() : undefined}
        />
      </footer>
    </aside>
  );
}