/**
 * rInbox applet definitions — Thread Feed.
 */

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

const threadFeed: AppletDefinition = {
	id: "thread-feed",
	label: "Thread Feed",
	icon: "📬",
	accentColor: "#0e7490",
	ports: [
		{ name: "mailbox-in", type: "string", direction: "input" },
		{ name: "count-out", type: "number", direction: "output" },
	],
	renderCompact(data: AppletLiveData): string {
		const { snapshot } = data;
		const total = (snapshot.total as number) || 0;
		const unread = (snapshot.unread as number) || 0;
		const latest = (snapshot.latestSubject as string) || "No messages";

		return `
			<div>
				<div style="display:flex;justify-content:space-between;margin-bottom:8px">
					<span style="font-size:11px;color:#94a3b8">Total</span>
					<span style="font-size:13px;font-weight:600">${total}</span>
				</div>
				<div style="display:flex;justify-content:space-between;margin-bottom:8px">
					<span style="font-size:11px;color:#94a3b8">Unread</span>
					<span style="font-size:13px;font-weight:700;color:${unread > 0 ? "#ef4444" : "#22c55e"}">${unread}</span>
				</div>
				<div style="font-size:10px;color:#94a3b8;border-top:1px solid #334155;padding-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${latest}</div>
			</div>
		`;
	},
	onInputReceived(portName, value, ctx) {
		if (portName === "mailbox-in" && typeof value === "string") {
			ctx.emitOutput("count-out", 0);
		}
	},
};

export const inboxApplets: AppletDefinition[] = [threadFeed];