'use client';

import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useRef, useState } from 'react';
import { api } from '@/lib/api';

interface ItemImage {
  id: number;
  url: string;
  thumb_url: string;
  order_column: number;
}

interface ItemDetailShape {
  id: string;
  images?: ItemImage[];
}

export function ImageUploader({
  storeId,
  itemId,
  images,
  onChange,
}: {
  storeId: string;
  itemId: string;
  images: ItemImage[];
  onChange: (images: ItemImage[]) => void;
}) {
  const qc = useQueryClient();
  const fileInputRef = useRef<HTMLInputElement | null>(null);
  const [dragOver, setDragOver] = useState(false);

  const uploadMut = useMutation({
    mutationFn: (files: File[]) => api.items.uploadImages(storeId, itemId, files),
    onSuccess: (res) => {
      const detail = res.data as unknown as ItemDetailShape;
      onChange(detail.images ?? []);
      qc.invalidateQueries({ queryKey: ['seller-item', storeId, itemId] });
    },
  });

  const removeMut = useMutation({
    mutationFn: (mediaId: number) => api.items.removeImage(storeId, itemId, mediaId),
    onSuccess: (_res, mediaId) => {
      onChange(images.filter((i) => i.id !== mediaId));
      qc.invalidateQueries({ queryKey: ['seller-item', storeId, itemId] });
    },
  });

  const handleFiles = (files: FileList | File[]) => {
    const arr = Array.from(files).filter((f) => f.type.startsWith('image/'));
    if (arr.length) uploadMut.mutate(arr);
  };

  return (
    <div className="space-y-3">
      <div
        onDragOver={(e) => {
          e.preventDefault();
          setDragOver(true);
        }}
        onDragLeave={() => setDragOver(false)}
        onDrop={(e) => {
          e.preventDefault();
          setDragOver(false);
          handleFiles(e.dataTransfer.files);
        }}
        onClick={() => fileInputRef.current?.click()}
        className={`cursor-pointer rounded border-2 border-dashed p-6 text-center text-sm ${
          dragOver ? 'border-forest bg-forest/5' : 'border-forest/20 text-ink/60'
        }`}
      >
        Drop images here or click to upload
        <input
          ref={fileInputRef}
          type="file"
          accept="image/*"
          multiple
          className="hidden"
          onChange={(e) => {
            if (e.target.files) handleFiles(e.target.files);
            e.target.value = '';
          }}
        />
      </div>

      {uploadMut.isPending && (
        <p className="text-xs text-ink/60">Uploading…</p>
      )}
      {uploadMut.isError && (
        <p className="text-xs text-terracotta">Upload failed. Try again.</p>
      )}

      {images.length > 0 && (
        <ul className="grid grid-cols-3 gap-3 sm:grid-cols-5">
          {images.map((img, i) => (
            <li key={img.id} className="group relative aspect-square overflow-hidden rounded border border-forest/20">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={img.thumb_url} alt="" className="h-full w-full object-cover" />
              {i === 0 && (
                <span className="absolute left-1 top-1 rounded bg-forest px-1 text-xs text-white">Primary</span>
              )}
              <button
                type="button"
                onClick={() => removeMut.mutate(img.id)}
                disabled={removeMut.isPending}
                className="absolute right-1 top-1 rounded bg-black/70 px-1 text-xs text-white opacity-0 group-hover:opacity-100 disabled:opacity-30"
              >
                Remove
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}