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

/* =============================================================
   PeopleYouMayKnow.jsx — suggestion carousel (P2-06)
   --------------------------------------------------------------
   Horizontal scroll of suggested users with a "why" reason
   (هم‌ولایتی، دنبال‌شده توسط X، هم‌سلیقه). Each card has a
   follow toggle + dismiss. Used on BentoHome / Explore / Search.
   ============================================================= */

const fmtFa = (n) => String(n).replace(/\d/g, d => "۰۱۲۳۴۵۶۷۸۹"[d]);
const fmtCount = (n) => n >= 1000 ? fmtFa((n/1000).toFixed(1)) + "هزار" : fmtFa(n);

const SUGGESTIONS = [
  { id: "p1", name: "راضیه تابش",   handle: "razieh.t",  city: "رشت",     reason: "هم‌ولایتی", reasonColor: "#4be3ff", followers: 3200, ring: "#ff4ea8" },
  { id: "p2", name: "کیان مرادی",   handle: "kian.m",    city: "تهران",   reason: "۳ دوست مشترک", reasonColor: "#9a6cff", followers: 8900, ring: "#9a6cff", verified: true },
  { id: "p3", name: "سحر یوسفی",    handle: "sahar.art", city: "تبریز",   reason: "هم‌سلیقه", reasonColor: "#f5d589", followers: 1400, ring: "#f5d589" },
  { id: "p4", name: "بهنام رادان",  handle: "behnam.r",  city: "شیراز",   reason: "دنبال‌شده توسط نگار", reasonColor: "#44e3b8", followers: 5600, ring: "#44e3b8" },
  { id: "p5", name: "مینا کاشانی",  handle: "mina.k",    city: "اصفهان",  reason: "هم‌ولایتی", reasonColor: "#4be3ff", followers: 760, ring: "#ff8a3d" },
  { id: "p6", name: "آرش نیکزاد",   handle: "arash.nz",  city: "کرج",     reason: "تازه‌وارد محبوب", reasonColor: "#ff4ea8", followers: 2100, ring: "#4be3ff" },
];

window.PeopleYouMayKnow = function PeopleYouMayKnow({ onOpenUser, title = "آدم‌هایی که شاید بشناسی", compact = false }) {
  const [people, setPeople] = useState(SUGGESTIONS);
  const [followed, setFollowed] = useState({});

  const dismiss = (id) => setPeople(p => p.filter(x => x.id !== id));
  const toggle = (id) => setFollowed(f => ({ ...f, [id]: !f[id] }));

  if (people.length === 0) return null;

  return (
    <section className={`kd-pymk ${compact ? "is-compact" : ""}`}>
      <header className="kd-pymk__head">
        <h3><Icon name="profile" size={15} stroke={2.2} /> {title}</h3>
        <button className="kd-pymk__all">همه</button>
      </header>

      <div className="kd-pymk__rail">
        {people.map(p => (
          <article key={p.id} className="kd-pymk__card">
            <button className="kd-pymk__dismiss" aria-label="رد کن" onClick={() => dismiss(p.id)}>
              <Icon name="close" size={12} stroke={2.4} />
            </button>

            <button className="kd-pymk__avatar" onClick={() => onOpenUser?.(p)}>
              <Avatar name={p.name} size={64} ring={p.ring} />
            </button>

            <div className="kd-pymk__name">
              <strong onClick={() => onOpenUser?.(p)}>{p.name}</strong>
              {p.verified && <span className="kd-userlist__verified"><Icon name="check" size={8} stroke={3} /></span>}
            </div>
            <span className="kd-pymk__handle">@{p.handle}</span>

            <span className="kd-pymk__reason" style={{ ['--c']: p.reasonColor }}>{p.reason}</span>
            <span className="kd-pymk__followers">{fmtCount(p.followers)} دنبال‌کننده</span>

            <button
              className={`kd-pymk__follow ${followed[p.id] ? "is-on" : ""}`}
              onClick={() => toggle(p.id)}>
              {followed[p.id]
                ? <React.Fragment><Icon name="check" size={13} stroke={2.6} /> دنبال شد</React.Fragment>
                : "دنبال کن"}
            </button>
          </article>
        ))}
      </div>
    </section>
  );
};
})();