/**
 * rChats applet definitions — Unread Count.
 */

import type { AppletDefinition, AppletLiveData } from "../../shared/applet-types";

const unreadCount: AppletDefinition = {
	id: "unread-count",
	label: "Unread Count",
	icon: "💬",
	accentColor: "#0891b2",
	ports: [
		{ name: "channel-in", type: "string", direction: "input" },
		{ name: "unread-out", type: "number", direction: "output" },
	],
	renderCompact(data: AppletLiveData): string {
		const { snapshot } = data;
		const channel = (snapshot.channel as string) || "general";
		const unread = (snapshot.unread as number) || 0;
		const badgeColor = unread > 0 ? "#ef4444" : "#334155";

		return `
			<div style="text-align:center">
				<div style="font-size:11px;color:#94a3b8;margin-bottom:6px">#${channel}</div>
				<div style="display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:${badgeColor};font-size:20px;font-weight:700;color:white">${unread}</div>
				<div style="font-size:10px;color:#94a3b8;margin-top:6px">unread messages</div>
			</div>
		`;
	},
	onInputReceived(portName, value, ctx) {
		if (portName === "channel-in" && typeof value === "string") {
			ctx.emitOutput("unread-out", 0);
		}
	},
};

export const chatsApplets: AppletDefinition[] = [unreadCount];