EpicNext-Cms/src/app/admin/radio/embed/page.tsx

import { Code } from "lucide-react";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { StatusCard } from "@/components/admin/dashboard";
import { siteSettings } from "@/lib/services/site-settings";
import { EmbedSnippet } from "./embed-snippet";

export const dynamic = "force-dynamic";

export const metadata = { title: "Radio Embed" };

export default async function AdminRadioEmbedPage() {
	const t = await getTranslations("pages.admin.radio");

	let streamUrl = "";
	let radioName = "Radio";
	let nowPlayingApiUrl = "";
	try {
		streamUrl = (await siteSettings.get("radio_stream_url", "")) ?? "";
		radioName =
			(await siteSettings.get("radio_name", null)) ??
			(await siteSettings.get("hotel_name", "Radio")) ??
			"Radio";
		nowPlayingApiUrl =
			(await siteSettings.get("radio_now_playing_api_url", "")) ?? "";
	} catch {
		streamUrl = "";
	}

	streamUrl = streamUrl.trim();
	nowPlayingApiUrl = nowPlayingApiUrl.trim();
	const hasStream = streamUrl !== "";

	const audioSnippet = hasStream
		? `<audio controls preload="none" src="${streamUrl}">\n  ${t("embedPage.audioUnsupported")}\n</audio>`
		: "";

	const iframeSnippet = hasStream
		? `<iframe\n  src="/radio/embed"\n  title="${radioName}"\n  width="320"\n  height="120"\n  frameborder="0"\n  allow="autoplay"\n  style="border:0;border-radius:8px;overflow:hidden"\n></iframe>`
		: "";

	return (
		<main>
			<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
				<Link href="/admin/radio">{t("title")}</Link> ·{" "}
				<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
				<Link href="/admin/radio/embed">{t("embed")}</Link> ·{" "}
				<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
				<Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
				<Link href="/admin/radio/history">{t("history")}</Link>
			</nav>

			<section className="mt-6">
				<div className="flex items-center gap-3 mb-6">
					<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
						<Code size={20} className="text-[var(--admin-accent)]" />
					</div>
					<div>
						<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
							{t("embedPage.title")}
						</h1>
						<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
							{t("embedPage.subtitle")}
						</p>
					</div>
				</div>

				<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
					<StatusCard
						label={t("embedPage.streamUrl")}
						value={
							hasStream ? t("embedPage.configured") : t("embedPage.missing")
						}
						state={hasStream ? "ok" : "danger"}
						icon="\u{1F4BB}"
					/>
					<StatusCard
						label={t("embedPage.radioName")}
						value={radioName}
						icon="\u{1F399}\uFE0F"
					/>
					<StatusCard
						label={t("embedPage.nowPlayingApi")}
						value={
							nowPlayingApiUrl ? t("embedPage.set") : t("embedPage.notSet")
						}
						state={nowPlayingApiUrl ? "ok" : "neutral"}
						icon="\u{1F3B5}"
					/>
				</div>
			</section>

			{!hasStream ? (
				<section className="mt-6">
					<h2 className="admin-section-title">{t("embedPage.noStreamUrl")}</h2>
					<p className="text-xs theme-text-muted dark:theme-text-muted">
						{t("embedPage.noStreamUrlText")}
					</p>
					<p>
						<Link href="/admin/radio/settings" className="btn btn-primary">
							{t("embedPage.goToSettings")}
						</Link>
					</p>
				</section>
			) : (
				<>
					<section className="mt-6">
						<h2 className="admin-section-title">
							{t("embedPage.livePreview")}
						</h2>
						<p className="text-xs theme-text-muted dark:theme-text-muted">
							{t("embedPage.livePreviewText")}
						</p>
						<div className="admin-card">
							{}
							<audio
								controls
								preload="none"
								src={streamUrl}
								style={{ width: "100%" }}
							>
								{t("embedPage.audioUnsupported")}
							</audio>
							<p
								className="text-xs theme-text-muted dark:theme-text-muted"
								style={{ margin: "0.5rem 0 0", wordBreak: "break-all" }}
							>
								{t("embedPage.source")}: <code>{streamUrl}</code>
							</p>
						</div>
					</section>

					<EmbedSnippet
						title={t("embedPage.audioSnippet")}
						description={t("embedPage.audioSnippetDesc")}
						snippet={audioSnippet}
					/>

					<EmbedSnippet
						title={t("embedPage.iframeSnippet")}
						description={t("embedPage.iframeSnippetDesc")}
						snippet={iframeSnippet}
					/>
				</>
			)}
		</main>
	);
}