import { html } from "lit";
import type { TemplateResult } from "lit";

export function esc(s: unknown): string {
	const d = document.createElement("div");
	d.textContent = String(s ?? "-");
	return d.innerHTML;
}

export function formatBytes(n: number | null | undefined): string {
	if (n == null || n === 0) return "0 B";
	const units = ["B", "KB", "MB", "GB", "TB"];
	let i = Math.floor(Math.log(n) / Math.log(1024));
	if (i >= units.length) i = units.length - 1;
	return (n / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0) + " " + units[i]!;
}

export function formatNumber(n: number | null | undefined): string {
	if (n == null) return "-";
	return Number(n).toLocaleString();
}

export function timeAgo(iso: string | null | undefined): string {
	if (!iso) return "-";
	let diff = Date.now() - new Date(iso + "Z").getTime();
	if (diff < 0) diff = 0;
	if (diff < 60000) return Math.floor(diff / 1000) + "s ago";
	if (diff < 3600000) return Math.floor(diff / 60000) + "m ago";
	if (diff < 86400000) return Math.floor(diff / 3600000) + "h ago";
	return Math.floor(diff / 86400000) + "d ago";
}

export function statusDot(status: string): TemplateResult {
	const cls =
		status === "synced" ? "dot-synced"
		: status === "syncing" ? "dot-syncing"
		: status === "error" ? "dot-error"
		: status === "offered" ? "dot-offered"
		: "dot-pending";
	return html`<span class="dot ${cls}"></span>${status}`;
}

export function sourceBadge(sourceType: string): TemplateResult {
	const cls = "source-" + (sourceType || "pds");
	return html`<span class="source-badge ${cls}">${sourceType || "pds"}</span>`;
}

export function triggerBadge(trigger: string): TemplateResult {
	const t = trigger || "unknown";
	const cls = "trigger-" + t;
	return html`<span class="trigger-badge ${cls}">${t}</span>`;
}

export function didSourceBadge(source: string): TemplateResult {
	const cls = "did-source did-source-" + (source || "unknown");
	return html`<span class="${cls}">${source || "unknown"}</span>`;
}

export function renderAccountCell(did: string, profile: any): TemplateResult {
	if (!profile) return html`${did}`;
	const initial = ((profile.handle || did)[0] as string).toUpperCase();
	return html`
		${profile.avatar
			? html`<img src="${profile.avatar}" alt="" style="width:20px;height:20px;border-radius:50%;vertical-align:middle;margin-right:0.3rem">`
			: html`<span style="display:inline-block;width:20px;height:20px;border-radius:50%;background:var(--acct-placeholder-bg);text-align:center;line-height:20px;font-size:0.6rem;vertical-align:middle;margin-right:0.3rem">${initial}</span>`}
		<strong style="font-size:0.78rem">${profile.displayName || profile.handle}</strong>
		<span style="color:var(--muted);font-size:0.72rem">@${profile.handle}</span>
		<div style="color:var(--faint);font-size:0.65rem;margin-top:1px">${did}</div>
	`;
}