"use client";

import dynamic from "next/dynamic";
import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
import { useAiAgentUiStore } from "@/store/ai-agent-ui";

const AiAgentPanelIsland = dynamic(
  () => import("./AiAgentPanel").then((mod) => mod.AiAgentPanel),
  {
    ssr: false,
    loading: () => null,
  },
);

export function GlobalAiAgentHost() {
  const open = useAiAgentUiStore((s) => s.globalAgentOpen);
  const activated = useAiAgentUiStore((s) => s.globalAgentActivated);
  const setOpen = useAiAgentUiStore((s) => s.setGlobalAgentOpen);

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetContent
        side="right"
        showCloseButton={false}
        className="w-[min(1500px,calc(100vw-24px))] max-w-none border-l-0 bg-transparent p-3 shadow-none sm:max-w-none"
      >
        <SheetTitle className="sr-only">MNOTE 全局 AI</SheetTitle>
        {activated ? <AiAgentPanelIsland onClose={() => setOpen(false)} /> : null}
      </SheetContent>
    </Sheet>
  );
}
