// src/components/templates/messaging/ConversationList.tsx
import { useQuery } from "@apollo/client/react";
import { gql } from "@apollo/client";
import { MessageCircle, Users } from "lucide-react";
import { useMemo } from "react";
import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
import { jsx, jsxs } from "react/jsx-runtime";
var CONVERSATIONS_QUERY = gql`
  query Conversations($projectId: ID!) {
    conversations(projectId: $projectId) {
      id
      name
      isGroup
      updatedAt
      participants {
        id
        userId
        displayName
      }
    }
  }
`;
function ConversationList({
  selectedId,
  onSelect
}) {
  const { projectId } = useTemplateRuntime();
  const { data, loading } = useQuery(CONVERSATIONS_QUERY, {
    variables: { projectId },
    fetchPolicy: "cache-and-network"
  });
  const conversations = useMemo(() => data?.conversations ?? [], [data]);
  return /* @__PURE__ */ jsxs("aside", {
    className: "border-border bg-card h-full overflow-y-auto rounded-2xl border",
    children: [
      /* @__PURE__ */ jsxs("header", {
        className: "border-border px -4 flex items-center justify-between border-b px-4 py-3",
        children: [
          /* @__PURE__ */ jsxs("div", {
            children: [
              /* @__PURE__ */ jsx("p", {
                className: "text-sm font-semibold",
                children: "Conversations"
              }),
              /* @__PURE__ */ jsx("p", {
                className: "text-muted-foreground text-xs",
                children: loading ? "Loading…" : `${conversations.length} active`
              })
            ]
          }),
          /* @__PURE__ */ jsx(Users, {
            className: "text-muted-foreground h-4 w-4"
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "divide-border/70 divide-y",
        children: [
          conversations.map((conversation) => {
            const isSelected = selectedId === conversation.id;
            return /* @__PURE__ */ jsxs("button", {
              type: "button",
              className: `flex w-full flex-col items-start gap-1 px-4 py-3 text-left transition ${isSelected ? "text-foreground bg-violet-500/10" : "hover:bg-muted/40"}`,
              onClick: () => onSelect?.(conversation.id),
              children: [
                /* @__PURE__ */ jsxs("div", {
                  className: "flex items-center gap-2",
                  children: [
                    /* @__PURE__ */ jsx(MessageCircle, {
                      className: "text-muted-foreground h-4 w-4"
                    }),
                    /* @__PURE__ */ jsx("span", {
                      className: "text-sm font-medium",
                      children: conversation.name || "Untitled conversation"
                    })
                  ]
                }),
                /* @__PURE__ */ jsx("p", {
                  className: "text-muted-foreground text-xs",
                  children: conversation.participants.map((participant) => participant.displayName || participant.userId).join(" · ")
                })
              ]
            }, conversation.id);
          }),
          !loading && conversations.length === 0 ? /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground p-4 text-center text-xs",
            children: "No conversations yet."
          }) : null
        ]
      })
    ]
  });
}
export {
  ConversationList
};
