import {
  Field,
  FormActions,
  FormShell,
  GhostLink,
  PageHeader,
  PrimaryButton,
  Select,
  Textarea,
} from "@/components/admin/form";
import { saveBlogPost } from "@/lib/admin-actions";
import type { BlogPostRow } from "@/lib/types";
import { Save } from "lucide-react";

export function BlogForm({ post }: { post?: BlogPostRow }) {
  return (
    <div>
      <PageHeader
        title={post ? "Yazıyı düzenle" : "Yeni yazı"}
        backHref="/admin/blog"
        description="Markdown formatında içerik yazabilirsiniz."
      />

      <form action={saveBlogPost}>
        {post && <input type="hidden" name="id" value={post.$id} />}

        <FormShell>
          <div className="grid gap-5 md:grid-cols-2">
            <Field
              label="Başlık"
              name="title"
              required
              defaultValue={post?.title}
              placeholder="Yazı başlığı"
            />
            <Field
              label="Slug"
              name="slug"
              defaultValue={post?.slug}
              placeholder="otomatik-uretilir"
              help="Boş bırakırsanız başlıktan üretilir."
            />
            <Field label="Yazar" name="author" defaultValue={post?.author} />
            <Select
              label="Durum"
              name="status"
              defaultValue={post?.status ?? "draft"}
              options={[
                { value: "draft", label: "Taslak" },
                { value: "published", label: "Yayında" },
              ]}
            />
            <Field
              label="Yayın tarihi (ISO)"
              name="published_at"
              type="datetime-local"
              defaultValue={post?.published_at?.slice(0, 16)}
              help="Boş bırakırsanız yayına alındığı an kullanılır."
            />
            <Field
              label="Etiketler"
              name="tags"
              defaultValue={post?.tags?.join(", ")}
              placeholder="seo, web tasarım, kocaeli"
              help="Virgülle ayırın."
            />
          </div>

          <div className="mt-5 space-y-5">
            <Textarea
              label="Özet"
              name="excerpt"
              defaultValue={post?.excerpt}
              rows={3}
              placeholder="Liste/kart görünümünde gösterilecek kısa özet"
            />
            <Textarea
              label="İçerik (Markdown)"
              name="content"
              defaultValue={post?.content}
              rows={14}
              placeholder={"# Başlık\n\nMarkdown desteklenir…"}
            />
            <Field
              label="Kapak görseli URL"
              name="cover_image"
              type="url"
              defaultValue={post?.cover_image}
              placeholder="https://…"
              help="Medya kütüphanesinden bir görselin view URL'ini yapıştırın."
            />
            <Field
              label="Kapak file_id"
              name="cover_file_id"
              defaultValue={post?.cover_file_id}
              help="(opsiyonel) Appwrite storage file ID'si"
            />
          </div>

          <h3 className="mt-8 text-sm font-semibold uppercase tracking-wider text-[var(--muted)]">
            SEO
          </h3>
          <div className="mt-3 grid gap-5 md:grid-cols-2">
            <Field
              label="SEO başlığı"
              name="seo_title"
              defaultValue={post?.seo_title}
              help="Boş bırakırsanız yazı başlığı kullanılır."
            />
            <Field
              label="SEO OG görseli"
              name="seo_image"
              type="url"
              defaultValue={post?.seo_image}
            />
          </div>
          <div className="mt-5">
            <Textarea
              label="SEO açıklaması"
              name="seo_description"
              defaultValue={post?.seo_description}
              rows={2}
              help="150–160 karakter ideal."
            />
          </div>

          <FormActions>
            <GhostLink href="/admin/blog">İptal</GhostLink>
            <PrimaryButton>
              <Save className="size-4" /> Kaydet
            </PrimaryButton>
          </FormActions>
        </FormShell>
      </form>
    </div>
  );
}