/**
 * Design module — collaborative design workspace via Affine.
 *
 * Wraps the Affine instance as an external app embedded in the rSpace shell.
 */

import { Hono } from "hono";
import { renderShell, renderExternalAppShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";

const routes = new Hono();

const AFFINE_URL = "https://affine.cosmolocal.world";

routes.get("/api/health", (c) => {
	return c.json({ ok: true, module: "rdesign" });
});

routes.get("/", (c) => {
	const space = c.req.param("space") || "demo";
	const view = c.req.query("view");

	if (view === "demo") {
		return c.html(renderShell({
			title: `${space} — Design | rSpace`,
			moduleId: "rdesign",
			spaceSlug: space,
			modules: getModuleInfoList(),
			theme: "dark",
			body: `<div style="max-width:640px;margin:0 auto;padding:3rem 1rem;text-align:center">
	<div style="font-size:3rem;margin-bottom:1rem">🎯</div>
	<h2 style="font-size:1.5rem;margin-bottom:0.75rem;background:linear-gradient(135deg,#14b8a6,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent">rDesign</h2>
	<p style="color:#94a3b8;margin-bottom:2rem;line-height:1.6">Collaborative design workspace powered by Affine. Whiteboard, docs, and kanban — all in one tool for your community.</p>
	<a href="?" class="rapp-nav__btn--app-toggle" style="display:inline-block;padding:10px 24px;font-size:0.9rem">Open Affine</a>
</div>`,
		}));
	}

	// Default: show the external app directly
	return c.html(renderExternalAppShell({
		title: `${space} — Affine | rSpace`,
		moduleId: "rdesign",
		spaceSlug: space,
		modules: getModuleInfoList(),
		appUrl: AFFINE_URL,
		appName: "Affine",
		theme: "dark",
	}));
});

function renderDesignLanding(): string {
	return `<div style="max-width:640px;margin:0 auto;padding:3rem 1rem;text-align:center">
	<div style="font-size:3rem;margin-bottom:1rem">🎯</div>
	<h2 style="font-size:1.5rem;margin-bottom:0.75rem;background:linear-gradient(135deg,#14b8a6,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent">rDesign</h2>
	<p style="color:#94a3b8;margin-bottom:2rem;line-height:1.6">Collaborative design workspace powered by Affine. Whiteboard, docs, and kanban — all in one tool for your community.</p>
</div>`;
}

export const designModule: RSpaceModule = {
	id: "rdesign",
	name: "rDesign",
	icon: "🎯",
	description: "Collaborative design workspace with whiteboard and docs",
	scoping: { defaultScope: 'global', userConfigurable: false },
	routes,
	landingPage: renderDesignLanding,
	standaloneDomain: "rdesign.online",
	externalApp: { url: AFFINE_URL, name: "Affine" },
	feeds: [
		{ id: "design-assets", name: "Design Assets", kind: "resource", description: "Design files, mockups, and whiteboard exports" },
	],
	acceptsFeeds: ["data", "resource"],
	outputPaths: [
		{ path: "designs", name: "Designs", icon: "🎯", description: "Design files and mockups" },
		{ path: "templates", name: "Templates", icon: "📐", description: "Reusable design templates" },
	],
};