import { AdminAutoTextarea } from "@/admin/components/AdminAutoTextarea";
import { AdminFormField, AdminFormSection } from "@/admin/components/AdminFormField";
import { saveGalleryImageAction } from "@/lib/actions";

export function GalleryForm() {
  return (
    <form action={saveGalleryImageAction} className="admin-form info-panel form-grid">
      <AdminFormSection title="Image upload" />

      <AdminFormField hint="Any format, up to 20 MB per file." label="Upload image">
        <input className="admin-form-control" name="imageFile" type="file" />
      </AdminFormField>

      <AdminFormField label="Image URL (optional)">
        <input
          className="admin-form-control"
          name="imageUrl"
          placeholder="/uploads/gallery.jpg or https://..."
        />
      </AdminFormField>

      <AdminFormField label="Title">
        <input className="admin-form-control" name="title" placeholder="Image title" required />
      </AdminFormField>

      <AdminFormField
        hint="Caption or story for this image. Larger writing area for longer text."
        label="Description"
        span="full"
      >
        <AdminAutoTextarea name="description" placeholder="Write image description" variant="description" />
      </AdminFormField>

      <AdminFormSection title="SEO settings" />

      <AdminFormField label="SEO title">
        <input
          className="admin-form-control"
          name="seoTitle"
          placeholder="Optional — defaults to image title"
        />
      </AdminFormField>

      <AdminFormField label="SEO description">
        <AdminAutoTextarea
          name="seoDescription"
          placeholder="Optional search description"
          variant="compact"
        />
      </AdminFormField>

      <AdminFormField label="SEO keywords">
        <input
          className="admin-form-control"
          name="seoKeywords"
          placeholder="Nepal gallery, travel photo"
        />
      </AdminFormField>

      <AdminFormField label="Sort order">
        <input className="admin-form-control" defaultValue="0" name="sortOrder" type="number" />
      </AdminFormField>

      <label className="checklist-item">
        <input defaultChecked name="active" type="checkbox" />
        Active
      </label>

      <button className="btn" type="submit">
        Save gallery image
      </button>
    </form>
  );
}