// Tab panels for TunnelManagementPage (load after admin-system-tunnel-helpers.jsx, before admin-system.jsx)

function TunnelMgmtTabOverview(props) {
  const {
    analytics, analyticsRange, setAnalyticsRange, loadAnalytics,
  } = props;
  const formatBytes = tunnelMgmtFormatBytes;
  const barHeight = tunnelMgmtBarHeight;
  return (
    <>
      <div className="wh-toolbar">
        <h3>Overview</h3>
        <select value={analyticsRange} onChange={e => { setAnalyticsRange(e.target.value); loadAnalytics(e.target.value); }}
                style={{padding:'6px 10px',borderRadius:8,border:'1px solid var(--border)',background:'var(--bg-card)',color:'var(--text)',fontSize:12}}>
          <option value="1h">Last 1h</option>
          <option value="24h">Last 24h</option>
          <option value="7d">Last 7d</option>
          <option value="30d">Last 30d</option>
        </select>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(150px, 1fr))',gap:12,marginBottom:20}}>
        {[
          { label: 'Active Tunnels', value: analytics.activeConnections || 0, color: 'var(--green,#6ee7b7)' },
          { label: 'Total Connections', value: analytics.totalConnections || 0, color: 'var(--accent)' },
          { label: '↑ Upload', value: formatBytes(analytics.totalBytesIn || 0), color: '#fdba74' },
          { label: '↓ Download', value: formatBytes(analytics.totalBytesOut || 0), color: '#f9a8d4' },
          { label: 'Unique IPs', value: analytics.uniqueIPs || 0 },
          { label: 'Active Invites', value: analytics.totalInvites || 0, color: '#fde68a' },
        ].map(s => (
          <div key={s.label} className="card" style={{padding:'14px 16px'}}>
            <div style={{fontSize:11,fontWeight:600,textTransform:'uppercase',letterSpacing:'0.05em',color:'var(--text-dim)',marginBottom:4}}>{s.label}</div>
            <div style={{fontSize:20,fontWeight:700,color:s.color || 'var(--text)'}}>{s.value}</div>
          </div>
        ))}
      </div>

      {analytics.connectionsByHour?.length > 0 && (
        <div className="card" style={{marginBottom:16}}>
          <div style={{fontSize:11,fontWeight:600,textTransform:'uppercase',letterSpacing:'0.05em',color:'var(--accent)',marginBottom:8}}>Connections Over Time</div>
          <div style={{display:'flex',alignItems:'flex-end',gap:2,height:80}}>
            {analytics.connectionsByHour.map((b, i) => (
              <div key={i} style={{flex:1,background:'var(--accent)',borderRadius:'3px 3px 0 0',height:`${barHeight(b.count, analytics.connectionsByHour)}%`,minWidth:4,position:'relative',cursor:'pointer'}}
                   title={`${(b.hour||'').slice(11)||b.hour}: ${b.count}`} />
            ))}
          </div>
        </div>
      )}

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
        <div className="card">
          <div style={{fontSize:11,fontWeight:600,textTransform:'uppercase',letterSpacing:'0.05em',color:'var(--accent)',marginBottom:8}}>Top Subdomains</div>
          {analytics.topSubdomains?.length > 0 ? (
            <table className="wh-table"><thead><tr><th>Subdomain</th><th>Count</th></tr></thead><tbody>
              {analytics.topSubdomains.map(s => <tr key={s.subdomain}><td><code>{s.subdomain}</code></td><td>{s.count}</td></tr>)}
            </tbody></table>
          ) : <div className="wh-empty" style={{padding:16}}><p>No data</p></div>}
        </div>
        <div className="card">
          <div style={{fontSize:11,fontWeight:600,textTransform:'uppercase',letterSpacing:'0.05em',color:'var(--accent)',marginBottom:8}}>Top IPs</div>
          {analytics.topIPs?.length > 0 ? (
            <table className="wh-table"><thead><tr><th>IP</th><th>Count</th></tr></thead><tbody>
              {analytics.topIPs.map(s => <tr key={s.remote_addr}><td><code>{s.remote_addr}</code></td><td>{s.count}</td></tr>)}
            </tbody></table>
          ) : <div className="wh-empty" style={{padding:16}}><p>No data</p></div>}
        </div>
      </div>
    </>
  );
}

function TunnelMgmtTabTunnels(props) {
  const { tunnels, loadTunnels, killTunnel } = props;
  const formatBytes = tunnelMgmtFormatBytes;
  return (
    <>
      <div className="wh-toolbar"><h3>Active Tunnels</h3><button className="btn-sm" onClick={loadTunnels}>Refresh</button></div>
      <table className="wh-table"><thead><tr><th>Client</th><th>User</th><th>Tunnels</th><th style={{textAlign:'right'}}>↑ Up</th><th style={{textAlign:'right'}}>↓ Down</th><th></th></tr></thead><tbody>
        {Object.entries(tunnels).length > 0 ? Object.entries(tunnels).map(([addr, client]) => (
          <tr key={addr}>
            <td><code>{addr}</code></td>
            <td><code>{client.user}</code></td>
            <td>
              {(client.httpHosts||[]).map(h => <span key={h} className="badge" style={{background:'rgba(110,231,183,0.15)',color:'#6ee7b7',marginRight:4}}>{h}</span>)}
              {(client.tcpPorts||[]).map(p => <span key={p} className="badge" style={{background:'rgba(147,197,253,0.15)',color:'#93c5fd',marginRight:4}}>tcp:{p}</span>)}
              {(client.aliases||[]).map(a => <span key={a} className="badge" style={{background:'rgba(147,197,253,0.15)',color:'#93c5fd',marginRight:4}}>{a}</span>)}
              {!client.listenerCount && <span style={{color:'var(--text-dim)',fontSize:11}}>connecting...</span>}
            </td>
            <td style={{textAlign:'right',fontVariantNumeric:'tabular-nums'}}><code>{formatBytes(client.bytes_in)}</code></td>
            <td style={{textAlign:'right',fontVariantNumeric:'tabular-nums'}}><code>{formatBytes(client.bytes_out)}</code></td>
            <td><button className="btn-sm" style={{color:'#fca5a5',borderColor:'#fca5a5'}} onClick={() => killTunnel(addr)}>Disconnect</button></td>
          </tr>
        )) : <tr><td colSpan={6}><div className="wh-empty"><p>No active tunnels</p></div></td></tr>}
      </tbody></table>
    </>
  );
}

function TunnelMgmtTabConnections(props) {
  const { connections } = props;
  const formatBytes = tunnelMgmtFormatBytes;
  const shortTime = tunnelMgmtShortTime;
  return (
    <>
      <h3>Connection Log</h3>
      <table className="wh-table"><thead><tr><th>ID</th><th>Invite</th><th>App User</th><th>Type</th><th>Subdomain</th><th>Remote IP</th><th>User</th><th style={{textAlign:'right'}}>↑ Up</th><th style={{textAlign:'right'}}>↓ Down</th><th>Started</th><th>Status</th></tr></thead><tbody>
        {connections.rows?.length > 0 ? connections.rows.map(c => (
          <tr key={c.id}>
            <td>{c.id}</td>
            <td><code>{c.invite_code || '-'}</code></td>
            <td style={{color: c.app_user ? 'var(--text)' : 'var(--text-dim)'}}>{tunnelMgmtOwnerLabel(c.app_user)}</td>
            <td><span className="badge" style={{background:'rgba(147,197,253,0.15)',color:'#93c5fd'}}>{c.tunnel_type}</span></td>
            <td><code>{tunnelMgmtSubdomainLabel(c.subdomain)}</code></td>
            <td><code>{c.remote_addr}</code></td>
            <td><code>{c.ssh_user || '-'}</code></td>
            <td style={{textAlign:'right',fontVariantNumeric:'tabular-nums'}}><code>{formatBytes(c.bytes_in)}</code></td>
            <td style={{textAlign:'right',fontVariantNumeric:'tabular-nums'}}><code>{formatBytes(c.bytes_out)}</code></td>
            <td>{shortTime(c.started_at)}</td>
            <td>{!c.ended_at
              ? <span className="badge" style={{background:'rgba(110,231,183,0.15)',color:'#6ee7b7'}}>active</span>
              : <span className="badge" style={{background:'rgba(252,165,165,0.15)',color:'#fca5a5'}}>closed</span>}
            </td>
          </tr>
        )) : <tr><td colSpan={11}><div className="wh-empty"><p>No connections logged yet</p></div></td></tr>}
      </tbody></table>
    </>
  );
}

