import { FolkShape } from "./folk-shape";
import { css, html } from "./tags";
import { rspaceNavUrl } from "../shared/url-helpers";

/**
 * <folk-rapp> — Embeds a live rApp module as a shape on the canvas.
 *
 * Unlike folk-embed (generic URL iframe), folk-rapp understands the module
 * system: it stores moduleId + spaceSlug, derives the iframe URL, shows
 * the module's icon/badge in the header, and can switch modules in-place.
 *
 * PostMessage protocol:
 *   Parent → iframe: { source: "rspace-parent", type: "context", shapeId, space, moduleId }
 *   iframe → parent: { source: "rspace-canvas", type: "shape-updated", ... } (from CommunitySync)
 *   iframe → parent: { source: "rspace-rapp", type: "navigate", moduleId }
 */

// Module metadata for header display (subset of rstack-app-switcher badges)
const MODULE_META: Record<string, { badge: string; color: string; name: string; icon: string }> = {
	rnotes:      { badge: "rN",  color: "#fcd34d", name: "rNotes",      icon: "📝" },
	rphotos:     { badge: "rPh", color: "#f9a8d4", name: "rPhotos",     icon: "📸" },
	rbooks:      { badge: "rB",  color: "#fda4af", name: "rBooks",      icon: "📚" },
	rpubs:       { badge: "rP",  color: "#fda4af", name: "rPubs",       icon: "📖" },
	rfiles:      { badge: "rFi", color: "#67e8f9", name: "rFiles",      icon: "📁" },
	rwork:       { badge: "rWo", color: "#cbd5e1", name: "rWork",       icon: "📋" },
	rforum:      { badge: "rFo", color: "#fcd34d", name: "rForum",      icon: "💬" },
	rinbox:      { badge: "rI",  color: "#a5b4fc", name: "rInbox",      icon: "📧" },
	rtube:       { badge: "rTu", color: "#f9a8d4", name: "rTube",       icon: "🎬" },
	rfunds:      { badge: "rF",  color: "#bef264", name: "rFunds",      icon: "🌊" },
	rwallet:     { badge: "rW",  color: "#fde047", name: "rWallet",     icon: "💰" },
	rvote:       { badge: "rV",  color: "#c4b5fd", name: "rVote",       icon: "🗳️" },
	rcart:       { badge: "rCt", color: "#fdba74", name: "rCart",       icon: "🛒" },
	rdata:       { badge: "rD",  color: "#d8b4fe", name: "rData",       icon: "📊" },
	rnetwork:    { badge: "rNe", color: "#93c5fd", name: "rNetwork",    icon: "🌍" },
	rsplat:      { badge: "r3",  color: "#d8b4fe", name: "rSplat",      icon: "🔮" },
	rproviders:  { badge: "rPr", color: "#fdba74", name: "rProviders",  icon: "🏭" },
	rswag:       { badge: "rSw", color: "#fda4af", name: "rSwag",       icon: "🎨" },
	rchoices:    { badge: "rCo", color: "#f0abfc", name: "rChoices",    icon: "🤔" },
	rcal:        { badge: "rC",  color: "#7dd3fc", name: "rCal",        icon: "📅" },
	rtrips:      { badge: "rT",  color: "#6ee7b7", name: "rTrips",      icon: "✈️" },
	rmaps:       { badge: "rM",  color: "#86efac", name: "rMaps",       icon: "🗺️" },
};

