// Manage Users — create / edit / disable users. Admin-facing CRUD.
const USERS_SEED = [
  { id:1, username:'ddorado',   name:'Daniel Dorado',     email:'daniel.dorado@datadope.io',   role:'Admin', language:'en', status:'active',  lastSeen:'2m ago',   source:'Google',    initials:'DD' },
  { id:2, username:'fmolina',   name:'Francisca Molina',  email:'francisca.molina@datadope.io',role:'SRE',   language:'es', status:'active',  lastSeen:'11m ago',  source:'Google',    initials:'FM' },
  { id:3, username:'mrodriguez',name:'Marelys Rodríguez', email:'marelys.r@datadope.io',       role:'SRE',   language:'es', status:'active',  lastSeen:'1h ago',   source:'Smart Ops', initials:'MR' },
  { id:4, username:'jfernandez',name:'Jonathan Fernández',email:'jonathan.f@datadope.io',      role:'Admin', language:'es', status:'active',  lastSeen:'just now', source:'Google',    initials:'JF' },
  { id:5, username:'apereira',  name:'Ana Pereira',       email:'ana.pereira@datadope.io',     role:'SRE',   language:'en', status:'active',  lastSeen:'3h ago',    source:'Smart Ops', initials:'AP' },
  { id:6, username:'msilva',    name:'Mateo Silva',       email:'mateo.silva@datadope.io',     role:'SRE',   language:'en', status:'disabled',lastSeen:'14d ago',  source:'Smart Ops', initials:'MS' },
];
window.USERS_SEED = USERS_SEED;

const ROLES = ['Admin','SRE'];
const LANGUAGES = [
  { code:'en', label:'English' },
  { code:'es', label:'Español' },
];

