import Link from "next/link";
import { redirect } from "next/navigation";
import { requireDashboardContext } from "@/core/auth/dashboard-context";
import { createProjectAction } from "@/app/dashboard/actions";
import { DashboardPageHeader } from "@/components/dashboard/page-header";
import { DashboardShell } from "@/components/dashboard/dashboard-shell";
import { listCategories } from "@/services/category-service";

export default async function NewProjectPage() {
  const ctx = await requireDashboardContext("projects:create");
  const categories = await listCategories(ctx.tenant);

  async function action(formData: FormData) {
    "use server";
    const result = await createProjectAction(formData);
    if (result.ok && result.id) {
      redirect(`/dashboard/projects/${result.id}`);
    }
    redirect("/dashboard/projects/new?error=1");
  }

  return (
    <DashboardShell width="narrow">
      <Link
        href="/dashboard/projects"
        className="text-sm text-[var(--archi-ink-muted)] transition hover:text-[var(--archi-ink)]"
      >
        ← Projects
      </Link>
      <div className="mt-4">
        <DashboardPageHeader
          eyebrow="Projects"
          title="New project"
          description="Starts as draft. Publish when ready for the public site."
        />
      </div>

      <form action={action} className="archi-panel mt-10 space-y-4 p-5 sm:p-6">
        <Field name="title" label="Title" required />
        <Field name="slug" label="Slug (optional)" />
        <label className="block text-sm">
          Category
          <select name="categoryId" className="archi-input mt-2" defaultValue="">
            <option value="">Uncategorized</option>
            {categories.map((category) => (
              <option key={category.id} value={category.id}>
                {category.name}
              </option>
            ))}
          </select>
        </label>
        <Field name="location" label="Location" />
        <Field name="year" label="Year" type="number" />
        <Field name="area" label="Area" />
        <Field name="clientName" label="Client" />
        <label className="block text-sm">
          Description
          <textarea name="description" rows={4} className="archi-input mt-2" />
        </label>
        <label className="block text-sm">
          Concept
          <textarea name="concept" rows={4} className="archi-input mt-2" />
        </label>
        <Field name="seoTitle" label="SEO title" />
        <label className="block text-sm">
          SEO description
          <textarea
            name="seoDescription"
            rows={2}
            className="archi-input mt-2"
          />
        </label>
        <button type="submit" className="archi-btn-primary">
          Create draft
        </button>
      </form>
    </DashboardShell>
  );
}

function Field({
  name,
  label,
  required,
  type = "text",
}: {
  name: string;
  label: string;
  required?: boolean;
  type?: string;
}) {
  return (
    <label className="block text-sm">
      {label}
      <input
        name={name}
        type={type}
        required={required}
        className="archi-input mt-2"
      />
    </label>
  );
}