"use client";

import {
  AlertCircle,
  BarChart3,
  Bot,
  Loader2,
  MessageSquareQuote,
  Minus,
  RefreshCw,
  Search,
  Send,
  Square,
  Trash2,
  User,
} from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  Badge,
  Button,
  EmptyState,
  Modal,
  Select,
  cn,
  formatTime,
  statusTone,
  useToast,
} from "@/components/admin/ui";
import { adminApi, errMessage } from "@/lib/admin-api";
import { assistantApi, newSessionId, type AgentDraft } from "@/lib/assistant-api";
import type { Customer } from "@/lib/admin-api";

interface ChatMessage {
  id: string;
  role: "user" | "assistant";
  content: string;
  intent?: string;
  draftId?: string;
  error?: boolean;
}

const QUICK_TOOLS = [
  { key: "data-query", label: "查客户数据", icon: Search, hint: "自然语言查询授权范围内的客户数据" },
  { key: "fund-analysis", label: "基金分析", icon: BarChart3, hint: "问题里需带上基金代码，如 000001" },
  { key: "talk-script", label: "生成话术", icon: MessageSquareQuote, hint: "按场景生成合规话术草稿" },
  { key: "rebalance", label: "调仓再平衡", icon: RefreshCw, hint: "异步生成调仓建议草稿" },
] as const;

type ToolKey = (typeof QUICK_TOOLS)[number]["key"];

/**
 * 投顾助手：右下角常驻入口。
 * 悬浮球打开抽屉后可直接对话、调用 Agent 工具、管理草稿；
 * 「结束会话」会中止生成并重置 session，历史不再延续到下一次对话。
 */
