/* ===== pages-auth.jsx — /login ===== */
(function () {
  const { Icon, Button, Input, Field, useStore, navigate, cls } = window;

  function LoginPage({ mobile }) {
    const { toast, login } = useStore();
    const [email, setEmail] = React.useState('');
    const [pwd, setPwd] = React.useState('');
    const [showPwd, setShowPwd] = React.useState(false);
    const [loading, setLoading] = React.useState(false);
    const [err, setErr] = React.useState('');
    const submit = async (e) => {
      e?.preventDefault?.();
      if (!email || !pwd) { setErr('请填写邮箱和密码'); return; }
      setErr('');
      setLoading(true);
      try {
        const r = await login(email.trim().toLowerCase(), pwd);
        if (r && r.user) {
          toast(`登录成功 · 欢迎 ${r.user.name}`);
          navigate('/');
        } else {
          setErr('登录失败');
        }
      } catch (e) {
        setErr(e?.message === 'invalid credentials' ? '邮箱或密码错误' : (e?.message || '登录失败'));
      } finally {
        setLoading(false);
      }
    };

    return (
      <div className={cls('w-full h-full flex',
        mobile ? 'flex-col bg-white' : 'bg-ink-50')}>
        {/* Left visual panel — desktop only */}
        {!mobile && (
          <div className="hidden lg:flex w-[44%] relative bg-ink-950 overflow-hidden">
            <div className="absolute inset-0 dot-bg opacity-[0.04]"></div>
            <div className="absolute -top-32 -right-32 w-96 h-96 rounded-full bg-gradient-to-br from-emerald-400/20 to-transparent blur-3xl"></div>
            <div className="absolute -bottom-40 -left-20 w-[28rem] h-[28rem] rounded-full bg-gradient-to-tr from-sky-400/20 to-transparent blur-3xl"></div>
            <div className="relative z-10 p-12 flex flex-col justify-between text-white w-full">
              <window.Logo size={36} label={false} />
              <div className="max-w-md">
                <h2 className="text-3xl font-semibold tracking-tight leading-tight">
                  Firsteck Bio<br />
                  <span className="text-ink-400 font-normal">实验室库存管理</span>
                </h2>
              </div>
              <div></div>
            </div>
          </div>
        )}

        {/* Right form */}
        <div className={cls('flex-1 flex items-center justify-center', mobile ? 'p-6' : 'p-12')}>
          <div className="w-full max-w-sm">
            {mobile && (
              <div className="mb-8 text-center">
                <window.Logo size={48} label={false} />
                <div className="mt-4 text-sm font-semibold tracking-tight">Firsteck Bio · Lab Inventory</div>
              </div>
            )}
            <h1 className="text-2xl font-semibold tracking-tight">登录</h1>
            <p className="text-sm text-ink-500 mt-1.5">用工作邮箱登录以继续</p>

            <form onSubmit={submit} className="mt-8 flex flex-col gap-4">
              <Field label="邮箱" required>
                <Input type="email" autoFocus value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="name@firsteckbio.com" leadingIcon={Icon.user}
                  inputMode="email" autoComplete="email" />
              </Field>
              <Field label="密码" required hint="忘记密码？请联系管理员">
                <div className="relative">
                  <Input type={showPwd ? 'text' : 'password'} value={pwd}
                    onChange={(e) => setPwd(e.target.value)} placeholder="••••••••"
                    autoComplete="current-password" />
                  <button type="button" onClick={() => setShowPwd((x) => !x)}
                    className="absolute right-2 top-1/2 -translate-y-1/2 h-7 w-7 inline-flex items-center justify-center text-ink-400 hover:text-ink-700">
                    <Icon.eye size={15} />
                  </button>
                </div>
              </Field>
              {err && <div className="text-xs text-red-700 bg-red-50 ring-1 ring-red-200 rounded-md px-3 py-2">{err}</div>}
              <label className="flex items-center gap-2 text-sm text-ink-700">
                <input type="checkbox" defaultChecked className="rounded ring-1 ring-ink-300" />
                30 天内保持登录
              </label>
              <Button type="submit" size="lg" disabled={loading}>
                {loading ? (
                  <span className="inline-flex items-center gap-2">
                    <span className="h-3 w-3 rounded-full border-2 border-white/30 border-t-white animate-spin"></span>
                    登录中…
                  </span>
                ) : '登录'}
              </Button>
            </form>

          </div>
        </div>
      </div>
    );
  }

  Object.assign(window, { LoginPage });
})();