/* Login screen — clean, no mock user hints */
const { useState: useStateLogin } = React;

function LoginView() {
  const { login, toast } = useApp();
  const [email, setEmail]       = useStateLogin("");
  const [password, setPassword] = useStateLogin("");
  const [show, setShow]         = useStateLogin(false);
  const [loading, setLoading]   = useStateLogin(false);
  const [err, setErr]           = useStateLogin("");

  function submit(e) {
    e && e.preventDefault();
    setErr(""); setLoading(true);
    setTimeout(() => {
      const found = USERS.find(u => u.email === email && u.password === password);
      if (found) {
        login(found);
      } else {
        setErr("Email atau password tidak cocok.");
        setLoading(false);
      }
    }, 700);
  }

  return (
    <div className="min-h-screen w-full flex bg-[#FAF6EF]">
      {/* Left brand panel */}
      <div className="hidden lg:flex flex-col justify-between flex-1 bg-[#FF2D55] text-white p-12 relative overflow-hidden">
        <div className="absolute -right-12 top-1/3 font-jp font-black text-[260px] leading-[0.8] text-white/10 select-none [writing-mode:vertical-rl]">ヤッパリ</div>
        <div className="absolute -left-20 -bottom-20 w-[420px] h-[420px] rounded-full bg-[#E61243]/60 blur-3xl"></div>
        <div className="relative z-10 flex items-center gap-3">
          <img src="../assets/yappari-logo.png" className="w-12 h-12 rounded-full" alt="" />
          <div className="leading-tight">
            <div className="font-jp text-xs font-bold text-pink-100">やっぱり！</div>
            <div className="font-display text-2xl uppercase">Yappari!</div>
          </div>
        </div>
        <div className="relative z-10">
          <div className="text-xs font-bold uppercase tracking-[0.18em] text-pink-100 mb-3">Client Dashboard</div>
          <h1 className="font-display text-6xl xl:text-7xl uppercase leading-[0.92] text-white">
            Kelola<br />mesin Anda.<br /><span className="text-yellow-300">Tanpa ribet.</span>
          </h1>
          <p className="text-white/85 mt-6 max-w-md leading-relaxed">
            Pantau status mesin, lihat tagihan, dan perpanjang kontrak langsung dari satu dashboard. Pembayaran aman lewat Xendit.
          </p>
        </div>
        <div className="relative z-10 flex items-center gap-6 text-xs text-white/70">
          <span className="font-bold tracking-widest uppercase">© 2026 Yappari!</span>
          <span>·</span>
          <span>PT. INDIE KREASI GROUP</span>
        </div>
      </div>

      {/* Right form */}
      <div className="flex-1 flex items-center justify-center p-6">
        <div className="w-full max-w-md">
          <div className="lg:hidden flex items-center gap-3 mb-8">
            <img src="../assets/yappari-logo.png" className="w-11 h-11 rounded-full" alt="" />
            <div className="leading-tight">
              <div className="font-jp text-xs font-bold text-[#FF2D55]">やっぱり！</div>
              <div className="font-display text-xl uppercase text-[#1A1A1A]">Yappari!</div>
            </div>
          </div>

          <div className="text-xs font-bold uppercase tracking-[0.18em] text-[#FF2D55] mb-2">Selamat datang</div>
          <h2 className="font-display text-4xl uppercase leading-none text-[#1A1A1A]">Masuk ke<br />akun Anda.</h2>
          <p className="text-stone-500 mt-3 text-sm">
            Belum punya akun?{" "}
            <a href="../index.html" className="text-[#FF2D55] font-semibold hover:underline">Hubungi tim Yappari</a> untuk onboarding.
          </p>

          <form onSubmit={submit} className="mt-8 space-y-4">
            <div>
              <label className="text-xs font-bold uppercase tracking-widest text-stone-500">Email</label>
              <input
                type="email" value={email} onChange={e => setEmail(e.target.value)}
                className="mt-1.5 w-full px-4 py-3 rounded-xl border border-stone-300 bg-white text-[#1A1A1A] focus:border-[#FF2D55] focus:ring-2 focus:ring-pink-100 outline-none transition"
                placeholder="you@email.com"
                required
              />
            </div>
            <div>
              <div className="flex justify-between items-baseline">
                <label className="text-xs font-bold uppercase tracking-widest text-stone-500">Password</label>
                <button
                  type="button"
                  onClick={() => toast("Hubungi admin Yappari untuk reset password.", "info")}
                  className="text-xs font-semibold text-[#FF2D55] hover:underline"
                >
                  Lupa password?
                </button>
              </div>
              <div className="mt-1.5 relative">
                <input
                  type={show ? "text" : "password"} value={password} onChange={e => setPassword(e.target.value)}
                  className="w-full px-4 py-3 pr-12 rounded-xl border border-stone-300 bg-white text-[#1A1A1A] focus:border-[#FF2D55] focus:ring-2 focus:ring-pink-100 outline-none transition"
                  placeholder="••••••••"
                  required
                />
                <button
                  type="button" onClick={() => setShow(s => !s)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-stone-400 hover:text-stone-700 text-xs font-semibold"
                >
                  {show ? "HIDE" : "SHOW"}
                </button>
              </div>
            </div>

            {err && (
              <div className="bg-rose-50 text-rose-700 px-4 py-3 rounded-xl text-sm ring-1 ring-rose-200">{err}</div>
            )}

            <Button type="submit" size="lg" className="w-full" disabled={loading}>
              {loading ? "Memproses..." : "Masuk"}
              {!loading && <Icon name="arrowR" size={18} />}
            </Button>
          </form>
        </div>
      </div>
    </div>
  );
}

window.LoginView = LoginView;