function UsersPage({ currentUser }) {
  const isAdmin = currentUser?.role === 'Admin';
  const [users, setUsers] = React.useState(USERS_SEED);
  const [statFilter, setStatFilter] = React.useState('all'); // all | admins | active | disabled
  const [editing, setEditing] = React.useState(null);   // user object or 'new'
  const [confirmDelete, setConfirmDelete] = React.useState(null);
  const [toast, setToast] = React.useState(null);

  const filtered = users.filter(u => {
    if (statFilter === 'admins' && u.role !== 'Admin') return false;
    if (statFilter === 'active' && u.status !== 'active') return false;
    if (statFilter === 'disabled' && u.status !== 'disabled') return false;
    return true;
  });

  const showToast = (msg) => {
    setToast(msg);
    setTimeout(() => setToast(t => t === msg ? null : t), 3200);
  };

  const saveUser = (u) => {
    const creating = !u.id;
    if (!creating) setUsers(us => us.map(x => x.id === u.id ? { ...x, ...u } : x));
    else setUsers(us => [{ ...u, id: Date.now(), status: u.status || 'active', lastSeen:'—', source: u.source || 'Smart Ops', initials: initialsOf(u.name) }, ...us]);
    setEditing(null);
    showToast(creating ? `User "${u.name}" created` : `User "${u.name}" updated`);
  };
  const deleteUser = (id) => { setUsers(us => us.filter(x => x.id !== id)); setConfirmDelete(null); };

  return (
    <div data-screen-label="03 Manage Users" style={{ padding:'22px 28px 40px' }}>
      {/* header */}
      <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:20, marginBottom:18 }}>
        <div>
          <h1 style={{ fontSize:26, fontWeight:600, letterSpacing:'-0.02em', margin:0 }}>Manage Users</h1>
          <div style={{ fontSize:12.5, color:'var(--fg-3)', marginTop:4 }}>Create, edit, and control access for your team</div>
        </div>
        {isAdmin && (
          <button onClick={() => setEditing('new')} style={{
            padding:'8px 14px', borderRadius:8,
            background:'var(--accent)', border:'1px solid var(--accent-2)',
            color:'#fff', fontSize:12.5, fontWeight:600,
            display:'inline-flex', alignItems:'center', gap:6,
          }}>
            <IconPlus size={14}/> Create user
          </button>
        )}
      </div>

      {/* stats */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14, marginBottom:18 }}>
        <StatCard label="Total users"
          value={users.length}
          accent="var(--accent)" icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>}
          active={statFilter==='all'} onClick={()=>setStatFilter('all')}/>
        <StatCard label="Admins"
          value={users.filter(u=>u.role==='Admin').length}
          accent="var(--sev-high)" icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>}
          active={statFilter==='admins'} onClick={()=>setStatFilter(statFilter==='admins' ? 'all' : 'admins')}/>
        <StatCard label="Active"
          value={users.filter(u=>u.status==='active').length}
          accent="var(--sev-ok)" icon={<IconCheck size={16}/>}
          active={statFilter==='active'} onClick={()=>setStatFilter(statFilter==='active' ? 'all' : 'active')}/>
        <StatCard label="Disabled"
          value={users.filter(u=>u.status==='disabled').length}
          accent="var(--fg-3)" icon={<IconClose size={16}/>}
          active={statFilter==='disabled'} onClick={()=>setStatFilter(statFilter==='disabled' ? 'all' : 'disabled')}/>
      </div>

      {/* table */}
      <div style={{ background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius:12, overflow:'hidden' }}>
        <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12.5 }}>
          <thead>
            <tr>
              <Th>User</Th><Th>Username</Th><Th>Email</Th><Th>Role</Th><Th>Status</Th><Th>Source</Th><Th>Last active</Th><Th></Th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(u => (
              <tr key={u.id} style={{ borderBottom:'1px solid var(--line)' }}>
                <td style={{ padding:'10px 12px' }}>
                  <div style={{ display:'flex', alignItems:'center', gap:9 }}>
                    <div style={{ width:28, height:28, borderRadius:99, background:'linear-gradient(135deg, oklch(0.55 0.12 200), oklch(0.45 0.12 260))', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:10, fontWeight:600 }}>{u.initials}</div>
                    <span style={{ fontWeight:500 }}>{u.name}</span>
                  </div>
                </td>
                <td style={{ padding:'10px 12px', color:'var(--fg-2)' }} className="mono">{u.username}</td>
                <td style={{ padding:'10px 12px', color:'var(--fg-2)' }} className="mono">{u.email}</td>
                <td style={{ padding:'10px 12px' }}><RolePill role={u.role}/></td>
                <td style={{ padding:'10px 12px' }}><UserStatusPill status={u.status}/></td>
                <td style={{ padding:'10px 12px' }}><SourcePill source={u.source}/></td>
                <td style={{ padding:'10px 12px', color:'var(--fg-3)' }} className="mono">{u.lastSeen}</td>
                <td style={{ padding:'10px 12px', textAlign:'right' }}>
                  {isAdmin && (
                    <div style={{ display:'inline-flex', gap:6 }}>
                      <button onClick={()=>setEditing(u)} style={rowBtn}>Edit</button>
                      <button onClick={()=>setConfirmDelete(u)} style={{ ...rowBtn, color:'var(--sev-crit)', borderColor:'color-mix(in oklch, var(--sev-crit) 30%, var(--line))' }}>Remove</button>
                    </div>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {filtered.length === 0 && (
          <div style={{ padding:'40px', textAlign:'center', color:'var(--fg-3)', fontSize:12.5 }}>No users match these filters.</div>
        )}
      </div>

      {editing && <UserForm user={editing === 'new' ? null : editing} existingUsers={users} onClose={()=>setEditing(null)} onSave={saveUser}/>}
      {confirmDelete && <ConfirmRemove user={confirmDelete} onCancel={()=>setConfirmDelete(null)} onConfirm={()=>deleteUser(confirmDelete.id)}/>}
      {toast && <Toast message={toast}/>}
    </div>
  );
}

function Toast({ message }) {
  return (
    <div style={{
      position:'fixed', bottom:20, right:20, zIndex:60,
      padding:'11px 16px', borderRadius:10,
      background:'color-mix(in oklch, var(--sev-ok) 18%, var(--bg-2))',
      border:'1px solid color-mix(in oklch, var(--sev-ok) 45%, var(--line-2))',
      color:'var(--fg)',
      fontSize:12.5, fontWeight:500,
      display:'flex', alignItems:'center', gap:9,
      boxShadow:'0 20px 40px -14px rgba(0,0,0,0.5)',
      animation:'fadeUp .22s ease',
    }}>
      <IconCheck size={14} style={{ color:'var(--sev-ok)' }}/>
      {message}
    </div>
  );
}

function initialsOf(name='') {
  return name.split(/\s+/).map(s=>s[0]).slice(0,2).join('').toUpperCase();
}

const rowBtn = {
  padding:'4px 10px', borderRadius:6, fontSize:11.5,
  border:'1px solid var(--line-2)', background:'var(--bg-3)', color:'var(--fg-2)',
};

function MiniStat({ label, value, active, onClick }) {
  return (
    <button onClick={onClick} style={{
      width:'100%', textAlign:'left',
      padding:'14px 16px', borderRadius:10,
      background: active ? 'var(--accent-glow)' : 'var(--bg-2)',
      border:`1px solid ${active ? 'var(--accent-2)' : 'var(--line)'}`,
      cursor:'pointer', transition:'background .15s, border-color .15s',
    }}>
      <div style={{ fontSize:22, fontWeight:600, letterSpacing:'-0.02em', color: active ? 'var(--accent)' : 'var(--fg)' }}>{value}</div>
      <div style={{ fontSize:11, color: active ? 'var(--accent)' : 'var(--fg-3)', marginTop:4 }}>{label}</div>
    </button>
  );
}

function RolePill({ role }) {
  const hue = role === 'Admin' ? 25 : 200;
  const c = `oklch(0.78 0.10 ${hue})`;
  return (
    <span style={{
      padding:'2px 8px', borderRadius:99, fontSize:10.5, fontWeight:500,
      background:`color-mix(in oklch, ${c} 14%, transparent)`,
      border:`1px solid color-mix(in oklch, ${c} 30%, transparent)`,
      color:c,
    }}>{role}</span>
  );
}

function SourcePill({ source }) {
  const isGoogle = source === 'Google';
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:6,
      padding:'2px 8px', borderRadius:99, fontSize:10.5, fontWeight:500,
      background:'var(--bg-3)', border:'1px solid var(--line-2)',
      color:'var(--fg-2)',
    }}>
      {isGoogle
        ? <svg width="11" height="11" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.35 11.1h-9.17v2.92h5.26c-.22 1.4-1.62 4.1-5.26 4.1-3.17 0-5.75-2.62-5.75-5.86s2.58-5.86 5.75-5.86c1.8 0 3.01.77 3.7 1.43l2.53-2.44C16.87 3.94 14.78 3 12.18 3 7.12 3 3 7.12 3 12.17s4.12 9.17 9.18 9.17c5.3 0 8.82-3.72 8.82-8.96 0-.6-.07-1.06-.15-1.28z" fill="currentColor"/></svg>
        : <span style={{ width:8, height:8, borderRadius:2, background:'var(--accent)' }}/>}
      {source}
    </span>
  );
}

