import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import {
  archiveJournalAction,
  deleteJournalAction,
  publishJournalAction,
  updateJournalAction,
} 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 { getJournalPostForTenant } from "@/services/journal-service";

export default async function JournalDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const ctx = await requireDashboardContext("journal:manage");
  const post = await getJournalPostForTenant(ctx.tenant, id);
  if (!post) notFound();

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

  return (
    <DashboardShell width="narrow">
      <Link
        href="/dashboard/journal"
        className="text-sm text-[var(--archi-ink-muted)] transition hover:text-[var(--archi-ink)]"
      >
        ← Journal
      </Link>
      <div className="mt-4 flex flex-wrap items-end justify-between gap-4">
        <DashboardPageHeader
          eyebrow={post.status}
          title={post.title}
          description="Edit draft content, SEO, and publish state."
        />
        <div className="flex flex-wrap gap-2">
          {post.status !== "published" ? (
            <form action={publishJournalAction.bind(null, post.id)}>
              <button type="submit" className="archi-btn-primary">
                Publish
              </button>
            </form>
          ) : (
            <form action={archiveJournalAction.bind(null, post.id)}>
              <button
                type="submit"
                className="border border-[var(--archi-line)] bg-white px-4 py-2 text-sm"
              >
                Archive
              </button>
            </form>
          )}
          <form action={deleteJournalAction.bind(null, post.id)}>
            <button
              type="submit"
              className="border border-red-300 px-4 py-2 text-sm text-red-800"
            >
              Delete
            </button>
          </form>
        </div>
      </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={post.title}
            className="archi-input mt-2"
          />
        </label>
        <label className="block text-sm">
          Slug
          <input
            name="slug"
            defaultValue={post.slug}
            className="archi-input mt-2"
          />
        </label>
        <label className="block text-sm">
          Excerpt
          <textarea
            name="excerpt"
            rows={2}
            defaultValue={post.excerpt ?? ""}
            className="archi-input mt-2"
          />
        </label>
        <label className="block text-sm">
          Content
          <textarea
            name="content"
            rows={14}
            defaultValue={post.content ?? ""}
            className="archi-input mt-2"
          />
        </label>
        <label className="block text-sm">
          SEO title
          <input
            name="seoTitle"
            defaultValue={post.seoTitle ?? ""}
            className="archi-input mt-2"
          />
        </label>
        <label className="block text-sm">
          SEO description
          <textarea
            name="seoDescription"
            rows={2}
            defaultValue={post.seoDescription ?? ""}
            className="archi-input mt-2"
          />
        </label>
        <button type="submit" className="archi-btn-primary">
          Save
        </button>
      </form>
    </DashboardShell>
  );
}