import type { Metadata } from "next";
import { getBook } from "@/lib/actions/book"
import { notFound } from "next/navigation"
import { BookEditForm } from "./_components/BookEditForm"
import { BackButton } from "@/components/web/backBtn"

export async function generateMetadata({ params }: { params: Promise<{ bookId: string }> }): Promise<Metadata> {
  const { bookId } = await params;
  const result = await getBook(bookId);

  if (result.status === "error" || !result.data) {
    return {
      title: "Edit Book | Admin | E-Library",
      description: "Edit a book in the Federal Polytechnic Bali E-Library catalog.",
    };
  }

  return {
    title: `Edit ${result.data.title} | Admin | E-Library`,
    description: `Edit the details for ${result.data.title} in the admin portal.`,
  };
}

export default async function EditBookPage({ params }: { params: Promise<{ bookId: string }> }) {
  const { bookId } = await params
  const result = await getBook(bookId)

  if (result.status === "error" || !result.data) notFound()

  const book = result.data

  return (
    <div className="min-h-screen w-full flex flex-col gap-4 items-start py-4 px-4 md:gap-6 md:py-6 md:px-6">
      {/* ── Header ── */}
      <div className="w-full border-b px-6 py-4">
        <div className="mx-auto flex items-center gap-4">
          <BackButton href={`/admin/books/${bookId}`} />
          <span>/</span>
          <span className="text-sm font-medium truncate max-w-xs">
            {book.title}
          </span>
        </div>
      </div>

      {/* ── Form ── */}
      <div className="mx-auto flex flex-col gap-4 items-start py-4 px-4 md:gap-6 md:py-6 md:px-6">
        <div className="mb-8">
          <h1 className="text-2xl font-bold">Edit Book</h1>
          <p className="mt-1 text-sm">
            Update the metadata, format, or copies for{" "}
            <span className="font-medium">{book.title}</span>.
          </p>
        </div>

        <BookEditForm book={book} />
      </div>
    </div>
  )
}