function TunnelMgmtTabRequests(props) {
  const { requests } = props;
  const shortTime = tunnelMgmtShortTime;
  return (
    <>
      <h3>Request Log</h3>
      <table className="wh-table"><thead><tr><th>Time</th><th>Method</th><th>Path</th><th>Status</th><th>IP</th><th>Latency</th></tr></thead><tbody>
        {requests.rows?.length > 0 ? requests.rows.map(r => (
          <tr key={r.id}>
            <td>{shortTime(r.created_at)}</td>
            <td><code>{r.method}</code></td>
            <td style={{maxWidth:200,overflow:'hidden',textOverflow:'ellipsis'}}><code>{r.path}</code></td>
            <td><span className="badge" style={{
              background: r.status < 400 ? 'rgba(110,231,183,0.15)' : r.status < 500 ? 'rgba(147,197,253,0.15)' : 'rgba(252,165,165,0.15)',
              color: r.status < 400 ? '#6ee7b7' : r.status < 500 ? '#93c5fd' : '#fca5a5',
            }}>{r.status}</span></td>
            <td><code>{r.remote_addr}</code></td>
            <td>{r.response_time_ms?.toFixed(1)}ms</td>
          </tr>
        )) : <tr><td colSpan={6}><div className="wh-empty"><p>No requests logged yet</p></div></td></tr>}
      </tbody></table>
    </>
  );
}

function TunnelMgmtTabInvites(props) {
  const {
    inviteForm, setInviteForm, newInviteCode, createInvite, invites,
    editingInviteId, setEditingInviteId, editConcurrentVal, setEditConcurrentVal, concurrentRef,
    saveConcurrent, toggleInvite, viewUsage, usageInvite, inviteUsage, setUsageInvite, setInviteUsage,
  } = props;
  const shortTime = tunnelMgmtShortTime;
  return (
    <>
      <h3>Invites</h3>
      <div className="card" style={{marginBottom:16}}>
        <div style={{fontSize:11,fontWeight:600,textTransform:'uppercase',letterSpacing:'0.05em',color:'var(--accent)',marginBottom:12}}>Create New Invite</div>
        <div style={{display:'grid',gridTemplateColumns:'2fr 1fr 1fr auto',gap:12,alignItems:'end'}}>
          <div className="field">
            <label>Label</label>
            <input value={inviteForm.label} onChange={e => setInviteForm({...inviteForm, label: e.target.value})} placeholder="e.g. 'john', 'team-alpha'" />
          </div>
          <div className="field">
            <label>Max Uses</label>
            <input type="number" min="0" value={inviteForm.max_uses} onChange={e => setInviteForm({...inviteForm, max_uses: parseInt(e.target.value)||0})} placeholder="0 = unlimited" />
          </div>
          <div className="field">
            <label>Max Concurrent</label>
            <input type="number" min="1" value={inviteForm.max_concurrent} onChange={e => setInviteForm({...inviteForm, max_concurrent: parseInt(e.target.value)||1})} placeholder="5" />
          </div>
          <button className="btn-primary" style={{height:38}} onClick={createInvite}>Create</button>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12,marginTop:12}}>
          <div className="field">
            <label>Max Duration (min)</label>
            <input type="number" min="0" value={inviteForm.max_duration_minutes} onChange={e => setInviteForm({...inviteForm, max_duration_minutes: parseInt(e.target.value)||0})} placeholder="0 = unlimited" />
          </div>
          <div className="field">
            <label>Expires At</label>
            <input type="datetime-local" value={inviteForm.expires_at} onChange={e => setInviteForm({...inviteForm, expires_at: e.target.value})} />
          </div>
        </div>
        {newInviteCode && (
          <div style={{marginTop:12,padding:12,background:'var(--bg)',border:'1px solid var(--green,#6ee7b7)',borderRadius:8}}>
            <div style={{fontSize:11,color:'var(--green,#6ee7b7)',textTransform:'uppercase',letterSpacing:1,fontWeight:600}}>Invite created — share this code:</div>
            <div style={{marginTop:6,display:'flex',alignItems:'center',gap:8}}>
              <code style={{fontSize:14,color:'var(--text)'}}>{newInviteCode}</code>
              <button className="btn-sm" onClick={() => navigator.clipboard.writeText(newInviteCode)}>Copy</button>
            </div>
            <div style={{marginTop:8,fontSize:11,color:'var(--text-dim)'}}>
              Usage: <code>ssh -R myapp:80:localhost:3000 vibey.cloud -p 2222</code> — enter <code>{newInviteCode}</code> as password
            </div>
          </div>
        )}
      </div>

      <table className="wh-table"><thead><tr><th>Label</th><th>App User</th><th>Code</th><th>Uses</th><th>Concurrent</th><th>Max Duration</th><th>Expires</th><th>Created</th><th>Status</th><th></th></tr></thead><tbody>
        {invites.length > 0 ? invites.map(inv => (
          <tr key={inv.id}>
            <td style={{fontWeight:600}}>{inv.label}</td>
            <td style={{color: inv.app_user ? 'var(--text)' : 'var(--text-dim)'}}>{tunnelMgmtOwnerLabel(inv.app_user)}</td>
            <td><code>{inv.code}</code></td>
            <td>{inv.use_count}{inv.max_uses > 0 ? ` / ${inv.max_uses}` : ' / ∞'}</td>
            <td style={{cursor:'pointer'}} onClick={() => { setEditingInviteId(inv.id); setEditConcurrentVal(inv.max_concurrent || 0); }}>
              {editingInviteId === inv.id ? (
                <>{inv.active_sessions || 0} / <input ref={concurrentRef} type="number" min="0" value={editConcurrentVal}
                  onChange={e => setEditConcurrentVal(parseInt(e.target.value)||0)}
                  onKeyDown={e => e.key === 'Enter' && saveConcurrent(inv)}
                  onBlur={() => saveConcurrent(inv)}
                  onClick={e => e.stopPropagation()}
                  style={{width:50,padding:'2px 6px',display:'inline'}} autoFocus /></>
              ) : <>{inv.active_sessions || 0} / {inv.max_concurrent > 0 ? inv.max_concurrent : '∞'}</>}
            </td>
            <td>{inv.max_duration_minutes > 0 ? inv.max_duration_minutes + 'm' : '∞'}</td>
            <td>{inv.expires_at ? shortTime(inv.expires_at) : 'never'}</td>
            <td>{shortTime(inv.created_at)}</td>
            <td>{inv.active
              ? <span className="badge" style={{background:'rgba(110,231,183,0.15)',color:'#6ee7b7'}}>active</span>
              : <span className="badge" style={{background:'rgba(252,165,165,0.15)',color:'#fca5a5'}}>revoked</span>}
            </td>
            <td style={{whiteSpace:'nowrap'}}>
              {inv.active
                ? <button className="btn-sm" style={{color:'#fca5a5',borderColor:'#fca5a5'}} onClick={() => toggleInvite(inv.id, false)}>Revoke</button>
                : <button className="btn-sm" onClick={() => toggleInvite(inv.id, true)}>Reactivate</button>}
              <button className="btn-sm" style={{marginLeft:4}} onClick={() => viewUsage(inv)}>Usage</button>
            </td>
          </tr>
        )) : <tr><td colSpan={10}><div className="wh-empty"><p>No invites yet</p></div></td></tr>}
      </tbody></table>

      {usageInvite && (
        <div className="card" style={{marginTop:16}}>
          <div style={{fontSize:11,fontWeight:600,textTransform:'uppercase',letterSpacing:'0.05em',color:'var(--accent)',marginBottom:8}}>
            Usage: {usageInvite.label} ({usageInvite.code})
          </div>
          <table className="wh-table"><thead><tr><th>User</th><th>Subdomain</th><th>IP</th><th>Connected</th><th>Disconnected</th><th>Status</th></tr></thead><tbody>
            {inviteUsage.length > 0 ? inviteUsage.map(u => (
              <tr key={u.id}>
                <td><code>{u.ssh_user || '-'}</code></td>
                <td><code>{tunnelMgmtSubdomainLabel(u.subdomain)}</code></td>
                <td><code>{u.remote_addr}</code></td>
                <td>{shortTime(u.connected_at)}</td>
                <td>{u.disconnected_at ? shortTime(u.disconnected_at) : '-'}</td>
                <td>{!u.disconnected_at
                  ? <span className="badge" style={{background:'rgba(110,231,183,0.15)',color:'#6ee7b7'}}>connected</span>
                  : <span className="badge" style={{background:'rgba(252,165,165,0.15)',color:'#fca5a5'}}>closed</span>}
                </td>
              </tr>
            )) : <tr><td colSpan={6}><div className="wh-empty"><p>No usage yet</p></div></td></tr>}
          </tbody></table>
          <button className="btn-sm" style={{marginTop:8}} onClick={() => { setUsageInvite(null); setInviteUsage([]); }}>Close</button>
        </div>
      )}
    </>
  );
}

