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

  function LoginPage({ mobile }) {
    const { toast } = useStore();
    const [email, setEmail] = React.useState('marco@firsteck.bio');
    const [pwd, setPwd] = React.useState('••••••••••');
    const [showPwd, setShowPwd] = React.useState(false);
    const [loading, setLoading] = React.useState(false);
    const [err, setErr] = React.useState('');
    const submit = (e) => {
      e?.preventDefault?.();
      if (!email || !pwd) { setErr('请填写邮箱和密码'); return; }
      setErr('');
      setLoading(true);
      setTimeout(() => { setLoading(false); navigate('#/'); toast('登录成功 · 欢迎回来 Marco'); }, 800);
    };

    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">
                <div className="inline-flex items-center gap-1.5 text-xs px-2 py-1 rounded-md bg-white/10 ring-1 ring-white/15 mb-6 font-mono">
                  <span className="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
                  Phase 1 · Experimental Warehouse
                </div>
                <h2 className="text-3xl font-semibold tracking-tight leading-tight">
                  实验仓库存系统<br />
                  <span className="text-ink-400 font-normal">Reagent &amp; Device tracking</span>
                </h2>
                <div className="mt-12 grid grid-cols-2 gap-x-8 gap-y-5 max-w-sm">
                  {[
                    { k: '在库批次',   v: '11',  t: '过去 30 天' },
                    { k: '设备 SN',    v: '12',  t: '其中 2 项缺失' },
                    { k: '本周报警',   v: '9',   t: '红 1 · 橙 3' },
                    { k: '在途取货',   v: '4',   t: '2 项已超期' },
                  ].map((s) => (
                    <div key={s.k}>
                      <div className="text-[11px] text-ink-400 uppercase tracking-wider">{s.k}</div>
                      <div className="text-2xl font-semibold mt-0.5 font-mono">{s.v}</div>
                      <div className="text-[11px] text-ink-500 mt-0.5">{s.t}</div>
                    </div>
                  ))}
                </div>
              </div>
              <div className="text-[11px] text-ink-500 font-mono">
                v0.1.0 · CF Workers · D1 · R2 · Milano IT
              </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">FirstBio · 实验仓</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@firsteck.bio" leadingIcon={Icon.user} />
              </Field>
              <Field label="密码" required hint="忘记密码？请联系管理员">
                <div className="relative">
                  <Input type={showPwd ? 'text' : 'password'} value={pwd}
                    onChange={(e) => setPwd(e.target.value)} placeholder="••••••••" />
                  <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 className="mt-8 pt-5 border-t border-ink-100 text-center">
              <div className="text-[11px] text-ink-400">需要账号？请管理员在 /settings/users 创建</div>
              <div className="text-[10px] text-ink-300 mt-2 font-mono">i18n: 中文 · IT · EN（默认中文）</div>
            </div>
          </div>
        </div>
      </div>
    );
  }

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