/* global React */
(function(){
const { useState, useEffect } = React;

/* =============================================================
   DeleteAccount.jsx — flow حذف حساب با ۴ ماه waiting period
   --------------------------------------------------------------
   Scenes:
     0 — explain: what happens, warnings
     1 — reason (optional survey)
     2 — confirm via OTP
     3 — submitted: 7-day reversible countdown
   After 7 days the same screen flips to a 4-month read-only
   countdown ("حساب در حال حذف کامل"). User can cancel only
   in the first 7 days.

   Deletion state lives in localStorage so it survives reloads:
     kd-deletion-state:   "pending"      (within 7 days)
                       |  "hard"         (4-month, irreversible)
     kd-deletion-started-at: epoch ms
   ============================================================= */

const REASONS = [
  { id: "break",     label: "می‌خوام یه استراحت بدم"        },
  { id: "no_time",   label: "وقت ندارم"                     },
  { id: "privacy",   label: "نگران حریم خصوصی‌ام هستم"    },
  { id: "harass",    label: "اذیت یا آزار شدم"              },
  { id: "no_content",label: "محتوای جذاب پیدا نکردم"        },
  { id: "another",   label: "حساب جدید می‌سازم"             },
  { id: "other",     label: "سایر"                          },
];

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

const SEVEN_DAYS_MS    = 7 * 24 * 60 * 60 * 1000;
const FOUR_MONTHS_MS   = 4 * 30 * 24 * 60 * 60 * 1000;

function getDeletionState() {
  try {
    const state = localStorage.getItem("kd-deletion-state");
    const started = parseInt(localStorage.getItem("kd-deletion-started-at") || "0", 10);
    if (!state || !started) return null;
    return { state, started };
  } catch { return null; }
}
function setDeletionStarted() {
  try {
    localStorage.setItem("kd-deletion-state", "pending");
    localStorage.setItem("kd-deletion-started-at", String(Date.now()));
  } catch {}
}
function clearDeletion() {
  try {
    localStorage.removeItem("kd-deletion-state");
    localStorage.removeItem("kd-deletion-started-at");
  } catch {}
}
function fmtRemaining(ms) {
  if (ms <= 0) return "—";
  const days = Math.ceil(ms / (24*60*60*1000));
  if (days >= 30) {
    const months = Math.floor(days / 30);
    const extra = days % 30;
    return `${fmtFa(months)} ماه و ${fmtFa(extra)} روز`;
  }
  if (days >= 1) return `${fmtFa(days)} روز`;
  const hours = Math.ceil(ms / (60*60*1000));
  return `${fmtFa(hours)} ساعت`;
}

window.DeleteAccount = function DeleteAccount({ onCancel, onConfirmed, onBack }) {
  const existing = getDeletionState();
  const [scene, setScene] = useState(existing ? "submitted" : "explain");
  const [reason, setReason] = useState(null);
  const [code, setCode] = useState("");
  const [now, setNow] = useState(Date.now());
  const [started, setStarted] = useState(existing?.started || null);

  // tick the countdown
  useEffect(() => {
    if (scene !== "submitted") return;
    const t = setInterval(() => setNow(Date.now()), 60000);
    return () => clearInterval(t);
  }, [scene]);

  const submit = () => {
    setDeletionStarted();
    setStarted(Date.now());
    setScene("submitted");
  };
  const cancelDeletion = () => {
    clearDeletion();
    setStarted(null);
    onCancel?.();
  };

  return (
    <div className="kd-delete">
      <div className="kd-delete__aurora" aria-hidden="true">
        <i className="kd-login__aurora-1" />
        <i className="kd-login__aurora-2" />
        <i className="kd-login__aurora-3" />
      </div>

      <button className="kd-login__close" onClick={onBack} aria-label="بستن">
        <Icon name="close" size={18} stroke={2} />
      </button>

      <div className="kd-delete__inner">
        {/* ============ EXPLAIN ============ */}
        {scene === "explain" && (
          <div className="kd-delete__card kd-glass">
            <div className="kd-delete__warn-ring">
              <Icon name="close" size={32} stroke={2.4} />
            </div>
            <h1 className="kd-login__h">داری حساب رو حذف می‌کنی؟</h1>
            <p className="kd-login__sub">قبل از ادامه، بدون چی می‌شه:</p>

            <ul className="kd-delete__list">
              <li>
                <Icon name="check" size={14} stroke={2.6} />
                <div>
                  <strong>غیرفعال‌سازی فوری</strong>
                  <span>پروفایلت، پست‌هات و کامنت‌هات از همین لحظه پنهان میشن.</span>
                </div>
              </li>
              <li>
                <Icon name="check" size={14} stroke={2.6} />
                <div>
                  <strong>۷ روز فرصت برگشت</strong>
                  <span>تا یک هفته می‌تونی پشیمون بشی و حسابت برگرده.</span>
                </div>
              </li>
              <li>
                <Icon name="close" size={14} stroke={2.4} style={{ color: "#ff5774" }} />
                <div>
                  <strong>۴ ماه بعد، حذف کامل</strong>
                  <span>محتوا، فالووها، DMها — همه‌چیز برای همیشه از سرور پاک میشه.</span>
                </div>
              </li>
              <li>
                <Icon name="close" size={14} stroke={2.4} style={{ color: "#ff5774" }} />
                <div>
                  <strong>نشانی‌ها از بین می‌رن</strong>
                  <span>یوزرنیمت آزاد می‌شه؛ کسی می‌تونه بعد از ۴ ماه برش داره.</span>
                </div>
              </li>
            </ul>

            <div className="kd-delete__nav">
              <button className="kd-btn kd-btn--secondary kd-btn--md" onClick={onBack}>پشیمون شدم</button>
              <button className="kd-btn kd-btn--danger kd-btn--md" onClick={() => setScene("reason")}>
                ادامه بدم
              </button>
            </div>
          </div>
        )}

        {/* ============ REASON ============ */}
        {scene === "reason" && (
          <div className="kd-delete__card kd-glass">
            <button className="kd-login__back" onClick={() => setScene("explain")}>
              <Icon name="chevron" size={14} stroke={2.4} /> برگرد
            </button>
            <h1 className="kd-login__h">قبل از خداحافظی…</h1>
            <p className="kd-login__sub">
              می‌تونی به ما بگی چرا داری می‌ری؟ اختیاریه — کمک‌مون می‌کنه بهتر بشیم.
            </p>
            <div className="kd-delete__reasons">
              {REASONS.map(r => (
                <button
                  key={r.id}
                  className={`kd-delete__reason ${reason === r.id ? "is-on" : ""}`}
                  onClick={() => setReason(r.id)}>
                  <span className="kd-delete__reason-radio">{reason === r.id && <i />}</span>
                  {r.label}
                </button>
              ))}
            </div>
            <div className="kd-delete__nav">
              <button className="kd-setup__skip" onClick={() => setScene("confirm")}>رد کن</button>
              <button className="kd-btn kd-btn--danger kd-btn--md" onClick={() => setScene("confirm")}>
                ادامه
              </button>
            </div>
          </div>
        )}

        {/* ============ CONFIRM (OTP) ============ */}
        {scene === "confirm" && (
          <div className="kd-delete__card kd-glass">
            <button className="kd-login__back" onClick={() => setScene("reason")}>
              <Icon name="chevron" size={14} stroke={2.4} /> برگرد
            </button>
            <h1 className="kd-login__h">آخرین تأیید</h1>
            <p className="kd-login__sub">
              یه کد ۵ رقمی به شماره‌ت فرستادیم. وارد کن تا حذف شروع بشه.
            </p>
            <input
              className="kd-settings__bigcode"
              value={code}
              onChange={e => setCode(e.target.value.replace(/\D/g,"").slice(0,5))}
              dir="ltr" placeholder="—————" maxLength={5} inputMode="numeric"
            />
            <p className="kd-delete__warn-line">
              <Icon name="close" size={12} stroke={2.4} />
              با ارسال این کد، حسابت فوراً غیرفعال میشه.
            </p>
            <div className="kd-delete__nav">
              <button className="kd-btn kd-btn--secondary kd-btn--md" onClick={() => setScene("explain")}>منصرف شدم</button>
              <button className="kd-btn kd-btn--danger kd-btn--md" disabled={code.length < 5} onClick={submit}>
                حذف کن
              </button>
            </div>
          </div>
        )}

        {/* ============ SUBMITTED — countdown ============ */}
        {scene === "submitted" && started && (() => {
          const elapsed = now - started;
          const inSevenDay = elapsed < SEVEN_DAYS_MS;
          const remaining7  = SEVEN_DAYS_MS - elapsed;
          const remaining4M = (SEVEN_DAYS_MS + FOUR_MONTHS_MS) - elapsed;
          const percentDay = Math.min(100, (elapsed / SEVEN_DAYS_MS) * 100);
          const percent4M  = inSevenDay ? 0 : Math.min(100, ((elapsed - SEVEN_DAYS_MS) / FOUR_MONTHS_MS) * 100);

          return (
            <div className="kd-delete__card kd-glass kd-delete__card--state">
              <div className={`kd-delete__state-ring ${inSevenDay ? "is-warning" : "is-final"}`}>
                <span className="kd-delete__state-num">{inSevenDay ? fmtFa(Math.ceil(remaining7 / (24*60*60*1000))) : fmtFa(Math.ceil(remaining4M / (24*60*60*1000)))}</span>
                <span className="kd-delete__state-unit">{inSevenDay ? "روز" : "روز"}</span>
              </div>

              <h1 className="kd-login__h">
                {inSevenDay ? "حسابت در حال حذف" : "حذف کامل در جریانه"}
              </h1>
              <p className="kd-login__sub">
                {inSevenDay
                  ? `تا ${fmtRemaining(remaining7)} می‌تونی برگردی. بعدش وارد فاز پاک‌سازی نهایی می‌شیم.`
                  : `حسابت تا ${fmtRemaining(remaining4M)} دیگه کاملاً از سرورها پاک می‌شه. این مرحله غیرقابل بازگشته.`}
              </p>

              <div className="kd-delete__phases">
                <div className={`kd-delete__phase ${inSevenDay ? "is-active" : "is-done"}`}>
                  <div className="kd-delete__phase-num">۱</div>
                  <div>
                    <strong>غیرفعال‌سازی (۷ روز)</strong>
                    <span>قابل لغو · پست‌ها پنهان</span>
                    <div className="kd-delete__phase-bar"><i style={{ width: percentDay + "%" }} /></div>
                  </div>
                </div>
                <div className={`kd-delete__phase ${inSevenDay ? "" : "is-active"}`}>
                  <div className="kd-delete__phase-num">۲</div>
                  <div>
                    <strong>پاک‌سازی نهایی (۴ ماه)</strong>
                    <span>غیرقابل لغو · داده‌ها حذف می‌شن</span>
                    <div className="kd-delete__phase-bar"><i style={{ width: percent4M + "%" }} /></div>
                  </div>
                </div>
              </div>

              <p className="kd-delete__reminder">
                <Icon name="bell" size={14} stroke={2} />
                روز ششم یه پیامک یادآوری برات می‌فرستیم.
              </p>

              {inSevenDay && (
                <button className="kd-btn kd-btn--primary kd-btn--lg" style={{ width: "100%" }} onClick={cancelDeletion}>
                  پشیمون شدم — حسابم رو برگردون
                </button>
              )}
              {!inSevenDay && (
                <p className="kd-delete__final-note">
                  دیگه نمی‌شه از این مرحله برگشت. اگر چیزی هست که می‌خوای صادر کنی، با پشتیبانی تماس بگیر.
                </p>
              )}
            </div>
          );
        })()}
      </div>
    </div>
  );
};
})();