/**
 * rSocials applet definitions — Post Draft.
 */

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

const postDraft: AppletDefinition = {
	id: "post-draft",
	label: "Post Draft",
	icon: "✏️",
	accentColor: "#db2777",
	ports: [
		{ name: "content-in", type: "text", direction: "input" },
		{ name: "post-out", type: "json", direction: "output" },
	],
	renderCompact(data: AppletLiveData): string {
		const { snapshot } = data;
		const platform = (snapshot.platform as string) || "social";
		const content = (snapshot.content as string) || "";
		const charCount = content.length;
		const maxChars = (snapshot.maxChars as number) || 280;
		const pct = Math.min(100, Math.round((charCount / maxChars) * 100));
		const countColor = pct > 90 ? "#ef4444" : pct > 70 ? "#f59e0b" : "#94a3b8";

		return `
			<div>
				<div style="font-size:11px;color:#94a3b8;margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px">${platform}</div>
				<div style="font-size:11px;color:#cbd5e1;line-height:1.4;max-height:70px;overflow:hidden">${content || "<em>Empty draft</em>"}</div>
				<div style="display:flex;justify-content:space-between;align-items:center;margin-top:8px">
					<div style="flex:1;background:#334155;border-radius:3px;height:4px;overflow:hidden;margin-right:8px">
						<div style="background:#db2777;width:${pct}%;height:100%;border-radius:3px"></div>
					</div>
					<span style="font-size:9px;color:${countColor}">${charCount}/${maxChars}</span>
				</div>
			</div>
		`;
	},
	onInputReceived(portName, value, ctx) {
		if (portName === "content-in" && typeof value === "string") {
			ctx.emitOutput("post-out", { content: value, platform: "social", timestamp: Date.now() });
		}
	},
};

export const socialsApplets: AppletDefinition[] = [postDraft];