// src/components/storage/SuggestedFolders.jsx
import React from "react";
import { IoEllipsisVertical, IoFolderOpen } from "react-icons/io5";
import { FaStar } from "react-icons/fa";
import { getEffectiveHex, getFolderId, hexToRgba } from "../../utils/storage";
import ActionMenuPortal from "./ActionMenuPortal";

export default function SuggestedFolders({
  folders = [],
  folderMenu,
  onToggleFolderMenu,
  onCloseFolderMenu,
  renderFolderMenu, // (folder) => ReactNode
}) {
  return (
    <div className="mb-6">
      <button className="dark:text-white text-black font-extrabold text-base sm:text-lg">پوشه‌های پیشنهادی</button>

      {folders.length === 0 ? (
        <p className="dark:text-white/60 text-sm mt-4">پوشه‌ای برای نمایش وجود ندارد.</p>
      ) : (
        <ul className="grid grid-cols-1 max-h-[250px] overflow-y-auto sm:grid-cols-2 lg:grid-cols-4 gap-4 py-4">
          {folders.map((folder) => {
            const id = getFolderId(folder);
            const fhex = getEffectiveHex(folder);

            return (
              <li
                key={String(id)}
                className="relative min-w-0 rounded-2xl p-4
                  bg-[#A1E3F980] dark:bg-[#A1E3F919]
                  hover:bg-[#f2f2f2] dark:hover:bg-[#001F3F]
                  border border-black/5 dark:border-white/10
                  shadow transition-colors"
              >
                <div className="flex items-start justify-between gap-3 min-w-0">
                  <div className="flex gap-3 items-center min-w-0">
                    <div
                      className="w-11 h-11 rounded-2xl border flex items-center justify-center shrink-0"
                      style={{
                        background: hexToRgba(fhex, 0.16),
                        borderColor: hexToRgba(fhex, 0.35),
                      }}
                    >
                      <IoFolderOpen className="h-6 w-6" style={{ color: fhex }} />
                    </div>

                    <div className="min-w-0">
                      <p className="truncate font-bold flex items-center gap-1">
                        {folder.is_starred && <FaStar className="text-yellow-500 h-4 w-4" />}
                        {folder.name}
                      </p>
                      <p className="text-xs mt-1 dark:text-white/70 text-black/60 truncate">{folder.owner_email || "-"}</p>
                    </div>
                  </div>

                  <button
                    type="button"
                    className="p-2 rounded-xl hover:bg-black/5 dark:hover:bg-white/10 shrink-0"
                    onPointerDown={(e) => {
                      e.preventDefault();
                      e.stopPropagation();
                    }}
                    onClick={(e) => onToggleFolderMenu?.(id, e)}
                  >
                    <IoEllipsisVertical className="h-5 w-5 dark:text-white text-black" />
                  </button>

                  <ActionMenuPortal open={String(folderMenu?.id) === String(id)} rect={folderMenu?.rect} onClose={onCloseFolderMenu} width={310}>
                    {renderFolderMenu?.(folder)}
                  </ActionMenuPortal>
                </div>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}
