// The app frame: kit router (flat routes, console deep-link bridge) inside the shared
// PluginShell chrome. Pages own their data; the shell owns navigation + the toaster.

import { createPluginRouter, useIsEmbedded } from "@punktfunk/plugin-kit/react";
import {
	PluginShell,
	type PluginShellNavItem,
} from "@unom/app-ui/plugin-shell";
import {
	FolderOpen,
	Gamepad2,
	LayoutDashboard,
	Library,
	Settings2,
} from "lucide-react";
import type { FC } from "react";
import { EmulatorsPage } from "@/pages/emulators";
import { LibraryPage } from "@/pages/library";
import { OverviewPage } from "@/pages/overview";
import { SettingsPage } from "@/pages/settings";
import { SourcesPage } from "@/pages/sources";
import { type PageProps, ROUTES, type Route } from "@/routes";

const { usePluginRoute } = createPluginRouter(ROUTES, "overview");

const NAV: ReadonlyArray<PluginShellNavItem> = [
	{ id: "overview", label: "Overview", icon: LayoutDashboard },
	{ id: "library", label: "Library", icon: Library },
	{ id: "sources", label: "Sources", icon: FolderOpen },
	{ id: "emulators", label: "Emulators", icon: Gamepad2 },
	{ id: "settings", label: "Settings", icon: Settings2 },
];

const PAGES: Record<Route, FC<PageProps>> = {
	overview: OverviewPage,
	library: LibraryPage,
	sources: SourcesPage,
	emulators: EmulatorsPage,
	settings: SettingsPage,
};

/** Only shown in a standalone tab — embedded in the console, the console is the chrome. */
const StandaloneHeader = () => (
	<div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
		<Gamepad2 className="size-4 text-primary" />
		ROM Manager
	</div>
);

export const App = () => {
	const { route, navigate } = usePluginRoute();
	const embedded = useIsEmbedded();
	const Page = PAGES[route];
	return (
		<PluginShell
			nav={NAV}
			active={route}
			onNavigate={(id) => navigate(id as Route)}
			standaloneHeader={embedded ? undefined : <StandaloneHeader />}
		>
			<Page navigate={navigate} />
		</PluginShell>
	);
};