// Login.jsx — auth against static-data agents (stdid + password where password = id.toLowerCase())
function Login({ go, set, data }) {
  const [stdid, setStdid] = React.useState("");
  const [pw, setPw] = React.useState("");
  const [err, setErr] = React.useState("");
  const valid = stdid.trim().length > 0 && pw.trim().length > 0;

  const submit = () => {
    if (!valid) return;
    const id = stdid.trim();
    const pass = pw.trim().toLowerCase();
    const agent = data.agents.find((a) => a.stdid === id && String(a.id).toLowerCase() === pass);
    if (!agent) {
      setErr("รหัสนักศึกษาหรือรหัสผ่านไม่ถูกต้อง");
      return;
    }
    const groupName = data.assignments[agent.id];
    // store the full agent object (id, agent, stdid, clues, ig) + assigned group
    set({ me: agent, groupName, dept: data.facultyOf(agent.id) });
    go("select");
  };

  const onStdid = (v) => { setStdid(v); if (err) setErr(""); };
  const onPw = (v) => { setPw(v); if (err) setErr(""); };

  return (
    <div className="min-h-[100dvh] w-full px-6 pt-14 pb-9 flex flex-col justify-between font-serif text-safari-mahogany">
      <div>
        <div className="h-2" />
        <Wordmark className="text-4xl" />
        <p className="text-center mt-3.5 text-[15px] text-safari-brown italic">
          ออกล่าหาตุ๊ด !
        </p>

        {/* hero badge */}
        <div className="mx-auto my-6 w-28 h-28 rounded-full flex items-center justify-center text-safari-mahogany
                        bg-[radial-gradient(circle_at_38%_32%,#F5D98A,#C49A5A)]
                        shadow-[0_10px_0_#8B5E2E,0_16px_28px_rgba(59,42,26,0.25)]">
          <Icon name="paw" className="w-14 h-14" stroke={1.8} />
        </div>

        <form onSubmit={(e) => { e.preventDefault(); submit(); }}>
          <Field icon="user" label="รหัสนักศึกษา" value={stdid} onChange={onStdid} placeholder="เช่น 6909xxxxxx" inputMode="numeric" pattern="[0-9]*" />
          <div className="h-3.5" />
          <Field icon="lock" label="รหัสผ่าน" value={pw} onChange={onPw} placeholder="••••••••" type="password" />
          <button type="submit" className="hidden" aria-hidden="true" />
        </form>
        <p className="text-center mt-3.5 text-[12.5px] text-safari-brown">
          รหัสผ่านคือรหัสเอเจนต์ของคุณ (ตัวพิมพ์เล็ก)
        </p>

        {err && (
          <div className="mt-3.5 flex items-center gap-2 rounded-2xl px-3.5 py-2.5 text-[13.5px] font-semibold
                          bg-safari-red/10 text-safari-red">
            <Icon name="lock" className="w-4 h-4 shrink-0" /> {err}
          </div>
        )}
      </div>

      <div>
        <SafariButton disabled={!valid} onClick={submit}>
          ออกตามหาพี่รหัส ! <Icon name="arrow" className="w-5 h-5" />
        </SafariButton>
        <PageFooter />
      </div>
    </div>
  );
}

window.Login = Login;