import React from "react";
import Card from "../ui/Card";
import Button from "../ui/Button";
import { formatBytes } from "../../utils/bytes";

export default function SpaceUsageCard({
  usedBytes = 0,
  quotaBytes = 0,
  percent = 0,
  filesCount = 0,

  sortDesc = true,
  onToggleSort,
  onSortToast,
}) {
  const freeBytes = Math.max(0, quotaBytes - usedBytes);

  return (
    <Card className="lg:col-span-2 p-0 overflow-hidden" padding="none">
      <div className="p-4 sm:p-6 min-w-0">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
          <div className="min-w-0">
            <div className="text-sm text-black/60 dark:text-white/70">مصرف فضا</div>
            <div className="mt-1 text-lg sm:text-xl font-extrabold break-words">
              {formatBytes(usedBytes)}{" "}
              <span className="text-black/40 dark:text-white/50 text-sm font-semibold">
                از {formatBytes(quotaBytes)}
              </span>
            </div>
            <div className="mt-2 text-xs text-black/60 dark:text-white/70">
              فضای خالی: <b className="text-black dark:text-white">{formatBytes(freeBytes)}</b>
            </div>
          </div>

          <div className="sm:text-center">
            <div className="text-xs text-black/60 dark:text-white/70">راهنما</div>
            <div className="mt-1 text-xs leading-5 text-black/60 dark:text-white/70 sm:max-w-3xs">
              فایل‌های بزرگ‌تر سریع‌تر فضا را پر می‌کنند. از پایین می‌توانید مرتب کنید یا فایل‌ها را پاکسازی کنید.
            </div>
          </div>
        </div>

        <div className="mt-5">
          <div className="flex items-center justify-between text-xs text-black/60 dark:text-white/70 mb-2">
            <span>۰</span>
            <span>{percent}%</span>
            <span className="truncate">{formatBytes(quotaBytes)}</span>
          </div>

          <div className="h-3 rounded-full bg-black/10 dark:bg-white/10 overflow-hidden">
            <div
              className="h-full rounded-full bg-[#43BEFF] transition-all duration-500"
              style={{ width: `${Math.min(100, Math.max(0, percent))}%` }}
            />
          </div>

          <div className="mt-2 text-[11px] text-black/50 dark:text-white/60">
            شما حدود <b className="text-black dark:text-white">{percent}%</b> از فضای در دسترس را مصرف کرده‌اید.
          </div>
        </div>
      </div>

      <div className="px-4 sm:px-6 py-4 border-t border-black/10 dark:border-white/10 bg-[#A1E3F980] dark:bg-[#001F3F]">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div className="text-xs text-black/60 dark:text-white/70">
            تعداد فایل‌ها: <b className="text-black dark:text-white">{filesCount}</b>
          </div>

          <Button
            variant="outline"
            size="md"
            className="w-full sm:w-auto !text-xs"
            onClick={() => {
              onToggleSort?.();
              onSortToast?.(
                `مرتب‌سازی تغییر کرد: ${!sortDesc ? "بیشترین → کمترین" : "کمترین → بیشترین"}`,
                { title: "مرتب‌سازی" }
              );
            }}
          >
            مرتب‌سازی حجم: {sortDesc ? "بیشترین → کمترین" : "کمترین → بیشترین"}
          </Button>
        </div>
      </div>
    </Card>
  );
}
