import React, { useMemo } from "react";
import Card from "../ui/Card";
import Button from "../ui/Button";
import { LuCheck } from "react-icons/lu";
import DomainInfoRow from "./DomainInfoRow";

export default function DomainInstructionsCard({ selected, onVerify, onCopy }) {
  const txtName = useMemo(() => {
    if (!selected?.hostname) return "";
    return `_netnest-verify`;
  }, [selected]);

  const txtValue = selected?.verification_token || "";

  return (
    <Card className="!border-[#43BEFF] bg-white dark:bg-[#16325b]" padding="lg">
      <div className="space-y-3">
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0">
            <div className="text-sm font-extrabold truncate">
              راهنمای تایید برای: {selected?.hostname}
            </div>
            <div className="text-xs opacity-70 mt-1">
              رکورد TXT رو در DNS بساز، سپس تایید بزن.
            </div>
          </div>

          <Button
            type="button"
            onClick={onVerify}
            variant="outline"
            size="lg"
            leftIcon={<LuCheck className="w-4 h-4 text-[#43BEFF] dark:text-white" />}
          >
            تایید
          </Button>
        </div>

        <div className="grid md:grid-cols-2 gap-3 text-sm">
          <DomainInfoRow
            label="TXT Record Name"
            value={txtName}
            onCopy={() => onCopy(txtName, "TXT Name")}
          />
          <DomainInfoRow
            label="TXT Record Value"
            value={txtValue}
            onCopy={() => onCopy(txtValue, "TXT Value")}
          />
        </div>

        <div className="p-3 rounded-xl shadow bg-[#f2f2f2] dark:bg-[#001F3F] border border-white/10 text-xs leading-6 text-black/80 dark:text-white/80">
          <div className="opacity-80 mb-1">نکات:</div>
          <ul className="list-disc pr-5 space-y-1">
            <li>بعد از ساخت TXT ممکنه ۱ تا ۱۵ دقیقه طول بکشه تا DNS منتشر بشه.</li>
            <li>TXT باید دقیقاً match بشه (اسم و مقدار).</li>
          </ul>
        </div>
      </div>
    </Card>
  );
}
