"use client";

import { BotIcon, SettingsIcon, XIcon } from "lucide-react";
import { useMemo, useState } from "react";

import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { PromptInputButton } from "@/components/ai-elements/prompt-input";
import { AgentManageDialog } from "@/components/workspace/agents/agent-manage-dialog";
import { Tooltip } from "@/components/workspace/tooltip";
import { useAgentSelector, useAgentsPaginated } from "@/core/agents";
import type { Agent } from "@/core/agents";
import { getStoredAuth } from "@/core/auth";
import { desensitize } from "@/lib/desensitize";
import { cn } from "@/lib/utils";

interface AgentSelectorProps {
  selectedAgentId: string | null;
  onAgentChange: (agentId: string | null) => void;
  disabled?: boolean;
  /** 紧凑模式（CM 参考图）：触发器改为灰底胶囊 + 主色机器人图标。 */
  compact?: boolean;
  /** 图标模式：用于 iframe 等底栏场景，仅显示机器人图标和可选清空按钮。 */
  triggerVariant?: "default" | "icon";
  iconButtonClassName?: string;
  iconActiveClassName?: string;
}

/**
 * Homepage agent picker — shows the admin-curated selector list.
 *
 * - Non-admins see a read-only dropdown.
 * - Admins also see a "管理 Agent 列表" entry that opens the management dialog.
 *
 * Selecting an agent flips this chip to a coloured pill with a ✕ to clear.
 * The actual handoff to ``AgentChatPage`` happens in ``ChatPage`` on submit.
 */
