"use client";

import { useState } from "react";
import Image from "next/image";

export default function ImageUploader({ defaultImages = [] }: { defaultImages?: string[] }) {
  const [images, setImages] = useState<string[]>(defaultImages);
  const [uploading, setUploading] = useState(false);
  const [error, setError] = useState("");

  async function handleFiles(files: FileList | null) {
    if (!files || files.length === 0) return;
    setUploading(true);
    setError("");
    try {
      const uploaded: string[] = [];
      for (const file of Array.from(files)) {
        const formData = new FormData();
        formData.append("file", file);
        const res = await fetch("/api/iv-manage-84x2/upload", { method: "POST", body: formData });
        const data = await res.json();
        if (!res.ok) throw new Error(data.error ?? "Upload failed");
        uploaded.push(data.url);
      }
      setImages((prev) => [...prev, ...uploaded]);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Upload failed");
    } finally {
      setUploading(false);
    }
  }

  function removeImage(url: string) {
    setImages((prev) => prev.filter((i) => i !== url));
  }

  return (
    <div>
      <label className="text-sm font-medium text-stone-700">Product images</label>

      {images.length > 0 && (
        <div className="mt-2 flex flex-wrap gap-2">
          {images.map((url) => (
            <div key={url} className="relative h-20 w-20 overflow-hidden rounded-md border border-stone-200 bg-stone-50">
              <Image src={url} alt="" fill className="object-cover" sizes="80px" />
              <button
                type="button"
                onClick={() => removeImage(url)}
                className="absolute right-0.5 top-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-xs text-white hover:bg-black/80"
                aria-label="Remove image"
              >
                ✕
              </button>
            </div>
          ))}
        </div>
      )}

      <input
        type="file"
        accept="image/jpeg,image/png,image/webp,image/gif"
        multiple
        onChange={(e) => handleFiles(e.target.files)}
        disabled={uploading}
        className="mt-2 block w-full text-sm text-stone-600 file:mr-3 file:rounded-md file:border-0 file:bg-rose-100 file:px-3 file:py-1.5 file:text-sm file:font-medium file:text-rose-800 hover:file:bg-rose-200"
      />
      {uploading && <p className="mt-1 text-xs text-stone-500">Uploading…</p>}
      {error && <p className="mt-1 text-xs text-red-700">{error}</p>}
      <p className="mt-1 text-xs text-stone-400">
        JPG, PNG, WEBP, or GIF, up to 5MB each. First image is used as the main photo. Leave empty to use a placeholder.
      </p>
      <p className="mt-1 text-xs text-amber-600">
        Tip: add 4-5 photos per product from different angles (front, back, in-hand, packaging) so customers can see it clearly before buying.
      </p>

      <textarea name="images" value={images.join("\n")} readOnly hidden />
    </div>
  );
}