// @bun
// src/components/templates/messaging/MessageThread.tsx
import { useMutation, useQuery } from "@apollo/client/react";
import { gql } from "@apollo/client";
import { useEffect, useRef } from "react";
import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
import { jsx, jsxs } from "react/jsx-runtime";
"use client";
var MESSAGES_QUERY = gql`
  query Messages($conversationId: ID!) {
    messages(conversationId: $conversationId, limit: 50) {
      id
      content
      senderId
      senderName
      createdAt
      status
    }
  }
`;
var SET_READ = gql`
  mutation SetMessagesRead($conversationId: ID!, $userId: String!) {
    setMessagesRead(conversationId: $conversationId, userId: $userId)
  }
`;
function MessageThread({
  conversationId,
  viewerId = "local-user"
}) {
  const scrollRef = useRef(null);
  const enabled = Boolean(conversationId);
  const { data, loading } = useQuery(MESSAGES_QUERY, {
    variables: { conversationId },
    skip: !enabled,
    fetchPolicy: "cache-and-network"
  });
  const [setRead] = useMutation(SET_READ);
  const { projectId } = useTemplateRuntime();
  const messages = data?.messages ?? [];
  useEffect(() => {
    if (!enabled || !conversationId)
      return;
    setRead({ variables: { conversationId, userId: viewerId } }).catch(() => {});
  }, [conversationId, enabled, setRead, viewerId]);
  useEffect(() => {
    const container = scrollRef.current;
    if (!container)
      return;
    container.scrollTop = container.scrollHeight;
  }, [messages]);
  if (!conversationId) {
    return /* @__PURE__ */ jsx("div", {
      className: "border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed",
      children: /* @__PURE__ */ jsx("p", {
        className: "text-muted-foreground text-sm",
        children: "Select a conversation"
      })
    });
  }
  return /* @__PURE__ */ jsx("div", {
    className: "border-border bg-card flex flex-1 flex-col rounded-2xl border",
    children: /* @__PURE__ */ jsx("div", {
      ref: scrollRef,
      className: "flex-1 space-y-3 overflow-y-auto p-4",
      children: loading ? /* @__PURE__ */ jsx("p", {
        className: "text-muted-foreground text-center text-sm",
        children: "Loading\u2026"
      }) : messages.slice().reverse().map((message) => /* @__PURE__ */ jsxs("div", {
        className: `flex flex-col ${message.senderId === viewerId ? "items-end" : "items-start"}`,
        children: [
          /* @__PURE__ */ jsx("div", {
            className: `max-w-xs rounded-2xl px-3 py-2 text-sm ${message.senderId === viewerId ? "bg-violet-500 text-white" : "bg-muted text-foreground"}`,
            children: /* @__PURE__ */ jsx("p", {
              children: message.content
            })
          }),
          /* @__PURE__ */ jsxs("span", {
            className: "text-muted-foreground mt-1 text-xs",
            children: [
              message.senderName || message.senderId,
              " \xB7",
              " ",
              new Date(message.createdAt).toLocaleTimeString([], {
                hour: "2-digit",
                minute: "2-digit"
              })
            ]
          })
        ]
      }, message.id))
    })
  });
}

// src/components/templates/messaging/MessageComposer.tsx
import { useState } from "react";
import { useMutation as useMutation2 } from "@apollo/client/react";
import { gql as gql2 } from "@apollo/client";
import { Send } from "lucide-react";
import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
"use client";
var SEND_MESSAGE = gql2`
  mutation SendMessage($input: SendMessageInput!) {
    sendMessage(input: $input) {
      id
    }
  }
`;
function MessageComposer({
  conversationId,
  viewerId = "local-user",
  viewerName = "You"
}) {
  const { projectId } = useTemplateRuntime2();
  const [content, setContent] = useState("");
  const [sendMessage, { loading }] = useMutation2(SEND_MESSAGE);
  const handleSubmit = async (event) => {
    event.preventDefault();
    if (!conversationId || !content.trim())
      return;
    await sendMessage({
      variables: {
        input: {
          projectId,
          conversationId,
          senderId: viewerId,
          senderName: viewerName,
          content: content.trim()
        }
      },
      refetchQueries: [
        {
          query: MESSAGES_QUERY,
          variables: { conversationId }
        }
      ]
    });
    setContent("");
  };
  return /* @__PURE__ */ jsxs2("form", {
    onSubmit: handleSubmit,
    className: "border-border bg-card mt-3 flex items-center gap-2 rounded-2xl border px-4 py-3",
    children: [
      /* @__PURE__ */ jsx2("input", {
        type: "text",
        className: "text-foreground flex-1 bg-transparent text-sm outline-none",
        placeholder: conversationId ? "Type a message\u2026" : "Select a conversation to start",
        disabled: !conversationId || loading,
        value: content,
        onChange: (event) => setContent(event.target.value)
      }),
      /* @__PURE__ */ jsxs2("button", {
        type: "submit",
        className: "btn-primary inline-flex items-center gap-1 text-sm",
        disabled: !conversationId || loading || !content.trim(),
        children: [
          /* @__PURE__ */ jsx2(Send, {
            className: "h-4 w-4"
          }),
          "Send"
        ]
      })
    ]
  });
}
export {
  MessageComposer
};
