pi-ext

/**
 * The Bureau of Tokens counter: one continuous scene that frames the whole
 * `setup-token` visit, from filing the application to the stamp. A loving
 * parody of Claude Code's own over-the-top welcome animation, in Anthropic
 * brand colors and three width tiers.
 */
import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
import {
	truncateToWidth,
	visibleWidth,
	wrapTextWithAnsi,
} from "@earendil-works/pi-tui";

export const SCENE_TICK_MS = 70;

export type SceneLayout = "full" | "compact" | "tiny";
export type ScenePhase = "signin" | "exchanging" | "approved" | "denied";
export type ClipboardState = "idle" | "copied" | "failed";

export type SceneState = {
	/** Ticks since the scene opened; drives the intro animation and twinkles. */
	tick: number;
	/** Ticks since the current phase began; drives the stamp and verdict. */
	phaseTick: number;
	phase: ScenePhase;
	/** Pre-rendered lines of the code field, empty once it is gone. */
	input: string[];
	hyperlinks: boolean;
	url: string;
	clipboard: ClipboardState;
	hints: string;
	token?: string;
	tokenCopied?: boolean;
	expiresInSeconds?: number;
	error?: string;
	now?: number;
};

const FULL_MIN_WIDTH = 62;
const COMPACT_MIN_WIDTH = 42;

export function sceneLayout(width: number): SceneLayout {
	if (width >= FULL_MIN_WIDTH) return "full";
	if (width >= COMPACT_MIN_WIDTH) return "compact";
	return "tiny";
}

/** Anthropic brand ramp: book cloth, Claude orange, kraft, manilla, cloud. */
const BRAND_RAMP: Array<[number, number, number]> = [
	[204, 120, 92],
	[217, 119, 87],
	[212, 162, 127],
	[235, 219, 188],
	[240, 240, 235],
];

/** Theme-color stand-ins for terminals without true color, same order as the ramp. */
const RAMP_FALLBACK: ThemeColor[] = [
	"error",
	"accent",
	"warning",
	"muted",
	"text",
];

const SHADES = ["░", "▒", "▓", "█"];
const CARET = "▎";
const TWINKLE = ["✳", "✶", "✷", "✻", "·"];
const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];

const MASCOTS: Record<SceneLayout, string[]> = {
	full: [
		"           ▄▄▄███████▄▄▄",
		"       ▄▄██▀▀▀       ▀▀▀██▄▄",
		"     ▄█▀▀   ▄▄███████▄▄   ▀▀█▄",
		"    ██▀   ▄█▀▀       ▀▀█▄   ▀██",
		"   ██    █▀   ▄▄███▄▄   ▀█    ██",
		"   ██   █▌   █▀     ▀█   ▐█   ██",
		"   ██    █▄   ▀▀███▀▀   ▄█    ██",
		" ▗▖ ▀█▄   ▀▀█▄▄     ▄▄█▀▀   ▄█▀",
		" ▐▌●  ▀▀█▄▄   ▀▀█████▀▀   ▄▄█▀",
		" ▝▚▄▄▄▄▄▄▀▀███▄▄▄▄▄▄▄▄███▀▀",
	],
	compact: [
		"       ▄▄█████▄▄",
		"    ▄██▀▀     ▀▀██▄",
		"  ▄█▀   ▄▄███▄▄   ▀█▄",
		" ██    █▀     ▀█    ██",
		" ██    █▄  ▀  ▄█    ██",
		"▗▖ ▀█▄   ▀▀███▀▀  ▄█▀",
		"▐▌●  ▀▀██▄▄   ▄▄██▀▀",
		"▝▚▄▄▄▄▄▄▄▀▀█████▀▀",
	],
	tiny: [
		"    ▄▄███▄▄",
		"  ▄█▀ ▄▄▄ ▀█▄",
		" ██  █▀ ▀█  ██",
		"▗▖▀█▄ ▀▀▀ ▄█▀",
		"▐▌●  ▀▀█▀▀",
	],
};

/** Reveal timing stays width independent so hints and skipping behave the same everywhere. */
const MASCOT_REVEAL_TICKS = Math.max(
	...Object.values(MASCOTS).map((mascot) => mascot.length),
);

