import { Save } from "lucide-react";
import {
  Checkbox,
  Field,
  FormActions,
  FormShell,
  GhostLink,
  PageHeader,
  PrimaryButton,
  Textarea,
} from "@/components/admin/form";
import { MediaPicker } from "@/components/admin/media-picker";
import { saveSeoPage } from "@/lib/admin-actions";
import type { SeoPageRow } from "@/lib/types";

export function SeoPageForm({ row }: { row?: SeoPageRow }) {
  return (
    <div>
      <PageHeader
        title={row ? "Sayfa SEO override" : "Yeni sayfa SEO override"}
        backHref="/admin/seo"
        description="Sadece bu path için title/description/og bilgisini değiştir."
      />
      <form action={saveSeoPage}>
        {row && <input type="hidden" name="id" value={row.$id} />}
        <FormShell>
          <div className="grid gap-5">
            <Field
              label="Sayfa yolu (path)"
              name="path"
              required
              defaultValue={row?.path}
              placeholder="/hizmetler"
              help="Örn: /, /hizmetler, /blog/yeni-yazi"
            />
            <Field label="Başlık" name="title" defaultValue={row?.title} />
            <Textarea
              label="Açıklama"
              name="description"
              rows={3}
              defaultValue={row?.description}
            />
            <MediaPicker
              label="OG görseli"
              name="og_image"
              defaultValue={row?.og_image}
              help="Sosyal medya paylaşım görseli (1200×630 ideal)."
            />
            <Field
              label="Canonical URL"
              name="canonical"
              type="url"
              defaultValue={row?.canonical}
            />
            <Checkbox
              label="Aramada gizle (noindex)"
              name="noindex"
              defaultChecked={row?.noindex ?? false}
            />
          </div>
          <FormActions>
            <GhostLink href="/admin/seo">İptal</GhostLink>
            <PrimaryButton>
              <Save className="size-4" /> Kaydet
            </PrimaryButton>
          </FormActions>
        </FormShell>
      </form>
    </div>
  );
}