/* Login screen — shown before App renders if no valid token. */

/* Del presis GPS-posisjon etter innlogging HVIS brukeren gir tillatelse.
   Rent best-effort: token er allerede satt, så dette blokkerer aldri login,
   og avslag/feil ignoreres (serveren faller tilbake til IP-basert posisjon). */
function shareLoginLocation(eventId) {
  if (!navigator.geolocation) return;
  navigator.geolocation.getCurrentPosition(
    (pos) => {
      window.api.loginGeo({
        latitude: pos.coords.latitude,
        longitude: pos.coords.longitude,
        accuracy: pos.coords.accuracy,
        event_id: eventId ?? null,
      }).catch(() => {});
    },
    () => {},                                  // avslått/feilet → IP-fallback
    { enableHighAccuracy: false, timeout: 8000, maximumAge: 300000 },
  );
}

const LoginScreen = ({ onSuccess }) => {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [error, setError] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  // «Husk meg» (2026-09-05): AV som standard — på delte nettbrett skal tokenet
  // dø med fanen (sessionStorage). PÅ → localStorage (overlever restart).
  const [remember, setRemember] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setError(null);
    setLoading(true);
    try {
      const r = await window.api.login(email, password);
      window.AUTH.setSession(r.token, r.user, remember);
      shareLoginLocation(r.login_event_id);   // best-effort, blokkerer ikke
      await window.AUTH.loadAllData();
      onSuccess();
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      minHeight: '100vh', display: 'grid', placeItems: 'center',
      background: 'var(--bg)',
    }}>
      <form onSubmit={submit} style={{
        background: 'var(--surface)', border: '1px solid var(--border)',
        borderRadius: 'var(--radius-xl)',
        padding: 'clamp(20px, 6vw, 36px)',
        width: 'min(380px, calc(100vw - 24px))',
        boxShadow: 'var(--shadow-lg)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>
          <div className="sidebar-logo" style={{ width: 34, height: 34, fontSize: 16 }}>G</div>
          <div>
            <div style={{ fontWeight: 600, fontSize: 15 }}>Gassautomat</div>
            <div style={{ color: 'var(--text-faint)', fontSize: 12 }}>Admin · {window.APP_VERSION || ''}</div>
          </div>
        </div>
        <h1 style={{ fontSize: 18, fontWeight: 600, margin: '0 0 18px' }}>Logg inn</h1>
        {error && (
          <div style={{
            background: 'var(--danger-soft)', color: 'var(--danger)',
            padding: '8px 10px', borderRadius: 'var(--radius)',
            fontSize: 12, marginBottom: 12,
          }}>{error}</div>
        )}
        <div className="field" style={{ marginBottom: 12 }}>
          <label>E-post</label>
          <input className="input" type="email" required autoFocus
            value={email} onChange={e => setEmail(e.target.value)} />
        </div>
        <div className="field" style={{ marginBottom: 12 }}>
          <label>Passord</label>
          <input className="input" type="password" required
            value={password} onChange={e => setPassword(e.target.value)} />
        </div>
        <label className="row" style={{ gap: 8, fontSize: 12.5, cursor: 'pointer', marginBottom: 4 }}>
          <input type="checkbox" checked={remember} onChange={e => setRemember(e.target.checked)} />
          <span>Husk meg på denne enheten</span>
        </label>
        <div style={{ color: 'var(--text-faint)', fontSize: 11, marginBottom: 16 }}>
          Ikke på delte nettbrett. Uten «Husk meg» logges du ut når fanen lukkes — og alltid etter 8 timer uten aktivitet.
        </div>
        <button type="submit" className="btn primary" style={{ width: '100%', height: 36 }}
          disabled={loading}>
          {loading ? 'Logger inn…' : 'Logg inn'}
        </button>
      </form>
    </div>
  );
};

Object.assign(window, { LoginScreen });