function TunnelMgmtTabStatic(props) {
  const {
    staticData, staticBandwidth, loadStaticDeploys, deleteStaticDeploy,
    staticSettings, setStaticSettings, staticSettingsMB, setStaticSettingsMB, saveStaticSettings, staticSettingsSaved,
  } = props;
  const formatBytes = tunnelMgmtFormatBytes;
  const shortTime = tunnelMgmtShortTime;
  return (
    <>
      <div className="wh-toolbar"><h3>Static Deployments</h3><button className="btn-sm" onClick={loadStaticDeploys}>Refresh</button></div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12,marginBottom:20}}>
        {[
          { label: 'Active Deploys', value: staticData.active_count || 0, color: 'var(--green,#6ee7b7)' },
          { label: 'Total Storage', value: formatBytes(staticData.total_storage || 0), color: 'var(--accent)' },
          { label: 'Bandwidth (30d)', value: formatBytes(staticBandwidth.total_30d || 0), color: '#fdba74' },
          { label: 'Total Deploys', value: staticData.total || 0 },
        ].map(s => (
          <div key={s.label} className="card" style={{padding:'14px 16px'}}>
            <div style={{fontSize:11,fontWeight:600,textTransform:'uppercase',letterSpacing:'0.05em',color:'var(--text-dim)',marginBottom:4}}>{s.label}</div>
            <div style={{fontSize:20,fontWeight:700,color:s.color || 'var(--text)'}}>{s.value}</div>
          </div>
        ))}
      </div>

      <table className="wh-table"><thead><tr><th>ID</th><th>App User</th><th>Invite</th><th>Files</th><th style={{textAlign:'right'}}>Size</th><th>Last Accessed</th><th>Hits</th><th>Updated</th><th>Status</th><th></th></tr></thead><tbody>
        {staticData.rows?.length > 0 ? staticData.rows.map(d => (
          <tr key={d.id}>
            <td><code>{d.id}</code></td>
            <td style={{color: d.app_user ? 'var(--text)' : 'var(--text-dim)'}}>{tunnelMgmtOwnerLabel(d.app_user)}</td>
            <td><code>{d.invite_code}</code></td>
            <td>{d.file_count}</td>
            <td style={{textAlign:'right'}}><code>{formatBytes(d.total_size)}</code></td>
            <td>{d.last_accessed ? shortTime(d.last_accessed) : 'never'}</td>
            <td>{d.access_count}</td>
            <td>{shortTime(d.updated_at)}</td>
            <td>{d.status === 'active'
              ? <span className="badge" style={{background:'rgba(110,231,183,0.15)',color:'#6ee7b7'}}>active</span>
              : <span className="badge" style={{background:'rgba(252,165,165,0.15)',color:'#fca5a5'}}>{d.status}</span>}
            </td>
            <td>{d.status === 'active' && <button className="btn-sm" style={{color:'#fca5a5',borderColor:'#fca5a5'}} onClick={() => deleteStaticDeploy(d.id)}>Delete</button>}</td>
          </tr>
        )) : <tr><td colSpan={10}><div className="wh-empty"><p>No deployments yet</p></div></td></tr>}
      </tbody></table>

      <div className="card" style={{marginTop:16}}>
        <div style={{fontSize:11,fontWeight:600,textTransform:'uppercase',letterSpacing:'0.05em',color:'var(--accent)',marginBottom:12}}>Static Deploy Limits</div>
        {[
          { key: 'max_deployments_per_invite', label: 'Max Deployments Per Invite', desc: 'How many active static sites one invite code can have', val: staticSettings, setVal: setStaticSettings },
          { key: 'max_deployment_size_mb', label: 'Max Deployment Size (MB)', desc: 'Max total file size for a single deployment', val: staticSettingsMB, setVal: setStaticSettingsMB },
          { key: 'max_total_storage_mb', label: 'Max Total Storage (MB)', desc: 'Max total storage across all deployments per invite', val: staticSettingsMB, setVal: setStaticSettingsMB },
          { key: 'max_bandwidth_mb', label: 'Max Monthly Bandwidth (MB)', desc: 'Max bandwidth served per month (0 = unlimited)', val: staticSettingsMB, setVal: setStaticSettingsMB },
          { key: 'max_file_size_mb', label: 'Max File Size (MB)', desc: 'Max size for a single file in a deployment', val: staticSettingsMB, setVal: setStaticSettingsMB },
        ].map(s => (
          <div key={s.key} style={{display:'flex',alignItems:'center',gap:16,padding:'12px 0',borderBottom:'1px solid var(--border)'}}>
            <div style={{flex:1}}>
              <div style={{fontSize:13,fontWeight:600,color:'var(--text)'}}>{s.label}</div>
              <div style={{fontSize:11,color:'var(--text-dim)'}}>{s.desc}</div>
            </div>
            <input type="number" min="0" value={s.val[s.key]}
              onChange={e => s.setVal(prev => ({...prev, [s.key]: parseInt(e.target.value)||0}))}
              style={{width:140,textAlign:'right',padding:'8px 12px',borderRadius:8,border:'1px solid var(--border)',background:'var(--bg)',color:'var(--text)',fontSize:13}} />
          </div>
        ))}
        <div style={{marginTop:16,textAlign:'right'}}>
          <button className="btn-primary" onClick={saveStaticSettings}>Save Limits</button>
          {staticSettingsSaved && <span style={{color:'var(--green,#6ee7b7)',fontSize:12,marginLeft:12}}>Saved!</span>}
        </div>
      </div>
    </>
  );
}

