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

/* =============================================================
   Report.jsx — unified report flow (post / comment / user)
   --------------------------------------------------------------
   Three scenes: reason → details → done.
   Reason list adapts to source. After submit we suggest Block.

   Trigger from anywhere:
     window.dispatchEvent(new CustomEvent("kd-report-open", {
       detail: { source: "post"|"comment"|"user", target: { id, name } }
     }));
   ============================================================= */

const REASONS = {
  post: [
    { id: "nsfw",       label: "محتوای جنسی یا نامناسب",   icon: "close",   tone: "rose" },
    { id: "violence",   label: "خشونت یا آسیب",             icon: "flame",   tone: "rose" },
    { id: "harass",     label: "آزار یا توهین",             icon: "close",   tone: "orange" },
    { id: "spam",       label: "اسپم یا تبلیغ غیرمجاز",     icon: "filter",  tone: "gold" },
    { id: "copyright",  label: "نقض کپی‌رایت",              icon: "bookmark",tone: "violet" },
    { id: "fake",       label: "اطلاعات نادرست",           icon: "microscope", tone: "sky" },
    { id: "selfharm",   label: "خودکشی یا خودآزاری",        icon: "heart",   tone: "rose" },
    { id: "other",      label: "سایر",                      icon: "more",    tone: "dark" },
  ],
  comment: [
    { id: "harass",   label: "آزار یا توهین",     icon: "close",   tone: "rose" },
    { id: "hate",     label: "نفرت‌پراکنی",        icon: "flame",   tone: "rose" },
    { id: "spam",     label: "اسپم",              icon: "filter",  tone: "gold" },
    { id: "misinfo",  label: "اطلاعات نادرست",    icon: "microscope", tone: "sky" },
    { id: "off",      label: "خارج از موضوع",      icon: "close",   tone: "dark" },
    { id: "other",    label: "سایر",              icon: "more",    tone: "dark" },
  ],
  user: [
    { id: "impersonate", label: "جعل هویت",                icon: "profile", tone: "violet" },
    { id: "scam",        label: "کلاهبرداری",              icon: "flame",   tone: "rose" },
    { id: "harass",      label: "آزار سیستماتیک",          icon: "close",   tone: "rose" },
    { id: "spam",        label: "اسپم",                    icon: "filter",  tone: "gold" },
    { id: "fake",        label: "حساب جعلی یا بات",        icon: "microscope", tone: "sky" },
    { id: "under",       label: "زیر سن قانونی",           icon: "bell",    tone: "orange" },
    { id: "other",       label: "سایر",                    icon: "more",    tone: "dark" },
  ],
};

const SOURCE_LABEL = {
  post: "این پست",
  comment: "این کامنت",
  user: "این کاربر",
};

