'use client';

import { itemKey } from './album-utils.js';

function FolderCard({ folder, dragOver, onOpen, onDragOver, onDragLeave, onDrop }) {
  const classes = ['project-album-folder-card'];
  if (dragOver) classes.push('drop-target');
  return (
    <button
      type="button"
      className={classes.join(' ')}
      onClick={onOpen}
      onDragOver={onDragOver}
      onDragLeave={onDragLeave}
      onDrop={onDrop}
      aria-label={`Open folder ${folder.name}`}
    >
      <span className="project-album-folder-card-icon" aria-hidden="true">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" />
        </svg>
      </span>
      <span className="project-album-folder-card-body">
        <b>{folder.name}</b>
        <small>Folder</small>
      </span>
    </button>
  );
}

export default function AlbumFolderGrid({ subFolders, dragOverFolderId, setDragOverFolderId, navigateToFolder, albumItems, moveItem }) {
  if (!subFolders.length) return null;

  return (
    <div className="project-album-folders">
      {subFolders.map((f) => (
        <FolderCard
          key={f.id}
          folder={f}
          dragOver={dragOverFolderId === f.id}
          onOpen={() => navigateToFolder(f.id)}
          onDragOver={(event) => { event.preventDefault(); setDragOverFolderId(f.id); }}
          onDragLeave={() => setDragOverFolderId(null)}
          onDrop={(event) => {
            event.preventDefault();
            setDragOverFolderId(null);
            const key = event.dataTransfer.getData('text/madarx-item-key');
            const dragged = albumItems.find((it) => itemKey(it) === key);
            if (dragged) moveItem(dragged, f.id);
          }}
        />
      ))}
    </div>
  );
}
