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

/* =============================================================
   ProfileSetup.jsx — first-time profile wizard
   --------------------------------------------------------------
   Triggered after the FIRST successful OTP signup. Separate from
   the regular Edit Profile flow in settings.

   Steps (each skippable):
   1. نام نمایشی + username  (real-time availability)
   2. آواتار   (camera / gallery / generated default)
   3. استان   (search + scrollable list)
   4. علاقه‌مندی‌ها (multi-select chips, 0..n)
   ============================================================= */

const PROVINCES = [
  "آذربایجان شرقی", "آذربایجان غربی", "اردبیل", "اصفهان", "البرز", "ایلام",
  "بوشهر", "تهران", "چهارمحال و بختیاری", "خراسان جنوبی", "خراسان رضوی",
  "خراسان شمالی", "خوزستان", "زنجان", "سمنان", "سیستان و بلوچستان", "فارس",
  "قزوین", "قم", "کردستان", "کرمان", "کرمانشاه", "کهگیلویه و بویراحمد",
  "گلستان", "گیلان", "لرستان", "مازندران", "مرکزی", "هرمزگان", "همدان", "یزد",
];

const INTERESTS = [
  { id: "story",   label: "داستانک",     emoji: "📝" },
  { id: "poem",    label: "شعر",         emoji: "🌹" },
  { id: "humor",   label: "طنز",         emoji: "😂" },
  { id: "critic",  label: "نقد",         emoji: "🧐" },
  { id: "photo",   label: "عکاسی",       emoji: "📷" },
  { id: "ai",      label: "هوش مصنوعی", emoji: "🤖" },
  { id: "art",     label: "نقاشی",       emoji: "🎨" },
  { id: "video",   label: "ویدیو",       emoji: "🎬" },
  { id: "vlog",    label: "ولاگ",        emoji: "🎥" },
  { id: "podcast", label: "پادکست",      emoji: "🎙️" },
  { id: "music",   label: "موسیقی",      emoji: "🎵" },
  { id: "food",    label: "آشپزی",       emoji: "🍳" },
  { id: "travel",  label: "سفر",         emoji: "✈️" },
  { id: "sport",   label: "ورزش",        emoji: "⚽" },
  { id: "family",  label: "خانواده",     emoji: "👨‍👩‍👧" },
  { id: "history", label: "تاریخ",       emoji: "🏛️" },
  { id: "tech",    label: "تکنولوژی",    emoji: "⚙️" },
  { id: "news",    label: "اخبار",       emoji: "📰" },
];

// Mock: usernames considered taken
const TAKEN_USERNAMES = new Set(["admin", "reza", "ali", "mahsa", "koshvardoust", "user", "test"]);

const fmtFa = (n) => String(n).replace(/\d/g, d => "۰۱۲۳۴۵۶۷۸۹"[d]);
const slugifyLatin = (s) => s.toLowerCase().replace(/[^a-z0-9_]/g, "");

