// User Management — list of dashboard operator accounts with per-user profile limits
const RoleBadge = ({ role }) => <StatusPill status={role === 'superadmin' ? 'Admin' : role} size='sm' />;

const LimitBar = ({ used, limit }) => {
  const pct = Math.min(100, (used / limit) * 100);
  const over = pct >= 90;
  const hue = over ? 'var(--pink)' : pct >= 70 ? 'var(--orange)' : 'var(--green)';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 130 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, color: 'var(--fg-1)' }}>
          {used} <span style={{ color: 'var(--fg-4)' }}>/ {limit}</span>
        </span>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)' }}>{Math.round(pct)}%</span>
      </div>
      <div style={{ height: 5, background: 'var(--bg-muted)', borderRadius: 999, overflow: 'hidden' }}>
        <div style={{ width: `${pct}%`, height: '100%', background: hue, borderRadius: 999, transition: 'width 200ms' }} />
      </div>
    </div>
  );
};

const UserRow = ({ user, onAction, onLimit }) => (
  <div style={{
    display: 'grid', gridTemplateColumns: '36px 1.6fr 110px 170px 150px 130px 110px',
    alignItems: 'center', gap: 16, padding: '16px 18px',
    background: '#fff', border: '1px solid var(--border)', borderRadius: 12,
  }}>
    <div style={{
      width: 36, height: 36, borderRadius: 10, background: 'linear-gradient(135deg,var(--teal-50),var(--green-50))',
      display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--teal-ink)',
      fontWeight: 700, fontSize: 13, letterSpacing: '-0.02em',
    }}>{user.name.split(' ').map(w => w[0]).slice(0,2).join('')}</div>
    <div>
      <div style={{ fontWeight: 700, fontSize: 13, color: 'var(--fg-1)', letterSpacing: '-0.01em' }}>{user.name}</div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', marginTop: 2 }}>{user.email}</div>
    </div>
    <RoleBadge role={user.role} />
    <LimitBar used={user.used} limit={user.limit} />
    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>{user.lastActive}</div>
    <div>
      <span style={{
        display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, color: user.active ? 'var(--green-deep)' : 'var(--fg-3)', fontWeight: 600,
      }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: user.active ? 'var(--green)' : 'var(--fg-4)' }} />
        {user.active ? 'Active' : 'Suspended'}
      </span>
    </div>
    <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
      <IconButton icon="sliders-horizontal" variant="teal" onClick={() => onLimit?.(user)} />
      <IconButton icon="pencil" onClick={() => onAction?.(user.id, 'edit')} />
      <IconButton icon="trash-2" variant="pink" onClick={() => onAction?.(user.id, 'delete')} />
    </div>
  </div>
);

const UserHeader = () => (
  <div style={{
    display: 'grid', gridTemplateColumns: '36px 1.6fr 110px 170px 150px 130px 110px',
    alignItems: 'center', gap: 16, padding: '0 18px 12px',
    fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--fg-label)',
    borderBottom: '1px solid var(--border-soft)',
  }}>
    <span />
    <span>User</span>
    <span>Role</span>
    <span>Profile Limit</span>
    <span>Last Active</span>
    <span>Status</span>
    <span style={{ textAlign: 'right' }}>Actions</span>
  </div>
);

const LimitModal = ({ user, onClose, onSave }) => {
  const [limit, setLimit] = React.useState(user?.limit ?? 100);
  if (!user) return null;
  React.useEffect(() => { if (user) setLimit(user.limit); }, [user]);
  const presets = [25, 50, 100, 250, 500, 999];
  return (
    <ModalShell open={!!user} onClose={onClose} width={440} icon='sliders-horizontal' iconVariant='teal' title='Adjust Profile Limit' subtitle={user.name} footer={<ModalFooter onClose={onClose} onConfirm={() => { onSave?.(user.id, limit); onClose?.(); }} confirmLabel='Save Limit' confirmIcon='save' />}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 12 }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 32, fontWeight: 700, color: 'var(--orange)', letterSpacing: '-0.02em' }}>{limit}</span>
        <span style={{ fontSize: 12, color: 'var(--fg-3)' }}>profiles max</span>
      </div>
      <div style={{ fontSize: 12, color: 'var(--fg-3)', marginBottom: 18 }}>
        Currently using <b style={{ color: 'var(--fg-1)', fontFamily: 'var(--font-mono)' }}>{user.used}</b>. Reducing below current usage will pause the excess profiles.
      </div>
      <div style={{ marginBottom: 16 }}>
        <input type="range" min="0" max="999" step="1" value={limit} onChange={e => setLimit(+e.target.value)} style={{ width: '100%' }} />
      </div>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {presets.map(p => (
          <Button key={p} variant={limit === p ? 'primary-teal' : 'ghost'} onClick={() => setLimit(p)} size='sm'>{p}</Button>
        ))}
      </div>
    </ModalShell>
  );
};

