// ViG Command Center — Admin: user management (mock roster, localStorage)
const { useState: useStateUM, useEffect: useEffectUM, useMemo: useMemoUM } = React;

const UM_ROLES = [
  ['Admin', 'Full access — manage data, guides & users', '#FF6B00'],
  ['Member', 'Can edit ownership & submit updates', '#2563eb'],
  ['Guest', 'Read-only access', '#71717a'],
];
const UM_SEED = [
  { id: 'u1', name: 'You (R4 Lead)', handle: 'vig-lead', role: 'Admin', status: 'active' },
];
function umLoad() { return LS.get('vig2_users', UM_SEED); }
function umSave(list) { LS.set('vig2_users', list); window.dispatchEvent(new CustomEvent('vig-users')); }
const umId = () => 'u' + Date.now().toString(36) + Math.floor(Math.random() * 1e3);

function UmRoleBadge({ role }) {
  const c = (UM_ROLES.find(r => r[0] === role) || UM_ROLES[2])[2];
  return <span className="rounded-full px-2 py-0.5 text-[10.5px] font-bold uppercase tracking-wider" style={{ background: c + '1f', color: c }}>{role}</span>;
}

function UsersPage() {
  const [users, setUsers] = useStateUM(umLoad);
  const [q, setQ] = useStateUM('');
  const [adding, setAdding] = useStateUM(false);
  const [form, setForm] = useStateUM({ name: '', handle: '', role: 'Member' });
  const [err, setErr] = useStateUM('');
  useEffectUM(() => { const h = () => setUsers(umLoad()); window.addEventListener('vig-users', h); return () => window.removeEventListener('vig-users', h); }, []);

  const commit = list => { umSave(list); setUsers(list); };
  const counts = useMemoUM(() => { const c = { Admin: 0, Member: 0, Guest: 0 }; users.forEach(u => c[u.role] = (c[u.role] || 0) + 1); return c; }, [users]);
  const filtered = users.filter(u => !q || (u.name + ' ' + u.handle).toLowerCase().includes(q.toLowerCase()));

  const add = () => {
    const name = form.name.trim(), handle = form.handle.trim().replace(/^@/, '');
    if (!name) { setErr('Enter a display name.'); return; }
    if (!handle) { setErr('Enter a username / handle.'); return; }
    if (users.some(u => u.handle.toLowerCase() === handle.toLowerCase())) { setErr('That username already exists.'); return; }
    commit([...users, { id: umId(), name, handle, role: form.role, status: 'active' }]);
    setForm({ name: '', handle: '', role: 'Member' }); setErr(''); setAdding(false);
  };
  const setRole = (id, role) => commit(users.map(u => u.id === id ? { ...u, role } : u));
  const toggleStatus = id => commit(users.map(u => u.id === id ? { ...u, status: u.status === 'active' ? 'suspended' : 'active' } : u));
  const remove = id => commit(users.filter(u => u.id !== id));

  const inp = 'h-10 w-full rounded-lg border border-zinc-200 bg-white px-3 text-[13px] outline-none focus:border-brand dark:border-zinc-700 dark:bg-zinc-900';

  return (
    <div className="space-y-4">
      {/* role summary */}
      <div className="grid grid-cols-3 gap-3">
        {UM_ROLES.map(([role, desc, color]) => (
          <Card key={role} className="p-4">
            <div className="flex items-center gap-2"><span className="h-2.5 w-2.5 rounded-full" style={{ background: color }}></span><UmRoleBadge role={role} /></div>
            <div className="mt-2 text-[24px] font-bold tabular-nums text-zinc-900 dark:text-white">{counts[role] || 0}</div>
            <div className="mt-0.5 text-[11px] text-zinc-400">{desc}</div>
          </Card>
        ))}
      </div>

      {/* toolbar */}
      <Card className="flex flex-wrap items-center gap-3 p-3.5">
        <div className="relative">
          <Icon name="search" size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-zinc-400" />
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search members…" className="h-9 w-52 rounded-lg border border-zinc-200 bg-white pl-8 pr-2.5 text-[12.5px] outline-none focus:border-brand dark:border-zinc-700 dark:bg-zinc-900" />
        </div>
        <span className="text-[12px] text-zinc-400">{users.length} member{users.length !== 1 ? 's' : ''}</span>
        <button onClick={() => { setAdding(a => !a); setErr(''); }} className="ml-auto inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-[12.5px] font-semibold text-white transition-all hover:brightness-110" style={{ background: 'linear-gradient(180deg,#ff7d1a,#FF6B00)', boxShadow: '0 6px 16px -8px rgba(255,107,0,.7)' }}>
          <Icon name="plus" size={15} />Add user
        </button>
      </Card>

      {/* add form */}
      {adding && (
        <Card className="p-4">
          <div className="mb-3 text-[13px] font-bold uppercase tracking-wide text-zinc-900 dark:text-white">New member</div>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
            <div>
              <label className="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-zinc-400">Display name</label>
              <input value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} placeholder="In-game name" className={inp} />
            </div>
            <div>
              <label className="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-zinc-400">Username</label>
              <input value={form.handle} onChange={e => setForm(f => ({ ...f, handle: e.target.value }))} placeholder="login handle" className={inp} />
            </div>
            <div>
              <label className="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-zinc-400">Role</label>
              <div className="flex h-10 items-center"><Segmented options={UM_ROLES.map(r => ({ value: r[0], label: r[0] }))} value={form.role} onChange={v => setForm(f => ({ ...f, role: v }))} /></div>
            </div>
          </div>
          {err && <div className="mt-2 text-[12px] text-rose-500">{err}</div>}
          <div className="mt-3 flex gap-2">
            <button onClick={add} className="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-[12.5px] font-semibold text-white hover:brightness-110" style={{ background: 'linear-gradient(180deg,#ff7d1a,#FF6B00)' }}><Icon name="check" size={14} />Create member</button>
            <button onClick={() => { setAdding(false); setErr(''); }} className="rounded-lg border border-zinc-200 px-3.5 py-2 text-[12.5px] font-semibold text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800">Cancel</button>
          </div>
        </Card>
      )}

      {/* roster */}
      <Card className="overflow-hidden">
        <div className="hidden grid-cols-12 gap-3 border-b border-zinc-100 px-4 py-2.5 text-[10.5px] font-bold uppercase tracking-wider text-zinc-400 dark:border-zinc-800 sm:grid">
          <span className="col-span-5">Member</span><span className="col-span-3">Role</span><span className="col-span-2">Status</span><span className="col-span-2 text-right">Actions</span>
        </div>
        <div className="divide-y divide-zinc-50 dark:divide-zinc-800/60">
          {filtered.map(u => (
            <div key={u.id} className="grid grid-cols-1 items-center gap-3 px-4 py-3 sm:grid-cols-12">
              <div className="col-span-5 flex items-center gap-3">
                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-[13px] font-bold text-white" style={{ background: (UM_ROLES.find(r => r[0] === u.role) || UM_ROLES[2])[2] }}>{u.name.replace(/[^A-Za-z0-9]/g, '').slice(0, 2).toUpperCase() || 'U'}</div>
                <div className="min-w-0">
                  <div className="truncate text-[13.5px] font-semibold text-zinc-900 dark:text-white">{u.name}</div>
                  <div className="truncate text-[11.5px] text-zinc-400">@{u.handle}</div>
                </div>
              </div>
              <div className="col-span-3">
                <select value={u.role} onChange={e => setRole(u.id, e.target.value)} className="h-8 rounded-lg border border-zinc-200 bg-white px-2 text-[12.5px] font-medium outline-none focus:border-brand dark:border-zinc-700 dark:bg-zinc-900">
                  {UM_ROLES.map(r => <option key={r[0]} value={r[0]}>{r[0]}</option>)}
                </select>
              </div>
              <div className="col-span-2">
                <button onClick={() => toggleStatus(u.id)} className="inline-flex items-center gap-1.5 text-[12px] font-medium">
                  <span className={`h-2 w-2 rounded-full ${u.status === 'active' ? 'bg-emerald-500' : 'bg-zinc-300 dark:bg-zinc-600'}`}></span>
                  <span className={u.status === 'active' ? 'text-emerald-600 dark:text-emerald-400' : 'text-zinc-400'}>{u.status === 'active' ? 'Active' : 'Suspended'}</span>
                </button>
              </div>
              <div className="col-span-2 flex justify-start gap-1 sm:justify-end">
                <button onClick={() => remove(u.id)} className="rounded-lg p-1.5 text-zinc-400 transition-colors hover:bg-rose-50 hover:text-rose-500 dark:hover:bg-rose-950/30" title="Remove member"><Icon name="x" size={15} /></button>
              </div>
            </div>
          ))}
          {!filtered.length && <div className="px-4 py-8 text-center text-[13px] text-zinc-400">No members match.</div>}
        </div>
      </Card>

      <p className="px-1 text-[11.5px] text-zinc-400">User accounts and roles are stored on this device for the prototype. When you publish to a host (e.g. Firebase Auth, as in your plan), this roster maps to real logins — Admins manage data &amp; users, Members edit ownership, Guests are read-only.</p>
    </div>
  );
}
window.UsersPage = UsersPage;