function UserStatusPill({ status }) {
  const map = {
    active:   { label:'Active',   c:'var(--sev-ok)' },
    disabled: { label:'Disabled', c:'var(--fg-4)' },
  };
  const m = map[status];
  return (
    <span style={{
      padding:'2px 8px', borderRadius:99, fontSize:10.5, fontWeight:500,
      background:`color-mix(in oklch, ${m.c} 14%, transparent)`,
      border:`1px solid color-mix(in oklch, ${m.c} 30%, transparent)`,
      color:m.c,
    }}>{m.label}</span>
  );
}

function UserForm({ user, existingUsers = [], onClose, onSave }) {
  const [username, setUsername] = React.useState(user?.username || '');
  const [name, setName] = React.useState(user?.name || '');
  const [email, setEmail] = React.useState(user?.email || '');
  const [role, setRole] = React.useState(user?.role || 'SRE');
  const [language, setLanguage] = React.useState(user?.language || 'en');
  const [password, setPassword] = React.useState('');
  const [status, setStatus] = React.useState(user?.status || 'active');
  const [source, setSource] = React.useState(user?.source || 'Smart Ops');
  const [touched, setTouched] = React.useState({});
  const [submitAttempted, setSubmitAttempted] = React.useState(false);

  const isEditing = !!user;
  const isGoogle = source === 'Google';
  const sourceLocked = isEditing;
  const emailLocked = isEditing && isGoogle;
  const passwordLocked = isEditing && isGoogle;

  const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const usernameRe = /^[a-z][a-z0-9._-]{2,31}$/;
  const otherUsers = existingUsers.filter(u => u.id !== user?.id);
  const errors = {};
  const uname = username.trim();
  if (!uname) errors.username = 'Username is required.';
  else if (uname.length < 3) errors.username = 'Username must be at least 3 characters.';
  else if (uname.length > 32) errors.username = 'Username must be at most 32 characters.';
  else if (!/^[a-z]/.test(uname)) errors.username = 'Username must start with a lowercase letter.';
  else if (!usernameRe.test(uname)) errors.username = 'Use lowercase letters, digits, dot, underscore, or hyphen.';
  else if (/[._-]{2,}/.test(uname)) errors.username = 'No consecutive dots, underscores, or hyphens.';
  else if (/[._-]$/.test(uname)) errors.username = 'Username cannot end with a separator.';
  else if (otherUsers.some(u => u.username?.toLowerCase() === uname.toLowerCase())) errors.username = 'This username is already in use.';
  if (!name.trim()) errors.name = 'Full name is required.';
  if (!email.trim()) errors.email = 'Email is required.';
  else if (!emailRe.test(email.trim())) errors.email = 'Enter a valid email address.';
  else if (otherUsers.some(u => u.email.toLowerCase() === email.trim().toLowerCase())) errors.email = 'This email is already in use.';
  if (!language) errors.language = 'Language is required.';
  if (!role) errors.role = 'Role is required.';

  const showErr = (field) => (touched[field] || submitAttempted) && errors[field];
  const markTouched = (field) => setTouched(t => ({ ...t, [field]: true }));
  const canSave = Object.keys(errors).length === 0;

  const submit = () => {
    setSubmitAttempted(true);
    if (!canSave) return;
    onSave({
      id: user?.id,
      username: username.trim(),
      name: name.trim(),
      email: email.trim(),
      role,
      language,
      status,
      source,
    });
  };

  return (
    <Modal onClose={onClose} title={user ? 'Edit user' : 'Create user'} sub={user ? `Update details for ${user.name}` : 'Set up a new account and role'}>
      <FormField label="Username" required error={showErr('username')}>
        <input value={username} onChange={e=>setUsername(e.target.value)} onBlur={()=>markTouched('username')} placeholder="e.g. asmith" style={inputStyle(showErr('username'))} autoFocus={!isEditing}/>
      </FormField>
      <FormField label="Full name" required error={showErr('name')}>
        <input value={name} onChange={e=>setName(e.target.value)} onBlur={()=>markTouched('name')} style={inputStyle(showErr('name'))}/>
      </FormField>
      <FormField label="Email" required error={showErr('email')}>
        <input value={email} onChange={e=>setEmail(e.target.value)} onBlur={()=>markTouched('email')} disabled={emailLocked} placeholder="name@company.com" style={{ ...inputStyle(showErr('email')), ...(emailLocked ? lockedInput : null) }}/>
        {emailLocked && <div style={lockedHint}>Managed by Google — email cannot be changed here.</div>}
      </FormField>
      <FormField label="Language" required error={showErr('language')}>
        <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
          {LANGUAGES.map(l => (
            <button key={l.code} onClick={()=>{ setLanguage(l.code); markTouched('language'); }} style={{
              padding:'7px 12px', borderRadius:7, fontSize:12,
              background: language===l.code ? 'var(--accent-glow)' : 'var(--bg-3)',
              border:`1px solid ${language===l.code ? 'var(--accent-2)' : 'var(--line-2)'}`,
              color: language===l.code ? 'var(--accent)' : 'var(--fg-2)',
            }}>{l.label}</button>
          ))}
        </div>
      </FormField>
      <FormField label="Role" required error={showErr('role')}>
        <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
          {ROLES.map(r => (
            <button key={r} onClick={()=>{ setRole(r); markTouched('role'); }} style={{
              padding:'7px 12px', borderRadius:7, fontSize:12,
              background: role===r ? 'var(--accent-glow)' : 'var(--bg-3)',
              border:`1px solid ${role===r ? 'var(--accent-2)' : 'var(--line-2)'}`,
              color: role===r ? 'var(--accent)' : 'var(--fg-2)',
            }}>{r}</button>
          ))}
        </div>
      </FormField>
      {!passwordLocked && (
        <FormField label={user ? 'New password (leave blank to keep)' : 'Password'}>
          <input type="password" value={password} onChange={e=>setPassword(e.target.value)} placeholder="••••••••" style={formInput}/>
        </FormField>
      )}
      {passwordLocked && (
        <FormField label="Password">
          <div style={{ ...formInput, ...lockedInput, display:'flex', alignItems:'center' }}>
            <span style={{ color:'var(--fg-3)', fontSize:12 }}>Managed by Google SSO</span>
          </div>
        </FormField>
      )}
      <FormField label="Active">
        <div style={{ display:'flex', gap:6 }}>
          {['active','disabled'].map(s => (
            <button key={s} onClick={()=>setStatus(s)} style={{
              padding:'6px 11px', borderRadius:7, fontSize:11.5, textTransform:'capitalize',
              background: status===s ? 'var(--bg-3)' : 'transparent',
              border:`1px solid ${status===s ? 'var(--line-2)' : 'var(--line)'}`,
              color: status===s ? 'var(--fg)' : 'var(--fg-2)',
            }}>{s === 'active' ? 'True' : 'False'}</button>
          ))}
        </div>
      </FormField>
      {isEditing && (
        <FormField label="Source">
          <div style={{ ...formInput, ...lockedInput, display:'flex', alignItems:'center' }}>
            <span style={{ color:'var(--fg-3)', fontSize:12 }}>{source}</span>
          </div>
          <div style={lockedHint}>Source cannot be changed after creation.</div>
        </FormField>
      )}

      <div style={{ display:'flex', justifyContent:'flex-end', gap:8, marginTop:6, paddingTop:14, borderTop:'1px solid var(--line)' }}>
        <button onClick={onClose} style={{ padding:'8px 14px', borderRadius:8, background:'var(--bg-3)', border:'1px solid var(--line-2)', color:'var(--fg-2)', fontSize:12.5 }}>Cancel</button>
        <button onClick={submit} style={{
          padding:'8px 16px', borderRadius:8,
          background:'var(--accent)',
          border:'1px solid var(--accent-2)',
          color:'#fff',
          fontSize:12.5, fontWeight:600, cursor:'pointer',
        }}>{user ? 'Save changes' : 'Create user'}</button>
      </div>
    </Modal>
  );
}

