'use client';

import { useFormState, useFormStatus } from 'react-dom';
import type { ApiVendorGalleryImage } from '@/lib/backend-api';
import { deleteGalleryImage, uploadGalleryImages, type GalleryState } from '@/app/vendor/products/actions';

const initialState: GalleryState = undefined;

function UploadButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending} className="rounded-md border border-navy-200 px-4 py-2 text-sm font-semibold text-navy-800 hover:bg-beige disabled:opacity-60">
      {pending ? 'Uploading…' : 'Upload'}
    </button>
  );
}

export function GalleryManager({ productId, gallery }: { productId: number; gallery: ApiVendorGalleryImage[] }) {
  const uploadAction = uploadGalleryImages.bind(null, productId);
  const [state, formAction] = useFormState(uploadAction, initialState);

  return (
    <div className="card p-6">
      <h2 className="font-serif text-lg font-bold text-navy-800">Additional Photos</h2>
      <p className="mt-1 text-xs text-navy-500">Extra gallery images shown on the product page.</p>

      {gallery.length > 0 && (
        <div className="mt-4 grid grid-cols-3 gap-3 sm:grid-cols-4">
          {gallery.map((img) => (
            <div key={img.id} className="group relative overflow-hidden rounded-md border border-navy-100">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={img.image} alt="" className="aspect-square w-full object-cover" />
              <form action={deleteGalleryImage.bind(null, productId, img.id)}>
                <button
                  type="submit"
                  className="absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white/90 text-xs font-bold text-red-600 opacity-0 shadow group-hover:opacity-100"
                  aria-label="Remove image"
                >
                  &times;
                </button>
              </form>
            </div>
          ))}
        </div>
      )}

      {state?.error && <p className="mt-3 text-sm text-red-600">{state.error}</p>}

      <form action={formAction} className="mt-4 flex flex-wrap items-center gap-3">
        <input type="file" name="files" accept="image/jpeg,image/png,image/webp" multiple className="text-sm text-navy-600" />
        <UploadButton />
      </form>
    </div>
  );
}