'use client';

import React, { useState, useCallback } from 'react';
import Image from 'next/image';
import { X } from 'lucide-react';

export function ImageManager({
  existingImages,
  newFiles,
  onAddFiles,
  onRemoveExisting,
  onRemoveNew,
}: {
  existingImages: { id: string; url: string; is_primary: boolean }[];
  newFiles: File[];
  onAddFiles: (files: File[]) => void;
  onRemoveExisting: (id: string) => void;
  onRemoveNew: (index: number) => void;
}) {
  const [dragging, setDragging] = useState(false);
  const total = existingImages.length + newFiles.length;

  const addFiles = useCallback(
    (incoming: FileList | null) => {
      if (!incoming) return;
      const accepted = Array.from(incoming).filter((f) =>
        ['image/jpeg', 'image/png', 'image/webp'].includes(f.type)
      );
      onAddFiles(
        [...newFiles, ...accepted].slice(
          0,
          Math.max(0, 8 - existingImages.length)
        )
      );
    },
    [newFiles, existingImages.length, onAddFiles]
  );

  return (
    <div className="space-y-6">
      {/* Existing Images */}
      {existingImages.length > 0 && (
        <div>
          <p className="text-xs font-bold text-gray-500 uppercase tracking-widest mb-3">
            Gambar Tersimpan
          </p>
          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-3">
            {existingImages.map((img) => (
              <div
                key={img.id}
                className="relative group aspect-square rounded-xl overflow-hidden bg-white border border-gray-200 shadow-sm"
              >
                <Image
                  src={img.url}
                  alt=""
                  className="w-full h-full object-cover"
                  width={500}
                  height={500}
                />
                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                  <button
                    type="button"
                    onClick={() => onRemoveExisting(img.id)}
                    className="w-8 h-8 bg-rose-500 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-rose-600 hover:scale-110 transition-all"
                  >
                    <X className="w-4 h-4" />
                  </button>
                </div>
                {img.is_primary && (
                  <span className="absolute bottom-2 left-2 text-[9px] font-bold bg-yellow-400 text-yellow-900 px-2 py-1 rounded-md uppercase tracking-widest shadow-sm">
                    Utama
                  </span>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* New files preview */}
      {newFiles.length > 0 && (
        <div>
          <p className="text-xs font-bold text-gray-500 uppercase tracking-widest mb-3">
            Gambar Baru{' '}
            <span className="text-rose-400 normal-case tracking-normal ml-1">
              (Belum Disimpan)
            </span>
          </p>
          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-3">
            {newFiles.map((file, i) => (
              <div
                key={i}
                className="relative group aspect-square rounded-xl overflow-hidden border-2 border-dashed border-yellow-400/50"
              >
                <Image
                  src={URL.createObjectURL(file)}
                  alt=""
                  className="w-full h-full object-cover"
                  width={500}
                  height={500}
                />
                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                  <button
                    type="button"
                    onClick={() => onRemoveNew(i)}
                    className="w-8 h-8 bg-rose-500 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-rose-600 hover:scale-110 transition-all"
                  >
                    <X className="w-4 h-4" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Drop zone */}
      {total < 8 && (
        <div
          onDragEnter={() => setDragging(true)}
          onDragLeave={() => setDragging(false)}
          onDragOver={(e) => e.preventDefault()}
          onDrop={(e) => {
            e.preventDefault();
            setDragging(false);
            addFiles(e.dataTransfer.files);
          }}
          className={`
            relative overflow-hidden rounded-2xl border-2 border-dashed transition-all duration-300
            ${dragging ? 'border-yellow-400 bg-yellow-50/50 scale-[1.02]' : 'border-gray-300 bg-white/40 hover:border-yellow-400 hover:bg-yellow-50/20'}
          `}
        >
          <input
            type="file"
            multiple
            accept="image/jpeg,image/png,image/webp"
            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
            title=""
            onChange={(e) => addFiles(e.target.files)}
          />
          <div className="p-8 sm:p-12 text-center pointer-events-none">
            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-yellow-100 text-yellow-600 mb-4 shadow-inner">
              <span className="text-2xl">+</span>
            </div>
            <p className="text-sm font-bold text-gray-900 mb-1">
              Tarik & lepas gambar ke sini
            </p>
            <p className="text-xs font-medium text-gray-500">
              atau klik untuk memilih file
            </p>
            <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mt-4">
              Maks 8 gambar • JPG, PNG, WEBP (Maks 2MB/file)
            </p>
          </div>
        </div>
      )}
    </div>
  );
}