import { useComposerRuntime } from "@assistant-ui/react";
import {
  IconPlus,
  IconUpload,
  IconBulb,
  IconClock,
  IconBolt,
  IconTool,
  IconPlugConnected,
  IconPhotoPlus,
  IconLoader2,
  IconArrowLeft,
  IconX,
  IconHelpCircle,
  IconTerminal2,
} from "@tabler/icons-react";
import React, {
  useState,
  useRef,
  useEffect,
  useMemo,
  useCallback,
} from "react";
import { createPortal } from "react-dom";

import { Popover, PopoverTrigger, PopoverContent } from "../ui/popover.js";
import { Switch } from "../ui/switch.js";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
import { cn } from "../utils.js";
import {
  createAssetPickerHandoffId,
  isExternalAssetPickerUrl,
  standaloneAssetPickerUrl,
} from "./asset-picker-url.js";
import { useComposerRuntimeAdapters } from "./runtime-adapters.js";
import type { ComposerMode } from "./types.js";

export interface ComposerTerminalModeControl {
  enabled: boolean;
  onChange: (enabled: boolean) => void;
  onNewTerminal?: () => void;
}

interface ComposerPlusMenuProps {
  onSelectMode?: (mode: ComposerMode) => void;
  onAttachmentError?: (message: string) => void;
  /**
   * Show the "Create Extension" entry. Extensions are optional and hidden
   * unless the host explicitly enables their agent tool surface.
   */
  extensionTools?: boolean;
  /**
   * "full" (default): full + menu with Upload File, Create Skill, Schedule Task,
   * Automation, and MCP Server. Extension is included only when
   * `extensionTools` is true. "upload-only": clicking + opens the file picker
   * directly — no popover, no other modes. Use for prompt popovers where the
   * only thing to attach is a file. "terminal": one new-terminal action plus
   * the Terminal mode switch.
   */
  mode?: "full" | "upload-only" | "terminal";
  terminalModeControl?: ComposerTerminalModeControl;
}

type View = "menu" | "skill-upload";

const DEFAULT_ASSETS_PICKER_URL = "https://assets.agent-native.com/picker";
const EMBED_PROTOCOL = "agent-native.embed";
const EMBED_VERSION = 1;

export function isExtensionComposerMenuEnabled(
  extensionTools?: boolean,
): boolean {
  return extensionTools === true;
}

interface EmbedEnvelope<TPayload = unknown> {
  protocol?: string;
  version?: number;
  type?: string;
  name?: string;
  payload?: TPayload;
}

interface AssetPickerPayload {
  assetId?: unknown;
  handoffId?: unknown;
  url?: unknown;
  previewUrl?: unknown;
  downloadUrl?: unknown;
  embedUrl?: unknown;
  altText?: unknown;
  title?: unknown;
  prompt?: unknown;
  mediaType?: unknown;
  libraryId?: unknown;
}

function assetPickerUrl() {
  const env =
    (import.meta as ImportMeta & { env?: Record<string, string | undefined> })
      .env ?? {};
  return env.VITE_AGENT_NATIVE_ASSETS_PICKER_URL || DEFAULT_ASSETS_PICKER_URL;
}

function withEmbeddedParams(url: string): string {
  try {
    const parsed = new URL(url, window.location.href);
    parsed.searchParams.set("embedded", "1");
    parsed.searchParams.set("mediaType", "image");
    return parsed.toString();
  } catch {
    const separator = url.includes("?") ? "&" : "?";
    return `${url}${separator}embedded=1&mediaType=image`;
  }
}

function assetPickerOrigin(url: string): string | null {
  try {
    return new URL(url, window.location.href).origin;
  } catch {
    return null;
  }
}

function embedEnvelope(
  type: "message" | "ready",
  options: { name?: string; payload?: unknown } = {},
): EmbedEnvelope {
  return {
    protocol: EMBED_PROTOCOL,
    version: EMBED_VERSION,
    type,
    ...options,
  };
}

function isEmbedEnvelope(value: unknown): value is EmbedEnvelope {
  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
  const candidate = value as EmbedEnvelope;
  return (
    candidate.protocol === EMBED_PROTOCOL &&
    candidate.version === EMBED_VERSION &&
    typeof candidate.type === "string"
  );
}

function assetString(value: unknown): string | null {
  return typeof value === "string" && value.trim() ? value.trim() : null;
}

function assetImageSource(payload: unknown): string | null {
  if (!payload || typeof payload !== "object") return null;
  const asset = payload as AssetPickerPayload;
  return (
    assetString(asset.url) ??
    assetString(asset.previewUrl) ??
    assetString(asset.downloadUrl) ??
    assetString(asset.embedUrl)
  );
}

