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

/* =============================================================
   InviteSheet.jsx — "دوستاتو دعوت کن" (referral loop)
   --------------------------------------------------------------
   Dual-sided reward invite. Real, copyable referral link + a
   scannable QR (rendered from a public QR image service) + share
   targets. Opened via the global "kd-invite-open" event.
   ============================================================= */

const REF_CODE = "MAHSA-7F3A";
const REF_LINK = "https://keshvardoost.ir/i/" + REF_CODE;

const TARGETS = [
  { id: "telegram",  label: "تلگرام",   glyph: "✈", bg: "linear-gradient(135deg,#229ED9,#0088cc)" },
  { id: "whatsapp",  label: "واتساپ",   glyph: "✓", bg: "linear-gradient(135deg,#25D366,#128C7E)" },
  { id: "bale",      label: "بَله",     glyph: "B", bg: "linear-gradient(135deg,#2C7DFA,#1a4ea8)" },
  { id: "eitaa",     label: "ایتا",     glyph: "E", bg: "linear-gradient(135deg,#FFA300,#cc7700)" },
  { id: "sms",       label: "پیامک",    glyph: "✉", bg: "linear-gradient(135deg,#9a6cff,#6a3ed8)" },
];

window.InviteSheet = function InviteSheet({ open, onClose }) {
  const [copied, setCopied] = useState(false);
  if (!open) return null;

  const copy = () => {
    try { navigator.clipboard?.writeText(REF_LINK); } catch {}
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };

  const qrSrc = "https://api.qrserver.com/v1/create-qr-code/?size=240x240&margin=0"
    + "&bgcolor=10-16-24&color=255-255-255&data=" + encodeURIComponent(REF_LINK);

  return (
    <div className="kd-invite" onClick={onClose}>
      <div className="kd-invite__sheet" onClick={e => e.stopPropagation()}>
        <button className="kd-invite__close" onClick={onClose} aria-label="بستن">
          <Icon name="close" size={18} stroke={2} />
        </button>

        <div className="kd-invite__gift">
          <Icon name="trophy" size={26} stroke={1.9} />
        </div>
        <h3 className="kd-invite__h">دوستاتو دعوت کن</h3>
        <p className="kd-invite__sub">
          هر دوستی که با لینک تو ثبت‌نام کنه، <strong>هم تو</strong> و <strong>هم اون</strong>
          یه نشان ویژه و شانس بیشتر تو قرعه‌کشی ماه می‌گیرین.
        </p>

        <div className="kd-invite__qr">
          <img src={qrSrc} alt="QR کد دعوت" width={150} height={150} loading="lazy" />
          <span>اسکن کن یا لینک رو بفرست</span>
        </div>

        <div className="kd-invite__link">
          <span className="kd-invite__link-url">{REF_LINK}</span>
          <button className={`kd-invite__copy ${copied ? "is-done" : ""}`} onClick={copy}>
            {copied
              ? <React.Fragment><Icon name="check" size={14} stroke={2.6} /> کپی شد</React.Fragment>
              : <React.Fragment><Icon name="bookmark" size={14} stroke={2} /> کپی لینک</React.Fragment>}
          </button>
        </div>

        <div className="kd-invite__code">
          کد دعوت: <strong>{REF_CODE}</strong>
        </div>

        <div className="kd-invite__targets">
          {TARGETS.map(t => (
            <button key={t.id} className="kd-invite__target">
              <span className="kd-invite__target-icon" style={{ background: t.bg }}>{t.glyph}</span>
              <span className="kd-invite__target-lbl">{t.label}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};
})();