// src/components/storage/FilesList.jsx
import React from "react";
import { IoEllipsisVertical } from "react-icons/io5";
import { FaStar } from "react-icons/fa";
import {
  FileTypeIcon,
  formatDate,
  getEffectiveHex,
  getFileExtension,
  getFileId,
  getItemColorStyle,
  hexToRgba,
} from "../../utils/storage";
import ActionMenuPortal from "./ActionMenuPortal";

export default function FilesList({
  files = [],
  fileMenu,
  onToggleFileMenu,
  onCloseFileMenu,
  renderFileMenu, // (fileWithPath) => ReactNode
}) {
  if (!files.length) return null;

  return (
    <div className="rounded-2xl border border-black/10 dark:border-white/10 bg-[#A1E3F919] shadow overflow-hidden">
      <ul className="max-h-[650px] overflow-y-auto">
        <li className="hidden md:flex sticky top-0 bg-[#A1E3F919] backdrop-blur border-b dark:border-white/10 border-black/10 px-3 py-3 text-xs font-bold text-black/70 dark:text-white/80">
          <div className="w-4/12">نام فایل</div>
          <div className="w-2/12">آخرین به‌روزرسانی</div>
          <div className="w-2/12">مالک</div>
          <div className="w-3/12">محل ذخیره</div>
          <div className="w-1/12 text-left"> </div>
        </li>

        {files.map((file) => {
          const location = file.folderPath || "ریشه";
          const ext = getFileExtension(file.name);
          const id = getFileId(file);
          const fhex = getEffectiveHex(file);

          return (
            <li key={String(id)} className="px-2 md:px-3 py-2 border-b dark:border-white/10 border-black/10">
              <div className="hidden md:flex items-center gap-2 rounded-2xl p-2 hover:bg-black/5 dark:hover:bg-white/10 transition">
                <div className="w-4/12 flex items-center gap-2 min-w-0">
                  <div
                    className="w-10 h-10 rounded-xl border flex items-center justify-center shrink-0"
                    style={{
                      background: hexToRgba(fhex, 0.14),
                      borderColor: hexToRgba(fhex, 0.35),
                    }}
                  >
                    <FileTypeIcon ext={ext} className="h-5 w-5" style={getItemColorStyle(file)} />
                  </div>
                  {file.is_starred && <FaStar className="text-yellow-500 h-4 w-4 shrink-0" />}
                  <span className="truncate font-semibold">{file.name}</span>
                </div>

                <div className="w-2/12 text-sm">{formatDate(file.updated_at)}</div>
                <div className="w-2/12 truncate text-sm">{file.owner_email || "-"}</div>
                <div className="w-3/12 truncate text-sm">{location}</div>

                <div className="w-1/12 flex justify-end">
                  <button
                    type="button"
                    className="p-2 rounded-xl hover:bg-black/5 dark:hover:bg-white/10"
                    onPointerDown={(e) => {
                      e.preventDefault();
                      e.stopPropagation();
                    }}
                    onClick={(e) => onToggleFileMenu?.(id, e)}
                  >
                    <IoEllipsisVertical className="h-5 w-5" />
                  </button>

                  <ActionMenuPortal
                    open={String(fileMenu?.id) === String(id)}
                    rect={fileMenu?.rect}
                    onClose={onCloseFileMenu}
                    width={310}
                  >
                    {renderFileMenu?.({ ...file, folderPath: location })}
                  </ActionMenuPortal>
                </div>
              </div>

              {/* Mobile card */}
              <div className="md:hidden rounded-2xl p-3 bg-[#A1E3F980] dark:bg-[#A1E3F919] border border-black/5 dark:border-white/10">
                <div className="flex items-start justify-between gap-2">
                  <div className="flex gap-3 min-w-0">
                    <div
                      className="w-10 h-10 rounded-xl border flex items-center justify-center shrink-0"
                      style={{
                        background: hexToRgba(fhex, 0.14),
                        borderColor: hexToRgba(fhex, 0.35),
                      }}
                    >
                      <FileTypeIcon ext={ext} className="h-5 w-5" style={getItemColorStyle(file)} />
                    </div>

                    <div className="min-w-0">
                      <p className="font-bold truncate flex items-center gap-2">
                        {file.is_starred && <FaStar className="text-yellow-500 h-4 w-4 shrink-0" />}
                        {file.name}
                      </p>
                      <p className="text-xs mt-1 text-black/60 dark:text-white/70 truncate">
                        {file.owner_email || "-"} • {formatDate(file.updated_at)}
                      </p>
                      <p className="text-xs mt-1 text-black/60 dark:text-white/70 truncate">
                        مسیر: {location}
                      </p>
                    </div>
                  </div>

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

                    <ActionMenuPortal
                      open={String(fileMenu?.id) === String(id)}
                      rect={fileMenu?.rect}
                      onClose={onCloseFileMenu}
                      width={310}
                    >
                      {renderFileMenu?.({ ...file, folderPath: location })}
                    </ActionMenuPortal>
                  </div>
                </div>
              </div>
            </li>
          );
        })}
      </ul>
    </div>
  );
}
