"use client";
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useCallback } from 'react';
import { Button } from '../../../../../../ui/src/components/button.mjs';
import { Sheet, SheetTrigger, SheetContent } from '../../../../../../ui/src/components/sheet.mjs';
import { Menu, PanelLeftClose, PanelLeft } from 'lucide-react';
import { cn } from '../../../../../../ui/src/lib/utils.mjs';
import { ChatSidebar } from './chat-sidebar.mjs';
import { ChatInterface } from './chat-interface.mjs';

function ChatLayout({
  apiBaseURL,
  apiBasePath,
  conversationId,
  layout = "full",
  className,
  showSidebar = true,
  widgetHeight = "600px",
  initialMessages,
  onMessagesChange
}) {
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
  const [chatResetKey, setChatResetKey] = useState(0);
  const apiPath = `${apiBaseURL}${apiBasePath}/chat`;
  const handleNewChat = useCallback(() => {
    if (!conversationId) {
      setChatResetKey((prev) => prev + 1);
    }
  }, [conversationId]);
  if (layout === "widget") {
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: cn(
          "flex flex-col w-full border rounded-xl overflow-hidden bg-background shadow-sm",
          className
        ),
        style: { height: widgetHeight },
        children: /* @__PURE__ */ jsx(
          ChatInterface,
          {
            apiPath,
            id: conversationId,
            variant: "widget",
            initialMessages,
            onMessagesChange
          }
        )
      }
    );
  }
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "flex h-[calc(100vh-4rem)] w-full overflow-hidden",
        className
      ),
      "data-testid": "chat-layout",
      children: [
        showSidebar && /* @__PURE__ */ jsx(
          "div",
          {
            className: cn(
              "hidden md:flex transition-all duration-300 ease-in-out",
              sidebarOpen ? "w-72" : "w-0"
            ),
            children: sidebarOpen && /* @__PURE__ */ jsx(
              ChatSidebar,
              {
                currentConversationId: conversationId,
                onNewChat: handleNewChat,
                className: "w-72"
              }
            )
          }
        ),
        /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: [
            showSidebar && /* @__PURE__ */ jsxs(Sheet, { open: mobileSidebarOpen, onOpenChange: setMobileSidebarOpen, children: [
              /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                Button,
                {
                  variant: "ghost",
                  size: "icon",
                  className: "md:hidden",
                  "aria-label": "Open menu",
                  children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
                }
              ) }),
              /* @__PURE__ */ jsx(SheetContent, { side: "left", className: "p-0 w-72", children: /* @__PURE__ */ jsx(
                ChatSidebar,
                {
                  currentConversationId: conversationId,
                  onNewChat: () => {
                    handleNewChat();
                    setMobileSidebarOpen(false);
                  }
                }
              ) })
            ] }),
            showSidebar && /* @__PURE__ */ jsx(
              Button,
              {
                variant: "ghost",
                size: "icon",
                className: "hidden md:flex",
                onClick: () => setSidebarOpen(!sidebarOpen),
                "aria-label": sidebarOpen ? "Close sidebar" : "Open sidebar",
                children: sidebarOpen ? /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(PanelLeft, { className: "h-5 w-5" })
              }
            ),
            /* @__PURE__ */ jsx("div", { className: "flex-1" })
          ] }),
          /* @__PURE__ */ jsx(
            ChatInterface,
            {
              apiPath,
              id: conversationId,
              variant: "full",
              initialMessages,
              onMessagesChange
            },
            `chat-${conversationId ?? "new"}-${chatResetKey}`
          )
        ] })
      ]
    }
  );
}

export { ChatLayout };