function assetTitle(
  payload: unknown,
  url: string,
  generatedImageLabel: string,
): string {
  if (payload && typeof payload === "object") {
    const title = assetString((payload as AssetPickerPayload).title);
    if (title) return title;
    const prompt = assetString((payload as AssetPickerPayload).prompt);
    if (prompt) return prompt.slice(0, 80);
  }
  try {
    const name = new URL(url).pathname.split("/").filter(Boolean).pop();
    return name ? decodeURIComponent(name) : generatedImageLabel;
  } catch {
    return generatedImageLabel;
  }
}

function assetContext(payload: unknown, url: string): string {
  const lines = [`Image URL: ${url}`];
  if (payload && typeof payload === "object") {
    const asset = payload as AssetPickerPayload;
    const assetId = assetString(asset.assetId);
    const libraryId = assetString(asset.libraryId);
    const prompt = assetString(asset.prompt);
    const altText = assetString(asset.altText);
    if (assetId) lines.push(`Asset ID: ${assetId}`);
    if (libraryId) lines.push(`Library ID: ${libraryId}`);
    if (prompt) lines.push(`Prompt: ${prompt}`);
    if (altText) lines.push(`Alt text: ${altText}`);
  }
  return lines.join("\n");
}

function slugifyName(value: string): string {
  return (
    value
      .toLowerCase()
      .replace(/[^a-z0-9]+/g, "-")
      .replace(/^-+|-+$/g, "") || "uploaded-skill"
  );
}

function formatAttachmentError(error: unknown, fallback: string): string {
  return error instanceof Error ? error.message : fallback;
}

function MenuItemHelp({
  label,
  description,
}: {
  label: string;
  description?: string;
}) {
  const normalizedDescription = description?.trim();
  if (!normalizedDescription) return null;
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <span
          role="img"
          tabIndex={0}
          aria-label={`${label}: ${normalizedDescription}`}
          onClick={(event) => event.stopPropagation()}
          className="flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
        >
          <IconHelpCircle
            aria-hidden="true"
            className="size-3"
            strokeWidth={1.8}
          />
        </span>
      </TooltipTrigger>
      <TooltipContent side="right" className="max-w-xs">
        {normalizedDescription}
      </TooltipContent>
    </Tooltip>
  );
}

function UploadOnlyAttachButton({
  onAttachmentError,
}: Pick<ComposerPlusMenuProps, "onAttachmentError">) {
  const composerRuntime = useComposerRuntime();
  const t = useComposerRuntimeAdapters().translate!;
  const inputRef = useRef<HTMLInputElement>(null);
  const handleFilesSelected = async (files: FileList | null) => {
    if (!files || files.length === 0) return;
    try {
      await Promise.all(
        Array.from(files).map((file) => composerRuntime.addAttachment(file)),
      );
    } catch (error) {
      onAttachmentError?.(
        formatAttachmentError(
          error,
          t("agentChat.composer.uploadFailed", {
            defaultValue: "Could not upload the selected file.",
          }),
        ),
      );
    }
  };

  return (
    <>
      <input
        ref={inputRef}
        type="file"
        multiple
        className="hidden"
        onChange={(event) => {
          void handleFilesSelected(event.target.files);
          event.target.value = "";
        }}
      />
      <Tooltip>
        <TooltipTrigger asChild>
          <span className="inline-flex shrink-0">
            <button
              type="button"
              className="shrink-0 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50"
              aria-label={t("agentChat.composer.upload", {
                defaultValue: "Upload",
              })}
              onClick={() => inputRef.current?.click()}
            >
              <IconPlus className="h-4 w-4" />
            </button>
          </span>
        </TooltipTrigger>
        <TooltipContent>
          {t("agentChat.composer.upload", { defaultValue: "Upload" })}
        </TooltipContent>
      </Tooltip>
    </>
  );
}

export function ComposerPlusMenu({
  onSelectMode,
  onAttachmentError,
  extensionTools = false,
  mode = "full",
  terminalModeControl,
}: ComposerPlusMenuProps) {
  if (mode === "upload-only") {
    return <UploadOnlyAttachButton onAttachmentError={onAttachmentError} />;
  }
  if (mode === "terminal" && terminalModeControl) {
    return (
      <ComposerPlusMenuTerminal terminalModeControl={terminalModeControl} />
    );
  }
  return (
    <ComposerPlusMenuFull
      onSelectMode={onSelectMode}
      onAttachmentError={onAttachmentError}
      extensionTools={extensionTools}
    />
  );
}

