// Settings — server roster, users, Gitea, Discord

const { useLang } = window.CIE_I18N;
const EMPTY_SERVER = { id:'', name:'', host:'', a2s_port:'', region:'EU' };
const EMPTY_USER   = { username:'', role:'admin', servers:'' };

function AddServerModal({ onClose, onAdded }) {
  const { t } = useLang();
  const [form, setForm] = useState(EMPTY_SERVER);
  const [err, setErr] = useState('');
  const [saving, setSaving] = useState(false);

  const set = (k, v) => setForm(prev => ({ ...prev, [k]: v }));

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.id || !form.host || !form.a2s_port || !form.region) {
      setErr(t('settings.required'));
      return;
    }
    setSaving(true);
    setErr('');
    const id = form.id.trim();
    CIE_API.postServer({
      id,
      name: form.name.trim() || null,
      host: form.host.trim(),
      a2s_port: parseInt(form.a2s_port),
      region: form.region,
    })
      .then(s => {
        onAdded(s);
        return CIE_API.initConfig(id).catch(() => {});
      })
      .then(() => onClose())
      .catch(e => { setErr(e.message); setSaving(false); });
  };

  return (
    <div style={{
      position:'fixed', inset:0, background:'rgba(0,0,0,0.6)',
      display:'flex', alignItems:'center', justifyContent:'center', zIndex:100,
    }} onClick={onClose}>
      <div style={{
        background:'var(--surface-1)', border:'1px solid var(--line)',
        borderRadius:6, padding:28, width:420, maxWidth:'95vw',
      }} onClick={e => e.stopPropagation()}>
        <h3 style={{marginBottom:20}}>{t('settings.add_server_title')}</h3>
        <form onSubmit={handleSubmit} style={{display:'flex', flexDirection:'column', gap:12}}>
          <div className="field">
            <span className="lbl">{t('id')}<span className="req">*</span><span className="desc">{t('settings.field_id_desc')}</span></span>
            <span className="ctl"><input value={form.id} onChange={e=>set('id',e.target.value)} placeholder="cie-eu-01" /></span>
          </div>
          <div className="field">
            <span className="lbl">{t('name')}<span className="desc">{t('settings.field_name_desc')}</span></span>
            <span className="ctl"><input value={form.name} onChange={e=>set('name',e.target.value)} placeholder="CIE EU #1" /></span>
          </div>
          <div className="field">
            <span className="lbl">{t('host')}<span className="req">*</span></span>
            <span className="ctl"><input value={form.host} onChange={e=>set('host',e.target.value)} placeholder="1.2.3.4" /></span>
          </div>
          <div className="field">
            <span className="lbl">A2S port<span className="req">*</span><span className="desc">{t('settings.field_a2s_desc')}</span></span>
            <span className="ctl"><input type="number" value={form.a2s_port} onChange={e=>set('a2s_port',e.target.value)} placeholder="2303" /></span>
          </div>
          <div className="field">
            <span className="lbl">{t('region')}<span className="req">*</span></span>
            <span className="ctl">
              <select value={form.region} onChange={e=>set('region',e.target.value)}>
                <option value="EU">EU</option>
                <option value="CN">CN</option>
              </select>
            </span>
          </div>
          {err && <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--err)'}}>{err}</div>}
          <div style={{display:'flex', gap:8, marginTop:4}}>
            <button className="btn primary sm" type="submit" disabled={saving}>{saving ? t('saving') : t('settings.add_server_title')}</button>
            <button className="btn ghost sm" type="button" onClick={onClose}>{t('cancel')}</button>
          </div>
        </form>
      </div>
    </div>
  );
}

