import React from "react";
import Card from "../ui/Card";
import Button from "../ui/Button";
import { LuChevronLeft, LuTrash2 } from "react-icons/lu";
import { FileTypeIcon, getFileExtension } from "../../utils/storage";
import { formatBytes } from "../../utils/bytes";
import SpaceInfoRow from "./SpaceInfoRow";

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

export default function SpaceFileDetailsCard({ selected, onClearSelected, onMoveToTrash, onHardDelete }) {
  return (
    <Card className="p-0 overflow-hidden" padding="none">
      <div className="p-4 sm:p-5">
        <div className="flex items-center justify-between gap-2">
          <div className="min-w-0">
            <div className="text-base font-bold">جزئیات فایل</div>
            <div className="text-xs text-black/60 dark:text-white/70 mt-1 truncate">یک فایل را از لیست انتخاب کنید</div>
          </div>

          {selected ? (
            <Button
              variant="outline"
              size="lg"
              onClick={() => onClearSelected?.()}
              leftIcon={<LuChevronLeft className="h-4 w-4 rotate-180 text-[#43BEFF]" />}
            >
              برگشت
            </Button>
          ) : null}
        </div>

        {!selected ? (
          <div className="mt-4 rounded-2xl shadow border border-black/10 dark:border-white/10 bg-[#f2f2f2] dark:bg-[#001F3F] p-4">
            <div className="text-sm text-black/60 dark:text-white/70">برای دیدن اطلاعات بیشتر، روی یکی از فایل‌ها کلیک کن.</div>
          </div>
        ) : (
          <div className="mt-4 space-y-3 min-w-0">
            <div className="rounded-2xl shadow border border-black/10 dark:border-white/10 bg-[#A1E3F980] dark:bg-[#001F3F] p-4">
              <div className="flex items-center gap-3 min-w-0">
                <div className="w-12 h-12 rounded-2xl 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={getFileExtension(selected.name)} className="h-6 w-6 text-[#43BEFF]" />
                </div>
                <div className="min-w-0">
                  <div className="font-extrabold text-sm truncate">{selected.name}</div>
                  <div className="text-xs text-black/60 dark:text-white/70 mt-1 truncate">
                    مسیر: {selected.folderPath || "—"}
                  </div>
                </div>
              </div>
            </div>

            <SpaceInfoRow label="حجم" value={formatBytes(getFileSize(selected))} />
            <SpaceInfoRow label="پسوند" value={getFileExtension(selected.name) || "—"} />
            <SpaceInfoRow label="شناسه فایل" value={String(selected.id)} />
            <SpaceInfoRow label="مسیر" value={selected.folderPath || "—"} />

            <div className="pt-2 flex flex-col gap-2">
              <Button
                variant="outline"
                size="full"
                onClick={() => onMoveToTrash?.(selected)}
                leftIcon={<LuTrash2 className="h-4 w-4" />}
              >
                انتقال به سطل زباله
              </Button>

              <Button
                variant="ghost"
                size="full"
                onClick={() => onHardDelete?.(selected)}
                leftIcon={<LuTrash2 className="h-4 w-4" />}
                className="!bg-red-500/10 !border !border-red-500/20 hover:!bg-red-500/20 text-red-600 dark:text-red-200"
              >
                حذف دائمی
              </Button>
            </div>
          </div>
        )}
      </div>
    </Card>
  );
}
