import type { Metadata } from "next";
import { getPaths } from "yt-dlp-transcript-common/lib/paths";
import { readWidgetPresets } from "yt-dlp-transcript-common/lib/widgetPresets";
import { BUILT_IN_PRESETS } from "yt-dlp-transcript-common/views/builtInPresets";
import { WidgetBuilder } from "./components/WidgetBuilder";

export const metadata: Metadata = { title: "Monitor widget" };

// The saved presets are read per request, not baked in: without this the page
// prerenders static at build time and seeds the preset row with whatever
// happened to be on disk when the release was cut. (Dev renders per request
// regardless, so only a real build catches it.)
export const dynamic = "force-dynamic";

// Lives inside the normal app shell (AppFrame strips chrome only on exactly
// "/widget"). The board below is a scale model of the widget: arrange it there,
// preview the real bare widget in an iframe, copy the link.
export default async function WidgetBuilderPage() {
  // SSR-seed the preset row so the saved list is there on first paint; the
  // in-widget copy has no server parent and fetches /api/widget/presets instead.
  const presets = {
    builtIn: BUILT_IN_PRESETS,
    saved: await readWidgetPresets(getPaths()),
  };
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold">Monitor widget</h1>
      </div>
      <WidgetBuilder initialPresets={presets} />
    </div>
  );
}