/* ============================================================
   ADMIN PEOPLE — moderators & granular permissions
   window: AdminPeople
   ============================================================ */
(function () {
  const { useApp, H, Icon, useCurrentStaff, RoleBadge } = window;
  const { AdminPageHead: PageHead } = window;

  const PERM_LABELS = [
    ["create", "পোস্ট তৈরি"],
    ["edit", "পোস্ট সম্পাদনা"],
    ["publish", "সরাসরি প্রকাশ"],
    ["delete", "পোস্ট মুছে ফেলা"],
    ["rss", "আরএসএস পরিচালনা"],
    ["manageUsers", "সদস্য পরিচালনা"],
  ];

  function EditMember({ member, onClose }) {
    const app = useApp();
    const isNew = !member;
    const [m, setM] = React.useState(member ? JSON.parse(JSON.stringify(member)) : {
      name: "", en: "", email: "", role: "moderator", cats: ["bangladesh"], status: "invited",
      perms: { create: true, edit: true, publish: false, delete: false, rss: false, manageUsers: false },
    });
    const set = (k, v) => setM(p => ({ ...p, [k]: v }));
    const setPerm = (k, v) => setM(p => ({ ...p, perms: { ...p.perms, [k]: v } }));
    const toggleCat = (slug) => setM(p => {
      if (slug === "all") return { ...p, cats: ["all"] };
      let c = p.cats.filter(x => x !== "all");
      c = c.includes(slug) ? c.filter(x => x !== slug) : [...c, slug];
      return { ...p, cats: c.length ? c : ["bangladesh"] };
    });

    // role presets
    const applyRole = (role) => {
      if (role === "admin") setM(p => ({ ...p, role, cats: ["all"], perms: { create: true, edit: true, publish: true, delete: true, rss: true, manageUsers: true } }));
      else setM(p => ({ ...p, role, perms: { ...p.perms, delete: false, manageUsers: false } }));
    };

    return (
      <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "oklch(0.2 0.02 250 / 0.45)", zIndex: 60, display: "grid", placeItems: "center", padding: 20 }}>
        <div onClick={e => e.stopPropagation()} className="fade-in" style={{ width: "min(540px,100%)", maxHeight: "90vh", overflowY: "auto", background: "var(--surface)", borderRadius: 10, boxShadow: "var(--shadow-2)" }}>
          <div style={{ padding: "18px 24px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", position: "sticky", top: 0, background: "var(--surface)" }}>
            <h3 className="serif" style={{ fontSize: 21, fontWeight: 700 }}>{isNew ? "নতুন সদস্য আমন্ত্রণ" : "সদস্য সম্পাদনা"}</h3>
            <button className="btn ghost sm" onClick={onClose}><Icon name="x" size={16} /></button>
          </div>
          <div style={{ padding: 24, display: "grid", gap: 18 }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <label className="field"><span className="lbl">নাম</span><input value={m.name} onChange={e => set("name", e.target.value)} placeholder="পূর্ণ নাম" /></label>
              <label className="field"><span className="lbl">ইমেইল</span><input value={m.email} onChange={e => set("email", e.target.value)} placeholder="name@blogsite.news" /></label>
            </div>

            {/* role */}
            <div>
              <span className="lbl" style={{ display: "block", marginBottom: 8 }}>ভূমিকা</span>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                {[["admin", "অ্যাডমিন", "সব অনুমতি, সব বিভাগ"], ["moderator", "মডারেটর", "নির্দিষ্ট বিভাগ ও অনুমতি"]].map(([r, l, d]) => (
                  <button key={r} onClick={() => applyRole(r)} style={{ textAlign: "right", border: "1.5px solid " + (m.role === r ? "var(--accent)" : "var(--line)"), background: m.role === r ? "var(--accent-wash)" : "var(--surface)", borderRadius: 8, padding: "12px 14px", cursor: "pointer" }}>
                    <div style={{ fontSize: 14.5, fontWeight: 700, color: m.role === r ? "var(--accent-ink)" : "var(--ink)" }}>{l}</div>
                    <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{d}</div>
                  </button>
                ))}
              </div>
            </div>

            {/* categories */}
            {m.role === "moderator" && (
              <div>
                <span className="lbl" style={{ display: "block", marginBottom: 8 }}>দায়িত্বপ্রাপ্ত বিভাগ</span>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  <button onClick={() => toggleCat("all")} style={{ border: "1px solid " + (m.cats.includes("all") ? "var(--accent)" : "var(--line)"), background: m.cats.includes("all") ? "var(--accent)" : "var(--surface)", color: m.cats.includes("all") ? "#fff" : "var(--ink-2)", borderRadius: 999, padding: "6px 13px", fontSize: 13, fontWeight: 600, cursor: "pointer" }}>সব বিভাগ</button>
                  {window.SEED.CATEGORIES.map(c => {
                    const on = m.cats.includes(c.slug);
                    return <button key={c.slug} onClick={() => toggleCat(c.slug)} style={{ border: "1px solid " + (on ? "var(--accent)" : "var(--line)"), background: on ? "var(--accent-wash)" : "var(--surface)", color: on ? "var(--accent-ink)" : "var(--ink-2)", borderRadius: 999, padding: "6px 13px", fontSize: 13, fontWeight: 600, cursor: "pointer" }}>{c.bn}</button>;
                  })}
                </div>
              </div>
            )}

            {/* permissions */}
            <div>
              <span className="lbl" style={{ display: "block", marginBottom: 8 }}>অনুমতিসমূহ</span>
              <div style={{ display: "grid", gap: 2, border: "1px solid var(--line)", borderRadius: 8, overflow: "hidden" }}>
                {PERM_LABELS.map(([k, l]) => (
                  <label key={k} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "11px 14px", borderBottom: "1px solid var(--line-2)", cursor: "pointer", background: m.perms[k] ? "color-mix(in oklch, var(--accent-wash), transparent 50%)" : "var(--surface)" }}>
                    <span style={{ fontSize: 14, fontWeight: 500 }}>{l}</span>
                    <button type="button" onClick={() => setPerm(k, !m.perms[k])} role="switch" aria-checked={m.perms[k]}
                      style={{ width: 40, height: 22, borderRadius: 999, border: 0, cursor: "pointer", background: m.perms[k] ? "var(--accent)" : "var(--line)", position: "relative", transition: "background .15s" }}>
                      <span style={{ position: "absolute", top: 2, right: m.perms[k] ? 2 : 20, width: 18, height: 18, borderRadius: "50%", background: "#fff", transition: "right .15s", boxShadow: "0 1px 2px rgba(0,0,0,.2)" }} />
                    </button>
                  </label>
                ))}
              </div>
            </div>
          </div>
          <div style={{ padding: "16px 24px", borderTop: "1px solid var(--line)", display: "flex", gap: 10, position: "sticky", bottom: 0, background: "var(--surface)" }}>
            <button className="btn primary" disabled={!m.name || !m.email} onClick={() => { app.saveStaff(isNew ? m : { ...m }); onClose(); }}>{isNew ? "আমন্ত্রণ পাঠান" : "সংরক্ষণ করুন"}</button>
            <button className="btn" onClick={onClose}>বাতিল</button>
          </div>
        </div>
      </div>
    );
  }

  function AdminPeople() {
    const app = useApp();
    const me = useCurrentStaff();
    const [editing, setEditing] = React.useState(null); // member | 'new' | null
    const staff = app.state.staff;

    return (
      <div className="fade-in">
        <PageHead title="মডারেটর ও অনুমতি" sub={`${H.toBn(staff.length)} জন সদস্য · অ্যাডমিন ও মডারেটর দুই স্তর`}>
          <button className="btn primary" onClick={() => setEditing("new")}><Icon name="plus" size={16} /> সদস্য আমন্ত্রণ</button>
        </PageHead>

        <div style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: "var(--radius)", overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1.4fr 110px 90px", gap: 14, padding: "12px 20px", borderBottom: "1px solid var(--line)", fontSize: 11.5, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--ink-3)" }} className="people-head">
            <span>সদস্য</span><span>ভূমিকা</span><span>বিভাগ ও অনুমতি</span><span>অবস্থা</span><span style={{ textAlign: "left" }}>ক্রিয়া</span>
          </div>
          {staff.map(s => (
            <div key={s.id} style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1.4fr 110px 90px", gap: 14, padding: "15px 20px", borderBottom: "1px solid var(--line-2)", alignItems: "center" }} className="people-row">
              <div style={{ display: "flex", alignItems: "center", gap: 11, minWidth: 0 }}>
                <span style={{ width: 38, height: 38, borderRadius: "50%", background: s.role === "admin" ? "var(--accent)" : "var(--amber)", color: "#fff", display: "grid", placeItems: "center", fontWeight: 700, flexShrink: 0 }}>{s.initials}</span>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{s.name} {s.id === me.id && <span className="muted" style={{ fontWeight: 500 }}>(আপনি)</span>}</div>
                  <div className="muted" style={{ fontSize: 12, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", direction: "ltr", textAlign: "right" }}>{s.email}</div>
                </div>
              </div>
              <div><RoleBadge role={s.role} /></div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 12.5, color: "var(--ink-2)", marginBottom: 4 }}>{s.cats.includes("all") ? "সব বিভাগ" : s.cats.map(c => H.catBy(c).bn).join(", ")}</div>
                <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
                  {PERM_LABELS.filter(([k]) => s.perms[k]).slice(0, 4).map(([k, l]) => (
                    <span key={k} style={{ fontSize: 10.5, fontWeight: 600, padding: "2px 7px", borderRadius: 999, background: "var(--surface-2)", color: "var(--ink-3)", border: "1px solid var(--line-2)", whiteSpace: "nowrap" }}>{l}</span>
                  ))}
                </div>
              </div>
              <div><span className={"badge " + (s.status === "active" ? "green" : "amber")}>{s.status === "active" ? "সক্রিয়" : "আমন্ত্রিত"}</span></div>
              <div style={{ display: "flex", gap: 4, justifyContent: "flex-start" }}>
                <button className="btn ghost sm" onClick={() => setEditing(s)} style={{ padding: 7 }}><Icon name="edit" size={15} /></button>
                <button className="btn ghost sm" disabled={s.id === me.id} title={s.id === me.id ? "নিজেকে সরানো যাবে না" : "সরান"} onClick={() => app.removeStaff(s.id)} style={{ padding: 7, color: s.id === me.id ? undefined : "var(--red)" }}><Icon name="trash" size={15} /></button>
              </div>
            </div>
          ))}
        </div>

        {/* role reference */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 22 }}>
          {[["অ্যাডমিন", "var(--accent)", "পূর্ণ নিয়ন্ত্রণ — সব বিভাগে পোস্ট তৈরি, সম্পাদনা, প্রকাশ ও মুছে ফেলা; আরএসএস ফিড ও সদস্য পরিচালনা।"],
            ["মডারেটর", "var(--amber)", "নির্দিষ্ট বিভাগে কাজ; অনুমতি অনুযায়ী পোস্ট তৈরি/সম্পাদনা। সরাসরি প্রকাশ বা মুছে ফেলা সাধারণত সীমাবদ্ধ।"]].map(([t, col, d]) => (
            <div key={t} style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: "var(--radius)", padding: "18px 20px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                <span style={{ width: 10, height: 10, borderRadius: "50%", background: col }} />
                <span className="serif" style={{ fontSize: 17, fontWeight: 700 }}>{t}</span>
              </div>
              <p className="ink2" style={{ fontSize: 13.5, lineHeight: 1.6 }}>{d}</p>
            </div>
          ))}
        </div>

        {editing && <EditMember member={editing === "new" ? null : editing} onClose={() => setEditing(null)} />}
      </div>
    );
  }

  window.AdminPeople = AdminPeople;
})();