function EditServerModal({ server, onClose, onSaved }) {
  const { t } = useLang();
  const [form, setForm] = useState({
    name:     server.name     || '',
    host:     server.host     || '',
    a2s_port: server.a2s_port || '',
    region:   server.region   || 'EU',
  });
  const [err, setErr]       = useState('');
  const [saving, setSaving] = useState(false);

  const set = (k, v) => setForm(prev => ({ ...prev, [k]: v }));

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.host || !form.a2s_port || !form.region) {
      setErr(t('settings.required'));
      return;
    }
    setSaving(true);
    setErr('');
    CIE_API.putServer(server.id, {
      name:     form.name.trim() || null,
      host:     form.host.trim(),
      a2s_port: parseInt(form.a2s_port),
      region:   form.region,
    })
      .then(updated => { onSaved(updated || { ...server, ...form, a2s_port: parseInt(form.a2s_port) }); onClose(); })
      .catch(e => { setErr(e.message); setSaving(false); });
  };

  return (
    <div style={{
      position:'fixed', inset:0, background:'rgba(0,0,0,0.6)',
      display:'flex', alignItems:'center', justifyContent:'center', zIndex:100,
    }} onClick={onClose}>
      <div style={{
        background:'var(--surface-1)', border:'1px solid var(--line)',
        borderRadius:6, padding:28, width:420, maxWidth:'95vw',
      }} onClick={e => e.stopPropagation()}>
        <h3 style={{marginBottom:4}}>{t('settings.edit_server_title')}</h3>
        <div className="mono dim" style={{fontSize:11, marginBottom:20}}>{server.id}</div>
        <form onSubmit={handleSubmit} style={{display:'flex', flexDirection:'column', gap:12}}>
          <div className="field">
            <span className="lbl">{t('name')}<span className="desc">{t('settings.field_name_desc')}</span></span>
            <span className="ctl"><input value={form.name} onChange={e => set('name', e.target.value)} placeholder="CIE EU #1" /></span>
          </div>
          <div className="field">
            <span className="lbl">{t('host')}<span className="req">*</span></span>
            <span className="ctl"><input value={form.host} onChange={e => set('host', e.target.value)} placeholder="1.2.3.4" /></span>
          </div>
          <div className="field">
            <span className="lbl">A2S port<span className="req">*</span></span>
            <span className="ctl"><input type="number" value={form.a2s_port} onChange={e => set('a2s_port', e.target.value)} placeholder="2303" /></span>
          </div>
          <div className="field">
            <span className="lbl">{t('region')}<span className="req">*</span></span>
            <span className="ctl">
              <select value={form.region} onChange={e => set('region', e.target.value)}>
                <option value="EU">EU</option>
                <option value="CN">CN</option>
              </select>
            </span>
          </div>
          {err && <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--err)'}}>{err}</div>}
          <div style={{display:'flex', gap:8, marginTop:4}}>
            <button className="btn primary sm" type="submit" disabled={saving}>{saving ? t('saving') : t('save')}</button>
            <button className="btn ghost sm" type="button" onClick={onClose}>{t('cancel')}</button>
          </div>
        </form>
      </div>
    </div>
  );
}

function ServerPicker({ selected, onChange }) {
  // selected: array of server IDs, or null (= all servers)
  // onChange: fn(newSelected) — newSelected is array|null
  const { t } = useLang();
  const [servers, setServers] = useState(null);

  useEffect(() => {
    CIE_API.getServerList()
      .then(data => setServers(data || []))
      .catch(() => setServers([]));
  }, []);

  if (!servers) {
    return <div style={{fontSize:11, color:'var(--text-mute)', padding:'4px 0'}}>{t('loading')}</div>;
  }

  const allSelected = selected === null;

  const toggleAll = () => onChange(allSelected ? [] : null);

  const toggleOne = (id) => {
    if (allSelected) {
      onChange(servers.map(s => s.id).filter(i => i !== id));
    } else {
      const has = selected.includes(id);
      const next = has ? selected.filter(i => i !== id) : [...selected, id];
      onChange(next.length === servers.length ? null : next);
    }
  };

  return (
    <div style={{
      border: '1px solid var(--line)',
      borderRadius: 4,
      padding: '6px 10px',
      maxHeight: 200,
      overflowY: 'auto',
      display: 'flex',
      flexDirection: 'column',
      gap: 1,
      background: 'var(--surface-0)',
    }}>
      <label style={{
        display:'flex', alignItems:'center', gap:8, cursor:'pointer',
        padding:'3px 0 6px', borderBottom:'1px solid var(--line)', marginBottom:4,
      }}>
        <input
          type="checkbox"
          checked={allSelected}
          onChange={toggleAll}
          style={{accentColor:'var(--accent)', cursor:'pointer'}}
        />
        <span style={{fontWeight:600, fontSize:11.5}}>{t('settings.all_servers')}</span>
      </label>
      {servers.map(s => (
        <label key={s.id} style={{display:'flex', alignItems:'center', gap:8, cursor:'pointer', padding:'2px 0'}}>
          <input
            type="checkbox"
            checked={allSelected || (Array.isArray(selected) && selected.includes(s.id))}
            onChange={() => toggleOne(s.id)}
            style={{accentColor:'var(--accent)', cursor:'pointer'}}
          />
          <span style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--text)'}}>{s.id}</span>
          {s.name && <span style={{fontSize:11, color:'var(--text-mute)'}}>{s.name}</span>}
        </label>
      ))}
    </div>
  );
}