const SPARKLES: Record<SceneLayout, Array<{ row: number; col: number }>> = {
	full: [
		{ row: 0, col: 33 },
		{ row: 2, col: 1 },
		{ row: 1, col: 32 },
		{ row: 4, col: 34 },
		{ row: 3, col: 0 },
		{ row: 6, col: 34 },
		{ row: 8, col: 32 },
		{ row: 5, col: 0 },
	],
	compact: [
		{ row: 0, col: 23 },
		{ row: 2, col: 0 },
		{ row: 4, col: 24 },
		{ row: 6, col: 22 },
		{ row: 1, col: 1 },
	],
	tiny: [
		{ row: 0, col: 15 },
		{ row: 2, col: 0 },
		{ row: 4, col: 15 },
	],
};

const TITLES: Record<SceneLayout, string> = {
	full: "✻ KLAUS · BUREAU OF TOKENS · WINDOW 08/15 ✻",
	compact: "✻ KLAUS · BUREAU OF TOKENS ✻",
	tiny: "✻ KLAUS · TOKENS ✻",
};

const LINK_LABEL = "Open the Claude sign-in page";

const STAMPS: Record<SceneLayout, Record<"approved" | "denied", string[]>> = {
	full: {
		approved: [
			"┏━━━━━━━━━━━━━━━━━━━━━┓",
			"┃  ✔ A P P R O V E D  ┃",
			"┗━━━━━━━━━━━━━━━━━━━━━┛",
		],
		denied: [
			"┏━━━━━━━━━━━━━━━━━┓",
			"┃  ✗ D E N I E D  ┃",
			"┗━━━━━━━━━━━━━━━━━┛",
		],
	},
	compact: {
		approved: ["┏━━━━━━━━━━━━━━┓", "┃  ✔ APPROVED  ┃", "┗━━━━━━━━━━━━━━┛"],
		denied: ["┏━━━━━━━━━━━━┓", "┃  ✗ DENIED  ┃", "┗━━━━━━━━━━━━┛"],
	},
	tiny: {
		approved: ["┏━━━━━━━━━━━━┓", "┃ ✔ APPROVED ┃", "┗━━━━━━━━━━━━┛"],
		denied: ["┏━━━━━━━━━━┓", "┃ ✗ DENIED ┃", "┗━━━━━━━━━━┛"],
	},
};

const TITLE_START = MASCOT_REVEAL_TICKS + 1;
const FORM_START = TITLE_START + 6;
const FORM_TICKS_PER_ROW = 2;
/** Ticks until the whole intro has settled: mascot, title, and every form row. */
export const SCENE_INTRO_TICKS = FORM_START + 6 * FORM_TICKS_PER_ROW + 2;
const STAMP_TICKS = 4;
const VERDICT_TICKS_PER_LINE = 4;

type FormRow = { icon: string; label: string; value: string };

function statusValue(state: SceneState, layout: SceneLayout): string {
	const spin = SPINNER[state.tick % SPINNER.length];
	const pick = (full: string, compact: string, tiny: string) =>
		layout === "full" ? full : layout === "compact" ? compact : tiny;
	switch (state.phase) {
		case "signin":
			return `${pick(
				"at the window, waiting for your code",
				"waiting for your code",
				"waiting",
			)} ${spin}`;
		case "exchanging":
			return `${pick("consulting the archive", "consulting the archive", "checking")} ${spin}`;
		case "approved":
			return pick(
				"stamped, filed, and forgotten",
				"stamped and filed",
				"stamped",
			);
		case "denied":
			return pick(
				"rejected at the window",
				"rejected at the window",
				"rejected",
			);
	}
}

function formRows(state: SceneState, layout: SceneLayout): FormRow[] {
	const compact = layout !== "full";
	const rows: FormRow[] = [
		{
			icon: "✦",
			label: compact ? "TOKEN" : "APPLICATION",
			value: compact ? "one (1), personal" : "one (1) personal token",
		},
		{ icon: "◆", label: compact ? "FOR" : "FILED BY", value: "you" },
		{
			icon: "✻",
			label: "CLERK",
			value: compact ? "Klaus, since 1961" : "Klaus (in office since 1961)",
		},
		{
			icon: "✧",
			label: compact ? "FEE" : "PROCESSING FEE",
			value: "your patience",
		},
	];
	if (state.phase === "approved" && state.expiresInSeconds !== undefined) {
		const until = new Date(
			(state.now ?? Date.now()) + state.expiresInSeconds * 1000,
		)
			.toISOString()
			.slice(0, 10);
		rows.push({
			icon: "✷",
			label: compact ? "VALID" : "VALID UNTIL",
			value: until,
		});
	}
	rows.push({
		icon: "◈",
		label: "STATUS",
		value: statusValue(state, layout),
	});
	return rows;
}