window.Report = function Report({ open, source = "post", target, onClose, onBlock }) {
  const [scene, setScene] = useState("reason"); // reason | details | done
  const [reason, setReason] = useState(null);
  const [details, setDetails] = useState("");

  const close = () => { onClose?.(); setTimeout(() => { setScene("reason"); setReason(null); setDetails(""); }, 200); };

  if (!open) return null;

  const reasons = REASONS[source] || REASONS.post;
  const r = reasons.find(x => x.id === reason);
  const sourceLabel = SOURCE_LABEL[source] || "این";

  const submit = () => {
    // POST /reports { source, target_id, reason, details }
    setScene("done");
  };

  return (
    <div className="kd-report" role="dialog" aria-modal="true">
      <div className="kd-report__backdrop" onClick={close} />
      <div className="kd-report__sheet">
        <span className="kd-authgate__handle" aria-hidden="true" />
        <button className="kd-report__close" onClick={close} aria-label="بستن">
          <Icon name="close" size={16} stroke={2.2} />
        </button>

        {/* SCENE: reason */}
        {scene === "reason" && (
          <React.Fragment>
            <h2 className="kd-report__h">گزارش {sourceLabel}</h2>
            <p className="kd-report__sub">
              برای چی داری این رو گزارش می‌کنی؟ اطلاعاتت پیش ادمین می‌مونه — حساب گزارش‌دهنده ناشناس نیست.
            </p>
            <div className="kd-report__reasons">
              {reasons.map(r => (
                <button
                  key={r.id}
                  className={`kd-report__reason kd-report__reason--${r.tone} ${reason === r.id ? "is-on" : ""}`}
                  onClick={() => setReason(r.id)}>
                  <span className="kd-report__reason-icon"><Icon name={r.icon} size={16} stroke={2} /></span>
                  <span className="kd-report__reason-lbl">{r.label}</span>
                  {reason === r.id && <Icon name="check" size={14} stroke={2.6} style={{ marginInlineStart: "auto", color: "var(--neon-cyan)" }} />}
                </button>
              ))}
            </div>
            <div className="kd-report__nav">
              <button className="kd-setup__skip" onClick={close}>منصرف شدم</button>
              <button
                className="kd-btn kd-btn--primary kd-btn--lg kd-setup__cta"
                disabled={!reason}
                onClick={() => setScene("details")}>
                ادامه <Icon name="back" size={16} stroke={2.4} />
              </button>
            </div>
          </React.Fragment>
        )}

        {/* SCENE: details */}
        {scene === "details" && (
          <React.Fragment>
            <button className="kd-login__back" onClick={() => setScene("reason")}>
              <Icon name="chevron" size={14} stroke={2.4} /> برگرد
            </button>
            <h2 className="kd-report__h">یه کم بیشتر بگو</h2>
            <p className="kd-report__sub">
              این مرحله اختیاریه. اگه چیز خاصی هست که باید ادمین بدونه، اینجا بنویس.
            </p>
            {r && (
              <div className="kd-report__pickedreason">
                <Icon name={r.icon} size={14} stroke={2} />
                <span>{r.label}</span>
              </div>
            )}
            <textarea
              className="kd-report__textarea"
              value={details}
              onChange={e => setDetails(e.target.value)}
              maxLength={400}
              placeholder="مثلاً: این پست چند بار از کانال‌های دیگه کپی شده…"
            />
            <div className="kd-report__charcount">{String(details.length).replace(/\d/g, d => "۰۱۲۳۴۵۶۷۸۹"[d])} / ۴۰۰</div>
            <div className="kd-report__nav">
              <button className="kd-setup__skip" onClick={submit}>ارسال بدون توضیح</button>
              <button className="kd-btn kd-btn--primary kd-btn--lg kd-setup__cta" onClick={submit}>
                ارسال گزارش
              </button>
            </div>
          </React.Fragment>
        )}

        {/* SCENE: done */}
        {scene === "done" && (
          <React.Fragment>
            <div className="kd-login__success-ring">
              <Icon name="check" size={40} stroke={3} />
            </div>
            <h2 className="kd-report__h" style={{ textAlign: "center" }}>گزارشت ثبت شد</h2>
            <p className="kd-report__sub" style={{ textAlign: "center" }}>
              ادمین‌ها معمولاً تو ۲۴ ساعت بررسی می‌کنن. اگر نقض قوانین تأیید بشه، اقدام لازم انجام میشه.
            </p>
            {source === "user" && (
              <div className="kd-report__suggest">
                <p>می‌خوای این کاربر رو بلاک هم بکنی تا دیگه باهات تعامل نکنه؟</p>
                <div className="kd-report__suggest-actions">
                  <button className="kd-setup__skip" onClick={close}>نه فعلاً</button>
                  <button className="kd-btn kd-btn--secondary kd-btn--md" onClick={() => { onBlock?.(); close(); }}>
                    <Icon name="close" size={14} stroke={2.2} /> بلاک کن
                  </button>
                </div>
              </div>
            )}
            {source !== "user" && (
              <button className="kd-btn kd-btn--primary kd-btn--lg kd-setup__cta" style={{ width: "100%", marginTop: 16 }} onClick={close}>
                ممنون، بستن
              </button>
            )}
          </React.Fragment>
        )}
      </div>
    </div>
  );
};
})();