const styles = css`
	:host {
		background: #1e293b;
		border-radius: 10px;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
		min-width: 320px;
		min-height: 240px;
		overflow: hidden;
	}

	.rapp-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 6px 10px;
		background: var(--rapp-color, #334155);
		color: #0f172a;
		font-size: 12px;
		font-weight: 700;
		cursor: move;
		user-select: none;
		border-radius: 10px 10px 0 0;
	}

	.rapp-header-left {
		display: flex;
		align-items: center;
		gap: 7px;
		position: relative;
	}

	.rapp-badge {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		border-radius: 5px;
		background: rgba(0, 0, 0, 0.15);
		font-size: 0.55rem;
		font-weight: 900;
		line-height: 1;
		flex-shrink: 0;
	}

	.rapp-name {
		font-size: 12px;
		font-weight: 700;
	}

	.rapp-icon {
		font-size: 13px;
	}

	.rapp-actions {
		display: flex;
		gap: 2px;
	}

	.rapp-actions button {
		background: transparent;
		border: none;
		color: #0f172a;
		cursor: pointer;
		padding: 2px 5px;
		border-radius: 4px;
		font-size: 12px;
		opacity: 0.7;
		transition: opacity 0.15s, background 0.15s;
	}

	.rapp-actions button:hover {
		opacity: 1;
		background: rgba(0, 0, 0, 0.1);
	}

	.rapp-content {
		width: 100%;
		height: calc(100% - 34px);
		position: relative;
		background: #0f172a;
	}

	.rapp-iframe {
		width: 100%;
		height: 100%;
		border: none;
		border-radius: 0 0 10px 10px;
	}

	.rapp-loading {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		gap: 12px;
		color: #64748b;
		font-size: 13px;
	}

	.rapp-loading .spinner {
		width: 24px;
		height: 24px;
		border: 2px solid rgba(100, 116, 139, 0.3);
		border-top-color: #64748b;
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
	}

	@keyframes spin {
		to { transform: rotate(360deg); }
	}

	.rapp-error {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		gap: 8px;
		color: #ef4444;
		font-size: 13px;
		padding: 16px;
		text-align: center;
	}

	/* Module picker (shown when no moduleId set) */
	.rapp-picker {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 12px;
		height: 100%;
		overflow-y: auto;
	}

	.rapp-picker-title {
		font-size: 12px;
		font-weight: 600;
		color: #94a3b8;
		margin-bottom: 4px;
	}

	.rapp-picker-item {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 6px 10px;
		border-radius: 6px;
		cursor: pointer;
		transition: background 0.12s;
		color: #e2e8f0;
		font-size: 13px;
		border: none;
		background: transparent;
		text-align: left;
		width: 100%;
	}

	.rapp-picker-item:hover {
		background: rgba(255, 255, 255, 0.08);
	}

	.rapp-picker-badge {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		border-radius: 5px;
		font-size: 0.5rem;
		font-weight: 900;
		color: #0f172a;
		flex-shrink: 0;
	}

	/* Module switcher dropdown */
	.rapp-switcher {
		position: absolute;
		top: 100%;
		left: 0;
		margin-top: 4px;
		min-width: 180px;
		max-height: 300px;
		overflow-y: auto;
		background: #1e293b;
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 8px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
		padding: 4px;
		z-index: 100;
		display: none;
	}

	.rapp-switcher.open {
		display: block;
	}

	.rapp-switcher-item {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 5px 8px;
		border-radius: 5px;
		cursor: pointer;
		color: #e2e8f0;
		font-size: 12px;
		border: none;
		background: transparent;
		width: 100%;
		text-align: left;
		transition: background 0.12s;
	}

	.rapp-switcher-item:hover {
		background: rgba(255, 255, 255, 0.08);
	}

	.rapp-switcher-item.active {
		background: rgba(6, 182, 212, 0.15);
	}

	.rapp-switcher-badge {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 18px;
		height: 18px;
		border-radius: 4px;
		font-size: 0.45rem;
		font-weight: 900;
		color: #0f172a;
		flex-shrink: 0;
	}

	/* Status indicator for postMessage connection */
	.rapp-status {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #475569;
		flex-shrink: 0;
		transition: background 0.3s;
	}

	.rapp-status.connected {
		background: #22c55e;
	}
`;

declare global {
	interface HTMLElementTagNameMap {
		"folk-rapp": FolkRApp;
	}
}

export class FolkRApp extends FolkShape {
	static override tagName = "folk-rapp";

	static {
		const sheet = new CSSStyleSheet();
		const parentRules = Array.from(FolkShape.styles.cssRules)
			.map((r) => r.cssText)
			.join("\n");
		const childRules = Array.from(styles.cssRules)
			.map((r) => r.cssText)
			.join("\n");
		sheet.replaceSync(`${parentRules}\n${childRules}`);
		this.styles = sheet;
	}

	#moduleId: string = "";
	#spaceSlug: string = "";
	#iframe: HTMLIFrameElement | null = null;
	#contentEl: HTMLElement | null = null;
	#messageHandler: ((e: MessageEvent) => void) | null = null;
	#statusEl: HTMLElement | null = null;

