import Link from "next/link";
import { redirect } from "next/navigation";
import { createServiceAction } 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";

export default async function NewServicePage() {
  await requireDashboardContext("services:manage");

  async function action(formData: FormData) {
    "use server";
    const result = await createServiceAction(formData);
    if (result.ok && result.id) {
      redirect(`/dashboard/services/${result.id}`);
    }
    redirect("/dashboard/services/new?error=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">
        <DashboardPageHeader
          eyebrow="Content"
          title="New service"
          description="Describe an offering that appears on your public studio site."
        />
      </div>

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