/**
 * rWallet applet definitions — Balance Card + Token Balance.
 */

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

const balanceCard: AppletDefinition = {
	id: "balance-card",
	label: "Balance Card",
	icon: "💰",
	accentColor: "#059669",
	ports: [
		{ name: "address-in", type: "string", direction: "input" },
		{ name: "balance-out", type: "number", direction: "output" },
	],
	renderCompact(data: AppletLiveData): string {
		const { snapshot } = data;
		const ethBalance = (snapshot.ethBalance as number) || 0;
		const tokenCount = (snapshot.tokenCount as number) || 0;
		const usdTotal = (snapshot.usdTotal as number) || 0;
		const address = (snapshot.address as string) || "";
		const shortAddr = address ? `${address.slice(0, 6)}…${address.slice(-4)}` : "No address";

		return `
			<div>
				<div style="font-size:11px;color:#94a3b8;margin-bottom:8px;font-family:monospace">${shortAddr}</div>
				<div style="display:flex;justify-content:space-between;margin-bottom:6px">
					<span style="font-size:11px;color:#94a3b8">ETH</span>
					<span style="font-size:13px;font-weight:600">${ethBalance.toFixed(4)}</span>
				</div>
				<div style="display:flex;justify-content:space-between;margin-bottom:8px">
					<span style="font-size:11px;color:#94a3b8">Tokens</span>
					<span style="font-size:13px;font-weight:600">${tokenCount}</span>
				</div>
				<div style="border-top:1px solid #334155;padding-top:6px;text-align:right">
					<span style="font-size:16px;font-weight:700;color:#22c55e">$${usdTotal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
				</div>
			</div>
		`;
	},
	onInputReceived(portName, value, ctx) {
		if (portName === "address-in" && typeof value === "string") {
			// Address received — in a real implementation this would trigger a balance fetch
			ctx.emitOutput("balance-out", 0);
		}
	},
};

const tokenBalance: AppletDefinition = {
	id: "token-balance",
	label: "Token Balance",
	icon: "🪙",
	accentColor: "#7c3aed",
	ports: [
		{ name: "token-in", type: "string", direction: "input" },
		{ name: "amount-out", type: "number", direction: "output" },
	],
	renderCompact(data: AppletLiveData): string {
		const { snapshot } = data;
		const tokenName = (snapshot.tokenName as string) || "Token";
		const symbol = (snapshot.symbol as string) || "???";
		const balance = (snapshot.balance as number) || 0;
		const usdValue = (snapshot.usdValue as number) || 0;

		return `
			<div style="text-align:center">
				<div style="font-size:28px;margin-bottom:4px">🪙</div>
				<div style="font-size:13px;font-weight:600;margin-bottom:2px">${tokenName}</div>
				<div style="font-size:11px;color:#94a3b8;margin-bottom:8px">${symbol}</div>
				<div style="font-size:18px;font-weight:700">${balance.toLocaleString(undefined, { maximumFractionDigits: 6 })}</div>
				<div style="font-size:11px;color:#94a3b8;margin-top:2px">≈ $${usdValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
			</div>
		`;
	},
	onInputReceived(portName, value, ctx) {
		if (portName === "token-in" && typeof value === "string") {
			ctx.emitOutput("amount-out", 0);
		}
	},
};

export const walletApplets: AppletDefinition[] = [balanceCard, tokenBalance];