export function sceneFormLines(
	state: SceneState,
	layout: SceneLayout = "full",
): string[] {
	const rows = formRows(state, layout);
	if (layout === "tiny")
		return rows.map((row) => `${row.icon} ${row.label}: ${row.value}`);
	const labelWidth = Math.max(...rows.map((row) => row.label.length));
	return rows.map(
		(row) =>
			`${row.icon} ${row.label} ${".".repeat(labelWidth - row.label.length + 3)} ${row.value}`,
	);
}

export function sceneVerdictLines(
	state: SceneState,
	layout: SceneLayout = "full",
): string[] {
	if (state.phase === "denied")
		return [`✗ ${state.error ?? "The window closed without a reason."}`];
	if (state.phase !== "approved") return [];
	const quip =
		layout === "full"
			? "⁂ Anthropic calls it safety. Klaus calls it paperwork."
			: "⁂ Klaus calls it paperwork.";
	return state.tokenCopied
		? [quip, "✔ Token in clipboard."]
		: [
				quip,
				layout === "full"
					? "⚠ No clipboard here. Anthropic is everywhere, a clipboard is not."
					: "⚠ No clipboard. Copy it yourself:",
				state.token ?? "",
			];
}

/** Ticks the verdict needs after a phase change, used to decide when a skip is complete. */
export function sceneOutcomeTicks(state: SceneState): number {
	if (state.phase !== "approved" && state.phase !== "denied") return 0;
	return (
		STAMP_TICKS +
		sceneVerdictLines({ ...state }, "full").length * VERDICT_TICKS_PER_LINE
	);
}

type Painter = {
	sweep(text: string, phase: number): string;
	ramp(text: string, step: number): string;
	color(color: ThemeColor, text: string): string;
};

function painter(theme: Theme): Painter {
	const truecolor = theme.getColorMode() === "truecolor";
	const ramp = (text: string, step: number) => {
		const index =
			((Math.round(step) % BRAND_RAMP.length) + BRAND_RAMP.length) %
			BRAND_RAMP.length;
		if (!truecolor) return theme.fg(RAMP_FALLBACK[index], text);
		const [r, g, b] = BRAND_RAMP[index];
		return `\x1b[38;2;${r};${g};${b}m${text}\x1b[39m`;
	};
	return {
		ramp,
		sweep(text, phase) {
			let out = "";
			let index = 0;
			for (const character of text) {
				if (character === " ") {
					out += character;
					index++;
					continue;
				}
				out += ramp(character, index * 0.5 + phase * 0.45);
				index++;
			}
			return out;
		},
		color: (color, text) => theme.fg(color, text),
	};
}

/** Mascot rows materialize from ░ through █. */
function mascotRow(line: string, age: number): string {
	if (age >= SHADES.length - 1) return line;
	const shade = SHADES[Math.max(age, 0)];
	return line.replace(/[█▀▄▓▒░▗▐▝▚]/g, shade);
}

function reveal(text: string, characters: number): string {
	if (characters >= text.length) return text;
	return `${text.slice(0, Math.max(characters, 0))}${characters > 0 ? CARET : ""}`;
}

function indentFor(blockWidth: number, width: number): string {
	return " ".repeat(Math.max(0, Math.floor((width - blockWidth) / 2)));
}

function place(line: string, indent: string, width: number): string {
	return truncateToWidth(`${indent}${line}`, width);
}

function placeGlyph(line: string, column: number, glyph: string): string {
	const padded = line.padEnd(column + 1, " ");
	return `${padded.slice(0, column)}${glyph}${padded.slice(column + 1)}`;
}

function revealBlock(
	text: string,
	characters: number,
	blockWidth: number,
): string[] {
	const shown = reveal(text, characters);
	return visibleWidth(shown) <= blockWidth
		? [shown]
		: wrapTextWithAnsi(shown, blockWidth);
}

function hyperlinkLine(url: string, label: string): string {
	return `↗ \x1b]8;;${url}\x1b\\${label}\x1b]8;;\x1b\\`;
}