function AddUserModal({ onClose, onAdded }) {
  const { t } = useLang();
  const [username, setUsername] = useState('');
  const [role, setRole]         = useState('admin');
  const [servers, setServers]   = useState(null); // null = all servers
  const [err, setErr]           = useState('');
  const [saving, setSaving]     = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!username.trim()) { setErr(t('settings.field_gitea_user')); return; }
    setSaving(true);
    setErr('');
    CIE_API.postUser({ username: username.trim(), role, servers })
      .then(u => { onAdded(u || { id: username.trim(), username: username.trim(), role, servers }); onClose(); })
      .catch(e => { setErr(e.message); setSaving(false); });
  };

  return (
    <div style={{
      position:'fixed', inset:0, background:'rgba(0,0,0,0.6)',
      display:'flex', alignItems:'center', justifyContent:'center', zIndex:100,
    }} onClick={onClose}>
      <div style={{
        background:'var(--surface-1)', border:'1px solid var(--line)',
        borderRadius:6, padding:28, width:420, maxWidth:'95vw',
      }} onClick={e => e.stopPropagation()}>
        <h3 style={{marginBottom:20}}>{t('settings.add_user_title')}</h3>
        <form onSubmit={handleSubmit} style={{display:'flex', flexDirection:'column', gap:12}}>
          <div className="field">
            <span className="lbl">{t('settings.field_gitea_user')}<span className="req">*</span></span>
            <span className="ctl"><input value={username} onChange={e => setUsername(e.target.value)} placeholder="kaspar" autoFocus /></span>
          </div>
          <div className="field">
            <span className="lbl">{t('settings.field_role')}<span className="req">*</span></span>
            <span className="ctl">
              <select value={role} onChange={e => setRole(e.target.value)}>
                <option value="admin">Admin</option>
                <option value="owner">Owner</option>
              </select>
            </span>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:6}}>
            <span className="lbl">{t('settings.field_access')}</span>
            <ServerPicker selected={servers} onChange={setServers} />
          </div>
          {err && <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--err)'}}>{err}</div>}
          <div style={{display:'flex', gap:8, marginTop:4}}>
            <button className="btn primary sm" type="submit" disabled={saving}>{saving ? t('saving') : t('settings.add_user_submit')}</button>
            <button className="btn ghost sm" type="button" onClick={onClose}>{t('cancel')}</button>
          </div>
        </form>
      </div>
    </div>
  );
}

function EditUserModal({ user, onClose, onSaved }) {
  const { t } = useLang();
  const [role, setRole]       = useState(user.role || 'admin');
  const [servers, setServers] = useState(user.servers || null); // null = all
  const [err, setErr]         = useState('');
  const [saving, setSaving]   = useState(false);

  const userId = user.username || user.id;

  const handleSubmit = (e) => {
    e.preventDefault();
    setSaving(true);
    setErr('');
    CIE_API.putUser(userId, { role, servers })
      .then(updated => { onSaved(updated || { ...user, role, servers }); onClose(); })
      .catch(e => { setErr(e.message); setSaving(false); });
  };

  const displayName = user.display_name || user.name || user.username || user.id;

  return (
    <div style={{
      position:'fixed', inset:0, background:'rgba(0,0,0,0.6)',
      display:'flex', alignItems:'center', justifyContent:'center', zIndex:100,
    }} onClick={onClose}>
      <div style={{
        background:'var(--surface-1)', border:'1px solid var(--line)',
        borderRadius:6, padding:28, width:420, maxWidth:'95vw',
      }} onClick={e => e.stopPropagation()}>
        <h3 style={{marginBottom:4}}>{t('settings.edit_user_title')}</h3>
        <div className="mono dim" style={{fontSize:11, marginBottom:20}}>{displayName} · {userId}</div>
        <form onSubmit={handleSubmit} style={{display:'flex', flexDirection:'column', gap:12}}>
          <div className="field">
            <span className="lbl">{t('settings.field_role')}<span className="req">*</span></span>
            <span className="ctl">
              <select value={role} onChange={e => setRole(e.target.value)}>
                <option value="admin">Admin</option>
                <option value="owner">Owner</option>
              </select>
            </span>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:6}}>
            <span className="lbl">{t('settings.field_access')}</span>
            <ServerPicker selected={servers} onChange={setServers} />
          </div>
          {err && <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--err)'}}>{err}</div>}
          <div style={{display:'flex', gap:8, marginTop:4}}>
            <button className="btn primary sm" type="submit" disabled={saving}>{saving ? t('saving') : t('save')}</button>
            <button className="btn ghost sm" type="button" onClick={onClose}>{t('cancel')}</button>
          </div>
        </form>
      </div>
    </div>
  );
}

