import { n as head_default, o as vue_exports, r as link_default, s as router } from "../ssr.js";
import { n as server_renderer_exports, t } from "./i18n-CXLOYfyq.js";
import { n as Avatar_default, t as AppLayout_default } from "./AppLayout-Cibl7rtt.js";
//#region resources/js/Pages/Messages/Index.vue?vue&type=script&setup=true&lang.ts
var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue_exports.defineComponent)({
	__name: "Index",
	__ssrInlineRender: true,
	props: { conversations: {} },
	setup(__props) {
		const composing = (0, vue_exports.ref)(false);
		const query = (0, vue_exports.ref)("");
		const results = (0, vue_exports.ref)([]);
		const selected = (0, vue_exports.ref)([]);
		const groupTitle = (0, vue_exports.ref)("");
		let t$1 = null;
		(0, vue_exports.watch)(query, (q) => {
			clearTimeout(t$1);
			if (!q.trim()) {
				results.value = [];
				return;
			}
			t$1 = setTimeout(async () => {
				try {
					const res = await fetch(`/users/search?q=${encodeURIComponent(q)}`, {
						headers: { Accept: "application/json" },
						credentials: "same-origin"
					});
					results.value = res.ok ? await res.json() : [];
				} catch {
					results.value = [];
				}
			}, 200);
		});
		function addPerson(u) {
			if (!selected.value.some((s) => s.uid === u.uid)) selected.value.push(u);
			query.value = "";
			results.value = [];
		}
		function removePerson(uid) {
			selected.value = selected.value.filter((s) => s.uid !== uid);
		}
		function start() {
			if (!selected.value.length) return;
			router.post("/messages", {
				user_ids: selected.value.map((s) => s.uid),
				title: selected.value.length > 1 ? groupTitle.value.trim() || null : null
			}, { preserveScroll: true });
		}
		return (_ctx, _push, _parent, _attrs) => {
			_push(`<!--[-->`);
			_push((0, server_renderer_exports.ssrRenderComponent)((0, vue_exports.unref)(head_default), { title: (0, vue_exports.unref)(t)("Messages") }, null, _parent));
			_push((0, server_renderer_exports.ssrRenderComponent)(AppLayout_default, null, {
				default: (0, vue_exports.withCtx)((_, _push, _parent, _scopeId) => {
					if (_push) {
						_push(`<div class="mx-auto max-w-[760px]"${_scopeId}><div class="mb-5 flex items-center justify-between"${_scopeId}><h1 class="text-2xl font-extrabold tracking-tight"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Messages"))}</h1><button type="button" class="rounded-c bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("New message"))}</button></div>`);
						if (composing.value) {
							_push(`<div class="mb-4 rounded-c border border-line bg-surface p-3"${_scopeId}>`);
							if (selected.value.length) {
								_push(`<div class="mb-2 flex flex-wrap gap-2"${_scopeId}><!--[-->`);
								(0, server_renderer_exports.ssrRenderList)(selected.value, (s) => {
									_push(`<span class="inline-flex items-center gap-1.5 rounded-full bg-primary/15 py-1 pl-1 pr-2 text-sm font-semibold text-primary"${_scopeId}>`);
									_push((0, server_renderer_exports.ssrRenderComponent)(Avatar_default, {
										avatar: s,
										size: 22
									}, null, _parent, _scopeId));
									_push(` ${(0, server_renderer_exports.ssrInterpolate)(s.name)} <button type="button" class="ml-0.5 text-primary/70 hover:text-primary"${(0, server_renderer_exports.ssrRenderAttr)("aria-label", (0, vue_exports.unref)(t)("Remove"))}${_scopeId}>✕</button></span>`);
								});
								_push(`<!--]--></div>`);
							} else _push(`<!---->`);
							_push(`<input${(0, server_renderer_exports.ssrRenderAttr)("value", query.value)} type="text"${(0, server_renderer_exports.ssrRenderAttr)("placeholder", (0, vue_exports.unref)(t)("Add people by name…"))} class="w-full rounded-lg border-line bg-surface-2 text-ink placeholder:text-ink-muted focus:border-primary focus:ring-primary"${_scopeId}>`);
							if (results.value.length) {
								_push(`<div class="mt-2 divide-y divide-line/60"${_scopeId}><!--[-->`);
								(0, server_renderer_exports.ssrRenderList)(results.value, (u) => {
									_push(`<button type="button" class="flex w-full items-center gap-2.5 px-1 py-2 text-left hover:bg-surface-2"${_scopeId}>`);
									_push((0, server_renderer_exports.ssrRenderComponent)(Avatar_default, {
										avatar: u,
										size: 30
									}, null, _parent, _scopeId));
									_push(`<span class="text-sm font-semibold text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(u.name)}</span><span class="ml-auto text-xs font-semibold text-primary"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Add"))}</span></button>`);
								});
								_push(`<!--]--></div>`);
							} else _push(`<!---->`);
							if (selected.value.length > 1) _push(`<input${(0, server_renderer_exports.ssrRenderAttr)("value", groupTitle.value)} type="text"${(0, server_renderer_exports.ssrRenderAttr)("placeholder", (0, vue_exports.unref)(t)("Group name (optional)"))} class="mt-2 w-full rounded-lg border-line bg-surface-2 text-ink placeholder:text-ink-muted focus:border-primary focus:ring-primary"${_scopeId}>`);
							else _push(`<!---->`);
							_push(`<div class="mt-3 flex items-center gap-2"${_scopeId}><button type="button"${(0, server_renderer_exports.ssrIncludeBooleanAttr)(!selected.value.length) ? " disabled" : ""} class="rounded-c bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 disabled:opacity-50"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(selected.value.length > 1 ? (0, vue_exports.unref)(t)("Start group ({n})", { n: selected.value.length }) : (0, vue_exports.unref)(t)("Start conversation"))}</button><span class="text-xs text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Add more than one person to start a group."))}</span></div></div>`);
						} else _push(`<!---->`);
						_push(`<div class="overflow-hidden rounded-c border border-line bg-surface"${_scopeId}><!--[-->`);
						(0, server_renderer_exports.ssrRenderList)(__props.conversations, (c) => {
							_push((0, server_renderer_exports.ssrRenderComponent)((0, vue_exports.unref)(link_default), {
								key: c.id,
								href: `/messages/${c.id}`,
								class: "flex items-center gap-3 border-b border-line/60 px-4 py-3 last:border-0 hover:bg-surface-2"
							}, {
								default: (0, vue_exports.withCtx)((_, _push, _parent, _scopeId) => {
									if (_push) {
										_push((0, server_renderer_exports.ssrRenderComponent)(Avatar_default, {
											avatar: c.avatar,
											size: 44
										}, null, _parent, _scopeId));
										_push(`<div class="min-w-0 flex-1"${_scopeId}><div class="flex items-center gap-2"${_scopeId}><span class="truncate font-bold text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(c.title)}</span><span class="ml-auto shrink-0 text-xs text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(c.time)}</span></div><div class="${(0, server_renderer_exports.ssrRenderClass)([c.unread ? "font-semibold text-ink" : "text-ink-muted", "truncate text-sm"])}"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(c.excerpt)}</div></div>`);
										if (c.unread) _push(`<span class="h-2.5 w-2.5 shrink-0 rounded-full bg-primary"${_scopeId}></span>`);
										else _push(`<!---->`);
									} else return [
										(0, vue_exports.createVNode)(Avatar_default, {
											avatar: c.avatar,
											size: 44
										}, null, 8, ["avatar"]),
										(0, vue_exports.createVNode)("div", { class: "min-w-0 flex-1" }, [(0, vue_exports.createVNode)("div", { class: "flex items-center gap-2" }, [(0, vue_exports.createVNode)("span", { class: "truncate font-bold text-ink" }, (0, vue_exports.toDisplayString)(c.title), 1), (0, vue_exports.createVNode)("span", { class: "ml-auto shrink-0 text-xs text-ink-muted" }, (0, vue_exports.toDisplayString)(c.time), 1)]), (0, vue_exports.createVNode)("div", { class: ["truncate text-sm", c.unread ? "font-semibold text-ink" : "text-ink-muted"] }, (0, vue_exports.toDisplayString)(c.excerpt), 3)]),
										c.unread ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("span", {
											key: 0,
											class: "h-2.5 w-2.5 shrink-0 rounded-full bg-primary"
										})) : (0, vue_exports.createCommentVNode)("", true)
									];
								}),
								_: 2
							}, _parent, _scopeId));
						});
						_push(`<!--]-->`);
						if (!__props.conversations.length) _push(`<p class="px-4 py-16 text-center text-sm text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("No conversations yet. Start one with “New message”."))}</p>`);
						else _push(`<!---->`);
						_push(`</div></div>`);
					} else return [(0, vue_exports.createVNode)("div", { class: "mx-auto max-w-[760px]" }, [
						(0, vue_exports.createVNode)("div", { class: "mb-5 flex items-center justify-between" }, [(0, vue_exports.createVNode)("h1", { class: "text-2xl font-extrabold tracking-tight" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Messages")), 1), (0, vue_exports.createVNode)("button", {
							type: "button",
							class: "rounded-c bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600",
							onClick: ($event) => composing.value = !composing.value
						}, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("New message")), 9, ["onClick"])]),
						composing.value ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("div", {
							key: 0,
							class: "mb-4 rounded-c border border-line bg-surface p-3"
						}, [
							selected.value.length ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("div", {
								key: 0,
								class: "mb-2 flex flex-wrap gap-2"
							}, [((0, vue_exports.openBlock)(true), (0, vue_exports.createBlock)(vue_exports.Fragment, null, (0, vue_exports.renderList)(selected.value, (s) => {
								return (0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("span", {
									key: s.uid,
									class: "inline-flex items-center gap-1.5 rounded-full bg-primary/15 py-1 pl-1 pr-2 text-sm font-semibold text-primary"
								}, [
									(0, vue_exports.createVNode)(Avatar_default, {
										avatar: s,
										size: 22
									}, null, 8, ["avatar"]),
									(0, vue_exports.createTextVNode)(" " + (0, vue_exports.toDisplayString)(s.name) + " ", 1),
									(0, vue_exports.createVNode)("button", {
										type: "button",
										class: "ml-0.5 text-primary/70 hover:text-primary",
										onClick: ($event) => removePerson(s.uid),
										"aria-label": (0, vue_exports.unref)(t)("Remove")
									}, "✕", 8, ["onClick", "aria-label"])
								]);
							}), 128))])) : (0, vue_exports.createCommentVNode)("", true),
							(0, vue_exports.withDirectives)((0, vue_exports.createVNode)("input", {
								"onUpdate:modelValue": ($event) => query.value = $event,
								type: "text",
								placeholder: (0, vue_exports.unref)(t)("Add people by name…"),
								class: "w-full rounded-lg border-line bg-surface-2 text-ink placeholder:text-ink-muted focus:border-primary focus:ring-primary"
							}, null, 8, ["onUpdate:modelValue", "placeholder"]), [[vue_exports.vModelText, query.value]]),
							results.value.length ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("div", {
								key: 1,
								class: "mt-2 divide-y divide-line/60"
							}, [((0, vue_exports.openBlock)(true), (0, vue_exports.createBlock)(vue_exports.Fragment, null, (0, vue_exports.renderList)(results.value, (u) => {
								return (0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("button", {
									key: u.uid,
									type: "button",
									class: "flex w-full items-center gap-2.5 px-1 py-2 text-left hover:bg-surface-2",
									onClick: ($event) => addPerson(u)
								}, [
									(0, vue_exports.createVNode)(Avatar_default, {
										avatar: u,
										size: 30
									}, null, 8, ["avatar"]),
									(0, vue_exports.createVNode)("span", { class: "text-sm font-semibold text-ink" }, (0, vue_exports.toDisplayString)(u.name), 1),
									(0, vue_exports.createVNode)("span", { class: "ml-auto text-xs font-semibold text-primary" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Add")), 1)
								], 8, ["onClick"]);
							}), 128))])) : (0, vue_exports.createCommentVNode)("", true),
							selected.value.length > 1 ? (0, vue_exports.withDirectives)(((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("input", {
								key: 2,
								"onUpdate:modelValue": ($event) => groupTitle.value = $event,
								type: "text",
								placeholder: (0, vue_exports.unref)(t)("Group name (optional)"),
								class: "mt-2 w-full rounded-lg border-line bg-surface-2 text-ink placeholder:text-ink-muted focus:border-primary focus:ring-primary"
							}, null, 8, ["onUpdate:modelValue", "placeholder"])), [[vue_exports.vModelText, groupTitle.value]]) : (0, vue_exports.createCommentVNode)("", true),
							(0, vue_exports.createVNode)("div", { class: "mt-3 flex items-center gap-2" }, [(0, vue_exports.createVNode)("button", {
								type: "button",
								disabled: !selected.value.length,
								onClick: start,
								class: "rounded-c bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 disabled:opacity-50"
							}, (0, vue_exports.toDisplayString)(selected.value.length > 1 ? (0, vue_exports.unref)(t)("Start group ({n})", { n: selected.value.length }) : (0, vue_exports.unref)(t)("Start conversation")), 9, ["disabled"]), (0, vue_exports.createVNode)("span", { class: "text-xs text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Add more than one person to start a group.")), 1)])
						])) : (0, vue_exports.createCommentVNode)("", true),
						(0, vue_exports.createVNode)("div", { class: "overflow-hidden rounded-c border border-line bg-surface" }, [((0, vue_exports.openBlock)(true), (0, vue_exports.createBlock)(vue_exports.Fragment, null, (0, vue_exports.renderList)(__props.conversations, (c) => {
							return (0, vue_exports.openBlock)(), (0, vue_exports.createBlock)((0, vue_exports.unref)(link_default), {
								key: c.id,
								href: `/messages/${c.id}`,
								class: "flex items-center gap-3 border-b border-line/60 px-4 py-3 last:border-0 hover:bg-surface-2"
							}, {
								default: (0, vue_exports.withCtx)(() => [
									(0, vue_exports.createVNode)(Avatar_default, {
										avatar: c.avatar,
										size: 44
									}, null, 8, ["avatar"]),
									(0, vue_exports.createVNode)("div", { class: "min-w-0 flex-1" }, [(0, vue_exports.createVNode)("div", { class: "flex items-center gap-2" }, [(0, vue_exports.createVNode)("span", { class: "truncate font-bold text-ink" }, (0, vue_exports.toDisplayString)(c.title), 1), (0, vue_exports.createVNode)("span", { class: "ml-auto shrink-0 text-xs text-ink-muted" }, (0, vue_exports.toDisplayString)(c.time), 1)]), (0, vue_exports.createVNode)("div", { class: ["truncate text-sm", c.unread ? "font-semibold text-ink" : "text-ink-muted"] }, (0, vue_exports.toDisplayString)(c.excerpt), 3)]),
									c.unread ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("span", {
										key: 0,
										class: "h-2.5 w-2.5 shrink-0 rounded-full bg-primary"
									})) : (0, vue_exports.createCommentVNode)("", true)
								]),
								_: 2
							}, 1032, ["href"]);
						}), 128)), !__props.conversations.length ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("p", {
							key: 0,
							class: "px-4 py-16 text-center text-sm text-ink-muted"
						}, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("No conversations yet. Start one with “New message”.")), 1)) : (0, vue_exports.createCommentVNode)("", true)])
					])];
				}),
				_: 1
			}, _parent));
			_push(`<!--]-->`);
		};
	}
});
//#endregion
//#region resources/js/Pages/Messages/Index.vue
var _sfc_setup = Index_vue_vue_type_script_setup_true_lang_default.setup;
Index_vue_vue_type_script_setup_true_lang_default.setup = (props, ctx) => {
	const ssrContext = (0, vue_exports.useSSRContext)();
	(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("resources/js/Pages/Messages/Index.vue");
	return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
var Index_default = Index_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { Index_default as default };
