import { prisma } from '@/lib/prisma';
import AdminNav from '@/components/AdminNav';
import { uploadGalleryPhoto } from '../actions';

export default async function NewGalleryPhotoPage() {
  const categories = await prisma.galleryCategory.findMany({ orderBy: { name: 'asc' } });

  return (
    <div className="mx-auto max-w-2xl px-6 py-12">
      <AdminNav />
      <h1 className="font-display text-3xl">Add a photo</h1>
      <p className="mt-2 text-sm text-muted">
        Upload a photo of completed work to show on the public gallery.
      </p>

      <form action={uploadGalleryPhoto} className="mt-10 space-y-6">
        <div>
          <label htmlFor="image" className="tag-label mb-2 block">
            Photo
          </label>
          <input
            id="image"
            name="image"
            type="file"
            accept="image/*"
            required
            className="w-full border border-line bg-paper px-3 py-2 text-sm"
          />
        </div>

        <div>
          <label htmlFor="caption" className="tag-label mb-2 block">
            Caption (optional)
          </label>
          <input
            id="caption"
            name="caption"
            className="w-full border border-line bg-paper px-3 py-2 text-sm"
            placeholder="Personalised wedding mugs"
          />
        </div>

        <div>
          <label htmlFor="categoryId" className="tag-label mb-2 block">
            Category (optional)
          </label>
          <select
            id="categoryId"
            name="categoryId"
            className="w-full border border-line bg-paper px-3 py-2 text-sm"
          >
            <option value="">— Uncategorized —</option>
            {categories.map((c) => (
              <option key={c.id} value={c.id}>
                {c.name}
              </option>
            ))}
          </select>
          <a href="/admin/gallery/categories/new" className="mt-1 inline-block text-xs text-clay hover:text-clay-dark">
            + Add a new category
          </a>
        </div>

        <button type="submit" className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark">
          Add photo
        </button>
      </form>
    </div>
  );
}