function Settings({ user }) {
  const { t } = useLang();
  const [section, setSection] = useState('servers');

  // Scenarios state
  const [scenarios, setScenarios] = useState(null);
  const [scenariosErr, setScenariosErr] = useState('');
  const [scNewId, setScNewId] = useState('');
  const [scNewName, setScNewName] = useState('');
  const [scAdding, setScAdding] = useState(false);
  const [scAddErr, setScAddErr] = useState('');

  // Server roster state
  const [rosterServers, setRosterServers] = useState(null);
  const [rosterOrigOrder, setRosterOrigOrder] = useState(null); // для відстеження змін порядку
  const [rosterErr, setRosterErr] = useState('');
  const [savingOrder, setSavingOrder] = useState(false);
  const [showAddServer, setShowAddServer] = useState(false);
  const [editingServer, setEditingServer] = useState(null);

  // Users state
  const [users, setUsers] = useState(null);
  const [usersErr, setUsersErr] = useState('');
  const [showAddUser, setShowAddUser] = useState(false);
  const [editingUser, setEditingUser] = useState(null);

  // Discord state
  const [discordEnabled, setDiscordEnabled] = useState(true);
  const [discordOnSuccess, setDiscordOnSuccess] = useState(true);
  const [discordOnFailure, setDiscordOnFailure] = useState(true);

  const isOwner = user?.role === 'owner';

  // Drag & drop для серверів
  const dragServerIdx = useRef(null);
  const [overServerIdx, setOverServerIdx] = useState(null);

  const onServerDragStart = idx => { dragServerIdx.current = idx; };
  const onServerDragOver  = (e, idx) => { e.preventDefault(); setOverServerIdx(idx); };
  const onServerDragEnd   = () => { dragServerIdx.current = null; setOverServerIdx(null); };
  const onServerDrop      = idx => {
    const from = dragServerIdx.current;
    if (from === null || from === idx) { setOverServerIdx(null); return; }
    setRosterServers(prev => {
      const next = [...prev];
      const [item] = next.splice(from, 1);
      next.splice(idx, 0, item);
      return next;
    });
    setOverServerIdx(null);
  };

  useEffect(() => {
    if (section === 'servers') {
      setRosterServers(null);
      setRosterErr('');
      CIE_API.getServerList()
        .then(data => {
          const list = data || [];
          setRosterServers(list);
          setRosterOrigOrder(list.map(s => s.id));
        })
        .catch(err => setRosterErr(err.message));
    }
    if (section === 'users') {
      setUsers(null);
      setUsersErr('');
      CIE_API.getUsers()
        .then(data => setUsers(data || []))
        .catch(err => setUsersErr(err.message));
    }
    if (section === 'scenarios') {
      setScenarios(null);
      setScenariosErr('');
      CIE_API.getScenarios()
        .then(data => setScenarios(data || []))
        .catch(err => setScenariosErr(err.message));
    }
  }, [section]);

  const handleDeleteServer = (id) => {
    if (!window.confirm(t('settings.remove_server', { id }))) return;
    CIE_API.deleteServer(id)
      .then(() => {
        setRosterServers(prev => prev.filter(s => s.id !== id));
        setRosterOrigOrder(prev => prev ? prev.filter(i => i !== id) : prev);
      })
      .catch(err => alert('Error: ' + err.message));
  };

  const handleMoveServer = (idx, dir) => {
    setRosterServers(prev => {
      const next = [...prev];
      const swap = idx + dir;
      if (swap < 0 || swap >= next.length) return prev;
      [next[idx], next[swap]] = [next[swap], next[idx]];
      return next;
    });
  };

  const orderChanged = rosterServers && rosterOrigOrder &&
    rosterServers.map(s => s.id).join(',') !== rosterOrigOrder.join(',');

  const handleSaveOrder = () => {
    setSavingOrder(true);
    CIE_API.reorderServers(rosterServers.map(s => s.id))
      .then(() => setRosterOrigOrder(rosterServers.map(s => s.id)))
      .catch(err => alert('Error: ' + err.message))
      .finally(() => setSavingOrder(false));
  };

  const handleDeleteUser = (u) => {
    const uid = u.username || u.id;
    if (!window.confirm(t('settings.remove_user', { id: uid }))) return;
    CIE_API.deleteUser(uid)
      .then(() => setUsers(prev => prev.filter(x => (x.username || x.id) !== uid)))
      .catch(err => alert('Error: ' + err.message));
  };

  return (
    <div className="view">
      <div className="view-head">
        <div>
          <h1>{t('settings.title')}</h1>
          <div className="sub">{t('settings.subtitle')}</div>
        </div>
      </div>

      <div className="settings-grid">
        <div className="settings-nav">
          <div className={`it ${section==='servers'?'on':''}`} onClick={() => setSection('servers')}>{t('settings.nav_servers')}</div>
          <div className={`it ${section==='users'  ?'on':''}`} onClick={() => setSection('users')}>{t('settings.nav_users')}</div>
          <div className={`it ${section==='gitea'    ?'on':''}`} onClick={() => setSection('gitea')}>{t('settings.nav_gitea')}</div>
          <div className={`it ${section==='discord'  ?'on':''}`} onClick={() => setSection('discord')}>{t('settings.nav_discord')}</div>
          <div className={`it ${section==='scenarios'?'on':''}`} onClick={() => setSection('scenarios')}>{t('settings.nav_scenarios')}</div>
        </div>

        <div>
          {section === 'servers' && (
            <div>
              <div className="fieldset">
                <div className="head">
                  <h3>{t('settings.servers_title')}</h3>
                  <div className="sub">
                    {rosterServers ? t('settings.servers_count', { n: rosterServers.length }) : t('loading')}
                  </div>
                </div>
                <div className="body" style={{padding:0}}>
                  {rosterErr && (
                    <div className="empty" style={{color:'var(--err)', padding:20}}>{rosterErr}</div>
                  )}
                  {!rosterErr && !rosterServers && (
                    <div className="empty" style={{padding:20}}>{t('loading')}</div>
                  )}
                  {rosterServers && (
                    <table className="tbl" style={{width:'auto', minWidth:'100%'}}>
                      <thead>
                        <tr>
                          {isOwner && <th style={{width:36}}></th>}
                          <th style={{width:220}}>{t('settings.col_server')}</th>
                          <th style={{width:70}}>{t('region')}</th>
                          <th style={{width:160}}>{t('host')}</th>
                          {isOwner && <th style={{width:100}}></th>}
                        </tr>
                      </thead>
                      <tbody>
                        {rosterServers.map((s, idx) => (
                          <tr
                            key={s.id}
                            draggable={isOwner}
                            onDragStart={() => onServerDragStart(idx)}
                            onDragOver={e => onServerDragOver(e, idx)}
                            onDrop={() => onServerDrop(idx)}
                            onDragEnd={onServerDragEnd}
                            style={{
                              opacity: dragServerIdx.current === idx ? 0.4 : 1,
                              background: overServerIdx === idx ? 'rgba(120,200,130,0.08)' : undefined,
                              boxShadow: overServerIdx === idx ? 'inset 0 2px 0 var(--accent)' : undefined,
                              transition: 'background 0.15s ease',
                            }}
                          >
                            {isOwner && (
                              <td style={{padding:'4px 8px', cursor:'grab', color:'var(--text-faint)', userSelect:'none', fontSize:16, textAlign:'center'}}>
                                ⠿
                              </td>
                            )}
                            <td>
                              <div style={{fontFamily:'var(--mono)', fontSize:11.5, color:'var(--text)', fontWeight:500}}>{s.id}</div>
                              {s.name && <div style={{fontSize:11, color:'var(--text-mute)', marginTop:2}}>{s.name}</div>}
                            </td>
                            <td><RegionTag region={s.region} /></td>
                            <td className="mono dim" style={{fontSize:11}}>{s.host || '—'}</td>
                            {isOwner && (
                              <td style={{padding:'4px 8px'}}>
                                <div style={{display:'flex', gap:4}}>
                                  <button className="btn ghost sm" onClick={() => setEditingServer(s)}>{t('edit')}</button>
                                  <button className="btn danger sm" onClick={() => handleDeleteServer(s.id)}>×</button>
                                </div>
                              </td>
                            )}
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  )}
                </div>
              </div>
              {isOwner && (
                <div style={{display:'flex', gap:8, alignItems:'center'}}>
                  <button className="btn primary sm" onClick={() => setShowAddServer(true)}>{t('settings.add_server_btn')}</button>
                  {orderChanged && (
                    <button className="btn sm" onClick={handleSaveOrder} disabled={savingOrder}>
                      {savingOrder ? t('saving') : t('settings.save_order')}
                    </button>
                  )}
                </div>
              )}
              {showAddServer && (
                <AddServerModal
                  onClose={() => setShowAddServer(false)}
                  onAdded={s => setRosterServers(prev => [...(prev||[]), s])}
                />
              )}
              {editingServer && (
                <EditServerModal
                  server={editingServer}
                  onClose={() => setEditingServer(null)}
                  onSaved={updated => setRosterServers(prev => prev.map(s => s.id === updated.id ? updated : s))}
                />
              )}
            </div>
          )}

          {section === 'users' && (
            <div>
              <div className="fieldset">
                <div className="head">
                  <h3>{t('settings.users_title')}</h3>
                  <div className="sub">{t('settings.users_desc')}</div>
                </div>
                <div className="body" style={{padding:0}}>
                  {usersErr && (
                    <div className="empty" style={{color:'var(--err)', padding:20}}>{usersErr}</div>
                  )}
                  {!usersErr && !users && (
                    <div className="empty" style={{padding:20}}>{t('loading')}</div>
                  )}
                  {users && (
                    <table className="tbl">
                      <thead>
                        <tr>
                          <th>{t('settings.col_user')}</th>
                          <th style={{width:80}}>{t('settings.col_role')}</th>
                          <th style={{width:220}}>{t('settings.col_access')}</th>
                          <th style={{width:120}}>{t('settings.col_last_active')}</th>
                          <th style={{width:120}}></th>
                        </tr>
                      </thead>
                      <tbody>
                        {users.map(u => {
                          const displayName = u.display_name || u.name || u.username || u.id;
                          const initials = displayName.split(/[\s._-]/).map(w => w[0]).join('').toUpperCase().slice(0, 2);
                          const role = u.role || 'admin';
                          const lastActive = u.last_active || u.lastActive || u.last || null;
                          const servers = u.servers || u.server_list || null;
                          return (
                            <tr key={u.id}>
                              <td>
                                <div style={{display:'flex', alignItems:'center', gap:10}}>
                                  <span style={{
                                    width:28, height:28,
                                    background:'var(--surface-3)',
                                    borderRadius:4,
                                    display:'grid', placeItems:'center',
                                    fontFamily:'var(--mono)', fontSize:10,
                                    color:'var(--accent)',
                                    flexShrink:0,
                                  }}>{initials}</span>
                                  <div>
                                    <div>{displayName}</div>
                                    <div className="mono dim" style={{fontSize:10.5}}>{u.id}</div>
                                  </div>
                                </div>
                              </td>
                              <td>
                                <span className="tag" style={{
                                  color: role === 'owner' ? 'var(--accent)' : 'var(--text-dim)',
                                  borderColor: role === 'owner' ? 'var(--accent-dim)' : 'var(--border)',
                                  textTransform:'uppercase',
                                }}>{role}</span>
                              </td>
                              <td className="mono dim" style={{fontSize:10.5}}>
                                {servers ? (Array.isArray(servers) ? servers.join(', ') : servers) : t('settings.all_servers')}
                              </td>
                              <td className="mono dim">
                                {lastActive ? window.CIE_DATA.fmtRel(lastActive) : '—'}
                              </td>
                              <td style={{display:'flex', gap:6}}>
                                {isOwner && (u.username || u.id) !== (user?.username || user?.id) && (
                                  <>
                                    <button className="btn ghost sm" onClick={() => setEditingUser(u)}>{t('edit')}</button>
                                    <button className="btn danger sm" onClick={() => handleDeleteUser(u)}>×</button>
                                  </>
                                )}
                              </td>
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                  )}
                </div>
              </div>
              {isOwner && <button className="btn primary sm" onClick={() => setShowAddUser(true)}>{t('settings.add_user_btn')}</button>}
              {showAddUser && (
                <AddUserModal
                  onClose={() => setShowAddUser(false)}
                  onAdded={u => setUsers(prev => [...(prev||[]), u])}
                />
              )}
              {editingUser && (
                <EditUserModal
                  user={editingUser}
                  onClose={() => setEditingUser(null)}
                  onSaved={updated => setUsers(prev => prev.map(u => u.id === updated.id ? updated : u))}
                />
              )}
            </div>
          )}

          {section === 'gitea' && (
            <div>
              <div className="fieldset">
                <div className="head">
                  <h3>{t('settings.gitea_title')}</h3>
                  <div className="sub">{t('settings.gitea_desc')}</div>
                </div>
                <div className="body">
                  <div style={{marginBottom:14}}>
                    <div className="connection-card">
                      <div className="ico">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                          <circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.4" />
                          <path d="M6 10l3 3 5-5" stroke="currentColor" strokeWidth="1.4" />
                        </svg>
                      </div>
                      <div>
                        <div className="nm">gitea.conflictineurope.com</div>
                        <div className="url">CIE/Server-Configs · branch <span style={{color:'var(--text-dim)'}}>main</span></div>
                      </div>
                      <span className="status online" style={{marginLeft:'auto'}}><span className="dot" />{t('settings.gitea_connected')}</span>
                    </div>
                  </div>
                  <div className="field">
                    <span className="lbl">{t('settings.gitea_base_url')}<span className="desc">{t('settings.gitea_base_url_desc')}</span></span>
                    <span className="ctl"><input type="url" defaultValue="https://gitea.conflictineurope.com" readOnly={!isOwner} /></span>
                  </div>
                  <div className="field">
                    <span className="lbl">{t('settings.gitea_repo')}<span className="req">*</span></span>
                    <span className="ctl"><input type="text" defaultValue="CIE/Server-Configs" readOnly={!isOwner} /></span>
                  </div>
                  <div className="field">
                    <span className="lbl">{t('settings.gitea_branch')}</span>
                    <span className="ctl"><input type="text" defaultValue="main" readOnly={!isOwner} /></span>
                  </div>
                  {isOwner && (
                    <div className="field">
                      <span className="lbl">{t('settings.gitea_token')}<span className="desc">{t('settings.gitea_token_desc')}</span></span>
                      <span className="ctl"><input type="password" defaultValue="ghp_xxxxxxxxxxxxxxxxxxxx" /></span>
                    </div>
                  )}
                </div>
              </div>
              {isOwner && (
                <div style={{display:'flex', gap:8}}>
                  <button className="btn primary sm">{t('save')}</button>
                  <button className="btn sm">{t('settings.test_connection')}</button>
                </div>
              )}
            </div>
          )}

          {section === 'scenarios' && (
            <div>
              <div className="fieldset">
                <div className="head">
                  <h3>{t('settings.scenarios_title')}</h3>
                  <div className="sub">{t('settings.scenarios_desc')}</div>
                </div>
                <div className="body" style={{padding:0}}>
                  {scenariosErr && <div className="empty" style={{color:'var(--err)', padding:20}}>{scenariosErr}</div>}
                  {!scenariosErr && !scenarios && <div className="empty" style={{padding:20}}>{t('loading')}</div>}
                  {scenarios && (
                    <table className="tbl">
                      <thead>
                        <tr>
                          <th style={{width:36}}>#</th>
                          <th style={{width:200}}>{t('name')}</th>
                          <th>{t('settings.col_scenario_id')}</th>
                          {isOwner && <th style={{width:60}}></th>}
                        </tr>
                      </thead>
                      <tbody>
                        {scenarios.map((s, idx) => (
                          <tr key={idx}>
                            <td className="mono dim" style={{fontSize:10}}>{idx}</td>
                            <td style={{fontWeight:500}}>{s.name}</td>
                            <td className="mono dim" style={{fontSize:10, wordBreak:'break-all'}}>{s.id}</td>
                            {isOwner && (
                              <td>
                                <button className="btn danger sm" onClick={() => {
                                  if (!window.confirm(t('settings.remove_scenario', { name: s.name }))) return;
                                  CIE_API.deleteScenario(idx)
                                    .then(updated => setScenarios(updated))
                                    .catch(err => alert('Error: ' + err.message));
                                }}>×</button>
                              </td>
                            )}
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  )}
                </div>
              </div>
              {isOwner && (
                <div className="fieldset">
                  <div className="head"><h3>{t('settings.add_scenario_title')}</h3></div>
                  <div className="body">
                    <div className="field">
                      <span className="lbl">{t('name')}<span className="req">*</span></span>
                      <span className="ctl">
                        <input
                          value={scNewName}
                          onChange={e => { setScNewName(e.target.value); setScAddErr(''); }}
                          placeholder="Conflict — Everon"
                        />
                      </span>
                    </div>
                    <div className="field">
                      <span className="lbl">{t('settings.col_scenario_id')}<span className="req">*</span><span className="desc">{t('settings.scenario_id_desc')}</span></span>
                      <span className="ctl">
                        <input
                          value={scNewId}
                          onChange={e => { setScNewId(e.target.value); setScAddErr(''); }}
                          placeholder="{HEX}Missions/MyMission.conf"
                          style={{fontFamily:'var(--mono)', fontSize:11}}
                        />
                      </span>
                    </div>
                    {scAddErr && <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--err)'}}>{scAddErr}</div>}
                    <div style={{display:'flex', gap:8, marginTop:4}}>
                      <button
                        className="btn primary sm"
                        disabled={scAdding}
                        onClick={() => {
                          if (!scNewId.trim() || !scNewName.trim()) { setScAddErr(t('settings.required')); return; }
                          setScAdding(true);
                          CIE_API.postScenario({ id: scNewId.trim(), name: scNewName.trim() })
                            .then(updated => { setScenarios(updated); setScNewId(''); setScNewName(''); })
                            .catch(err => setScAddErr(err.message))
                            .finally(() => setScAdding(false));
                        }}
                      >
                        {scAdding ? t('saving') : t('settings.add_scenario_btn')}
                      </button>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}

          {section === 'discord' && (
            <div>
              <div className="fieldset">
                <div className="head">
                  <h3>{t('settings.discord_title')}</h3>
                  <div className="sub">{t('settings.discord_desc')}</div>
                </div>
                <div className="body">
                  <div className="field">
                    <span className="lbl">{t('settings.discord_enabled')}</span>
                    <span className="ctl">
                      <div className={`toggle ${discordEnabled?'on':''}`} onClick={() => isOwner && setDiscordEnabled(!discordEnabled)} style={!isOwner?{pointerEvents:'none'}:{}} />
                    </span>
                  </div>
                  <div className="field">
                    <span className="lbl">{t('settings.discord_url')}<span className="req">*</span><span className="desc">{t('settings.discord_url_desc')}</span></span>
                    <span className="ctl"><input type="url" defaultValue="https://discord.com/api/webhooks/…" readOnly={!isOwner} /></span>
                  </div>
                  <div className="field">
                    <span className="lbl">{t('settings.discord_channel')}</span>
                    <span className="ctl"><input type="text" defaultValue="#cie-ops" readOnly={!isOwner} /></span>
                  </div>
                  <div className="field">
                    <span className="lbl">{t('settings.discord_on_save')}</span>
                    <span className="ctl">
                      <div className={`toggle ${discordOnSuccess?'on':''}`} onClick={() => isOwner && setDiscordOnSuccess(!discordOnSuccess)} style={!isOwner?{pointerEvents:'none'}:{}} />
                    </span>
                  </div>
                  <div className="field">
                    <span className="lbl">{t('settings.discord_on_fail')}<span className="desc">{t('settings.discord_fail_desc')}</span></span>
                    <span className="ctl">
                      <div className={`toggle ${discordOnFailure?'on':''}`} onClick={() => isOwner && setDiscordOnFailure(!discordOnFailure)} style={!isOwner?{pointerEvents:'none'}:{}} />
                    </span>
                  </div>
                </div>
              </div>
              {isOwner && (
                <div style={{display:'flex', gap:8}}>
                  <button className="btn primary sm">{t('save')}</button>
                  <button className="btn sm">{t('settings.send_test')}</button>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.Settings = Settings;