import { notFound } from "next/navigation";
import { SitePositionEditor, SitePositions } from "@/components/features/panels/site-positions";
import { Card, EmptyState, PageHeader } from "@/components/ui";
import { canAnywhere } from "@/lib/authz/context";
import { AuthError } from "@/lib/authz/errors";
import { requireDashboard } from "@/lib/authz/guard";
import { getActiveSiteId, listAccessibleSites } from "@/lib/data/sites";
import { listSitePositions } from "@/lib/services/panel-locations";

async function load() {
  const ctx = await requireDashboard("admin");
  if (!canAnywhere(ctx, "content.manage")) notFound();
  const siteId = await getActiveSiteId(await listAccessibleSites(ctx));
  if (!siteId) return null;
  try { return await listSitePositions(siteId); } catch (e) { if (e instanceof AuthError) notFound(); throw e; }
}

const choose = (<><PageHeader title="Panel Positions" /><Card><EmptyState title="Choose a website" description="Open a website first to manage its panel positions." /></Card></>);

export async function PanelPositionsScreen() {
  const data = await load();
  if (!data) return choose;
  return <div className="ed -m-1 rounded-3xl bg-[var(--ed-bg)] p-4 sm:p-6"><SitePositions key={data.site.id} siteId={data.site.id} positions={data.positions} /></div>;
}

export async function PanelPositionScreen({ positionKey }: { positionKey: string }) {
  const data = await load();
  if (!data) return choose;
  const position = data.positions.find((p) => p.key === positionKey);
  if (!position) notFound();
  return <SitePositionEditor key={`${data.site.id}-${position.key}`} siteId={data.site.id} position={position} />;
}