function ComposerPlusMenuTerminal({
  terminalModeControl,
}: Pick<ComposerPlusMenuProps, "terminalModeControl">) {
  const [open, setOpen] = useState(false);

  if (!terminalModeControl) return null;

  const handlePrimaryAction = () => {
    if (!terminalModeControl.enabled) {
      terminalModeControl.onChange(true);
      setOpen(false);
      return;
    }
    terminalModeControl.onNewTerminal?.();
    setOpen(false);
  };

  return (
    <>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <button
            type="button"
            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/50 hover:text-foreground"
            aria-label="Terminal options" /* i18n-ignore -- portable toolkit label */
            title="Terminal options" /* i18n-ignore -- portable toolkit label */
          >
            <IconPlus className="h-4 w-4" />
          </button>
        </PopoverTrigger>
        <PopoverContent
          align="start"
          sideOffset={8}
          className="w-56 border-input bg-muted p-1 text-foreground"
          onOpenAutoFocus={(event) => event.preventDefault()}
        >
          <button
            type="button"
            className="flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-start text-[12px] font-medium text-foreground hover:bg-accent/60"
            onClick={handlePrimaryAction}
          >
            <IconTerminal2
              size={14}
              className="shrink-0 text-muted-foreground"
              aria-hidden="true"
            />
            <span>
              {terminalModeControl.enabled ? "New terminal" : "Start terminal"}
            </span>
          </button>
          <div className="my-1 border-t border-border/70" />
          <div className="flex items-center justify-between gap-3 px-2.5 py-2">
            <span className="text-[12px] font-medium text-foreground">
              {"Terminal mode" /* i18n-ignore -- portable toolkit label */}
            </span>
            <Switch
              checked={terminalModeControl.enabled}
              onCheckedChange={terminalModeControl.onChange}
              aria-label="Terminal mode" /* i18n-ignore -- portable toolkit label */
            />
          </div>
        </PopoverContent>
      </Popover>
    </>
  );
}

