import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { requireAdmin } from "@/lib/admin-guard";
import { BLOG_CATEGORIES } from "@/lib/blog";
import { createBlogPostFormAction } from "../_actions";
import { MarkdownEditor } from "@/components/blog/markdown-editor";
import { TitleSlugInputs } from "@/components/blog/title-slug-inputs";

export const dynamic = "force-dynamic";

export default async function NewBlogPost() {
  await requireAdmin();

  return (
    <div>
      <div className="mb-6">
        <Link
          href="/admin/blog"
          className="text-ink-muted hover:text-brand-gold inline-flex items-center gap-1.5 text-xs"
        >
          <ArrowLeft className="h-3.5 w-3.5" /> Quay lại danh sách
        </Link>
        <h1 className="font-display text-ink-primary mt-2 text-2xl font-semibold">Bài viết mới</h1>
      </div>

      <form action={createBlogPostFormAction} className="max-w-4xl space-y-6">
        <section className="border-stroke-subtle bg-bg-elevated/40 rounded-xl border p-5">
          <TitleSlugInputs />

          <label className="mt-4 block">
            <span className="text-ink-muted mb-1 block text-[11px] tracking-[0.15em] uppercase">
              Tóm tắt <span className="text-brand-red">*</span>
            </span>
            <textarea
              name="excerpt"
              required
              maxLength={500}
              rows={3}
              className="border-stroke-subtle bg-bg-base text-ink-primary focus:border-brand-gold/50 w-full rounded-md border px-3 py-2 text-sm transition outline-none"
              placeholder="1-2 câu tóm tắt — hiển thị ở listing và OG description"
            />
            <span className="text-ink-muted mt-1 block text-xs">
              Tối đa 500 ký tự, dùng cho meta description + card listing
            </span>
          </label>
        </section>

        <section className="border-stroke-subtle bg-bg-elevated/40 rounded-xl border p-5">
          <span className="text-ink-muted mb-2 block text-[11px] tracking-[0.15em] uppercase">
            Nội dung (Markdown) <span className="text-brand-red">*</span>
          </span>
          <MarkdownEditor name="content" />
        </section>

        <section className="border-stroke-subtle bg-bg-elevated/40 rounded-xl border p-5">
          <div className="grid gap-4 md:grid-cols-2">
            <label className="block">
              <span className="text-ink-muted mb-1 block text-[11px] tracking-[0.15em] uppercase">
                Chuyên mục <span className="text-brand-red">*</span>
              </span>
              <select
                name="category"
                required
                defaultValue=""
                className="border-stroke-subtle bg-bg-base text-ink-primary focus:border-brand-gold/50 w-full rounded-md border px-3 py-2 text-sm transition outline-none"
              >
                <option value="" disabled>
                  -- Chọn --
                </option>
                {BLOG_CATEGORIES.map((c) => (
                  <option key={c.key} value={c.key}>
                    {c.label}
                  </option>
                ))}
              </select>
            </label>

            <label className="block">
              <span className="text-ink-muted mb-1 block text-[11px] tracking-[0.15em] uppercase">
                Tác giả
              </span>
              <input
                type="text"
                name="authorName"
                defaultValue="Tử Vi Số"
                className="border-stroke-subtle bg-bg-base text-ink-primary focus:border-brand-gold/50 w-full rounded-md border px-3 py-2 text-sm transition outline-none"
              />
            </label>

            <label className="block md:col-span-2">
              <span className="text-ink-muted mb-1 block text-[11px] tracking-[0.15em] uppercase">
                Tags
              </span>
              <input
                type="text"
                name="tags"
                placeholder="tu vi, mệnh, cung mệnh"
                className="border-stroke-subtle bg-bg-base text-ink-primary focus:border-brand-gold/50 w-full rounded-md border px-3 py-2 text-sm transition outline-none"
              />
              <span className="text-ink-muted mt-1 block text-xs">
                Phân cách bằng dấu phẩy. Tối đa 20 tag.
              </span>
            </label>

            <label className="block md:col-span-2">
              <span className="text-ink-muted mb-1 block text-[11px] tracking-[0.15em] uppercase">
                Cover Image (URL)
              </span>
              <input
                type="url"
                name="coverImage"
                placeholder="https://..."
                className="border-stroke-subtle bg-bg-base text-ink-primary focus:border-brand-gold/50 w-full rounded-md border px-3 py-2 text-sm transition outline-none"
              />
            </label>
          </div>
        </section>

        <section className="border-stroke-subtle bg-bg-elevated/40 flex items-center justify-between rounded-xl border p-5">
          <label className="text-ink-secondary inline-flex items-center gap-2 text-sm">
            <input
              type="checkbox"
              name="publishNow"
              className="border-stroke-subtle bg-bg-base h-4 w-4 rounded border"
            />
            Xuất bản ngay
          </label>
          <div className="flex gap-2">
            <Link
              href="/admin/blog"
              className="border-stroke-subtle text-ink-secondary hover:text-ink-primary rounded-md border px-4 py-2 text-sm transition"
            >
              Hủy
            </Link>
            <button
              type="submit"
              className="bg-brand-gold/90 hover:bg-brand-gold text-bg-base rounded-md px-5 py-2 text-sm font-medium transition"
            >
              Tạo bài
            </button>
          </div>
        </section>
      </form>
    </div>
  );
}