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

/* =============================================================
   UserProfile.jsx — viewing another user's profile
   --------------------------------------------------------------
   Distinct from Profile.jsx (which is "my" profile). Adds:
     · Follow button with 3 states (follow / following / requested)
     · "..." actions menu (Block / Mute / Report / Share)
     · Private-account gating (private + not following → hidden)
     · Blocked state (user gone)
     · Pending follow-request state for private accounts
   ============================================================= */

const SAMPLE_USER = {
  id: "u_rooz1",
  display_name: "روزبه بهزاد",
  handle: "roozbeh.b",
  bio: "ولاگر سفر · از همدان به همه‌جا · ۲۰ هزار کیلومتر تو ۲ سال",
  city: "همدان",
  joined_year: "۱۴۰۱",
  stats: { posts: 132, followers: 8420, following: 318, avg_rating: 4.6, wins: 7 },
  is_private: false,
  is_following_you: false,
  posts: [
    { kind: "image", title: "غروب مریوان",          author: "روزبه بهزاد", rating: 5, count: 2100, color: "#ff8a3d", aspect: 1 },
    { kind: "video", title: "جاده چالوس در باران",   author: "روزبه بهزاد", rating: 5, count: 5600, duration: "۲:۴۸", aspect: 1.4 },
    { kind: "text",  body: "همدون شهر ساعت‌های آرومه.", author: "روزبه بهزاد", rating: 4, count: 870, gradient: "violet" },
    { kind: "audio", title: "صدای بوی بازار کرمانشاه", author: "روزبه بهزاد", rating: 4, count: 540, duration: "۴:۲۲" },
  ],
};

/* Follow button with 3 states */
window.FollowButton = function FollowButton({ state, onChange, isPrivate, size = "md" }) {
  // state: 'idle' | 'following' | 'requested' | 'blocked'
  const [hover, setHover] = useState(false);
  if (state === "blocked") {
    return (
      <button className={`kd-btn kd-btn--secondary kd-btn--${size}`} onClick={() => onChange("idle")}>
        رفع بلاک
      </button>
    );
  }
  if (state === "requested") {
    return (
      <button
        className={`kd-btn kd-btn--secondary kd-btn--${size} kd-user-follow--pending`}
        onClick={() => onChange("idle")}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
      >
        {hover ? "لغو درخواست" : "درخواست ارسال شد"}
      </button>
    );
  }
  if (state === "following") {
    return (
      <button
        className={`kd-btn kd-btn--secondary kd-btn--${size} kd-user-follow--on`}
        onClick={() => onChange("idle")}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
      >
        {hover ? "لغو دنبال‌کردن" : <React.Fragment><Icon name="check" size={14} stroke={2.6} /> دنبال می‌کنی</React.Fragment>}
      </button>
    );
  }
  return (
    <button
      className={`kd-btn kd-btn--primary kd-btn--${size}`}
      onClick={() => onChange(isPrivate ? "requested" : "following")}
    >
      دنبال کن
    </button>
  );
};

/* Actions menu — Block / Mute / Report / Share */
function UserActionsMenu({ open, onClose, onBlock, onMute, onReport, onShare, onCopyLink, muted, blocked }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="kd-user-menu" ref={ref}>
      <button onClick={onShare}><Icon name="share" size={14} stroke={2} /> اشتراک پروفایل</button>
      <button onClick={onCopyLink}><Icon name="bookmark" size={14} stroke={2} /> کپی لینک</button>
      <div className="kd-user-menu__sep" />
      <button onClick={onMute}>
        <Icon name="bell" size={14} stroke={2} />
        {muted ? "آنمیوت کن" : "بی‌صدا کن"}
      </button>
      <button className={blocked ? "" : "kd-user-menu__danger"} onClick={onBlock}>
        <Icon name="close" size={14} stroke={2.2} />
        {blocked ? "رفع بلاک" : "بلاک کن"}
      </button>
      <button className="kd-user-menu__danger" onClick={onReport}>
        <Icon name="flame" size={14} stroke={2} /> گزارش بده
      </button>
    </div>
  );
}