function ComposerPlusMenuFull({
  onSelectMode,
  onAttachmentError,
  extensionTools,
}: Pick<
  ComposerPlusMenuProps,
  "onSelectMode" | "onAttachmentError" | "extensionTools"
>) {
  const adapters = useComposerRuntimeAdapters();
  const t = adapters.translate!;
  const resources = adapters.resources!;
  const composerRuntime = useComposerRuntime();
  const [open, setOpen] = useState(false);
  const [assetsPickerOpen, setAssetsPickerOpen] = useState(false);
  const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
  const [view, setView] = useState<View>("menu");
  const showMcpIntegrations = useMemo(
    () => resources.isMcpIntegrationAvailable!(),
    [resources],
  );

  const { data: org } = resources.useOrg!();
  const canCreateOrgMcp =
    !org?.orgId || org.role === "owner" || org.role === "admin";
  const hasOrg = !!org?.orgId;
  // Composer connections belong to the person asking for them. Organization
  // sharing remains an explicit choice for owners and admins in the dialog.
  const defaultMcpScope: "user" = "user";
  const createMcp = resources.useCreateMcpServer!();
  const McpIntegrationDialog = resources.McpIntegrationDialog;

  const fileUploadRef = useRef<HTMLInputElement>(null);
  const skillFileInputRef = useRef<HTMLInputElement>(null);
  const skillHoverTimerRef = useRef<number | null>(null);
  const [skillUploadSlug, setSkillUploadSlug] = useState("");
  const [skillUploadContent, setSkillUploadContent] = useState("");
  const [skillUploadFileName, setSkillUploadFileName] = useState("");
  const [skillUploadStatus, setSkillUploadStatus] = useState<{
    kind: "ok" | "err";
    message: string;
  } | null>(null);
  const [skillUploadBusy, setSkillUploadBusy] = useState(false);
  const [skillFlyoutOpen, setSkillFlyoutOpen] = useState(false);
  const [skillFlyoutSide, setSkillFlyoutSide] = useState<"right" | "left">(
    "right",
  );
  const skillFlyoutCloseTimerRef = useRef<number | null>(null);
  const openSkillFlyout = (rowEl?: HTMLElement | null) => {
    if (skillFlyoutCloseTimerRef.current) {
      window.clearTimeout(skillFlyoutCloseTimerRef.current);
      skillFlyoutCloseTimerRef.current = null;
    }
    if (rowEl && typeof window !== "undefined") {
      const rect = rowEl.getBoundingClientRect();
      const FLYOUT_WIDTH = 248;
      setSkillFlyoutSide(
        window.innerWidth - rect.right < FLYOUT_WIDTH ? "left" : "right",
      );
    }
    setSkillFlyoutOpen(true);
  };
  const scheduleSkillFlyoutClose = () => {
    if (skillFlyoutCloseTimerRef.current)
      window.clearTimeout(skillFlyoutCloseTimerRef.current);
    skillFlyoutCloseTimerRef.current = window.setTimeout(() => {
      setSkillFlyoutOpen(false);
    }, 160);
  };

  useEffect(() => {
    if (open) {
      setView("menu");
      setSkillUploadSlug("");
      setSkillUploadContent("");
      setSkillUploadFileName("");
      setSkillUploadStatus(null);
      setSkillUploadBusy(false);
      setSkillFlyoutOpen(false);
    }
  }, [open]);

  const handleSkillFileSelected = async (files: FileList | null) => {
    if (!files || files.length === 0) return;
    const file = files[0];
    const text = await file.text();
    const baseName = file.name.replace(/\.[^./]+$/, "");
    const slug = slugifyName(
      baseName.toLowerCase() === "skill" ? "uploaded-skill" : baseName,
    );
    setSkillUploadSlug(slug);
    setSkillUploadContent(text);
    setSkillUploadFileName(file.name);
    setSkillUploadStatus(null);
    setView("skill-upload");
  };

  const handleFilesSelected = async (files: FileList | null) => {
    if (!files || files.length === 0) return;
    try {
      await Promise.all(
        Array.from(files).map((file) => composerRuntime.addAttachment(file)),
      );
    } catch (error) {
      onAttachmentError?.(
        formatAttachmentError(
          error,
          t("agentChat.composer.uploadFailed", {
            defaultValue: "Could not upload the selected file.",
          }),
        ),
      );
    }
  };

  const submitSkillUpload = async () => {
    if (skillUploadBusy) return;
    const slug = slugifyName(skillUploadSlug || "uploaded-skill");
    const path = `skills/${slug}/SKILL.md`;
    setSkillUploadBusy(true);
    setSkillUploadStatus(null);
    try {
      const res = await fetch(
        adapters.resolvePath!("/_agent-native/resources"),
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            path,
            content: skillUploadContent,
            mimeType: "text/markdown",
            shared: false,
          }),
        },
      );
      if (!res.ok) {
        const body = await res.text().catch(() => "");
        throw new Error(
          body ||
            t("agentChat.composer.skill.uploadFailedStatus", {
              status: res.status,
              defaultValue: `Upload failed (${res.status})`,
            }),
        );
      }
      setSkillUploadStatus({
        kind: "ok",
        message: t("agentChat.composer.skill.added", {
          name: skillUploadFileName || `${slug}/SKILL.md`,
          defaultValue: `Skill "${skillUploadFileName || `${slug}/SKILL.md`}" added`,
        }),
      });
      window.setTimeout(() => setOpen(false), 1200);
    } catch (err: any) {
      setSkillUploadStatus({
        kind: "err",
        message:
          err?.message ||
          t("agentChat.composer.skill.saveFailed", {
            defaultValue: "Failed to save skill file",
          }),
      });
    } finally {
      setSkillUploadBusy(false);
    }
  };

  const menuItems: {
    icon: React.ReactNode;
    label: string;
    desc: string;
    action: () => void;
    hoverAction?: () => void;
    isSkill?: boolean;
  }[] = [
    {
      icon: <IconUpload className="h-3.5 w-3.5" />,
      label: t("agentChat.composer.menu.uploadFile", {
        defaultValue: "Upload File",
      }),
      desc: t("agentChat.composer.menu.uploadFileDescription", {
        defaultValue: "Images, PDFs, text/code, JSON, CSV",
      }),
      action: () => {
        setOpen(false);
        setTimeout(() => fileUploadRef.current?.click(), 0);
      },
    },
    {
      icon: <IconPhotoPlus className="h-3.5 w-3.5" />,
      label: t("agentChat.composer.menu.generateImage", {
        defaultValue: "Generate Image",
      }),
      desc: t("agentChat.composer.menu.generateImageDescription", {
        defaultValue: "Open the Assets image picker",
      }),
      action: () => {
        setOpen(false);
        setAssetsPickerOpen(true);
      },
    },
    {
      icon: <IconClock className="h-3.5 w-3.5" />,
      label: t("agentChat.composer.menu.scheduleTask", {
        defaultValue: "Schedule Task",
      }),
      desc: t("agentChat.composer.menu.scheduleTaskDescription", {
        defaultValue: "Run something on a schedule",
      }),
      action: () => {
        onSelectMode?.("job");
        setOpen(false);
      },
    },
    {
      icon: <IconBolt className="h-3.5 w-3.5" />,
      label: t("agentChat.composer.menu.createAutomation", {
        defaultValue: "Create Automation",
      }),
      desc: t("agentChat.composer.menu.createAutomationDescription", {
        defaultValue: "Set up a when-X-do-Y rule",
      }),
      action: () => {
        onSelectMode?.("automation");
        setOpen(false);
      },
    },
    ...(isExtensionComposerMenuEnabled(extensionTools)
      ? [
          {
            icon: <IconTool className="h-3.5 w-3.5" />,
            label: t("agentChat.composer.menu.createExtension", {
              defaultValue: "Create Extension",
            }),
            desc: t("agentChat.composer.menu.createExtensionDescription", {
              defaultValue: "Build a mini app extension",
            }),
            action: () => {
              onSelectMode?.("extension");
              setOpen(false);
            },
          },
        ]
      : []),
    ...(showMcpIntegrations
      ? [
          {
            icon: <IconPlugConnected className="h-3.5 w-3.5" />,
            label: t("agentChat.composer.menu.integrations", {
              defaultValue: "Integrations",
            }),
            desc: t("agentChat.composer.menu.integrationsDescription", {
              defaultValue: "Connect tools and services to the agent",
            }),
            action: () => {
              setOpen(false);
              setMcpDialogOpen(true);
            },
          },
        ]
      : []),
    {
      icon: <IconBulb className="h-3.5 w-3.5" />,
      label: t("agentChat.composer.menu.createSkill", {
        defaultValue: "Create Skill",
      }),
      desc: t("agentChat.composer.menu.createSkillDescription", {
        defaultValue: "Teach the agent a new ability",
      }),
      action: openSkillFlyout,
      hoverAction: openSkillFlyout,
      isSkill: true,
    },
  ];

  return (
    <>
      {/* Hidden input to trigger the native file upload with explicit errors. */}
      <input
        ref={fileUploadRef}
        type="file"
        multiple
        className="hidden"
        onChange={(event) => {
          void handleFilesSelected(event.target.files);
          event.target.value = "";
        }}
      />
      <input
        ref={skillFileInputRef}
        type="file"
        accept=".md,text/markdown"
        className="hidden"
        onChange={(e) => {
          void handleSkillFileSelected(e.target.files);
          e.target.value = "";
        }}
      />

      <Popover open={open} onOpenChange={setOpen}>
        <Tooltip>
          <TooltipTrigger asChild>
            <span className="inline-flex shrink-0">
              <PopoverTrigger asChild>
                <button
                  type="button"
                  aria-label={t("agentChat.composer.add", {
                    defaultValue: "Add...",
                  })}
                  className="shrink-0 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50 disabled:opacity-30 disabled:cursor-not-allowed"
                >
                  <IconPlus className="h-4 w-4" />
                </button>
              </PopoverTrigger>
            </span>
          </TooltipTrigger>
          <TooltipContent>
            {t("agentChat.composer.add", { defaultValue: "Add..." })}
          </TooltipContent>
        </Tooltip>
        <PopoverContent
          side="top"
          align="start"
          sideOffset={8}
          className={cn(
            "rounded-lg border-input bg-muted p-0 text-foreground",
            view === "skill-upload"
              ? "max-h-[70vh] w-[calc(100vw-24px)] max-w-[380px] overflow-y-auto"
              : "w-[260px]",
          )}
          style={{ fontSize: 13, lineHeight: "normal" }}
          onOpenAutoFocus={(e) => e.preventDefault()}
        >
          {view === "menu" && (
            <div className="py-1">
              {menuItems.map((item) => {
                const isSkill = item.isSkill === true;
                return (
                  <div
                    key={item.label}
                    className={cn(
                      "relative flex items-center hover:bg-accent/50",
                      isSkill && "group/skill",
                      isSkill && skillFlyoutOpen && "bg-accent/50",
                    )}
                    onMouseEnter={(e) => {
                      if (isSkill) {
                        openSkillFlyout(e.currentTarget);
                        return;
                      }
                      if (!item.hoverAction) return;
                      if (skillHoverTimerRef.current)
                        window.clearTimeout(skillHoverTimerRef.current);
                      skillHoverTimerRef.current = window.setTimeout(() => {
                        item.hoverAction?.();
                      }, 180);
                    }}
                    onMouseLeave={() => {
                      if (isSkill) {
                        scheduleSkillFlyoutClose();
                        return;
                      }
                      if (skillHoverTimerRef.current) {
                        window.clearTimeout(skillHoverTimerRef.current);
                        skillHoverTimerRef.current = null;
                      }
                    }}
                  >
                    <button
                      type="button"
                      onClick={item.action}
                      className={cn(
                        "flex min-w-0 flex-1 items-center gap-2.5 px-3 py-2 text-start",
                      )}
                    >
                      <span className="text-muted-foreground">{item.icon}</span>
                      <span className="flex min-w-0 items-center gap-0.5">
                        <span className="min-w-0 truncate text-[12px] font-medium text-foreground">
                          {item.label}
                        </span>
                        <MenuItemHelp
                          label={item.label}
                          description={item.desc}
                        />
                      </span>
                    </button>
                    {isSkill && (
                      <span className="me-3 ms-auto text-muted-foreground/60">
                        ›
                      </span>
                    )}
                    {isSkill && skillFlyoutOpen && (
                      <div
                        role="menu"
                        onMouseEnter={() => openSkillFlyout()}
                        onMouseLeave={scheduleSkillFlyoutClose}
                        className={cn(
                          "absolute top-0 z-20 w-[240px] rounded-lg border border-input bg-muted py-1 text-foreground shadow-md",
                          skillFlyoutSide === "right"
                            ? "left-full ml-1"
                            : "right-full mr-1",
                        )}
                      >
                        <div className="flex items-center hover:bg-accent/50">
                          <button
                            type="button"
                            onClick={() => {
                              onSelectMode?.("skill");
                              setSkillFlyoutOpen(false);
                              setOpen(false);
                            }}
                            className="flex min-w-0 flex-1 items-center gap-2.5 px-3 py-2 text-start"
                          >
                            <span className="text-muted-foreground">
                              <IconBulb className="h-3.5 w-3.5" />
                            </span>
                            <span className="flex min-w-0 items-center gap-0.5">
                              <span className="min-w-0 truncate text-[12px] font-medium text-foreground">
                                {t("agentChat.composer.skill.createNew", {
                                  defaultValue: "Create new skill",
                                })}
                              </span>
                              <MenuItemHelp
                                label={t("agentChat.composer.skill.createNew", {
                                  defaultValue: "Create new skill",
                                })}
                                description={t(
                                  "agentChat.composer.skill.createDescription",
                                  {
                                    defaultValue:
                                      "Describe a skill and let the agent draft it",
                                  },
                                )}
                              />
                            </span>
                          </button>
                        </div>
                        <div className="flex items-center hover:bg-accent/50">
                          <button
                            type="button"
                            onClick={() => {
                              setSkillFlyoutOpen(false);
                              skillFileInputRef.current?.click();
                            }}
                            className="flex min-w-0 flex-1 items-center gap-2.5 px-3 py-2 text-start"
                          >
                            <span className="text-muted-foreground">
                              <IconUpload className="h-3.5 w-3.5" />
                            </span>
                            <span className="flex min-w-0 items-center gap-0.5">
                              <span className="min-w-0 truncate text-[12px] font-medium text-foreground">
                                {t("agentChat.composer.skill.uploadFile", {
                                  defaultValue: "Upload skill file",
                                })}
                              </span>
                              <MenuItemHelp
                                label={t(
                                  "agentChat.composer.skill.uploadFile",
                                  {
                                    defaultValue: "Upload skill file",
                                  },
                                )}
                                description={t(
                                  "agentChat.composer.skill.uploadDescription",
                                  {
                                    defaultValue:
                                      "Import an existing SKILL.md file",
                                  },
                                )}
                              />
                            </span>
                          </button>
                        </div>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}

          {view === "skill-upload" && (
            <div className="p-3">
              <button
                type="button"
                onClick={() => setView("menu")}
                className="mb-1.5 flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground"
              >
                <IconArrowLeft className="h-3 w-3 rtl:-scale-x-100" />
                {t("agentChat.composer.skill.back", {
                  defaultValue: "Back",
                })}
              </button>
              <label className="mb-1 block text-[11px] font-semibold text-foreground">
                {t("agentChat.composer.skill.uploadFile", {
                  defaultValue: "Upload skill file",
                })}
              </label>
              <p className="mb-2 text-[10px] leading-relaxed text-muted-foreground/60">
                {t("agentChat.composer.skill.review", {
                  name:
                    skillUploadFileName ||
                    t("agentChat.composer.skill.selectedFile", {
                      defaultValue: "the selected file",
                    }),
                  defaultValue: `Review the content from ${skillUploadFileName || "the selected file"} before saving.`,
                })}
              </p>
              <label className="mb-1 block text-[10px] font-medium text-muted-foreground">
                {t("agentChat.composer.skill.name", {
                  defaultValue: "Skill name",
                })}
              </label>
              <input
                value={skillUploadSlug}
                onChange={(e) => setSkillUploadSlug(e.target.value)}
                className="mb-2 w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-[12px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent"
                placeholder="my-skill"
              />
              <p className="mb-2 text-[10px] text-muted-foreground/60">
                {t("agentChat.composer.skill.savedAt", {
                  defaultValue: "Saved at",
                })}{" "}
                <span className="font-mono">
                  skills/{slugifyName(skillUploadSlug || "uploaded-skill")}
                  /SKILL.md
                </span>
              </p>
              <label className="mb-1 block text-[10px] font-medium text-muted-foreground">
                {t("agentChat.composer.skill.content", {
                  defaultValue: "Content",
                })}
              </label>
              <textarea
                value={skillUploadContent}
                onChange={(e) => setSkillUploadContent(e.target.value)}
                rows={10}
                className="w-full rounded-md border border-border bg-background px-2.5 py-1.5 font-mono text-[11px] leading-relaxed text-foreground outline-none focus:ring-1 focus:ring-accent"
              />
              {skillUploadStatus && (
                <div
                  className={cn(
                    "mt-2 text-[11px] leading-snug",
                    skillUploadStatus.kind === "ok"
                      ? "text-green-600 dark:text-green-400"
                      : "text-red-600 dark:text-red-400",
                  )}
                >
                  {skillUploadStatus.message}
                </div>
              )}
              <div className="mt-2.5 flex justify-end gap-2">
                <button
                  type="button"
                  onClick={() => setView("menu")}
                  className="rounded-md px-3 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-accent/40"
                >
                  {t("agentChat.common.cancel", {
                    defaultValue: "Cancel",
                  })}
                </button>
                <button
                  type="button"
                  onClick={submitSkillUpload}
                  disabled={
                    skillUploadBusy ||
                    !skillUploadContent.trim() ||
                    !skillUploadSlug.trim()
                  }
                  className="rounded-md bg-accent px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40 disabled:pointer-events-none"
                >
                  {skillUploadBusy ? (
                    <IconLoader2 className="h-3 w-3 animate-spin" />
                  ) : (
                    t("agentChat.common.save", { defaultValue: "Save" })
                  )}
                </button>
              </div>
            </div>
          )}
        </PopoverContent>
      </Popover>
      {McpIntegrationDialog ? (
        <McpIntegrationDialog
          open={mcpDialogOpen}
          onOpenChange={setMcpDialogOpen}
          defaultScope={defaultMcpScope}
          canCreateOrgMcp={canCreateOrgMcp}
          hasOrg={hasOrg}
          onCreateMcpServer={(args: unknown) => createMcp.mutateAsync(args)}
        />
      ) : null}
      <AssetsPickerModal
        open={assetsPickerOpen}
        onOpenChange={setAssetsPickerOpen}
      />
    </>
  );
}

function AssetsPickerModal({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  const adapters = useComposerRuntimeAdapters();
  const t = adapters.translate!;
  const iframeRef = useRef<HTMLIFrameElement | null>(null);
  const standaloneWindowRef = useRef<Window | null>(null);
  const [pickerReady, setPickerReady] = useState(false);
  const [standaloneHandoffId, setStandaloneHandoffId] = useState<string | null>(
    null,
  );
  const sourceUrl = useMemo(() => assetPickerUrl(), []);
  const externalPicker = useMemo(
    () =>
      typeof window !== "undefined" &&
      isExternalAssetPickerUrl(sourceUrl, window.location.origin),
    [sourceUrl],
  );
  const standaloneUrl = useMemo(
    () =>
      standaloneAssetPickerUrl(
        sourceUrl,
        typeof window !== "undefined" ? window.location.href : undefined,
        {
          handoffId: standaloneHandoffId ?? undefined,
          returnOrigin:
            typeof window !== "undefined" ? window.location.origin : undefined,
        },
      ),
    [sourceUrl, standaloneHandoffId],
  );
  const iframeUrl = useMemo(() => withEmbeddedParams(sourceUrl), [sourceUrl]);
  const targetOrigin = useMemo(() => assetPickerOrigin(iframeUrl), [iframeUrl]);
  const configurePicker = useCallback(() => {
    if (!targetOrigin) return;
    iframeRef.current?.contentWindow?.postMessage(
      embedEnvelope("message", {
        name: "configure",
        payload: { mediaType: "image", count: 3 },
      }),
      targetOrigin,
    );
  }, [targetOrigin]);

  useEffect(() => {
    if (open) {
      setPickerReady(false);
      if (externalPicker) {
        standaloneWindowRef.current = null;
        setStandaloneHandoffId(createAssetPickerHandoffId());
      } else {
        setStandaloneHandoffId(null);
      }
      return;
    }
    if (!standaloneWindowRef.current) setStandaloneHandoffId(null);
  }, [externalPicker, iframeUrl, open]);

  useEffect(() => {
    if (
      !targetOrigin ||
      (!open && !standaloneWindowRef.current) ||
      (externalPicker && !standaloneHandoffId)
    )
      return;

    const handleMessage = (event: MessageEvent) => {
      const expectedSource = externalPicker
        ? standaloneWindowRef.current
        : iframeRef.current?.contentWindow;
      if (!expectedSource || event.source !== expectedSource) return;
      if (event.origin !== targetOrigin) return;
      if (!isEmbedEnvelope(event.data)) return;

      if (event.data.type === "ready") {
        setPickerReady(true);
        configurePicker();
        return;
      }

      if (event.data.type !== "message") return;
      if (externalPicker) {
        const payload = event.data.payload;
        const handoffId =
          payload && typeof payload === "object"
            ? assetString((payload as AssetPickerPayload).handoffId)
            : null;
        if (handoffId !== standaloneHandoffId) return;
      }
      if (event.data.name === "close") {
        onOpenChange(false);
        return;
      }
      if (
        event.data.name !== "chooseImage" &&
        event.data.name !== "chooseAsset"
      )
        return;

      const url = assetImageSource(event.data.payload);
      if (!url) return;
      const title = assetTitle(
        event.data.payload,
        url,
        t("agentChat.composer.assets.generatedImage", {
          defaultValue: "Generated image",
        }),
      );
      const assetId =
        event.data.payload && typeof event.data.payload === "object"
          ? assetString((event.data.payload as AssetPickerPayload).assetId)
          : null;
      adapters.agentChat!.setContextItem!({
        key: `asset-image:${assetId ?? url}`,
        title: t("agentChat.composer.assets.contextTitle", {
          title,
          defaultValue: `Image: ${title}`,
        }),
        context: assetContext(event.data.payload, url),
      });
      standaloneWindowRef.current = null;
      setStandaloneHandoffId(null);
      onOpenChange(false);
    };

    const handleKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") onOpenChange(false);
    };

    window.addEventListener("message", handleMessage);
    window.addEventListener("keydown", handleKey);
    return () => {
      window.removeEventListener("message", handleMessage);
      window.removeEventListener("keydown", handleKey);
    };
  }, [
    configurePicker,
    adapters,
    externalPicker,
    onOpenChange,
    open,
    standaloneHandoffId,
    t,
    targetOrigin,
  ]);

  const openStandalonePicker = useCallback(
    (event: React.MouseEvent<HTMLAnchorElement>) => {
      if (!standaloneHandoffId) return;
      event.preventDefault();
      const pickerWindow = window.open(standaloneUrl, "_blank");
      if (!pickerWindow) return;
      standaloneWindowRef.current = pickerWindow;
      onOpenChange(false);
    },
    [onOpenChange, standaloneHandoffId, standaloneUrl],
  );

  if (!open || typeof document === "undefined") return null;

  return createPortal(
    <div
      className="fixed inset-0 z-[280] flex items-center justify-center bg-black/50 p-3"
      role="dialog"
      aria-modal="true"
      aria-labelledby="composer-assets-picker-title"
      onMouseDown={(event) => {
        if (event.target === event.currentTarget) onOpenChange(false);
      }}
    >
      <div className="flex h-[min(86vh,760px)] w-[min(96vw,1040px)] flex-col overflow-hidden rounded-xl border border-border bg-background shadow-2xl">
        <div className="flex h-12 shrink-0 items-center justify-between border-b border-border px-4">
          <div
            id="composer-assets-picker-title"
            className="text-sm font-medium text-foreground"
          >
            {t("agentChat.composer.assets.generateImage", {
              defaultValue: "Generate image",
            })}
          </div>
          <button
            type="button"
            onClick={() => onOpenChange(false)}
            className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
            aria-label={t("agentChat.composer.assets.closePicker", {
              defaultValue: "Close image picker",
            })}
          >
            <IconX className="h-4 w-4" />
          </button>
        </div>
        {externalPicker ? (
          <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-3 p-8 text-center">
            <div className="max-w-md text-sm text-muted-foreground">
              {t("agentChat.composer.assets.openSecurely", {
                defaultValue:
                  "Open Assets in a new tab to sign in and choose an image securely.",
              })}
            </div>
            <a
              href={standaloneUrl}
              target="_blank"
              onClick={openStandalonePicker}
              className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90"
            >
              {t("agentChat.composer.assets.openPicker", {
                defaultValue: "Open Assets image picker",
              })}
            </a>
          </div>
        ) : targetOrigin ? (
          <div className="relative min-h-0 flex-1 overflow-hidden bg-background">
            {!pickerReady && <AssetsPickerLoadingSkeleton />}
            <iframe
              ref={iframeRef}
              src={iframeUrl}
              title={t("agentChat.composer.assets.pickerTitle", {
                defaultValue: "Assets image picker",
              })}
              className={cn(
                "absolute inset-0 h-full w-full border-0 bg-background transition-opacity duration-150",
                pickerReady ? "opacity-100" : "pointer-events-none opacity-0",
              )}
              sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-downloads"
              allow="clipboard-read; clipboard-write; microphone; fullscreen"
              referrerPolicy="strict-origin-when-cross-origin"
              onLoad={() => {
                configurePicker();
                setPickerReady(true);
              }}
            />
          </div>
        ) : (
          <div className="flex min-h-0 flex-1 items-center justify-center p-8 text-center text-sm text-muted-foreground">
            {t("agentChat.composer.assets.invalidUrl", {
              defaultValue: "The configured image picker URL is not valid.",
            })}
          </div>
        )}
      </div>
    </div>,
    document.body,
  );
}

function AssetsPickerLoadingSkeleton() {
  const t = useComposerRuntimeAdapters().translate!;
  return (
    <div
      className="absolute inset-0 flex flex-col gap-5 p-5"
      role="status"
      aria-label={t("agentChat.composer.assets.loadingPicker", {
        defaultValue: "Loading Assets picker",
      })}
    >
      <div className="flex items-center gap-3">
        <div className="h-9 flex-1 animate-pulse rounded-md bg-muted" />
        <div className="h-9 w-24 animate-pulse rounded-md bg-muted" />
      </div>
      <div className="grid min-h-0 flex-1 grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
        {Array.from({ length: 8 }).map((_, index) => (
          <div key={index} className="flex min-w-0 flex-col gap-2">
            <div className="aspect-square w-full animate-pulse rounded-lg bg-muted" />
            <div className="h-3 w-3/4 animate-pulse rounded bg-muted" />
            <div className="h-3 w-1/2 animate-pulse rounded bg-muted" />
          </div>
        ))}
      </div>
    </div>
  );
}