/* global React, Card, Ic, VS */

function ConfigScreen() {
  const role = VS.getRole();
  const username = VS.getUsername();
  const isAdmin = role === 'admin';

  return (
    <div style={{ padding: 24, maxWidth: 960, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div>
        <div className="uppercase-label" style={{ marginBottom: 6 }}>Ustawienia</div>
        <h1 style={{ margin: 0, fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em' }}>Konfiguracja</h1>
        <div style={{ fontSize: 12.5, color: 'var(--fg-muted)', marginTop: 6 }}>
          Profil zalogowanego użytkownika oraz parametry systemu.
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 12 }}>
        <Card>
          <div className="uppercase-label" style={{ marginBottom: 10 }}>Konto</div>
          <KV label="Login" value={username || '—'} mono />
          <KV label="Rola" value={role || 'brak'} />
          <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--hairline)' }}>
            <button onClick={() => { VS.clearAuth(); window.dispatchEvent(new Event('vs:logout')); }}
              style={{
                width: '100%', padding: '8px 12px', fontSize: 12.5, cursor: 'pointer',
                background: 'var(--bg-sunken)', border: '1px solid var(--border-strong)',
                borderRadius: 'var(--r-sm)', color: 'var(--fg)', fontFamily: 'inherit',
              }}>Wyloguj</button>
          </div>
        </Card>

        <Card>
          <div className="uppercase-label" style={{ marginBottom: 10 }}>Normy alarmowe</div>
          <KV label="VEL RMS · ostrzeżenie" value="4.5 mm/s" mono />
          <KV label="VEL RMS · alarm" value="7.1 mm/s" mono />
          <KV label="ACC RMS · ostrzeżenie" value="2.0 g" mono />
          <KV label="ACC RMS · alarm" value="3.5 g" mono />
          <div style={{ fontSize: 11, color: 'var(--fg-subtle)', marginTop: 10 }}>
            Zgodne z ISO&nbsp;10816-3, klasa II (maszyny &lt;&nbsp;15&nbsp;kW).
          </div>
        </Card>

        <Card>
          <div className="uppercase-label" style={{ marginBottom: 10 }}>Integracje</div>
          <KV label="Źródło" value="SKF @ptitude Observer" />
          <KV label="Sync" value="Aptitude agent · heartbeat 10 s" />
          <KV label="Raporty" value="PDF + XLSX" />
        </Card>

        {isAdmin && (
          <Card>
            <div className="uppercase-label" style={{ marginBottom: 10 }}>Administracja</div>
            <div style={{ fontSize: 12.5, color: 'var(--fg-muted)', lineHeight: 1.5 }}>
              Zarządzanie użytkownikami, odbiorcami raportów i progami alarmowymi zostanie dodane w kolejnej iteracji.
              Obecnie modyfikacje wykonuje się bezpośrednio po stronie API.
            </div>
          </Card>
        )}
      </div>
    </div>
  );
}

function KV({ label, value, mono }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '4px 0', fontSize: 12.5 }}>
      <span style={{ color: 'var(--fg-muted)' }}>{label}</span>
      <span className={mono ? 'mono' : ''} style={{ color: 'var(--fg)', fontWeight: 500 }}>{value}</span>
    </div>
  );
}

Object.assign(window, { ConfigScreen });