import { Check, Loader2, Pencil, RefreshCw, Trash2, X } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useState } from "react";
import { Button } from "@/shared/ui/button";
import { Input } from "@/shared/ui/input";
import { cn } from "@/shared/ui/cn";
import { StatusBadge, StatusDot } from "@/shared/ui/status";
import type { AgentChatSessionSummary } from "../api/client";
import {
  agentLayoutTransition,
  agentPanelItemVariants,
  agentPanelListVariants
} from "./agent-motion";

type AgentHistoryPanelProps = {
  activeSessionId?: string | null;
  loading: boolean;
  loadingSessionId: string | null;
  sessions: AgentChatSessionSummary[];
  onRefresh?: () => Promise<void> | void;
  onSelectSession: (sessionId: string) => void;
  onRenameSession?: (sessionId: string, title: string) => Promise<void> | void;
  onDeleteSession?: (sessionId: string) => Promise<void> | void;
};

export function AgentHistoryPanel({
  activeSessionId,
  loading,
  loadingSessionId,
  sessions,
  onRefresh,
  onSelectSession,
  onRenameSession,
  onDeleteSession
}: AgentHistoryPanelProps) {
  const [editingSessionId, setEditingSessionId] = useState<string | null>(null);
  const [draftTitle, setDraftTitle] = useState("");
  const [savingSessionId, setSavingSessionId] = useState<string | null>(null);
  const [deletingSessionId, setDeletingSessionId] = useState<string | null>(null);
  const [confirmingDeleteSessionId, setConfirmingDeleteSessionId] = useState<string | null>(null);

  const beginRename = (session: AgentChatSessionSummary) => {
    setEditingSessionId(session.id);
    setDraftTitle(session.title);
  };

  const cancelRename = () => {
    setEditingSessionId(null);
    setDraftTitle("");
  };

  const saveRename = (session: AgentChatSessionSummary) => {
    const normalizedTitle = draftTitle.trim();
    if (!normalizedTitle || normalizedTitle === session.title) {
      cancelRename();
      return;
    }

    setSavingSessionId(session.id);
    void Promise.resolve(onRenameSession?.(session.id, normalizedTitle))
      .then(cancelRename)
      .finally(() => setSavingSessionId(null));
  };

  const confirmDelete = (sessionId: string) => {
    setDeletingSessionId(sessionId);
    void Promise.resolve(onDeleteSession?.(sessionId))
      .then(() => setConfirmingDeleteSessionId(null))
      .finally(() => setDeletingSessionId(null));
  };

  return (
    <div className="px-3 pb-3">
      <div className="agent-panel-control rounded-2xl p-2.5 shadow-xs">
        <div className="mb-2 flex items-center justify-between gap-2">
          <div className="min-w-0">
            <p className="text-sm font-semibold text-slate-950">历史记录</p>
            <p className="mt-0.5 text-xs text-slate-500">
              {sessions.length ? `${sessions.length} 个会话` : "暂无历史会话"}
            </p>
          </div>
          <Button
            type="button"
            aria-label="刷新 Agent 历史记录"
            title="刷新 Agent 历史记录"
            size="icon"
            variant="ghost"
            disabled={loading && sessions.length === 0}
            loading={loading && sessions.length > 0}
            loadingLabel="正在刷新 Agent 历史记录"
            onClick={() => void Promise.resolve(onRefresh?.())}
          >
            <RefreshCw size={15} aria-hidden="true" />
          </Button>
        </div>

        <motion.div
          className="max-h-56 space-y-1 overflow-y-auto pr-1"
          variants={agentPanelListVariants}
          animate="animate"
        >
          <AnimatePresence initial={false} mode="popLayout">
            {loading && sessions.length === 0 ? (
              <motion.div
                key="history-loading"
                className="agent-history-state flex items-center gap-2 rounded-xl px-3 py-3 text-xs font-semibold text-slate-500"
                initial="initial"
                animate="animate"
                exit="exit"
                variants={agentPanelItemVariants}
              >
                <Loader2 size={14} className="animate-spin" aria-hidden="true" />
                正在加载
              </motion.div>
            ) : sessions.length > 0 ? (
              sessions.map((session) => {
                const active = session.id === activeSessionId;
                const itemLoading = loadingSessionId === session.id;
                const editing = editingSessionId === session.id;
                const saving = savingSessionId === session.id;
                const deleting = deletingSessionId === session.id;
                const confirmingDelete = confirmingDeleteSessionId === session.id;

                return (
                  <motion.div
                    key={session.id}
                    layout
                    className={cn(
                      "agent-history-item grid w-full grid-cols-[1fr_auto] gap-2 rounded-xl px-3 py-2 text-left transition-colors",
                      active && !editing
                        ? "agent-history-item-active border border-blue-200"
                        : "border border-transparent"
                    )}
                    initial="initial"
                    animate="animate"
                    exit="exit"
                    variants={agentPanelItemVariants}
                    transition={agentLayoutTransition}
                  >
                    <AnimatePresence initial={false} mode="popLayout">
                      {confirmingDelete ? (
                        <motion.div
                          key="confirm-delete"
                          className="min-w-0"
                          initial="initial"
                          animate="animate"
                          exit="exit"
                          variants={agentPanelItemVariants}
                        >
                          <span
                            className="status-tone-danger block truncate text-xs font-semibold text-[var(--status-foreground)]"
                            title={session.title}
                          >
                            删除“{session.title}”？
                          </span>
                          <span className="mt-0.5 block truncate text-xs text-slate-500">
                            删除后无法从历史记录中恢复
                          </span>
                        </motion.div>
                      ) : editing ? (
                        <motion.form
                          key="rename"
                          className="min-w-0"
                          initial="initial"
                          animate="animate"
                          exit="exit"
                          variants={agentPanelItemVariants}
                          onSubmit={(event) => {
                            event.preventDefault();
                            saveRename(session);
                          }}
                        >
                          <Input
                            autoFocus
                            className="agent-history-rename-input h-8 rounded-lg bg-white text-xs"
                            value={draftTitle}
                            disabled={saving}
                            onChange={(event) => setDraftTitle(event.currentTarget.value)}
                            onKeyDown={(event) => {
                              if (event.key === "Escape") {
                                cancelRename();
                              }
                            }}
                          />
                        </motion.form>
                      ) : (
                        <motion.button
                          key="session-summary"
                          type="button"
                          className="agent-history-session-trigger min-w-0 text-left"
                          disabled={itemLoading || deleting}
                          initial="initial"
                          animate="animate"
                          exit="exit"
                          variants={agentPanelItemVariants}
                          onClick={() => onSelectSession(session.id)}
                        >
                          <span
                            className="block truncate text-xs font-semibold text-slate-900"
                            title={session.title}
                          >
                            {session.title}
                          </span>
                          <span className="mt-0.5 block truncate text-xs text-slate-500">
                            {formatSessionUpdatedAt(session.updatedAt)}
                          </span>
                        </motion.button>
                      )}
                    </AnimatePresence>
                    <span className="flex items-center gap-2">
                      {session.runStatus === "running" || session.isStreaming ? (
                        <StatusDot tone="info" activity="live" />
                      ) : null}
                      {itemLoading || saving || deleting ? (
                        <Loader2
                          size={13}
                          className="animate-spin text-blue-600"
                          aria-hidden="true"
                        />
                      ) : null}
                      {active && !editing && !confirmingDelete ? (
                        <StatusBadge tone="info">当前</StatusBadge>
                      ) : null}
                      {confirmingDelete ? (
                        <>
                          <Button
                            type="button"
                            variant="destructive"
                            size="sm"
                            loading={deleting}
                            loadingLabel="正在删除对话"
                            onClick={() => confirmDelete(session.id)}
                          >
                            确认
                          </Button>
                          <Button
                            type="button"
                            aria-label="取消删除"
                            title="取消删除"
                            size="icon-sm"
                            variant="ghost"
                            disabled={deleting}
                            onClick={() => setConfirmingDeleteSessionId(null)}
                          >
                            <X size={14} aria-hidden="true" />
                          </Button>
                        </>
                      ) : editing ? (
                        <>
                          <Button
                            type="button"
                            aria-label="保存对话主题"
                            title="保存对话主题"
                            size="icon-sm"
                            loading={saving}
                            loadingLabel="正在保存对话主题"
                            onClick={() => saveRename(session)}
                          >
                            <Check size={14} aria-hidden="true" />
                          </Button>
                          <Button
                            type="button"
                            aria-label="取消重命名"
                            title="取消重命名"
                            size="icon-sm"
                            variant="ghost"
                            disabled={saving}
                            onClick={cancelRename}
                          >
                            <X size={14} aria-hidden="true" />
                          </Button>
                        </>
                      ) : (
                        <>
                          <Button
                            type="button"
                            aria-label="重命名对话"
                            title="重命名对话"
                            size="icon-sm"
                            variant="ghost"
                            disabled={itemLoading || deleting || !onRenameSession}
                            onClick={() => beginRename(session)}
                          >
                            <Pencil size={14} aria-hidden="true" />
                          </Button>
                          <Button
                            type="button"
                            aria-label="删除对话"
                            title="删除对话"
                            size="icon-sm"
                            variant="ghost"
                            className="text-slate-500 hover:bg-red-50 hover:text-red-600"
                            disabled={itemLoading || deleting || !onDeleteSession}
                            onClick={() => {
                              cancelRename();
                              setConfirmingDeleteSessionId(session.id);
                            }}
                          >
                            <Trash2 size={14} aria-hidden="true" />
                          </Button>
                        </>
                      )}
                    </span>
                  </motion.div>
                );
              })
            ) : (
              <motion.div
                key="history-empty"
                className="agent-history-state rounded-xl px-3 py-3 text-xs text-slate-500"
                initial="initial"
                animate="animate"
                exit="exit"
                variants={agentPanelItemVariants}
              >
                暂无历史记录
              </motion.div>
            )}
          </AnimatePresence>
        </motion.div>
      </div>
    </div>
  );
}

function formatSessionUpdatedAt(value: number) {
  return new Intl.DateTimeFormat("zh-CN", {
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit"
  }).format(value);
}
