// auth.jsx — Login / Register

function Auth({ ctx, mode }) {
  const [tab, setTab] = React.useState(mode === 'register' ? 'register' : 'login');

  return (
    <div style={{ maxWidth: 1000, margin: '20px auto' }}>
      <div className="auth">
        <div className="auth-visual">
          <div>
            <div className="jp">ようこそ</div>
            <h2>Selamat Datang di <br/>Wie Dam</h2>
          </div>
          <ul>
            <li><Icon name="check" size={12} /> 10.000+ produk asli Jepang</li>
            <li><Icon name="check" size={12} /> Gratis ongkir min. ¥5.000</li>
            <li><Icon name="check" size={12} /> EMS ke seluruh Indonesia</li>
            <li><Icon name="check" size={12} /> Poin reward 2× untuk member baru</li>
            <li><Icon name="check" size={12} /> Voucher ¥1.000 saat daftar</li>
          </ul>
          <div style={{ position: 'relative', zIndex: 1 }}>
            <div style={{
              background: 'var(--ink)', color: 'var(--paper)', display: 'inline-block',
              padding: '8px 14px', borderRadius: 8, fontSize: 12, fontWeight: 700
            }}>
              <span style={{ color: 'var(--cyan)' }}>★</span> 4.9 rating · 84.000+ pelanggan puas
            </div>
          </div>
        </div>

        <div className="auth-form">
          <div>
            <span style={{ fontFamily: 'var(--font-jp)', fontWeight: 900, color: 'var(--pink)',
                           fontSize: 11, letterSpacing: '.3em' }}>
              {tab === 'login' ? 'ログイン' : '新規登録'}
            </span>
            <h3>{tab === 'login' ? 'Masuk ke Akun' : 'Daftar Akun Baru'}</h3>
          </div>

          <div className="auth-tabs">
            <button className={tab === 'login' ? 'active' : ''} onClick={() => setTab('login')}>Masuk</button>
            <button className={tab === 'register' ? 'active' : ''} onClick={() => setTab('register')}>Daftar</button>
          </div>

          <div className="auth-social">
            <button>
              <Icon name="google" size={18} /> Google
            </button>
            <button className="line">
              <b style={{ fontSize: 16 }}>LINE</b>
            </button>
          </div>

          <div className="auth-divider">atau dengan email</div>

          {tab === 'register' && (
            <div className="field">
              <label>Nama Lengkap</label>
              <input placeholder="Nama sesuai KTP" />
            </div>
          )}
          <div className="field">
            <label>Email</label>
            <input type="email" placeholder="email@kamu.com" />
          </div>
          <div className="field">
            <label>Password</label>
            <input type="password" placeholder="Minimal 8 karakter" />
          </div>
          {tab === 'register' && (
            <div className="field">
              <label>No. HP</label>
              <input placeholder="+62 …" />
            </div>
          )}

          {tab === 'login' ? (
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13 }}>
              <label className="row" style={{ gap: 6 }}>
                <input type="checkbox" /> Ingat saya
              </label>
              <a className="bold" style={{ color: 'var(--pink)' }}>Lupa password?</a>
            </div>
          ) : (
            <label className="row" style={{ gap: 8, fontSize: 12, alignItems: 'flex-start' }}>
              <input type="checkbox" style={{ marginTop: 3 }} />
              <span className="muted">
                Saya setuju dengan <a className="bold" style={{ color: 'var(--ink)' }}>Syarat & Ketentuan</a> serta{' '}
                <a className="bold" style={{ color: 'var(--ink)' }}>Kebijakan Privasi</a> Wie Dam.
              </span>
            </label>
          )}

          <button className="btn primary block lg"
                  onClick={() => { ctx.pushToast({ msg: tab === 'login' ? 'Berhasil masuk!' : 'Akun berhasil dibuat!', type: 'success' }); ctx.go('akun', 'profil'); }}>
            {tab === 'login' ? 'Masuk' : 'Daftar Sekarang'}
          </button>

          <div className="muted" style={{ fontSize: 12, textAlign: 'center' }}>
            {tab === 'login' ? (
              <>Belum punya akun? <a className="bold" style={{ color: 'var(--pink)' }} onClick={() => setTab('register')}>Daftar di sini →</a></>
            ) : (
              <>Sudah punya akun? <a className="bold" style={{ color: 'var(--pink)' }} onClick={() => setTab('login')}>Masuk →</a></>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Auth });