TorbatYar/frontend/modules/commercial/components/DomainPolicyPanel.tsx

"use client";

import type { DomainPolicyResult } from "../types";
import { FeatureLock } from "./FeatureLock";
import { CommercialEmptyState } from "./CommercialEmptyState";
import { enumLabel, friendlyMessage } from "../presentation";

export function DomainPolicyPanel({
  unlocked,
  policy,
  tenantId,
}: {
  unlocked: boolean;
  policy?: DomainPolicyResult | null;
  tenantId?: string;
}) {
  const dns = policy?.dns_instructions || [];
  const reason = policy?.reason;

  return (
    <section className="space-y-3">
      {!unlocked ? (
        <div className="rounded-2xl border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-900">
          {friendlyMessage(reason, "در دوره آزمایشی، زیردامنه رایگان شما فعال است. برای اتصال دامنه اختصاصی، یک اشتراک فعال انتخاب کنید.")}
        </div>
      ) : (
        <div className="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">
          دامنه اختصاصی برای اشتراک شما فعال است.
          {policy?.ssl_ready ? " · گواهی SSL آماده است" : " · گواهی SSL پس از اتصال صادر می‌شود"}
          {policy?.verification_state
            ? ` · وضعیت تأیید: ${enumLabel(policy.verification_state)}`
            : null}
        </div>
      )}

      <FeatureLock
        locked={!unlocked}
        tenantId={tenantId}
        featureKey={tenantId ? "custom_domain" : undefined}
        reason={reason}
        fallback={
          <div className="rounded-xl border border-dashed border-gray-200 bg-gray-50 p-4 text-sm text-gray-600">
            پس از فعال‌کردن اشتراک، راهنمای اتصال DNS و دریافت گواهی SSL اینجا نمایش داده می‌شود.
          </div>
        }
      >
        {dns.length ? (
          <ul className="space-y-2 rounded-2xl border border-gray-100 bg-white p-4 text-sm">
            <li className="font-semibold text-secondary">دستورالعمل DNS</li>
            {dns.map((row, idx) => {
              if (typeof row === "string") {
                return (
                  <li key={idx} className="font-mono text-xs text-gray-600" dir="ltr">
                    {row}
                  </li>
                );
              }
              return (
                <li key={idx} className="font-mono text-xs text-gray-600" dir="ltr">
                  {[row.type, row.host, row.value].filter(Boolean).join(" · ")}
                  {row.note ? ` — ${row.note}` : ""}
                </li>
              );
            })}
          </ul>
        ) : (
          <CommercialEmptyState
            title="راهنمای اتصال آماده نمایش است"
            description="دامنه را ثبت کنید تا رکوردهای لازم برای اتصال و تأیید نمایش داده شوند."
          />
        )}
      </FeatureLock>
    </section>
  );
}