/* MembersPage.jsx — people & permissions. Managers add people and assign roles;
   editors/viewers see it read-only. Edit gating elsewhere keys off canEdit(). */
const { useState: useStateMP } = React;

function RoleBadge({ role, size = 'md' }) {
  const m = ROLES[role] || ROLES.viewer;
  const h = size === 'sm' ? 'h-[18px] text-[10.5px]' : 'h-[20px] text-[11px]';
  return (
    <span className={cx('inline-flex items-center gap-1 px-1.5 rounded-full font-medium', h)}
      style={{ background:'color-mix(in srgb, '+m.color+' 13%, transparent)', color:m.color }}>
      <span className="w-1.5 h-1.5 rounded-full" style={{ background:m.color }} />{tr(m.label, m.labelZh)}
    </span>
  );
}

/* Discipline / 身份 — a separate identity dimension from the RBAC role.
   product | dev | design. Plain-text label only (no color), shown as its own
   column like Team so the page isn't overloaded with colored pills. */
const DISCIPLINE = {
  product: { en:'Product',     zh:'产品' },
  dev:     { en:'Engineering', zh:'开发' },
  design:  { en:'Design',      zh:'设计' },
};

function disciplineLabel(discipline) {
  const d = DISCIPLINE[discipline];
  return d ? tr(d.en, d.zh) : '—';
}