export function AgentSelector({
  selectedAgentId,
  onAgentChange,
  disabled,
  compact = false,
  triggerVariant = "default",
  iconButtonClassName,
  iconActiveClassName,
}: AgentSelectorProps) {
  const [open, setOpen] = useState(false);
  const [manageOpen, setManageOpen] = useState(false);
  const { agents, isLoading } = useAgentSelector();
  // 弹窗列表只展示管理弹窗里配置的 agent（agents）；但「已选中 agent」的名称解析要更宽——
  // 侧边栏「常用智能体」可以选中未配置进管理弹窗的 agent（如用户自己的智能体），
  // 这些 agent 也要能在胶囊上显示名称，故额外用「我的 / 广场」列表兜底解析（缓存与侧边栏共享）。
  const { agents: mineAgents } = useAgentsPaginated({ scope: "mine", page: 1, pageSize: 20 });
  const { agents: squareAgents } = useAgentsPaginated({ scope: "square", page: 1, pageSize: 20 });
  const isAdmin = useMemo(() => getStoredAuth()?.system_role === "admin", []);

  const selectedAgent = useMemo<Agent | null>(() => {
    if (!selectedAgentId) return null;
    return (
      [...agents, ...mineAgents, ...squareAgents].find(
        (a) => a.id === selectedAgentId,
      ) ?? null
    );
  }, [agents, mineAgents, squareAgents, selectedAgentId]);

  const handleSelect = (agent: Agent) => {
    onAgentChange(agent.id);
    setOpen(false);
  };

  const handleClear = (e: React.MouseEvent) => {
    e.stopPropagation();
    onAgentChange(null);
  };

  const triggerLabel = selectedAgent ? desensitize(selectedAgent.name) : "选择 Agent";
  const iconTooltipLabel = selectedAgent ? triggerLabel : "未选择";
  const iconMode = triggerVariant === "icon";

  return (
    <>
      <Dialog open={open} onOpenChange={setOpen}>
        {iconMode ? (
          <Tooltip content={iconTooltipLabel}>
            <div>
              <DialogTrigger asChild>
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  disabled={disabled}
                  aria-label={selectedAgent ? `已选择智能体：${triggerLabel}` : "选择智能体"}
                  className={cn(
                    "relative size-9 rounded-full text-muted-foreground shadow-none hover:bg-muted/60 hover:text-foreground",
                    selectedAgent && "text-amber-600 hover:text-amber-700",
                    selectedAgent && iconActiveClassName,
                    iconButtonClassName,
                  )}
                >
                  <BotIcon className="size-4" />
                  {selectedAgent && (
                    <span
                      role="button"
                      tabIndex={0}
                      aria-label="清除已选 agent"
                      className="absolute -right-1 -top-1 inline-flex size-4 items-center justify-center rounded-full border bg-background text-foreground shadow-sm hover:bg-muted"
                      onClick={handleClear}
                      onKeyDown={(e) => {
                        if (e.key === "Enter" || e.key === " ") {
                          e.preventDefault();
                          onAgentChange(null);
                        }
                      }}
                    >
                      <XIcon className="size-2.5" />
                    </span>
                  )}
                </Button>
              </DialogTrigger>
            </div>
          </Tooltip>
        ) : (
          <DialogTrigger asChild>
            <PromptInputButton
              type="button"
              disabled={disabled}
              className={cn(
                "gap-1.5! rounded-full border px-3! shadow-none transition-colors",
                compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
                compact
                  ? "border-transparent bg-gray-50/60 text-gray-600 hover:bg-gray-100/80 hover:text-gray-800 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700"
                  : selectedAgent
                    ? "border-[#d6a868] bg-[#fff3df] text-[#7a5417] hover:bg-[#ffe8c4]"
                    : "border-[#eee3d5] bg-[#fffaf5] text-[#7e6a57] hover:bg-white dark:border-slate-600 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700",
              )}
            >
              <BotIcon
                className={cn("size-3", compact && "text-[var(--primary)]")}
              />
              <span className="max-w-[140px] truncate text-xs font-normal">
                {triggerLabel}
              </span>
              {selectedAgent && (
                <span
                  role="button"
                  tabIndex={0}
                  aria-label="清除已选 agent"
                  className="ml-0.5 inline-flex items-center justify-center rounded-full p-0.5 hover:bg-[#ffd9a7]"
                  onClick={handleClear}
                  onKeyDown={(e) => {
                    if (e.key === "Enter" || e.key === " ") {
                      e.preventDefault();
                      onAgentChange(null);
                    }
                  }}
                >
                  <XIcon className="size-3" />
                </span>
              )}
            </PromptInputButton>
          </DialogTrigger>
        )}
        <DialogContent className="overflow-hidden p-0 sm:max-w-md">
          <DialogTitle className="sr-only">选择 Agent</DialogTitle>
          <Command className="**:data-[slot=command-input-wrapper]:h-auto">
            <CommandInput placeholder="搜索 agent…" className="h-auto py-3.5" />
            <CommandList>
              <CommandEmpty>
                {isLoading ? "加载中…" : "没有找到匹配的 agent"}
              </CommandEmpty>
              {agents.length > 0 && (
                <CommandGroup>
                  {agents.map((agent) => (
                    <CommandItem
                      key={agent.id}
                      value={`${desensitize(agent.name)} ${desensitize(agent.description ?? "")}`}
                      onSelect={() => handleSelect(agent)}
                      className={cn(
                        "flex w-full min-w-0 items-start gap-2 overflow-hidden",
                        agent.id === selectedAgentId && "bg-accent",
                      )}
                    >
                      <BotIcon className="text-muted-foreground mt-0.5 size-4 shrink-0" />
                      <div className="flex min-w-0 flex-1 flex-col">
                        <span className="truncate text-sm">{desensitize(agent.name)}</span>
                        {agent.description && (
                          <span className="line-clamp-2 whitespace-normal break-words text-[10px] leading-snug text-muted-foreground">
                            {desensitize(agent.description)}
                          </span>
                        )}
                      </div>
                    </CommandItem>
                  ))}
                </CommandGroup>
              )}
              {!isLoading && agents.length === 0 && (
                <div className="px-4 py-6 text-center text-xs text-muted-foreground">
                  {isAdmin
                    ? "还没有配置任何 agent。点击下方 “管理” 添加几个。"
                    : "管理员还没有配置可选的 agent。"}
                </div>
              )}
            </CommandList>
            {isAdmin && (
              <div className="border-t px-2 py-1.5">
                <Button
                  type="button"
                  size="sm"
                  variant="ghost"
                  className="w-full justify-start text-xs"
                  onClick={() => {
                    setOpen(false);
                    setManageOpen(true);
                  }}
                >
                  <SettingsIcon className="mr-2 size-3.5" />
                  管理 Agent 列表 …
                </Button>
              </div>
            )}
          </Command>
        </DialogContent>
      </Dialog>
      {isAdmin && (
        <AgentManageDialog open={manageOpen} onOpenChange={setManageOpen} />
      )}
    </>
  );
}