// Halaman Login + alur Lupa Password (prototype — terima kredensial apa pun).

function Login({ onLogin }) {
  const [mode, setMode] = React.useState("login"); // login | forgot | sent
  const [email, setEmail] = React.useState("");
  const [pass, setPass] = React.useState("");
  const [show, setShow] = React.useState(false);
  const [err, setErr] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [fEmail, setFEmail] = React.useState("");
  const [stats, setStats] = React.useState(null);

  React.useEffect(() => {
    fetch('/api/stats/public')
      .then((r) => r.ok ? r.json() : null)
      .then((d) => { if (d) setStats(d); })
      .catch(() => {});
  }, []);

  const submit = async (e) => {
    e.preventDefault();
    if (!email.trim() || !pass.trim()) { setErr("Email dan password wajib diisi."); return; }
    setErr(""); setLoading(true);
    try {
      const user = await QC_API.login(email.trim(), pass);
      onLogin(user);
    } catch (ex) {
      setErr(ex.message || "Login gagal, periksa koneksi.");
    } finally {
      setLoading(false);
    }
  };
  const submitForgot = (e) => {
    e.preventDefault();
    if (!fEmail.trim()) return;
    setLoading(true);
    setTimeout(() => { setLoading(false); setMode("sent"); }, 700);
  };

  return (
    <div className="qc-login">
      {/* Panel kiri — brand */}
      <aside className="qc-login-brand">
        <div className="qc-login-grid" />
        <div className="qc-login-brand-top">
          <div className="qc-brand-mark" style={{ width: 44, height: 44, borderRadius: 11 }}>
            <Icon.pkgCheck size={24} stroke="#fff" />
          </div>
          <div>
            <div className="qc-login-brand-name">QC Station</div>
            <div className="qc-login-brand-sub">Quality Control System</div>
          </div>
        </div>
        <div className="qc-login-hero">
          <div className="qc-login-hero-eyebrow">Stasiun verifikasi pesanan</div>
          <h1 className="qc-login-hero-h">Scan. Cocokkan.<br />Kirim dengan yakin.</h1>
          <p className="qc-login-hero-p">Setiap pesanan diperiksa per barcode sebelum dikirim — nol salah kirim, data tercatat otomatis.</p>
        </div>
        <div className="qc-login-foot">
          <div className="qc-login-stat">
            <b>{stats ? (stats.accuracy !== null ? stats.accuracy + "%" : "—") : "…"}</b>
            <span>akurasi QC</span>
          </div>
          <div className="qc-login-stat">
            <b>{stats ? (stats.ordersThisMonth >= 1000 ? (stats.ordersThisMonth / 1000).toFixed(1) + "k" : stats.ordersThisMonth) : "…"}</b>
            <span>pesanan / bln</span>
          </div>
          <div className="qc-login-stat">
            <b>{stats ? stats.activeStations : "…"}</b>
            <span>stasiun aktif</span>
          </div>
        </div>
      </aside>

      {/* Panel kanan — form */}
      <main className="qc-login-form-wrap">
        <div className="qc-login-card">
          {mode === "login" && (
            <form onSubmit={submit} className="qc-login-card-in">
              <div className="qc-login-h">Masuk ke akun</div>
              <div className="qc-login-sub">Gunakan akun operator untuk memulai sesi QC.</div>
              <Field label="Email">
                <div className="qc-input"><Icon.user size={18} stroke="var(--ink-3)" />
                  <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="nama@perusahaan.id" autoComplete="username" />
                </div>
              </Field>
              <Field label="Password" extra={<button type="button" className="qc-link" onClick={() => { setMode("forgot"); setFEmail(email); }}>Lupa password?</button>}>
                <div className="qc-input">
                  <Icon.bolt size={18} stroke="var(--ink-3)" />
                  <input type={show ? "text" : "password"} value={pass} onChange={(e) => setPass(e.target.value)} placeholder="••••••••" autoComplete="current-password" />
                  <button type="button" className="qc-input-eye" onClick={() => setShow((s) => !s)}>{show ? "Sembunyikan" : "Lihat"}</button>
                </div>
              </Field>
              {err && <div className="qc-login-err"><Icon.alert size={15} stroke="var(--err)" /> {err}</div>}
              <label className="qc-check"><input type="checkbox" defaultChecked /> <span>Ingat perangkat ini</span></label>
              <button type="submit" className="qc-btn qc-btn-pri qc-btn-lg" style={{ width: "100%", marginTop: 4 }} disabled={loading}>
                {loading ? "Memproses…" : <React.Fragment>Masuk <Icon.chevR size={18} /></React.Fragment>}
              </button>
              <div className="qc-login-hint">Gunakan akun yang terdaftar di sistem Task Management.</div>
            </form>
          )}

          {mode === "forgot" && (
            <form onSubmit={submitForgot} className="qc-login-card-in">
              <button type="button" className="qc-link qc-link-back" onClick={() => setMode("login")}><Icon.back size={15} /> Kembali</button>
              <div className="qc-login-h">Lupa password</div>
              <div className="qc-login-sub">Masukkan email akun Anda. Kami kirim tautan untuk mengatur ulang password.</div>
              <Field label="Email">
                <div className="qc-input"><Icon.user size={18} stroke="var(--ink-3)" />
                  <input type="email" value={fEmail} onChange={(e) => setFEmail(e.target.value)} placeholder="nama@perusahaan.id" autoFocus />
                </div>
              </Field>
              <button type="submit" className="qc-btn qc-btn-pri qc-btn-lg" style={{ width: "100%" }} disabled={loading}>
                {loading ? "Mengirim…" : "Kirim tautan reset"}
              </button>
            </form>
          )}

          {mode === "sent" && (
            <div className="qc-login-card-in qc-login-sent">
              <div className="qc-complete-check" style={{ width: 64, height: 64, marginBottom: 4 }}><Icon.check size={36} stroke="#fff" sw={2.4} /></div>
              <div className="qc-login-h">Tautan terkirim</div>
              <div className="qc-login-sub">Kami mengirim tautan reset password ke<br /><b style={{ color: "var(--ink)" }}>{fEmail}</b>. Cek inbox Anda.</div>
              <button type="button" className="qc-btn qc-btn-ghost qc-btn-lg" style={{ width: "100%" }} onClick={() => setMode("login")}>Kembali ke login</button>
            </div>
          )}
        </div>
        <div className="qc-login-copy">© 2026 QC Station · Sistem Verifikasi Pesanan</div>
      </main>
    </div>
  );
}

function Field({ label, extra, children }) {
  return (
    <label className="qc-field">
      <div className="qc-field-top"><span>{label}</span>{extra}</div>
      {children}
    </label>
  );
}

Object.assign(window, { Login });