// Login.jsx — elegant split login. Any credentials proceed (prototype).
/* global React, I, PlatGlyph */

function Login({ onLogin }) {
  const [email, setEmail] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [show, setShow] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    setBusy(true); setErr('');
    try {
      await window.MUAPI.login(email, pw);
      onLogin();
    } catch (ex) {
      setErr(ex.message || 'Email atau kata sandi salah.');
      setBusy(false);
    }
  };

  return (
    <div className="login">
      <aside className="login-aside">
        <div className="pattern" />
        <div className="lbrand">
          <span className="seal"><Mark /></span>
          <div>
            <b style={{ display: 'block' }}>Assuffah</b>
            <span>Multi Platform</span>
          </div>
        </div>

        <div className="login-hero">
          <h2>Satu video, tersebar ke semua platform.</h2>
          <p>Unggah sekali, Assuffah Studio menyebarkannya ke Facebook, Instagram,
             YouTube, TikTok, hingga Shopee — lengkap dengan pantauan status tiap platform.</p>
          <div className="login-pforms" style={{ marginTop: 26 }}>
            {['facebook', 'instagram', 'youtube', 'tiktok', 'shopee'].map(id => (
              <span className="pf" key={id}><PlatGlyph id={id} size={26} radius={7} /></span>
            ))}
          </div>
        </div>

        <div className="login-stats">
          <div className="s"><b>5</b><span>kanal sekaligus</span></div>
          <div className="s"><b>1×</b><span>unggah saja</span></div>
          <div className="s"><b>9:16</b><span>format portrait</span></div>
        </div>
      </aside>

      <main className="login-main">
        <form className="login-card" onSubmit={submit}>
          <div className="lh">
            <h1>Masuk ke Studio</h1>
            <p>Akun multi platform Assuffah.</p>
          </div>

          <div className="field">
            <label><span className="lt">Email</span></label>
            <div className="field-ic">
              <I.mail />
              <input className="input" type="email" value={email}
                     onChange={e => setEmail(e.target.value)} placeholder="nama@assuffah.id" required />
            </div>
          </div>

          <div className="field">
            <label><span className="lt">Kata sandi</span>
              <a className="opt" style={{ marginLeft: 'auto', textDecoration: 'none', color: 'var(--primary-ink)', fontWeight: 600 }} href="#" onClick={e => e.preventDefault()}>Lupa sandi?</a>
            </label>
            <div className="field-ic">
              <I.lock />
              <input className="input" type={show ? 'text' : 'password'} value={pw}
                     onChange={e => setPw(e.target.value)} placeholder="••••••••" required />
              <button type="button" className="eye" onClick={() => setShow(s => !s)} aria-label="Tampilkan sandi">
                {show ? <I.eyeoff /> : <I.eye />}
              </button>
            </div>
          </div>

          {err && (
            <div style={{ color: 'var(--danger)', background: 'var(--danger-soft)', borderRadius: 10,
                          padding: '9px 12px', fontSize: 13, fontWeight: 600, marginBottom: 4 }}>
              {err}
            </div>
          )}

          <button className="btn-primary" type="submit" disabled={busy}>
            {busy ? 'Memuat…' : <>Masuk <I.send width="18" height="18" /></>}
          </button>

          <div className="login-foot">
            Butuh akses? Hubungi <a href="#" onClick={e => e.preventDefault()}>admin media</a> Assuffah.
          </div>
        </form>
      </main>
    </div>
  );
}

function Mark() {
  return (
    <svg viewBox="0 0 24 24" width="25" height="25" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2.5" y="6.5" width="13.5" height="11" rx="3" />
      <path d="M16 10.2 21 7.5v9L16 13.8z" />
    </svg>
  );
}

Object.assign(window, { Login, Mark });