import React from "react";
import Card from "../ui/Card";
import Input from "../ui/Input";
import SkeletonList from "../ui/SkeletonList";
import { LuSearch, LuTrash2 } from "react-icons/lu";
import { FileTypeIcon, getFileExtension } from "../../utils/storage";
import { formatBytes } from "../../utils/bytes";

const getFileSize = (file) => (file?.current_version?.size != null ? file.current_version.size : file?.size || 0);

export default function SpaceFilesCard({
  loading = false,
  files = [],
  selectedId = null,
  onSelect,
  query,
  onQueryChange,
  onMoveToTrash,
  onHardDelete,
}) {
  return (
    <Card className="lg:col-span-2 p-0 overflow-hidden" padding="none">
      <div className="p-4 sm:p-5 border-b border-black/10 dark:border-white/10 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="min-w-0">
          <h2 className="text-base sm:text-lg font-bold">فایل‌ها بر اساس حجم</h2>
          <p className="text-xs text-black/60 dark:text-white/70 mt-1 truncate">روی هر ردیف کلیک کنید تا جزئیات را ببینید</p>
        </div>

        <div className="w-full sm:w-80">
          <Input
            label="جستجو نام/مسیر..."
            value={query}
            onChange={(e) => onQueryChange?.(e.target.value)}
            rightSlot={<LuSearch className="h-4 w-4 opacity-70" />}
          />
        </div>
      </div>

      <div className="p-2 sm:p-4">
        {loading ? (
          <SkeletonList rows={4} className="!mt-0" />
        ) : files.length === 0 ? (
          <div className="p-4 rounded-xl shadow border border-black/10 dark:border-white/10 bg-[#f2f2f2] dark:bg-[#001F3F] text-sm text-black/60 dark:text-white/70">
            فایلی برای نمایش وجود ندارد.
          </div>
        ) : (
          <div className="max-h-[520px] overflow-y-auto pr-1">
            <div className="hidden md:flex text-xs font-semibold text-black/60 dark:text-white/70 px-3 pb-2">
              <div className="w-6/12">نام فایل</div>
              <div className="w-3/12">حجم</div>
              <div className="w-3/12 text-left">اکشن‌ها</div>
            </div>

            <ul className="space-y-2">
              {files.map((file) => {
                const ext = getFileExtension(file?.name || "");
                const sizeText = formatBytes(getFileSize(file));
                const isActive = selectedId === file?.id;

                return (
                  <li key={file.id}>
                    <button
                      type="button"
                      onClick={() => onSelect?.(file)}
                      className={`w-full text-right rounded-2xl shadow border transition p-3 sm:p-4 min-w-0
                        ${
                          isActive
                            ? "border-[#43BEFF] bg-[#43BEFF10]"
                            : "border-black/10 dark:border-white/10 bg-[#f2f2f2] dark:bg-[#001F3F] hover:bg-black/5 dark:hover:bg-white/10"
                        }`}
                    >
                      <div className="flex items-start gap-3 min-w-0">
                        <div className="w-10 h-10 rounded-xl shadow bg-white/70 dark:bg-white/10 border border-black/10 dark:border-white/10 flex items-center justify-center shrink-0">
                          <FileTypeIcon ext={ext} className="h-5 w-5 text-[#43BEFF]" />
                        </div>

                        <div className="flex-1 min-w-0">
                          <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
                            <div className="min-w-0">
                              <div className="text-sm font-bold truncate text-black dark:text-white">{file.name}</div>
                              <div className="text-xs text-black/60 dark:text-white/70 truncate mt-1">
                                مسیر: {file.folderPath || "—"}
                              </div>
                            </div>

                            <div className="flex flex-wrap items-center justify-end gap-2">
                              <span className="text-xs px-3 py-1 rounded-full border border-black/10 dark:border-white/10 bg-white/60 dark:bg-white/10 whitespace-nowrap">
                                {sizeText}
                              </span>

                              {/* Desktop actions */}
                              <span onClick={(e) => e.stopPropagation()} className="hidden md:inline-flex">
                                <button
                                  type="button"
                                  onClick={() => onMoveToTrash?.(file)}
                                  className="inline-flex items-center gap-1 text-[11px] px-2.5 py-1.5 rounded-xl shadow bg-white/70 dark:bg-white/10 border hover:dark:bg-white/20 border-black/10 dark:border-white/10 hover:bg-white transition"
                                >
                                  <LuTrash2 className="h-3.5 w-3.5" />
                                  سطل
                                </button>
                              </span>

                              <span onClick={(e) => e.stopPropagation()} className="hidden md:inline-flex">
                                <button
                                  type="button"
                                  onClick={() => onHardDelete?.(file)}
                                  className="inline-flex items-center gap-1 text-[11px] px-2.5 py-1.5 rounded-xl shadow bg-red-500/10 border border-red-500/20 hover:bg-red-500/20 text-red-600 dark:text-red-200"
                                >
                                  <LuTrash2 className="h-3.5 w-3.5" />
                                  حذف
                                </button>
                              </span>
                            </div>
                          </div>

                          {/* Mobile actions */}
                          <div className="md:hidden mt-3 flex flex-col sm:flex-row gap-2">
                            <button
                              type="button"
                              onClick={(e) => {
                                e.stopPropagation();
                                onMoveToTrash?.(file);
                              }}
                              className="w-full inline-flex items-center justify-center gap-1 text-[11px] px-3 py-2 rounded-xl shadow bg-white/70 dark:bg-white/10 hover:dark:bg-white/20 border border-black/10 dark:border-white/10"
                            >
                              <LuTrash2 className="h-3.5 w-3.5" />
                              انتقال به سطل
                            </button>

                            <button
                              type="button"
                              onClick={(e) => {
                                e.stopPropagation();
                                onHardDelete?.(file);
                              }}
                              className="w-full inline-flex items-center justify-center gap-1 text-[11px] px-3 py-2 rounded-xl shadow bg-red-500/10 border border-red-500/20 text-red-600 dark:text-red-200"
                            >
                              <LuTrash2 className="h-3.5 w-3.5" />
                              حذف دائمی
                            </button>
                          </div>
                        </div>
                      </div>
                    </button>
                  </li>
                );
              })}
            </ul>
          </div>
        )}
      </div>
    </Card>
  );
}
