import React from "react";
import Card from "../ui/Card";
import DomainRow from "./DomainRow";

export default function DomainsListCard({
  loading,
  domains,
  selectedId,
  onSelectDomain,

  verifyLeftSec,
  verifyInFlight,

  onCopyTxtName,
  onCopyTxtValue,
  onVerify,

  onToggleActive,
  onTogglePrimary,
  onDelete,
  patchBusy,
  deleteBusy,
  deleteArmedLeftSec,
}) {
  return (
    <Card className="bg-white dark:bg-[#16325b] overflow-hidden" padding="none">
      <div className="p-4 sm:p-5 border-b border-black/10 dark:border-white/10 flex items-center justify-between gap-3">
        <div className="min-w-0">
          <div className="text-sm font-extrabold">دامنه‌های شما</div>
          <div className="text-xs opacity-70 mt-1">
            روی هر دامنه کلیک کن تا راهنمای TXT نمایش داده بشه.
          </div>
        </div>

        <span className="shrink-0 text-xs px-3 py-1 rounded-full border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/10">
          {String(domains?.length || 0).toLocaleString("fa-IR")} دامنه
        </span>
      </div>

      {loading ? (
        <div className="p-4 sm:p-5 space-y-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="h-16 rounded-xl bg-black/5 dark:bg-white/10 animate-pulse" />
          ))}
        </div>
      ) : (domains?.length || 0) === 0 ? (
        <div className="p-4 sm:p-5 text-sm text-black/60 dark:text-white/70">
          هنوز دامنه‌ای ثبت نکردی.
        </div>
      ) : (
        <div className="p-3 sm:p-4 space-y-2">
          {domains.map((d) => (
            <DomainRow
              key={d.id}
              domain={d}
              isSelected={selectedId === d.id}
              onSelect={() => onSelectDomain(d)}
              onCopyTxtName={() => onCopyTxtName(d)}
              onCopyTxtValue={() => onCopyTxtValue(d)}
              onVerify={() => onVerify(d)}
              verifyLeftSec={verifyLeftSec(d.id)}
              verifyInFlight={verifyInFlight(d.id)}
              onToggleActive={() => onToggleActive?.(d)}
              onTogglePrimary={() => onTogglePrimary?.(d)}
              onDelete={() => onDelete?.(d)}
              patchBusy={patchBusy?.(d.id) || false}
              deleteBusy={deleteBusy?.(d.id) || false}
              deleteArmedLeftSec={deleteArmedLeftSec?.(d.id) || 0}
            />
          ))}
        </div>
      )}
    </Card>
  );
}