window.UserProfile = function UserProfile({ user = SAMPLE_USER, onBack }) {
  const [followState, setFollowState] = useState("idle"); // idle | following | requested | blocked
  const [muted, setMuted] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [tab, setTab] = useState("posts");

  // Private account gate: if private + not following → hide content
  const contentGated = user.is_private && followState !== "following";
  const blocked = followState === "blocked";

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

  return (
    <div className="kd-user-page" data-screen-label="User Profile">
      {/* sticky header — for back + sticky actions on scroll */}
      <header className="kd-user-head">
        <button className="kd-user-head__back" onClick={onBack} aria-label="برگشت">
          <Icon name="back" size={20} stroke={2.2} />
        </button>
        <div className="kd-user-head__center">@{user.handle}</div>
        <div className="kd-user-head__right">
          <FollowButton state={followState} onChange={setFollowState} isPrivate={user.is_private} size="sm" />
          <button className="kd-user-head__more" onClick={() => setMenuOpen(o => !o)} aria-label="گزینه‌ها">
            <Icon name="more" size={18} stroke={2} />
          </button>
          <UserActionsMenu
            open={menuOpen}
            onClose={() => setMenuOpen(false)}
            onShare={() => setMenuOpen(false)}
            onCopyLink={() => setMenuOpen(false)}
            onMute={() => { setMuted(m => !m); setMenuOpen(false); }}
            onBlock={() => { setFollowState(s => s === "blocked" ? "idle" : "blocked"); setMenuOpen(false); }}
            onReport={() => {
              setMenuOpen(false);
              window.dispatchEvent(new CustomEvent("kd-report-open", {
                detail: {
                  source: "user",
                  target: { id: user.id, name: user.display_name },
                  onBlock: () => setFollowState("blocked"),
                }
              }));
            }}
            muted={muted}
            blocked={blocked}
          />
        </div>
      </header>

      {/* Full header block */}
      <section className="kd-user-hero">
        <div className="kd-user-hero__avatar">
          <Avatar name={user.display_name} size={96} ring="#9a6cff" />
        </div>
        <h1 className="kd-user-hero__name">
          {user.display_name}
          {user.is_private && <span className="kd-user-hero__lock"><Icon name="bookmark" size={12} stroke={2} /> پروفایل خصوصی</span>}
        </h1>
        <p className="kd-user-hero__handle">@{user.handle} · {user.city} · از {user.joined_year}</p>
        <p className="kd-user-hero__bio">{user.bio}</p>

        <div className="kd-user-hero__stats">
          <div><b>{fmtCount(user.stats.followers)}</b><span>دنبال‌کننده</span></div>
          <div><b>{fmtFa(user.stats.following)}</b><span>دنبال می‌کنه</span></div>
          <div><b>{fmtFa(user.stats.posts)}</b><span>پست</span></div>
          <div><b><span style={{ color: "#f5d589" }}>★</span> {fmtFa(user.stats.avg_rating)}</b><span>میانگین</span></div>
        </div>

        <div className="kd-user-hero__cta">
          <FollowButton state={followState} onChange={setFollowState} isPrivate={user.is_private} />
          <button className="kd-btn kd-btn--secondary kd-btn--md">
            <Icon name="send" size={14} stroke={2} /> پیام بفرست
          </button>
          {muted && <Badge tone="gold"><Icon name="bell" size={10} stroke={2} /> بی‌صدا</Badge>}
        </div>
      </section>

      {/* Tabs */}
      {!blocked && !contentGated && (
        <React.Fragment>
          <nav className="kd-profile-page__tabs">
            <Pill active={tab === "posts"} onClick={() => setTab("posts")}>پست‌ها ({fmtFa(user.stats.posts)})</Pill>
            <Pill active={tab === "challenges"} onClick={() => setTab("challenges")}>چالش‌ها</Pill>
            <Pill active={tab === "wins"} onClick={() => setTab("wins")}>برنده‌شده‌ها</Pill>
          </nav>

          <div className="kd-profile-page__grid">
            {user.posts.map((p, i) => {
              if (p.kind === "image") return <ImageCard key={i} {...p} dark />;
              if (p.kind === "text")  return <TextCard  key={i} {...p} dark />;
              if (p.kind === "audio") return <AudioCard key={i} {...p} dark />;
              if (p.kind === "video") return <VideoCard key={i} {...p} dark />;
              return null;
            })}
          </div>
        </React.Fragment>
      )}

      {/* Private gate */}
      {!blocked && contentGated && (
        <div className="kd-user-gate">
          <div className="kd-user-gate__icon"><Icon name="bookmark" size={28} stroke={1.7} /></div>
          <h3>این پروفایل خصوصیه</h3>
          <p>برای دیدن پست‌های {user.display_name}، باید درخواست فالو بفرستی و قبول کنه.</p>
          {followState === "idle" && (
            <button className="kd-btn kd-btn--primary kd-btn--lg" onClick={() => setFollowState("requested")}>
              درخواست فالو بفرست
            </button>
          )}
          {followState === "requested" && (
            <Badge tone="sky">⏱ درخواست ارسال شد — منتظر تأیید</Badge>
          )}
        </div>
      )}

      {/* Blocked state */}
      {blocked && (
        <div className="kd-user-gate">
          <div className="kd-user-gate__icon kd-user-gate__icon--block"><Icon name="close" size={28} stroke={2.2} /></div>
          <h3>این کاربر رو بلاک کردی</h3>
          <p>پست‌ها و کامنت‌هاش رو نمی‌بینی. اون هم پروفایلت رو نمی‌بینه.</p>
          <button className="kd-btn kd-btn--secondary kd-btn--md" onClick={() => setFollowState("idle")}>رفع بلاک</button>
        </div>
      )}
    </div>
  );
};
})();