export function AssistantLauncher() {
  const toast = useToast();
  const [open, setOpen] = useState(false);
  const [tab, setTab] = useState<"chat" | "drafts">("chat");

  const [sessionId, setSessionId] = useState(() => newSessionId());
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [customerId, setCustomerId] = useState<number | null>(null);
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [input, setInput] = useState("");
  const [streaming, setStreaming] = useState(false);
  const [historyLoading, setHistoryLoading] = useState(false);
  const [historyError, setHistoryError] = useState<string | null>(null);

  const [drafts, setDrafts] = useState<AgentDraft[]>([]);
  const [draftsLoading, setDraftsLoading] = useState(false);
  const [activeDraft, setActiveDraft] = useState<AgentDraft | null>(null);
  const [draftDraft, setDraftDraft] = useState("");
  const [saving, setSaving] = useState(false);

  const abortRef = useRef<AbortController | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);
  const [elapsed, setElapsed] = useState(0);

  /* 后端是整包输出，等待期间给个计时，避免看起来像卡死 */
  useEffect(() => {
    if (!streaming) {
      setElapsed(0);
      return;
    }
    const timer = setInterval(() => setElapsed((value) => value + 1), 1000);
    return () => clearInterval(timer);
  }, [streaming]);

  const sessionTag = useMemo(() => sessionId.slice(-6), [sessionId]);

  /* 客户列表只用于会话上下文选择，失败不阻断助手 */
  useEffect(() => {
    void (async () => {
      try {
        const page = await adminApi.customers({ page: 1, page_size: 100 });
        setCustomers(page.items ?? []);
      } catch {
        /* 静默 */
      }
    })();
  }, []);

  /* 会话 ID 变化时恢复该会话的历史；新会话为空属正常，不报错。 */
  useEffect(() => {
    let alive = true;
    void (async () => {
      setHistoryLoading(true);
      setHistoryError(null);
      try {
        const history = await assistantApi.sessionHistory(sessionId);
        if (!alive) return;
        setMessages(
          (history ?? [])
            .filter((item) => item?.content)
            .map((item, index) => ({
              id: `h-${index}`,
              role: item.role === "user" ? "user" : "assistant",
              content: String(item.content ?? ""),
            }))
        );
      } catch (error) {
        if (!alive) return;
        setHistoryError(errMessage(error, "会话历史加载失败"));
      } finally {
        if (alive) setHistoryLoading(false);
      }
    })();
    return () => {
      alive = false;
    };
  }, [sessionId]);

  const loadDrafts = useCallback(async () => {
    setDraftsLoading(true);
    try {
      const page = await assistantApi.drafts({ page: 1, page_size: 20 });
      setDrafts(page.items ?? []);
    } catch {
      /* 草稿列表加载失败不打断对话 */
    } finally {
      setDraftsLoading(false);
    }
  }, []);

  useEffect(() => {
    if (open) void loadDrafts();
  }, [open, loadDrafts]);

  useEffect(() => {
    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
  }, [messages, tab]);

  useEffect(() => () => abortRef.current?.abort(), []);

  const pushPair = useCallback((query: string, answer: string, intent?: string) => {
    setMessages((prev) => [
      ...prev,
      { id: `u-${Date.now()}`, role: "user", content: query },
      { id: `a-${Date.now()}`, role: "assistant", content: answer, intent },
    ]);
  }, []);

  const send = useCallback(
    async (raw: string) => {
      const query = raw.trim();
      if (!query || streaming) return;

      const replyId = `a-${Date.now()}`;
      setMessages((prev) => [
        ...prev,
        { id: `u-${Date.now()}`, role: "user", content: query },
        { id: replyId, role: "assistant", content: "" },
      ]);
      setInput("");
      setStreaming(true);

      const controller = new AbortController();
      abortRef.current = controller;

      try {
        const result = await assistantApi.chatOnce(
          {
            query,
            session_id: sessionId,
            scope: customerId ? "customer" : "advisor",
            customer_id: customerId,
          },
          controller.signal
        );

        const content = result.error || result.text || "助手本次未返回内容。";
        setMessages((prev) =>
          prev.map((item) =>
            item.id === replyId
              ? {
                  ...item,
                  content,
                  intent: result.intent,
                  draftId: result.draftId,
                  error: !!result.error,
                }
              : item
          )
        );
        if (result.draftId) void loadDrafts();
      } catch (error) {
        const aborted = (error as Error)?.name === "AbortError";
        if (aborted) {
          /* 取消提问：撤掉占位的助手回复，用户消息保留 */
          setMessages((prev) => prev.filter((item) => item.id !== replyId));
        } else {
          setMessages((prev) =>
            prev.map((item) =>
              item.id === replyId
                ? { ...item, content: errMessage(error, "助手请求失败，请稍后重试"), error: true }
                : item
            )
          );
        }
      } finally {
        setStreaming(false);
        abortRef.current = null;
      }
    },
    [customerId, loadDrafts, sessionId, streaming]
  );

  const runTool = useCallback(
    async (tool: ToolKey) => {
      const query = input.trim();
      if (!query) {
        toast("请先在输入框描述你的问题", "error");
        return;
      }
      if (tool === "rebalance" && !customerId) {
        toast("调仓需要指定客户，请先在上方选择客户", "error");
        return;
      }

      setStreaming(true);
      try {
        if (tool === "data-query") {
          const result = await assistantApi.dataQuery({ query, session_id: sessionId });
          pushPair(query, result.answer ?? result.summary ?? "查询完成，无文本摘要。", "data_query");
        } else if (tool === "fund-analysis") {
          const result = await assistantApi.fundAnalysis(query);
          pushPair(
            query,
            result.analysis_text ??
              (Array.isArray(result.items) ? JSON.stringify(result.items, null, 2) : "未返回结果"),
            "fund_analysis"
          );
        } else if (tool === "talk-script") {
          const result = await assistantApi.generateTalkScript(query);
          pushPair(query, result.script ?? result.content ?? "未生成话术。", "dialogue-script");
        } else {
          const result = await assistantApi.runRebalance(query);
          toast(
            result.accepted ? "调仓任务已受理，草稿稍后生成" : "调仓任务未受理",
            result.accepted ? "success" : "error"
          );
          void loadDrafts();
        }
        setInput("");
      } catch (error) {
        toast(errMessage(error, "工具调用失败"), "error");
      } finally {
        setStreaming(false);
      }
    },
    [customerId, input, loadDrafts, pushPair, sessionId, toast]
  );

  /** 结束会话：中止生成、清空上下文并启用新的 session_id。 */
  const endSession = useCallback(() => {
    abortRef.current?.abort();
    setMessages([]);
    setInput("");
    setStreaming(false);
    setSessionId(newSessionId());
    toast("会话已关闭，已开启新的对话上下文", "success");
  }, [toast]);

  const openDraft = useCallback(
    async (draftId: string) => {
      try {
        const draft = await assistantApi.draft(draftId);
        setActiveDraft(draft);
        setDraftDraft(draft.content ?? "");
      } catch (error) {
        toast(errMessage(error, "草稿详情加载失败"), "error");
      }
    },
    [toast]
  );

  const saveDraft = useCallback(async () => {
    const draftId = activeDraft?.draft_id ?? activeDraft?.id;
    if (!draftId) return;
    setSaving(true);
    try {
      await assistantApi.saveDraft(draftId, { content: draftDraft });
      toast("草稿已保存", "success");
      setActiveDraft(null);
      await loadDrafts();
    } catch (error) {
      toast(errMessage(error, "保存失败"), "error");
    } finally {
      setSaving(false);
    }
  }, [activeDraft, draftDraft, loadDrafts, toast]);

  const discardDraft = useCallback(
    async (draftId: string) => {
      try {
        await assistantApi.operateDraft(draftId, "discard");
        toast("草稿已废弃", "success");
        await loadDrafts();
      } catch (error) {
        toast(errMessage(error, "废弃失败"), "error");
      }
    },
    [loadDrafts, toast]
  );

  return (
    <>
      {!open && (
        <button
          onClick={() => setOpen(true)}
          aria-label="打开投顾助手"
          className="fixed bottom-6 right-6 z-40 flex h-14 w-14 items-center justify-center rounded-full bg-indigo-600 text-white shadow-lg shadow-indigo-600/30 transition-transform hover:scale-105 hover:bg-indigo-700"
        >
          <Bot className="h-6 w-6" />
          {drafts.length > 0 && (
            <span className="absolute -right-0.5 -top-0.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-medium text-white">
              {drafts.length > 99 ? "99+" : drafts.length}
            </span>
          )}
        </button>
      )}

      {open && (
        <>
          <div
            className="fixed inset-0 z-40 bg-slate-900/10"
            onClick={() => setOpen(false)}
            aria-hidden
          />
          <aside className="fixed inset-y-0 right-0 z-50 flex w-full max-w-[560px] flex-col bg-white shadow-2xl">
            <header className="flex items-center gap-3 border-b border-slate-200 px-5 py-4">
              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600">
                <Bot className="h-5 w-5" />
              </div>
              <div className="min-w-0 flex-1">
                <p className="text-sm font-semibold text-slate-900">投顾助手</p>
                <p className="flex items-center gap-1.5 text-xs text-slate-400">
                  会话 #{sessionTag}
                  {streaming && (
                    <span className="flex items-center gap-1 text-indigo-500">
                      <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-indigo-500" />
                      处理中
                    </span>
                  )}
                </p>
              </div>
              <Button size="sm" variant="ghost" onClick={endSession} title="结束当前会话并开启新会话">
                <RefreshCw className="h-3.5 w-3.5" />
                结束会话
              </Button>
              <button
                onClick={() => setOpen(false)}
                aria-label="收起助手"
                className="rounded-lg p-2 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
              >
                <Minus className="h-4 w-4" />
              </button>
            </header>

            <div className="flex items-center gap-3 border-b border-slate-100 px-5 py-3">
              <Select
                value={customerId ? String(customerId) : ""}
                onChange={(event) =>
                  setCustomerId(event.target.value ? Number(event.target.value) : null)
                }
                className="flex-1"
              >
                <option value="">未指定客户（通用问答）</option>
                {customers.map((customer) => (
                  <option key={customer.customer_id} value={customer.customer_id}>
                    #{customer.customer_id} {customer.real_name ?? "未填写姓名"}
                  </option>
                ))}
              </Select>

              <div className="flex rounded-lg bg-slate-100 p-0.5">
                {(["chat", "drafts"] as const).map((key) => (
                  <button
                    key={key}
                    onClick={() => setTab(key)}
                    className={cn(
                      "rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
                      tab === key ? "bg-white text-slate-900 shadow-sm" : "text-slate-500"
                    )}
                  >
                    {key === "chat" ? "对话" : `草稿${drafts.length ? ` (${drafts.length})` : ""}`}
                  </button>
                ))}
              </div>
            </div>

            {tab === "chat" ? (
              <>
                <div ref={scrollRef} className="flex-1 space-y-4 overflow-y-auto px-5 py-4">
                  {historyLoading && messages.length === 0 && (
                    <p className="py-8 text-center text-sm text-slate-400">正在恢复会话...</p>
                  )}
                  {historyError && (
                    <p className="rounded-lg bg-red-50 px-3 py-2 text-xs text-red-600">{historyError}</p>
                  )}

                  {!historyLoading && messages.length === 0 && (
                    <div className="flex h-full flex-col items-center justify-center px-6 text-center">
                      <Bot className="mb-3 h-9 w-9 text-slate-300" />
                      <p className="text-sm text-slate-500">
                        我可以帮你查询客户数据、分析基金、生成沟通话术和调仓建议。
                      </p>
                      <p className="mt-2 text-xs text-slate-400">
                        指定客户后，助手只能读取你名下已授权的客户数据。
                      </p>
                    </div>
                  )}

                  {messages.map((message) => (
                    <div
                      key={message.id}
                      className={cn("flex gap-2.5", message.role === "user" && "flex-row-reverse")}
                    >
                      <div
                        className={cn(
                          "flex h-7 w-7 shrink-0 items-center justify-center rounded-full",
                          message.role === "user"
                            ? "bg-indigo-100 text-indigo-600"
                            : "bg-slate-100 text-slate-500"
                        )}
                      >
                        {message.role === "user" ? (
                          <User className="h-3.5 w-3.5" />
                        ) : (
                          <Bot className="h-3.5 w-3.5" />
                        )}
                      </div>
                      <div
                        className={cn(
                          "max-w-[80%] rounded-xl px-3.5 py-2.5 text-sm leading-6",
                          message.role === "user"
                            ? "bg-indigo-600 text-white"
                            : message.error
                              ? "bg-red-50 text-red-600"
                              : "bg-slate-100 text-slate-700"
                        )}
                      >
                        {message.content ? (
                          <p className="whitespace-pre-wrap break-words">{message.content}</p>
                        ) : (
                          <p className="flex items-center gap-1.5 text-slate-400">
                            <Loader2 className="h-3.5 w-3.5 animate-spin" />
                            助手正在思考{elapsed > 0 ? ` ${elapsed}s` : ""}
                          </p>
                        )}
                        {message.intent && (
                          <p className="mt-1.5 text-xs opacity-70">意图：{message.intent}</p>
                        )}
                      </div>
                    </div>
                  ))}
                </div>

                <div className="space-y-2.5 border-t border-slate-100 px-5 py-3.5">
                  <div className="flex flex-wrap gap-1.5">
                    {QUICK_TOOLS.map((tool) => (
                      <button
                        key={tool.key}
                        onClick={() => void runTool(tool.key)}
                        disabled={streaming}
                        title={tool.hint}
                        className="flex items-center gap-1 rounded-full border border-slate-200 px-2.5 py-1 text-xs text-slate-500 transition-colors hover:border-indigo-300 hover:text-indigo-600 disabled:opacity-50"
                      >
                        <tool.icon className="h-3 w-3" />
                        {tool.label}
                      </button>
                    ))}
                  </div>

                  <div className="flex items-end gap-2">
                    <textarea
                      value={input}
                      onChange={(event) => setInput(event.target.value)}
                      onKeyDown={(event) => {
                        if (event.key === "Enter" && !event.shiftKey) {
                          event.preventDefault();
                          void send(input);
                        }
                      }}
                      rows={2}
                      placeholder="描述你的问题，回车发送（Shift+Enter 换行）"
                      className="max-h-32 flex-1 resize-none rounded-lg border border-slate-200 px-3 py-2 text-sm leading-6 text-slate-700 focus:border-indigo-400 focus:outline-none"
                    />
                    {streaming ? (
                      <Button
                        variant="danger"
                        onClick={() => abortRef.current?.abort()}
                        aria-label="取消本次提问"
                        title="取消本次提问"
                      >
                        <Square className="h-4 w-4" />
                      </Button>
                    ) : (
                      <Button variant="primary" disabled={!input.trim()} onClick={() => void send(input)}>
                        <Send className="h-4 w-4" />
                      </Button>
                    )}
                  </div>
                </div>
              </>
            ) : (
              <div className="flex-1 overflow-y-auto">
                <div className="flex items-center justify-between px-5 pt-4">
                  <p className="text-xs text-slate-400">助手生成的建议草稿</p>
                  <Button size="sm" variant="ghost" onClick={() => void loadDrafts()} disabled={draftsLoading}>
                    <RefreshCw className={cn("h-3.5 w-3.5", draftsLoading && "animate-spin")} />
                    刷新
                  </Button>
                </div>

                {drafts.length === 0 ? (
                  <EmptyState text="暂无 Agent 草稿" />
                ) : (
                  <ul className="mt-2 divide-y divide-slate-100">
                    {drafts.map((draft) => {
                      const id = draft.draft_id ?? draft.id ?? "";
                      return (
                        <li key={id} className="px-5 py-3">
                          <div className="flex items-start justify-between gap-3">
                            <div className="min-w-0">
                              <p className="truncate text-sm font-medium text-slate-800">
                                {draft.title || "未命名草稿"}
                              </p>
                              <p className="mt-1 line-clamp-2 text-xs leading-5 text-slate-500">
                                {draft.content || "（无正文）"}
                              </p>
                              <div className="mt-2 flex flex-wrap items-center gap-2">
                                {draft.intent && <Badge tone="info">{draft.intent}</Badge>}
                                {draft.status && (
                                  <Badge tone={statusTone(draft.status)}>{draft.status}</Badge>
                                )}
                                <span className="text-xs text-slate-400">
                                  {formatTime(draft.update_time ?? draft.create_time)}
                                </span>
                              </div>
                            </div>
                            <div className="flex shrink-0 gap-1">
                              <Button size="sm" variant="ghost" onClick={() => void openDraft(id)}>
                                编辑
                              </Button>
                              <Button
                                size="sm"
                                variant="ghost"
                                onClick={() => void discardDraft(id)}
                                aria-label="废弃草稿"
                              >
                                <Trash2 className="h-3.5 w-3.5 text-red-500" />
                              </Button>
                            </div>
                          </div>
                        </li>
                      );
                    })}
                  </ul>
                )}
              </div>
            )}
          </aside>
        </>
      )}

      <Modal
        open={!!activeDraft}
        title="编辑草稿"
        onClose={() => setActiveDraft(null)}
        footer={
          <>
            <Button onClick={() => setActiveDraft(null)}>取消</Button>
            <Button variant="primary" loading={saving} onClick={() => void saveDraft()}>
              保存
            </Button>
          </>
        }
      >
        <p className="mb-3 text-xs text-slate-500">
          草稿 ID：{activeDraft?.draft_id ?? activeDraft?.id ?? "--"}
        </p>
        <textarea
          value={draftDraft}
          onChange={(event) => setDraftDraft(event.target.value)}
          rows={14}
          className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm leading-6 text-slate-700 focus:border-indigo-400 focus:outline-none"
        />
        <p className="mt-3 flex items-start gap-2 text-xs text-amber-600">
          <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
          保存后会按客户风险等级做合规校验，未通过的修改会被后端拒绝。
        </p>
      </Modal>
    </>
  );
}