window.ProfileSetup = function ProfileSetup({ onDone, onClose, initialDisplayName = "" }) {
  const [step, setStep] = useState(0);   // 0..3
  const totalSteps = 4;

  // step 0
  const [displayName, setDisplayName] = useState(initialDisplayName);
  const [username, setUsername] = useState("");
  const [unameStatus, setUnameStatus] = useState("idle"); // idle | checking | available | taken | invalid
  // step 1
  const [avatarKind, setAvatarKind] = useState("default"); // default | upload | camera
  const [avatarUrl, setAvatarUrl] = useState(null);
  // step 2
  const [province, setProvince] = useState("");
  const [provinceQ, setProvinceQ] = useState("");
  // step 3
  const [interests, setInterests] = useState([]);

  const [finishing, setFinishing] = useState(false);

  const fileRef = useRef(null);

  // --------- username availability (debounced)
  useEffect(() => {
    if (!username) { setUnameStatus("idle"); return; }
    const clean = slugifyLatin(username);
    if (clean !== username) { setUnameStatus("invalid"); return; }
    if (clean.length < 3) { setUnameStatus("invalid"); return; }
    if (clean.length > 20) { setUnameStatus("invalid"); return; }
    setUnameStatus("checking");
    const t = setTimeout(() => {
      setUnameStatus(TAKEN_USERNAMES.has(clean) ? "taken" : "available");
    }, 420);
    return () => clearTimeout(t);
  }, [username]);

  // --------- avatar upload preview
  const onPickFile = (f) => {
    if (!f) return;
    if (!f.type.startsWith("image/")) return;
    const url = URL.createObjectURL(f);
    setAvatarUrl(url);
    setAvatarKind("upload");
  };

  // --------- step gating (advance allowed?)
  const canAdvance = (() => {
    if (step === 0) return displayName.trim().length >= 2 && (unameStatus === "available" || unameStatus === "idle");
    return true; // all other steps skippable
  })();

  const next = () => {
    if (step < totalSteps - 1) setStep(s => s + 1);
    else finish();
  };
  const back = () => { if (step > 0) setStep(s => s - 1); };
  const skip = () => next();

  const finish = () => {
    setFinishing(true);
    setTimeout(() => {
      onDone?.({
        displayName: displayName.trim(),
        username: slugifyLatin(username) || null,
        avatar: avatarKind === "upload" ? "uploaded" : avatarKind,
        province: province || null,
        interests,
      });
    }, 900);
  };

  // --------- filtered provinces
  const filteredProvinces = useMemo(() => {
    const q = provinceQ.trim();
    if (!q) return PROVINCES;
    return PROVINCES.filter(p => p.includes(q));
  }, [provinceQ]);

  const initial = (displayName.trim() || "؟").charAt(0);

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

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

      <div className="kd-setup__inner">
        {/* progress dots */}
        <div className="kd-setup__steps" role="progressbar" aria-valuenow={step+1} aria-valuemin={1} aria-valuemax={totalSteps}>
          {Array.from({ length: totalSteps }).map((_, i) => (
            <span key={i} className={`kd-setup__step-dot ${i === step ? "is-current" : ""} ${i < step ? "is-done" : ""}`} />
          ))}
          <span className="kd-setup__step-num">گام {fmtFa(step+1)} از {fmtFa(totalSteps)}</span>
        </div>

        {finishing ? (
          <div className="kd-login__card kd-glass kd-login__card--success">
            <div className="kd-login__success-ring">
              <Icon name="check" size={44} stroke={3} />
            </div>
            <h1 className="kd-login__h">آماده‌ای!</h1>
            <p className="kd-login__sub">حالا بریم سراغ جشنواره…</p>
          </div>
        ) : (
          <div className="kd-login__card kd-glass kd-setup__card">

            {/* ============ STEP 0 ============ */}
            {step === 0 && (
              <React.Fragment>
                <h1 className="kd-login__h">یه اسم خوب انتخاب کن</h1>
                <p className="kd-login__sub">این چیزیه که بقیه می‌بینن. هر وقت دلت خواست عوضش کن.</p>

                <label className="kd-login__field">
                  <span className="kd-login__field-lbl">نام نمایشی</span>
                  <input
                    className="kd-setup__textinput"
                    type="text"
                    autoFocus
                    placeholder="مثلاً مهسا. س"
                    maxLength={60}
                    value={displayName}
                    onChange={e => setDisplayName(e.target.value)}
                  />
                </label>

                <div className="kd-setup__spacer" />

                <label className={`kd-login__field kd-setup__unamefield ${unameStatus === "taken" || unameStatus === "invalid" ? "is-error" : ""}`}>
                  <span className="kd-login__field-lbl">یوزرنیم</span>
                  <span className="kd-setup__at" aria-hidden="true">@</span>
                  <input
                    className="kd-setup__textinput kd-setup__textinput--uname"
                    type="text"
                    dir="ltr"
                    placeholder="mahsa.s"
                    maxLength={20}
                    value={username}
                    onChange={e => setUsername(e.target.value.toLowerCase())}
                  />
                  <span className="kd-setup__unamestate">
                    {unameStatus === "checking"  && <span className="kd-setup__spinner" />}
                    {unameStatus === "available" && <Icon name="check" size={16} stroke={2.6} style={{ color: "#7ff0d2" }} />}
                    {unameStatus === "taken"     && <Icon name="close" size={14} stroke={2.6} style={{ color: "#ff5774" }} />}
                    {unameStatus === "invalid"   && <Icon name="close" size={14} stroke={2.6} style={{ color: "#ff5774" }} />}
                  </span>
                </label>

                <p className={`kd-setup__hint ${unameStatus === "taken" || unameStatus === "invalid" ? "is-error" : ""}`}>
                  {unameStatus === "available" && <span>این یوزرنیم برای توئه. </span>}
                  {unameStatus === "taken"     && <span>این یوزرنیم گرفته شده. یکی دیگه پیدا کن.</span>}
                  {unameStatus === "invalid"   && <span>۳ تا ۲۰ کاراکتر — فقط حروف انگلیسی، عدد و آندرلاین.</span>}
                  {unameStatus === "checking"  && <span>داریم چک می‌کنیم…</span>}
                  {unameStatus === "idle"      && <span>اختیاری — می‌تونی بعداً ست کنی.</span>}
                </p>
              </React.Fragment>
            )}

            {/* ============ STEP 1 — avatar ============ */}
            {step === 1 && (
              <React.Fragment>
                <h1 className="kd-login__h">یه چهره بذار</h1>
                <p className="kd-login__sub">عکست لازم نیست — هر چی دوست داری.</p>

                <div className="kd-setup__avatar-wrap">
                  <div className="kd-setup__avatar">
                    {avatarKind === "upload" && avatarUrl
                      ? <img src={avatarUrl} alt="" />
                      : <span className="kd-setup__avatar-initial">{initial}</span>}
                  </div>
                </div>

                <div className="kd-setup__avatar-opts">
                  <button className={`kd-setup__opt ${avatarKind === "default" ? "is-on" : ""}`} onClick={() => { setAvatarKind("default"); setAvatarUrl(null); }}>
                    <span className="kd-setup__opt-icon"><Icon name="profile" size={20} /></span>
                    <span>پیش‌فرض</span>
                    <span className="kd-setup__opt-sub">از حرف اول اسمت</span>
                  </button>
                  <button className={`kd-setup__opt ${avatarKind === "upload" ? "is-on" : ""}`} onClick={() => fileRef.current?.click()}>
                    <span className="kd-setup__opt-icon"><Icon name="image" size={20} /></span>
                    <span>از گالری</span>
                    <span className="kd-setup__opt-sub">JPG / PNG تا ۵ مگ</span>
                  </button>
                  <button className={`kd-setup__opt ${avatarKind === "camera" ? "is-on" : ""}`} onClick={() => setAvatarKind("camera")}>
                    <span className="kd-setup__opt-icon"><Icon name="image" size={20} /></span>
                    <span>دوربین</span>
                    <span className="kd-setup__opt-sub">عکس بگیر</span>
                  </button>
                </div>

                <input ref={fileRef} type="file" accept="image/*"
                  style={{ display: "none" }}
                  onChange={e => onPickFile(e.target.files?.[0])} />
              </React.Fragment>
            )}

            {/* ============ STEP 2 — province ============ */}
            {step === 2 && (
              <React.Fragment>
                <h1 className="kd-login__h">اهل کجایی؟</h1>
                <p className="kd-login__sub">برای پیدا کردن هم‌ولایتی‌هات و جشنواره‌های منطقه‌ت.</p>

                <label className="kd-login__field">
                  <span className="kd-login__field-lbl">استان</span>
                  <input
                    className="kd-setup__textinput"
                    type="text"
                    placeholder="نام استان رو بنویس…"
                    value={provinceQ}
                    onChange={e => setProvinceQ(e.target.value)}
                  />
                </label>

                <div className="kd-setup__provlist">
                  {filteredProvinces.length === 0 && (
                    <p className="kd-setup__empty">استانی با این نام پیدا نشد.</p>
                  )}
                  {filteredProvinces.map(p => (
                    <button
                      key={p}
                      className={`kd-setup__prov ${province === p ? "is-on" : ""}`}
                      onClick={() => setProvince(p)}>
                      <span>{p}</span>
                      {province === p && <Icon name="check" size={16} stroke={2.6} />}
                    </button>
                  ))}
                </div>
              </React.Fragment>
            )}

            {/* ============ STEP 3 — interests ============ */}
            {step === 3 && (
              <React.Fragment>
                <h1 className="kd-login__h">چی دوست داری؟</h1>
                <p className="kd-login__sub">
                  چند تا تگ بزن تا بهترین چیزا رو نشونت بدیم.
                  {interests.length > 0 && <span style={{ color: "var(--neon-cyan)" }}> {fmtFa(interests.length)} تا انتخاب شده</span>}
                </p>

                <div className="kd-setup__chips">
                  {INTERESTS.map(it => {
                    const on = interests.includes(it.id);
                    return (
                      <button
                        key={it.id}
                        className={`kd-setup__chip ${on ? "is-on" : ""}`}
                        onClick={() => setInterests(prev =>
                          prev.includes(it.id) ? prev.filter(x => x !== it.id) : [...prev, it.id]
                        )}>
                        <span className="kd-setup__chip-emoji">{it.emoji}</span>
                        <span>{it.label}</span>
                      </button>
                    );
                  })}
                </div>
              </React.Fragment>
            )}

            {/* ====== navigation footer ====== */}
            <div className="kd-setup__nav">
              {step > 0 ? (
                <button className="kd-setup__back" onClick={back}>
                  <Icon name="chevron" size={14} stroke={2.4} /> برگرد
                </button>
              ) : <span />}

              <div className="kd-setup__nav-right">
                {step > 0 && (
                  <button className="kd-setup__skip" onClick={skip}>رد کن</button>
                )}
                <button
                  className="kd-btn kd-btn--primary kd-btn--lg kd-setup__cta"
                  disabled={!canAdvance}
                  onClick={next}>
                  {step === totalSteps - 1 ? "بریم!" : "ادامه"}
                  {step < totalSteps - 1 && <Icon name="back" size={16} stroke={2.4} />}
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};
})();