import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import {
  deleteServiceAction,
  updateServiceAction,
} from "@/app/dashboard/actions";
import { DashboardPageHeader } from "@/components/dashboard/page-header";
import { DashboardShell } from "@/components/dashboard/dashboard-shell";
import { requireDashboardContext } from "@/core/auth/dashboard-context";
import { getServiceForTenant } from "@/services/studio-services-service";

export default async function ServiceDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const ctx = await requireDashboardContext("services:manage");
  const service = await getServiceForTenant(ctx.tenant, id);
  if (!service) notFound();

  async function save(formData: FormData) {
    "use server";
    const result = await updateServiceAction(id, formData);
    if (!result.ok) {
      redirect(`/dashboard/services/${id}?error=1`);
    }
    redirect(`/dashboard/services/${id}?saved=1`);
  }

  return (
    <DashboardShell width="narrow">
      <Link
        href="/dashboard/services"
        className="text-sm text-[var(--archi-ink-muted)] transition hover:text-[var(--archi-ink)]"
      >
        ← Services
      </Link>
      <div className="mt-4 flex flex-wrap items-end justify-between gap-4">
        <DashboardPageHeader
          eyebrow="Content"
          title={service.title}
          description="Edit this offering for your public studio site."
        />
        <form action={deleteServiceAction.bind(null, service.id)}>
          <button
            type="submit"
            className="border border-red-300 px-4 py-2 text-sm text-red-800"
          >
            Delete
          </button>
        </form>
      </div>

      <form action={save} className="archi-panel mt-10 space-y-4 p-5 sm:p-6">
        <label className="block text-sm">
          Title
          <input
            name="title"
            required
            defaultValue={service.title}
            className="archi-input mt-2"
          />
        </label>
        <label className="block text-sm">
          Slug
          <input
            name="slug"
            defaultValue={service.slug}
            className="archi-input mt-2"
          />
        </label>
        <label className="block text-sm">
          Description
          <textarea
            name="description"
            rows={5}
            defaultValue={service.description ?? ""}
            className="archi-input mt-2"
          />
        </label>
        <label className="block text-sm">
          Sort order
          <input
            name="sortOrder"
            type="number"
            defaultValue={service.sortOrder}
            className="archi-input mt-2"
          />
        </label>
        <label className="flex items-center gap-2 text-sm">
          <input
            name="isPublished"
            type="checkbox"
            defaultChecked={service.isPublished}
          />
          Published on public site
        </label>
        <button type="submit" className="archi-btn-primary">
          Save
        </button>
      </form>
    </DashboardShell>
  );
}