/* ── Halaman Login ── */
function LoginPage({ navigate, onLogin }) {
  const [email, setEmail] = useState('');
  const [pass, setPass] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setError(''); setLoading(true);
    try {
      const res = await api.post('auth.php?action=login', { email, password: pass });
      if (res.ok && res.user) onLogin(res.user);
      else setError(res.error || 'Login gagal.');
    } catch {
      setError('Tidak dapat terhubung ke server.');
    } finally { setLoading(false); }
  };

  return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'linear-gradient(155deg, var(--brand-deep), var(--brand-navy))', padding: 20 }}>
      <div style={{ width: '100%', maxWidth: 400, background: '#fff', borderRadius: 22, padding: '40px 36px', boxShadow: '0 30px 80px rgba(0,0,0,.35)', position: 'relative' }}>
        <button onClick={() => navigate('home')} style={{ position: 'absolute', top: 18, left: 18, background: 'var(--bg2)', border: 'none', borderRadius: 8, padding: '6px 12px', fontSize: 12.5, fontWeight: 700, color: 'var(--navy)', cursor: 'pointer' }}>← Beranda</button>
        <div style={{ textAlign: 'center', marginBottom: 28, marginTop: 14 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 14 }}><img src="logo.jpg" alt="" style={{ height: 56, borderRadius: 12 }} /><img src="logo-rq.png" alt="" style={{ height: 52 }} /></span>
          <div style={{ fontFamily: 'var(--font-d)', fontSize: 24, fontWeight: 900, color: 'var(--ink-deep)' }}>Panel Dashboard</div>
          <div style={{ fontSize: 13.5, color: 'var(--muted)', marginTop: 4 }}>Markaz Qurrota A'yun</div>
        </div>

        <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div>
            <label style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink-deep)', display: 'block', marginBottom: 6 }}>Email</label>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)} required placeholder="admin@qurrotaayun.com"
              style={{ width: '100%', padding: '12px 14px', borderRadius: 10, border: '1.5px solid var(--border)', fontSize: 14, fontFamily: 'inherit' }} />
          </div>
          <div>
            <label style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink-deep)', display: 'block', marginBottom: 6 }}>Password</label>
            <input type="password" value={pass} onChange={e => setPass(e.target.value)} required placeholder="••••••••"
              style={{ width: '100%', padding: '12px 14px', borderRadius: 10, border: '1.5px solid var(--border)', fontSize: 14, fontFamily: 'inherit' }} />
          </div>
          {error && <div style={{ color: '#DC2626', fontSize: 13, fontWeight: 600, background: '#FEF2F2', border: '1px solid #FECACA', borderRadius: 8, padding: '10px 12px' }}>{error}</div>}
          <button type="submit" disabled={loading} className="btn-hero-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 4, opacity: loading ? .7 : 1 }}>
            {loading ? 'Memproses…' : 'Masuk'}
          </button>
        </form>

        {api.mode === 'mock' && /localhost|127\.0\.0\.1/.test(location.hostname) && (
          <div style={{ marginTop: 20, padding: '12px 14px', background: 'var(--bg2)', borderRadius: 10, fontSize: 12, color: 'var(--muted)', lineHeight: 1.6 }}>
            <strong style={{ color: 'var(--ink-deep)' }}>Mode Preview (data tiruan):</strong><br />
            admin@qurrotaayun.com / admin123<br />
            penulis@qurrotaayun.com / penulis123
          </div>
        )}
      </div>
    </div>
  );
}

window.LoginPage = LoginPage;