const EditUserModal = ({ user, onClose, onSave }) => {
  const [form, setForm] = React.useState({ name: '', email: '', role: 'Operator', limit: 100, active: true });
  React.useEffect(() => {
    if (user) setForm({ name: user.name, email: user.email, role: user.role, limit: user.limit, active: user.active });
  }, [user]);
  const up = k => v => setForm(f => ({ ...f, [k]: v }));
  if (!user) return null;
  return (
    <ModalShell open={!!user} onClose={onClose} width={520} icon='pencil' iconVariant='teal' title='Edit User' subtitle={user.name} footer={<ModalFooter onClose={onClose} onConfirm={() => { onSave?.(user.id, form); onClose?.(); }} confirmLabel='Update User' confirmIcon='save' />}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Input required label="Name" value={form.name} onChange={up('name')} />
        <Input required label="Email" value={form.email} onChange={up('email')} icon="mail" />
        <RoleSelector value={form.role} onChange={up('role')} />
        <LimitSlider value={form.limit} onChange={up('limit')} used={user.used} />
        <div onClick={() => up('active')(!form.active)} style={{
          display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px',
          background: form.active ? 'var(--green-50)' : 'var(--bg-app-2)',
          border: `1px solid ${form.active ? 'var(--green-100)' : 'var(--border-soft)'}`,
          borderRadius: 10, cursor: 'pointer',
        }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: form.active ? 'var(--green)' : 'var(--fg-4)' }} />
          <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-1)' }}>{form.active ? 'Active' : 'Suspended'}</span>
          <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--fg-3)' }}>Click to toggle</span>
        </div>
      </div>
    </ModalShell>
  );
};

const InviteModal = ({ open, onClose, onInvite }) => {
  const [form, setForm] = React.useState({ name: '', email: '', username: '', password: 'DefaultPass123!', role: 'Operator', limit: 100 });
  React.useEffect(() => { if (!open) setForm({ name: '', email: '', username: '', password: 'DefaultPass123!', role: 'Operator', limit: 100 }); }, [open]);
  const up = k => v => setForm(f => ({ ...f, [k]: v }));

  // Auto-generate username from email if not set
  React.useEffect(() => {
    if (form.email && !form.username) {
      const generatedUsername = form.email.split('@')[0];
      setForm(f => ({ ...f, username: generatedUsername }));
    }
  }, [form.email]);

  if (!open) return null;
  return (
    <ModalShell open={open} onClose={onClose} width={520} icon='user-plus' iconVariant='teal' title='Invite User' footer={<ModalFooter onClose={onClose} onConfirm={() => { onInvite?.(form); onClose?.(); }} confirmLabel='Send Invite' confirmIcon='send' />}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Input required label="Name" placeholder="Jane Operator" value={form.name} onChange={up('name')} />
        <Input required label="Email" placeholder="user@example.com" value={form.email} onChange={up('email')} icon="mail" />
        <Input required label="Username" placeholder="jane.operator" value={form.username} onChange={up('username')} icon="user" />
        <Input required label="Password" type="password" placeholder="DefaultPass123!" value={form.password} onChange={up('password')} icon="lock" />
        <RoleSelector value={form.role} onChange={up('role')} />
        <LimitSlider value={form.limit} onChange={up('limit')} min={0} max={999} />
      </div>
    </ModalShell>
  );
};

const UserManagement = ({ users, onAction, onLimit, onInvite }) => {
  const totalUsed = users.reduce((s, u) => s + u.used, 0);
  const totalLimit = users.reduce((s, u) => s + u.limit, 0);
  return (
    <>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
        <StatCard label='Total Users' value={users.length} icon='users' iconVariant='teal' />
        <StatCard label='Active' value={users.filter(u => u.active).length} valueColor='var(--green)' icon='check-circle' iconVariant='green' />
        <StatCard label='Profiles In Use' value={`${totalUsed}/${totalLimit}`} valueColor='var(--orange)' icon='layout-grid' iconVariant='orange' />
        <StatCard label='Admins' value={users.filter(u => u.role === 'superadmin').length} valueColor='var(--pink-ink)' icon='shield' iconVariant='pink' />
      </div>
      <div>
        <UserHeader />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {users.map(u => <UserRow key={u.id} user={u} onAction={onAction} onLimit={onLimit} />)}
        </div>
      </div>
    </>
  );
};

Object.assign(window, { UserManagement, LimitModal, InviteModal, EditUserModal, RoleBadge, LimitBar });