window.FB = window.FB || {};
FB.Login = function Login({ lang, setLang, onLogin }) {
  const { useState } = React;
  const t = FB.makeT(lang);
  const [name, setName] = useState(FB.USERS[0].name);
  const [pin, setPin] = useState("");
  const [state, setState] = useState("idle");
  const [msg, setMsg] = useState("");
  const LANG_LABEL = { vi: "VN", zh: "中", en: "EN" };

  async function go() {
    if (pin.length !== 6) { setState("error"); setMsg(t("wrongPin")); return; }
    setState("sending"); setMsg("");
    const r = await FB.api.signIn(name, pin);
    if (r.error) { setState("error"); setMsg(t("wrongPin")); return; }
    onLogin(r.user);
  }

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-stone-100 px-6 pb-safe">
      <div className="text-4xl mb-2">🍔</div>
      <h1 className="text-lg font-semibold text-stone-800 mb-1">Fragile Burger</h1>
      <p className="text-xs text-stone-400 mb-6">{t("central")}</p>
      <div className="w-full max-w-xs bg-white rounded-2xl border border-stone-200 p-5">
        <label className="block text-xs text-stone-500 mb-1">{t("who")}</label>
        <select value={name} onChange={(e) => setName(e.target.value)}
          className="w-full mb-4 px-3 h-12 rounded-xl border border-stone-300 bg-white text-stone-800">
          {FB.USERS.map((u) => <option key={u.email} value={u.name}>{u.name}</option>)}
        </select>
        <label className="block text-xs text-stone-500 mb-1">{t("pin")}</label>
        <input type="password" inputMode="numeric" maxLength={6} value={pin}
          onChange={(e) => setPin(e.target.value.replace(/\D/g, "").slice(0, 6))}
          onKeyDown={(e) => e.key === "Enter" && go()}
          placeholder="••••••"
          className="w-full mb-4 px-3 h-12 rounded-xl border border-stone-300 text-center tracking-[0.5em] text-lg" />
        {state === "error" && <p className="text-xs text-red-600 mb-3">{msg}</p>}
        <button onClick={go} disabled={state === "sending"}
          className="w-full h-12 rounded-xl bg-red-700 text-white font-medium active:scale-95 disabled:opacity-50">
          {state === "sending" ? "…" : t("signIn")}
        </button>
      </div>
      <div className="flex gap-2 mt-6">
        {["vi", "zh", "en"].map((l) => (
          <button key={l} onClick={() => setLang(l)}
            className={"text-xs px-3 py-1 rounded-full border " + (lang === l ? "bg-stone-800 text-white border-stone-800" : "text-stone-500 border-stone-300")}>
            {LANG_LABEL[l]}
          </button>
        ))}
      </div>
    </div>
  );
};