/* global React */
(function(){

/* =============================================================
   BannedState.jsx — suspended / banned full-screen state (P2-09)
   --------------------------------------------------------------
   Full takeover (like delete-account). Two severities:
     - "suspended": temporary, shows remaining time + appeal
     - "banned":    permanent, shows reason + appeal-once
   ============================================================= */

const fmtFa = (n) => String(n).replace(/\d/g, d => "۰۱۲۳۴۵۶۷۸۹"[d]);

window.BannedState = function BannedState({ severity = "suspended", reason, daysLeft = 5, onAppeal, onLogout }) {
  const banned = severity === "banned";
  return (
    <div className="kd-banned">
      <div className="kd-banned__aurora" aria-hidden="true">
        <i className="kd-login__aurora-1" />
        <i className="kd-login__aurora-2" />
      </div>

      <div className="kd-banned__inner">
        <div className={`kd-banned__badge ${banned ? "is-perm" : ""}`}>
          <Icon name={banned ? "close" : "bell"} size={36} stroke={2.2} />
        </div>

        <h1 className="kd-banned__h">
          {banned ? "حسابت مسدود شده" : "حسابت موقتاً معلق شده"}
        </h1>
        <p className="kd-banned__sub">
          {banned
            ? "به‌خاطر نقض جدی قوانین جامعه، دسترسی این حساب برای همیشه بسته شده."
            : `به‌خاطر نقض قوانین جامعه، حسابت موقتاً معلق شده. تا ${fmtFa(daysLeft)} روز دیگه دوباره فعال می‌شه.`}
        </p>

        <div className="kd-banned__reason">
          <span className="kd-banned__reason-lbl">دلیل</span>
          <p>{reason || (banned ? "انتشار مکرر محتوای ناقض حقوق دیگران، با وجود اخطارهای قبلی." : "گزارش‌های متعدد درباره‌ی محتوای نامناسب؛ در حال بررسی نهایی هستیم.")}</p>
        </div>

        {!banned && (
          <div className="kd-banned__countdown">
            <div className="kd-banned__count-num">{fmtFa(daysLeft)}</div>
            <div className="kd-banned__count-lbl">روز تا رفع تعلیق</div>
          </div>
        )}

        <div className="kd-banned__what">
          <h3>تو این مدت چی می‌تونی بکنی؟</h3>
          <ul>
            <li><Icon name="check" size={13} stroke={2.6} /> پست‌های قبلیت محفوظه و حذف نمی‌شه</li>
            <li><Icon name="check" size={13} stroke={2.6} /> می‌تونی به این تصمیم اعتراض کنی</li>
            <li><Icon name="close" size={13} stroke={2.4} style={{ color: "#ff5774" }} /> نمی‌تونی پست بفرستی یا کامنت بذاری</li>
          </ul>
        </div>

        <div className="kd-banned__actions">
          <button className="kd-btn kd-btn--primary kd-btn--lg" onClick={onAppeal}>
            اعتراض می‌کنم
          </button>
          <button className="kd-banned__logout" onClick={onLogout}>خروج از حساب</button>
        </div>

        <p className="kd-banned__foot">
          سوالی داری؟ با <a href="#" tabIndex={-1}>پشتیبانی</a> در تماس باش.
        </p>
      </div>
    </div>
  );
};
})();