function inputStyle(hasError) {
  return {
    ...formInput,
    borderColor: hasError ? 'var(--sev-crit)' : 'var(--line-2)',
  };
}

function ConfirmRemove({ user, onCancel, onConfirm }) {
  return (
    <Modal onClose={onCancel} title="Remove user?" sub={`${user.name} (${user.email}) will lose access immediately.`} width={420}>
      <div style={{ display:'flex', justifyContent:'flex-end', gap:8, marginTop:14 }}>
        <button onClick={onCancel} style={{ padding:'8px 14px', borderRadius:8, background:'var(--bg-3)', border:'1px solid var(--line-2)', color:'var(--fg-2)', fontSize:12.5 }}>Cancel</button>
        <button onClick={onConfirm} style={{ padding:'8px 16px', borderRadius:8, background:'color-mix(in oklch, var(--sev-crit) 18%, transparent)', border:'1px solid color-mix(in oklch, var(--sev-crit) 40%, transparent)', color:'var(--sev-crit)', fontSize:12.5, fontWeight:600 }}>Remove user</button>
      </div>
    </Modal>
  );
}

function Modal({ title, sub, children, onClose, width = 520 }) {
  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, zIndex:50,
      background:'oklch(0.1 0 0 / 0.55)', backdropFilter:'blur(3px)',
      display:'flex', alignItems:'center', justifyContent:'center', padding:24,
    }}>
      <div onClick={e=>e.stopPropagation()} style={{
        width, maxWidth:'100%',
        background:'var(--bg-2)', border:'1px solid var(--line-2)',
        borderRadius:12, padding:'18px 20px',
        boxShadow:'0 40px 80px -30px rgba(0,0,0,0.5)',
        animation:'fadeUp .22s ease',
      }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:14 }}>
          <div>
            <div style={{ fontSize:15, fontWeight:600 }}>{title}</div>
            {sub && <div style={{ fontSize:12, color:'var(--fg-3)', marginTop:3 }}>{sub}</div>}
          </div>
          <button onClick={onClose} style={{ width:26, height:26, borderRadius:6, border:'1px solid var(--line)', color:'var(--fg-2)', display:'flex', alignItems:'center', justifyContent:'center' }}><IconClose size={13}/></button>
        </div>
        {children}
      </div>
    </div>
  );
}

function FormField({ label, required, error, children }) {
  return (
    <div style={{ marginBottom:12 }}>
      <div style={{ fontSize:11.5, fontWeight:500, color:'var(--fg-2)', marginBottom:5 }}>
        {label}{required && <span style={{ color:'var(--sev-crit)', marginLeft:3 }}>*</span>}
      </div>
      {children}
      {error && (
        <div style={{ fontSize:11, color:'var(--sev-crit)', marginTop:5, display:'flex', alignItems:'center', gap:5 }}>
          <span aria-hidden="true">⚠</span>{error}
        </div>
      )}
    </div>
  );
}

const formInput = {
  width:'100%', padding:'9px 11px', borderRadius:7,
  background:'var(--bg)', border:'1px solid var(--line-2)',
  color:'var(--fg)', fontSize:12.5, outline:'none',
};

const lockedInput = {
  background:'var(--bg-3)', color:'var(--fg-3)',
  cursor:'not-allowed', opacity:0.85,
};

const lockedHint = {
  fontSize:10.5, color:'var(--fg-4)', marginTop:5,
  display:'flex', alignItems:'center', gap:5,
};

Object.assign(window, { UsersPage });