export function renderScene(
	state: SceneState,
	width: number,
	theme: Theme,
): string[] {
	const inner = Math.max(width, 12);
	const layout = sceneLayout(inner);
	const paint = painter(theme);
	const lines: string[] = [];
	const { tick } = state;

	const mascot = MASCOTS[layout];
	const mascotWidth = Math.max(...mascot.map((line) => line.length));
	const mascotIndent = indentFor(mascotWidth, inner);
	const sparkles = SPARKLES[layout].slice(
		0,
		Math.max(0, Math.min(SPARKLES[layout].length, Math.floor(tick / 1.5))),
	);
	for (const [row, art] of mascot.entries()) {
		const age = tick - row;
		if (age < 0) break;
		let line = mascotRow(art, age);
		for (const sparkle of sparkles.filter((entry) => entry.row === row)) {
			line = placeGlyph(
				line,
				sparkle.col,
				TWINKLE[(tick + sparkle.col) % TWINKLE.length],
			);
		}
		lines.push(place(paint.ramp(line, row * 0.6), mascotIndent, inner));
	}
	if (tick >= mascot.length) {
		const groundWidth = Math.min(mascotWidth + 2, inner);
		lines.push(
			place(
				paint.color("dim", "▂".repeat(groundWidth)),
				indentFor(groundWidth, inner),
				inner,
			),
		);
	}

	const title = TITLES[layout];
	if (tick >= TITLE_START) {
		lines.push(
			"",
			place(
				paint.sweep(reveal(title, (tick - TITLE_START) * 5), tick),
				indentFor(visibleWidth(title), inner),
				inner,
			),
		);
	}

	const form = sceneFormLines(state, layout);
	const formWidth = Math.min(
		Math.max(...form.map((line) => visibleWidth(line))),
		inner,
	);
	const formIndent = indentFor(formWidth, inner);
	if (tick >= FORM_START) {
		lines.push("");
		for (const [index, text] of form.entries()) {
			const age = tick - FORM_START - index * FORM_TICKS_PER_ROW;
			if (age < 0) break;
			const isStatus = index === form.length - 1;
			const color: ThemeColor = isStatus ? "accent" : "toolOutput";
			for (const line of revealBlock(text, age * 14, formWidth))
				lines.push(place(paint.color(color, line), formIndent, inner));
		}
	}

	// The link and the code field are live from the first frame: the intro
	// animation plays above them, it never gates the flow.
	if (state.phase === "signin") {
		const linkLines = state.hyperlinks
			? [hyperlinkLine(state.url, LINK_LABEL)]
			: wrapTextWithAnsi(state.url, inner);
		const linkWidth = state.hyperlinks
			? visibleWidth(`↗ ${LINK_LABEL}`)
			: Math.min(Math.max(...linkLines.map(visibleWidth)), inner);
		const linkIndent = indentFor(linkWidth, inner);
		lines.push("");
		for (const line of linkLines)
			lines.push(place(paint.color("accent", line), linkIndent, inner));
		if (state.clipboard !== "idle")
			lines.push(
				place(
					state.clipboard === "copied"
						? paint.color("success", "✔ Link copied to clipboard.")
						: paint.color("warning", "⚠ No clipboard tool found."),
					linkIndent,
					inner,
				),
			);
	}

	// The code field is aligned with the form block, not with the terminal edge.
	if (state.input.length > 0) {
		lines.push(
			"",
			...state.input.map((line) => place(line, formIndent, inner)),
		);
	}

	const outcome = state.phase === "approved" || state.phase === "denied";
	if (outcome) {
		const stamp =
			STAMPS[layout][state.phase === "approved" ? "approved" : "denied"];
		const stampIndent = indentFor(visibleWidth(stamp[0]), inner);
		const shake = state.phaseTick < 2 ? "  " : state.phaseTick < 3 ? " " : "";
		lines.push("");
		for (const row of stamp)
			lines.push(
				place(
					state.phaseTick < 2
						? paint.color("dim", row)
						: state.phase === "approved"
							? paint.ramp(row, 0)
							: paint.color("error", row),
					`${stampIndent}${shake}`,
					inner,
				),
			);

		const verdict = sceneVerdictLines(state, layout);
		if (verdict.length > 0 && state.phaseTick >= STAMP_TICKS) {
			const verdictWidth = Math.min(
				Math.max(...verdict.map((line) => visibleWidth(line))),
				inner,
			);
			const verdictIndent = indentFor(verdictWidth, inner);
			lines.push("");
			for (const [index, text] of verdict.entries()) {
				const age =
					state.phaseTick - STAMP_TICKS - index * VERDICT_TICKS_PER_LINE;
				if (age < 0) break;
				const color: ThemeColor =
					state.phase === "denied"
						? "error"
						: index === 0
							? "dim"
							: state.tokenCopied
								? "success"
								: "warning";
				for (const line of revealBlock(text, age * 16, verdictWidth))
					lines.push(place(paint.color(color, line), verdictIndent, inner));
			}
		}
	}

	if (state.hints) {
		lines.push(
			"",
			place(
				paint.color("dim", state.hints),
				indentFor(visibleWidth(state.hints), inner),
				inner,
			),
		);
	}

	return lines;
}