	get moduleId() { return this.#moduleId; }
	set moduleId(value: string) {
		if (this.#moduleId === value) return;
		this.#moduleId = value;
		this.requestUpdate("moduleId");
		this.dispatchEvent(new CustomEvent("content-change"));
		this.#loadModule();
	}

	get spaceSlug() { return this.#spaceSlug; }
	set spaceSlug(value: string) {
		if (this.#spaceSlug === value) return;
		this.#spaceSlug = value;
		this.requestUpdate("spaceSlug");
		this.dispatchEvent(new CustomEvent("content-change"));
		this.#loadModule();
	}

	override createRenderRoot() {
		const root = super.createRenderRoot();

		this.#moduleId = this.getAttribute("module-id") || "";
		this.#spaceSlug = this.getAttribute("space-slug") || "";

		const meta = MODULE_META[this.#moduleId];
		const headerColor = meta?.color || "#475569";
		const headerName = meta?.name || this.#moduleId || "rApp";
		const headerBadge = meta?.badge || "r?";
		const headerIcon = meta?.icon || "📱";

		const wrapper = document.createElement("div");
		wrapper.innerHTML = html`
			<div class="rapp-header" style="--rapp-color: ${headerColor}">
				<div class="rapp-header-left">
					<span class="rapp-badge">${headerBadge}</span>
					<span class="rapp-name">${headerName}</span>
					<span class="rapp-icon">${headerIcon}</span>
					<span class="rapp-status" title="Not connected"></span>
					<div class="rapp-switcher"></div>
				</div>
				<div class="rapp-actions">
					<button class="switch-btn" title="Switch module">⇄</button>
					<button class="open-tab-btn" title="Open in tab">↗</button>
					<button class="close-btn" title="Close">×</button>
				</div>
			</div>
			<div class="rapp-content"></div>
		`;

		const slot = root.querySelector("slot");
		const containerDiv = slot?.parentElement as HTMLElement;
		if (containerDiv) {
			containerDiv.replaceWith(wrapper);
		}

		this.#contentEl = wrapper.querySelector(".rapp-content") as HTMLElement;
		this.#statusEl = wrapper.querySelector(".rapp-status") as HTMLElement;
		const switchBtn = wrapper.querySelector(".switch-btn") as HTMLButtonElement;
		const openTabBtn = wrapper.querySelector(".open-tab-btn") as HTMLButtonElement;
		const closeBtn = wrapper.querySelector(".close-btn") as HTMLButtonElement;
		const switcherEl = wrapper.querySelector(".rapp-switcher") as HTMLElement;

		// Module switcher dropdown
		this.#buildSwitcher(switcherEl);
		switchBtn.addEventListener("click", (e) => {
			e.stopPropagation();
			switcherEl.classList.toggle("open");
		});

		// Close switcher when clicking elsewhere
		const closeSwitcher = () => switcherEl.classList.remove("open");
		root.addEventListener("click", closeSwitcher);

		// Open in tab — navigate to the module's page via tab bar
		openTabBtn.addEventListener("click", (e) => {
			e.stopPropagation();
			if (this.#moduleId && this.#spaceSlug) {
				window.location.href = rspaceNavUrl(this.#spaceSlug, this.#moduleId);
			}
		});

		// Close button
		closeBtn.addEventListener("click", (e) => {
			e.stopPropagation();
			this.dispatchEvent(new CustomEvent("close"));
		});

		// Set up postMessage listener
		this.#messageHandler = (e: MessageEvent) => this.#handleMessage(e);
		window.addEventListener("message", this.#messageHandler);

		// Load content
		if (this.#moduleId) {
			this.#loadModule();
		} else {
			this.#showPicker();
		}

		return root;
	}

	disconnectedCallback() {
		super.disconnectedCallback?.();
		if (this.#messageHandler) {
			window.removeEventListener("message", this.#messageHandler);
			this.#messageHandler = null;
		}
	}

	#buildSwitcher(switcherEl: HTMLElement) {
		const items = Object.entries(MODULE_META)
			.map(([id, meta]) => `
				<button class="rapp-switcher-item ${id === this.#moduleId ? "active" : ""}" data-module="${id}">
					<span class="rapp-switcher-badge" style="background: ${meta.color}">${meta.badge}</span>
					<span>${meta.name} ${meta.icon}</span>
				</button>
			`)
			.join("");

		switcherEl.innerHTML = items;

		switcherEl.querySelectorAll(".rapp-switcher-item").forEach((btn) => {
			btn.addEventListener("click", (e) => {
				e.stopPropagation();
				const modId = (btn as HTMLElement).dataset.module;
				if (modId && modId !== this.#moduleId) {
					this.moduleId = modId;
					this.#buildSwitcher(switcherEl);
				}
				switcherEl.classList.remove("open");
			});
		});
	}

	/** Handle postMessage from embedded iframe */
	#handleMessage(e: MessageEvent) {
		if (!this.#iframe) return;

		// Only accept messages from our iframe
		if (e.source !== this.#iframe.contentWindow) return;

		const msg = e.data;
		if (!msg || typeof msg !== "object") return;

		// CommunitySync shape updates from the embedded module
		if (msg.source === "rspace-canvas" && msg.type === "shape-updated") {
			this.dispatchEvent(new CustomEvent("rapp-data", {
				detail: { moduleId: this.#moduleId, shapeId: msg.shapeId, data: msg.data },
				bubbles: true,
			}));

			// Mark as connected
			if (this.#statusEl) {
				this.#statusEl.classList.add("connected");
				this.#statusEl.title = "Connected — receiving data";
			}
		}

		// Navigation request from embedded module
		if (msg.source === "rspace-rapp" && msg.type === "navigate" && msg.moduleId) {
			this.moduleId = msg.moduleId;
		}
	}

	/** Send context to the iframe after it loads */
	#sendContext() {
		if (!this.#iframe?.contentWindow) return;
		try {
			this.#iframe.contentWindow.postMessage({
				source: "rspace-parent",
				type: "context",
				shapeId: this.id,
				space: this.#spaceSlug,
				moduleId: this.#moduleId,
				embedded: true,
			}, "*");
		} catch {
			// cross-origin or iframe not ready
		}
	}

	#loadModule() {
		if (!this.#contentEl || !this.#moduleId) return;

		// Update header
		const meta = MODULE_META[this.#moduleId];
		const header = this.shadowRoot?.querySelector(".rapp-header") as HTMLElement;
		if (header && meta) {
			header.style.setProperty("--rapp-color", meta.color);
			const badge = header.querySelector(".rapp-badge");
			const name = header.querySelector(".rapp-name");
			const icon = header.querySelector(".rapp-icon");
			if (badge) badge.textContent = meta.badge;
			if (name) name.textContent = meta.name;
			if (icon) icon.textContent = meta.icon;
		}

		// Reset connection status
		if (this.#statusEl) {
			this.#statusEl.classList.remove("connected");
			this.#statusEl.title = "Loading...";
		}

		// Show loading state
		this.#contentEl.innerHTML = `
			<div class="rapp-loading">
				<div class="spinner"></div>
				<span>Loading ${meta?.name || this.#moduleId}...</span>
			</div>
		`;

		// Create iframe
		const space = this.#spaceSlug || "demo";
		const iframeUrl = `/${space}/${this.#moduleId}`;

		const iframe = document.createElement("iframe");
		iframe.className = "rapp-iframe";
		iframe.src = iframeUrl;
		iframe.loading = "lazy";
		iframe.allow = "clipboard-write";

		iframe.addEventListener("load", () => {
			// Remove loading indicator
			const loading = this.#contentEl?.querySelector(".rapp-loading");
			if (loading) loading.remove();

			// Send context to the newly loaded iframe
			this.#sendContext();
		});

		iframe.addEventListener("error", () => {
			if (this.#contentEl) {
				this.#contentEl.innerHTML = `
					<div class="rapp-error">
						<span>Failed to load ${meta?.name || this.#moduleId}</span>
						<button class="rapp-picker-item" style="justify-content: center; color: #94a3b8;">
							Retry
						</button>
					</div>
				`;
				this.#contentEl.querySelector("button")?.addEventListener("click", () => this.#loadModule());
			}
		});

		this.#contentEl.appendChild(iframe);
		this.#iframe = iframe;
	}

	#showPicker() {
		if (!this.#contentEl) return;

		const items = Object.entries(MODULE_META)
			.map(([id, meta]) => `
				<button class="rapp-picker-item" data-module="${id}">
					<span class="rapp-picker-badge" style="background: ${meta.color}">${meta.badge}</span>
					<span>${meta.name}</span>
					<span>${meta.icon}</span>
				</button>
			`)
			.join("");

		this.#contentEl.innerHTML = `
			<div class="rapp-picker">
				<span class="rapp-picker-title">Choose an rApp to embed</span>
				${items}
			</div>
		`;

		this.#contentEl.querySelectorAll(".rapp-picker-item").forEach((btn) => {
			btn.addEventListener("click", () => {
				const modId = (btn as HTMLElement).dataset.module;
				if (modId) {
					this.moduleId = modId;
				}
			});
		});
	}

	override toJSON() {
		return {
			...super.toJSON(),
			type: "folk-rapp",
			moduleId: this.#moduleId,
			spaceSlug: this.#spaceSlug,
		};
	}
}