function DisciplineMenu({ discipline, onChange }) {
  const [open, setOpen] = useStateMP(false);
  return (
    <div className="relative">
      <button onClick={()=>setOpen(o=>!o)} className="inline-flex items-center gap-1 h-[22px] -ml-1 px-1 rounded-[6px] text-[12.5px] text-ink2 hover:bg-hover transition focus-ring">
        <span className="truncate">{disciplineLabel(discipline)}</span><Icon name="chevronD" size={11} className="text-ink3 shrink-0" />
      </button>
      {open && (
        <>
          <div className="fixed inset-0 z-10" onClick={()=>setOpen(false)} />
          <div className="absolute left-0 top-7 z-20 w-44 bg-panel border border-line rounded-[12px] py-1 shadow-[0_8px_24px_rgba(0,0,0,0.16)]" style={{ animation:'fadeIn 110ms ease' }}>
            {['product','dev','design'].map(d=>(
              <button key={d} onClick={()=>{ onChange(d); setOpen(false); }} className={cx('w-full flex items-center gap-2 px-2.5 py-1.5 text-left text-[12.5px] text-ink2 hover:bg-hover transition', d===discipline && 'bg-accentWeak')}>
                <span className="flex-1 truncate">{disciplineLabel(d)}</span>
                {d===discipline && <Icon name="check" size={14} className="text-accent shrink-0" />}
              </button>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

function RoleMenu({ role, onChange }) {
  const [open, setOpen] = useStateMP(false);
  return (
    <div className="relative">
      <button onClick={()=>setOpen(o=>!o)} className="inline-flex items-center gap-1.5 h-7 pl-1.5 pr-1 rounded-[7px] border border-line bg-panel hover:bg-hover transition focus-ring">
        <RoleBadge role={role} size="sm" /><Icon name="chevronD" size={12} className="text-ink3" />
      </button>
      {open && (
        <>
          <div className="fixed inset-0 z-10" onClick={()=>setOpen(false)} />
          <div className="absolute right-0 top-8 z-20 w-60 bg-panel border border-line rounded-[12px] py-1 shadow-[0_8px_24px_rgba(0,0,0,0.16)]" style={{ animation:'fadeIn 110ms ease' }}>
            {['manager','editor','viewer'].map(r=>(
              <button key={r} onClick={()=>{ onChange(r); setOpen(false); }} className={cx('w-full flex items-start gap-2 px-2.5 py-2 text-left hover:bg-hover transition', r===role && 'bg-accentWeak')}>
                <RoleBadge role={r} size="sm" />
                <span className="text-[11px] text-ink3 flex-1 leading-snug">{tr(ROLES[r].desc, ROLES[r].descZh)}</span>
                {r===role && <Icon name="check" size={14} className="text-accent shrink-0" />}
              </button>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

function MembersPage() {
  const [members, setMembers] = useStateMP(MEMBERS.slice());
  const [q, setQ] = useStateMP('');
  const [roleF, setRoleF] = useStateMP('all');
  const [discF, setDiscF] = useStateMP('all');         // discipline filter
  const [newDisc, setNewDisc] = useStateMP('design');  // discipline for the next added person
  const manage = canManagePeople();
  const shown = members.filter(m => (roleF==='all' || m.role===roleF) &&
    (discF==='all' || m.discipline===discF) &&
    (!q || (m.name+' @'+m.handle+' '+(m.team||'')).toLowerCase().includes(q.toLowerCase())));

  function setRoleFor(handle, r) { setMembers(ms=>ms.map(m=>m.handle===handle?{...m,role:r}:m)); const g=MEMBERS.find(m=>m.handle===handle); if(g) g.role=r; }
  function setDiscFor(handle, d) { setMembers(ms=>ms.map(m=>m.handle===handle?{...m,discipline:d}:m)); const g=MEMBERS.find(m=>m.handle===handle); if(g) g.discipline=d; }
  function removeMember(handle) { setMembers(ms=>ms.filter(m=>m.handle!==handle)); const i=MEMBERS.findIndex(m=>m.handle===handle); if(i>=0) MEMBERS.splice(i,1); }
  function addMember() {
    const name = prompt(tr('Full name','姓名')); if(!name || !name.trim()) return;
    const handle = name.trim().toLowerCase().replace(/[^a-z0-9]+/g,'.').replace(/^\.|\.$/g,'') || ('user'+(members.length+1));
    if (members.some(m=>m.handle===handle)) return;
    const m = { handle, name:name.trim(), role:'viewer', team:'—', discipline:newDisc };
    setMembers(ms=>[...ms,m]); MEMBERS.push(m);
  }

  return (
    <div className="h-full flex flex-col">
      <PageToolbar
        title={tr('Members','成员')}
        count={members.length}
        subtitle={tr('Who can edit this design system. Managers add people and assign roles.','谁能编辑这套设计系统。管理员可添加成员并分配角色。')}
        leadingActions={<Button variant="primary" size="sm" icon="plus" disabled={!manage} onClick={addMember}>{tr('Add person','添加成员')}</Button>}
        search={{ value:q, onChange:setQ, placeholder:tr('Search name, handle, team…','搜索姓名、账号、团队…') }}
        categories={{ value:roleF, onChange:setRoleF, options:[{value:'manager',label:tr('Managers','管理员')},{value:'editor',label:tr('Editors','维护')},{value:'viewer',label:tr('Viewers','访客')}] }}
        facets={<CategoryChips value={discF} onChange={setDiscF}
          options={['product','dev','design'].map(d=>({ value:d, label:tr(DISCIPLINE[d].en, DISCIPLINE[d].zh) }))} />}
      />

      <div className="flex-1 overflow-y-auto ds-scroll p-6">
        <div className="grid gap-3 mb-5" style={{ gridTemplateColumns:'repeat(auto-fit, minmax(220px,1fr))' }}>
          {['manager','editor','viewer'].map(r=>{ const m=ROLES[r]; const n=members.filter(x=>x.role===r).length; return (
            <div key={r} className="rounded-[12px] border border-line bg-panel p-4">
              <div className="flex items-center justify-between mb-1.5"><RoleBadge role={r} /><span className="text-[12px] text-ink3 font-mono">{n}</span></div>
              <p className="text-[12px] text-ink2 leading-snug">{tr(m.desc, m.descZh)}</p>
            </div>
          ); })}
        </div>

        <div className="rounded-[12px] border border-line bg-panel overflow-hidden">
          <div className="flex items-center px-4 h-10 border-b border-line bg-sunken text-[11px] uppercase tracking-wide text-ink3">
            <span className="flex-1">{tr('Person','成员')}</span>
            <span className="w-40 hidden sm:block">{tr('Discipline','身份')}</span>
            <span className="w-40 hidden sm:block">{tr('Team','团队')}</span>
            <span className="w-40 text-right">{tr('Role','角色')}</span>
            {manage && <span className="w-8" />}
          </div>
          {shown.map(m=>(
            <div key={m.handle} className="group flex items-center px-4 h-14 border-b border-[color:var(--border)] last:border-0 hover:bg-hover transition">
              <div className="flex-1 flex items-center gap-3 min-w-0">
                <span className="w-8 h-8 rounded-full flex items-center justify-center text-[11px] font-semibold text-onAccent shrink-0" style={{ background:ROLES[m.role].color }}>{m.name.split(' ').map(s=>s[0]).join('').slice(0,2).toUpperCase()}</span>
                <div className="min-w-0">
                  <span className="text-[13px] font-medium text-ink truncate block">{m.name}{m.handle===SESSION.user.handle && <span className="text-[11px] text-ink3 font-normal"> · {tr('you','你')}</span>}</span>
                  <div className="text-[11.5px] text-ink3 truncate font-mono">@{m.handle}</div>
                </div>
              </div>
              <div className="w-40 hidden sm:block">{manage ? <DisciplineMenu discipline={m.discipline} onChange={d=>setDiscFor(m.handle, d)} /> : <span className="text-[12.5px] text-ink2 truncate">{disciplineLabel(m.discipline)}</span>}</div>
              <span className="w-40 hidden sm:block text-[12.5px] text-ink2 truncate">{m.team}</span>
              <div className="w-40 flex justify-end">{manage ? <RoleMenu role={m.role} onChange={r=>setRoleFor(m.handle, r)} /> : <RoleBadge role={m.role} />}</div>
              {manage && <div className="w-8 flex justify-end">{m.handle!==SESSION.user.handle && <button onClick={()=>removeMember(m.handle)} title={tr('Remove','移除')} className="w-7 h-7 rounded-[7px] flex items-center justify-center text-ink3 opacity-0 group-hover:opacity-100 hover:text-danger hover:bg-hover transition"><Icon name="close" size={14} /></button>}</div>}
            </div>
          ))}
        </div>

        {!manage && <p className="text-[12px] text-ink3 mt-3 inline-flex items-center gap-1.5"><Icon name="info" size={13} />{tr('Only managers can add people or change roles.','只有管理员可以添加成员或修改角色。')}</p>}
      </div>
    </div>
  );
}

Object.assign(window, { MembersPage });