function TunnelMgmtTabBans(props) {
  const { banForm, setBanForm, addBan, bans, removeBan } = props;
  const shortTime = tunnelMgmtShortTime;
  return (
    <>
      <h3>Banned IPs</h3>
      <div className="card" style={{marginBottom:16}}>
        <div style={{display:'flex',gap:12,alignItems:'end'}}>
          <div className="field" style={{flex:1}}>
            <label>IP Address</label>
            <input value={banForm.ip} onChange={e => setBanForm({...banForm, ip: e.target.value})} placeholder="IP or CIDR (e.g. 192.168.1.0/24)" />
          </div>
          <div className="field" style={{flex:1}}>
            <label>Reason</label>
            <input value={banForm.reason} onChange={e => setBanForm({...banForm, reason: e.target.value})} placeholder="Reason (optional)" />
          </div>
          <button className="btn-primary" style={{height:38}} onClick={addBan}>Ban</button>
        </div>
      </div>
      <table className="wh-table"><thead><tr><th>IP</th><th>Reason</th><th>Banned By</th><th>Date</th><th></th></tr></thead><tbody>
        {bans.length > 0 ? bans.map(b => (
          <tr key={b.id}>
            <td><code>{b.ip}</code></td>
            <td>{b.reason || '-'}</td>
            <td>{b.banned_by}</td>
            <td>{shortTime(b.created_at)}</td>
            <td><button className="btn-sm" style={{color:'#fca5a5',borderColor:'#fca5a5'}} onClick={() => removeBan(b.id)}>Unban</button></td>
          </tr>
        )) : <tr><td colSpan={5}><div className="wh-empty"><p>No banned IPs</p></div></td></tr>}
      </tbody></table>
    </>
  );
}

function TunnelMgmtTabSettings(props) {
  const { settings, setSettings, saveSettings, settingsSaved } = props;
  return (
    <>
      <h3>Tunnel Settings</h3>
      <div className="card">
        {[
          { key: 'max_tunnel_duration_minutes', label: 'Max Tunnel Duration', desc: 'Auto-disconnect tunnels after N minutes (0 = unlimited)' },
          { key: 'auto_release_idle_minutes', label: 'Auto-Release Idle Tunnels', desc: 'Close tunnels with no traffic after N minutes (0 = disabled)' },
          { key: 'max_tunnels_per_ip', label: 'Max Tunnels Per IP', desc: 'Limit concurrent tunnels from a single IP address' },
          { key: 'global_bandwidth_limit_mb', label: 'Global Bandwidth Limit', desc: 'Max bandwidth per tunnel in MB (0 = unlimited)' },
        ].map(s => (
          <div key={s.key} style={{display:'flex',alignItems:'center',gap:16,padding:'12px 0',borderBottom:'1px solid var(--border)'}}>
            <div style={{flex:1}}>
              <div style={{fontSize:13,fontWeight:600,color:'var(--text)'}}>{s.label}</div>
              <div style={{fontSize:11,color:'var(--text-dim)'}}>{s.desc}</div>
            </div>
            <input type="number" min="0" value={settings[s.key] || ''}
              onChange={e => setSettings(prev => ({...prev, [s.key]: e.target.value}))}
              style={{width:140,textAlign:'right',padding:'8px 12px',borderRadius:8,border:'1px solid var(--border)',background:'var(--bg)',color:'var(--text)',fontSize:13}} />
          </div>
        ))}
        <div style={{marginTop:16,textAlign:'right'}}>
          <button className="btn-primary" onClick={saveSettings}>Save Settings</button>
          {settingsSaved && <span style={{color:'var(--green,#6ee7b7)',fontSize:12,marginLeft:12}}>Saved!</span>}
        </div>
      </div>
    </>
  );
}