import { redirect } from "next/navigation";
import {
  createPublicationAction,
  deletePublicationAction,
} 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 { listDashboardPublications } from "@/services/publication-service";

export default async function DashboardPublicationsPage() {
  const ctx = await requireDashboardContext("settings:manage");
  const rows = await listDashboardPublications(ctx.tenant);

  async function createAction(formData: FormData) {
    "use server";
    const result = await createPublicationAction(formData);
    if (!result.ok) redirect("/dashboard/publications?error=1");
    redirect("/dashboard/publications");
  }

  return (
    <DashboardShell>
      <DashboardPageHeader
        eyebrow="Studio"
        title="Publications"
        description="Press, magazines, interviews, and books on the public site."
      />
      <form action={createAction} className="archi-panel mt-10 grid gap-3 p-5 sm:grid-cols-2">
        <label className="block text-sm">
          Title
          <input name="title" required className="archi-input mt-2" />
        </label>
        <label className="block text-sm">
          Publisher
          <input name="publisher" className="archi-input mt-2" />
        </label>
        <label className="block text-sm">
          Year
          <input name="year" type="number" className="archi-input mt-2" />
        </label>
        <label className="block text-sm">
          Kind
          <input name="kind" placeholder="Magazine / Interview / Book" className="archi-input mt-2" />
        </label>
        <label className="block text-sm sm:col-span-2">
          URL
          <input name="url" className="archi-input mt-2" />
        </label>
        <label className="block text-sm sm:col-span-2">
          Description
          <textarea name="description" rows={2} className="archi-input mt-2" />
        </label>
        <button type="submit" className="archi-btn-primary sm:col-span-2 sm:w-fit">
          Add publication
        </button>
      </form>
      <ul className="archi-panel mt-8 divide-y divide-[var(--archi-line)]">
        {rows.length === 0 ? (
          <li className="px-4 py-8 text-sm text-[var(--archi-ink-muted)]">
            No publications yet.
          </li>
        ) : (
          rows.map((row) => (
            <li key={row.id} className="flex flex-wrap items-center justify-between gap-3 px-4 py-4">
              <div>
                <p className="font-medium">{row.title}</p>
                <p className="text-xs text-[var(--archi-ink-muted)]">
                  {[row.year, row.publisher, row.kind].filter(Boolean).join(" · ")}
                </p>
              </div>
              <form action={deletePublicationAction.bind(null, row.id)}>
                <button type="submit" className="text-xs text-red-800 underline">
                  Delete
                </button>
              </form>
            </li>
          ))
        )}
      </ul>
    </DashboardShell>
  );
}
