/* global React, Wordmark, Button, Ic, VS */

function LoginScreen({ onLogin }) {
  const [u, setU] = React.useState('');
  const [p, setP] = React.useState('');
  const [err, setErr] = React.useState('');
  const [busy, setBusy] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setErr(''); setBusy(true);
    try {
      const data = await VS.login(u.trim(), p);
      onLogin(data);
    } catch (ex) {
      setErr(ex.message || 'Nie udało się zalogować');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div style={{
      minHeight: '100vh',
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      background: 'var(--bg)',
    }}>
      {/* Left: marketing slab */}
      <div style={{
        background: 'var(--bg-sunken)',
        borderRight: '1px solid var(--border)',
        padding: '48px 56px',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      }}>
        <Wordmark />
        <div>
          <div className="uppercase-label" style={{ marginBottom: 12 }}>System projektu · v0.1</div>
          <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.15, maxWidth: 420 }}>
            Monitoring drgań maszyn przemysłowych.
          </div>
          <div style={{ color: 'var(--fg-muted)', fontSize: 13, marginTop: 10, maxWidth: 420 }}>
            Zasysa pomiary z SKF&nbsp;@ptitude, pokazuje trendy, generuje raporty zgodne z ISO&nbsp;10816-3.
          </div>
        </div>
        <div style={{ display: 'flex', gap: 24, fontSize: 11, color: 'var(--fg-muted)' }}>
          <div>
            <div className="uppercase-label">status</div>
            <div className="mono" style={{ marginTop: 4, color: 'var(--ok)' }}>● online</div>
          </div>
          <div>
            <div className="uppercase-label">region</div>
            <div className="mono" style={{ marginTop: 4 }}>EU · PL</div>
          </div>
          <div>
            <div className="uppercase-label">build</div>
            <div className="mono" style={{ marginTop: 4 }}>2026.04.17</div>
          </div>
        </div>
      </div>

      {/* Right: login form */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px' }}>
        <form onSubmit={submit} style={{ width: 360 }}>
          <div className="uppercase-label" style={{ marginBottom: 8 }}>Logowanie</div>
          <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 28 }}>
            Witaj w Vibranium
          </div>

          <label style={{ display: 'block', marginBottom: 14 }}>
            <div className="uppercase-label" style={{ marginBottom: 6 }}>Login</div>
            <input
              autoFocus
              value={u}
              onChange={(e) => setU(e.target.value)}
              placeholder="admin"
              style={{
                width: '100%', height: 34,
                padding: '0 12px',
                background: 'var(--surface)',
                border: '1px solid var(--border-strong)',
                borderRadius: 'var(--r-sm)',
                fontSize: 13, color: 'var(--fg)', outline: 'none',
              }}
            />
          </label>

          <label style={{ display: 'block', marginBottom: 14 }}>
            <div className="uppercase-label" style={{ marginBottom: 6 }}>Hasło</div>
            <input
              type="password"
              value={p}
              onChange={(e) => setP(e.target.value)}
              placeholder="••••••••"
              style={{
                width: '100%', height: 34,
                padding: '0 12px',
                background: 'var(--surface)',
                border: '1px solid var(--border-strong)',
                borderRadius: 'var(--r-sm)',
                fontSize: 13, color: 'var(--fg)', outline: 'none',
              }}
            />
          </label>

          {err && (
            <div style={{
              padding: '8px 10px',
              background: 'var(--alarm-weak)',
              border: '1px solid var(--alarm-border)',
              borderRadius: 'var(--r-sm)',
              color: 'var(--alarm)',
              fontSize: 12,
              marginBottom: 12,
              fontFamily: 'var(--font-mono)',
            }}>{err}</div>
          )}

          <Button size="lg" variant="accent" style={{ width: '100%', justifyContent: 'center' }}
            disabled={busy || !u || !p}
            onClick={submit}>
            {busy ? 'Loguję…' : 'Zaloguj'}
          </Button>

          <div style={{ marginTop: 24, fontSize: 11, color: 'var(--fg-subtle)', textAlign: 'center' }}>
            wnioski.fundacjasamodzielni.pl
          </div>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen });