// Login screen — first landed page
const { useState: liState, useEffect: liEffect, useRef: liRef } = React;

function Login({ t, lang, setLang, onAuth, onCancelToast }) {
  const [user, setUser] = liState('');
  const [pass, setPass] = liState('');
  const [showPass, setShowPass] = liState(false);
  const [remember, setRemember] = liState(true);
  const [err, setErr] = liState('');
  const [loading, setLoading] = liState(false);
  const [shake, setShake] = liState(false);
  const inputRef = liRef();

  liEffect(() => { inputRef.current && inputRef.current.focus(); }, []);

  async function submit(e) {
    e && e.preventDefault();
    const u = user.trim().toLowerCase();
    if (!u || !pass) {
      setErr(t.login_invalid);
      setShake(true);
      setTimeout(() => setShake(false), 500);
      return;
    }
    setErr('');
    setLoading(true);
    try {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username: u, password: pass }),
      });
      const data = await res.json();
      if (!data.ok) {
        setErr(t.login_invalid);
        setShake(true);
        setTimeout(() => setShake(false), 500);
        setLoading(false);
        return;
      }
      const { user: userData } = data;
      onAuth({
        username: userData.username,
        role:     userData.role,
        displayName: { th: userData.displayTh, en: userData.displayEn },
        initials: userData.initials,
        remember,
      });
    } catch (e) {
      setErr(t.login_invalid);
      setShake(true);
      setTimeout(() => setShake(false), 500);
      setLoading(false);
    }
  }

  // Visual bits
  const bgPattern = (
    <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.5 }}>
      <defs>
        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="var(--border)" strokeWidth="1"/>
        </pattern>
        <radialGradient id="fade" cx="50%" cy="40%" r="80%">
          <stop offset="0%" stopColor="var(--bg)" stopOpacity="0"/>
          <stop offset="100%" stopColor="var(--bg)" stopOpacity="1"/>
        </radialGradient>
      </defs>
      <rect width="100%" height="100%" fill="url(#grid)" />
      <rect width="100%" height="100%" fill="url(#fade)" />
    </svg>
  );

  return (
    <div className="login-shell">
      {bgPattern}

      {/* Lang switch top-right */}
      <div className="login-topright">
        <div className="segmented" style={{ padding: 2 }}>
          <button className={lang === 'th' ? 'active' : ''} onClick={() => setLang('th')}>
            <Icon.Globe className="icon icon-sm" style={{ marginRight: 4 }} /> ไทย
          </button>
          <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
        </div>
      </div>

      <div className="login-grid">
        {/* Left — brand panel */}
        <aside className="login-brand">
          <div className="login-brand-mark">{t.brand_short}</div>
          <div>
            <div className="login-brand-name">{t.brand_name}</div>
            <div className="login-brand-sub">{t.brand_sub}</div>
          </div>

          <div style={{ flex: 1 }}></div>

          <div className="login-quote">
            <div className="login-quote-mark">"</div>
            <div className="login-quote-body">
              {lang === 'th'
                ? 'จัดการสต๊อกอย่างเป็นระบบ ดูข้อมูลตามเวลาจริง ตัดสินใจได้แม่นยำขึ้น'
                : 'A clear view of every SKU, in real time — so you can decide with confidence.'}
            </div>
          </div>

          <div className="login-stats">
            <div>
              <div className="login-stat-n">363</div>
              <div className="login-stat-l">{lang === 'th' ? 'รายการสินค้า' : 'Active SKUs'}</div>
            </div>
            <div className="login-stat-sep"></div>
            <div>
              <div className="login-stat-n">4.2M</div>
              <div className="login-stat-l">{lang === 'th' ? 'มูลค่าสต๊อก (บาท)' : 'Stock value'}</div>
            </div>
            <div className="login-stat-sep"></div>
            <div>
              <div className="login-stat-n">12</div>
              <div className="login-stat-l">{lang === 'th' ? 'ผู้ใช้งาน' : 'Users'}</div>
            </div>
          </div>
        </aside>

        {/* Right — form */}
        <main className="login-main">
          <form onSubmit={submit} className={"login-card " + (shake ? 'shake' : '')}>
            <div className="login-card-head">
              <h1>{t.login_title}</h1>
              <div className="t-muted" style={{ marginTop: 6, fontSize: 13.5 }}>{t.login_sub}</div>
            </div>

            <label className="login-field">
              <span>{t.login_user}</span>
              <div className={"login-input-wrap " + (err ? 'err' : '')}>
                <Icon.User className="icon icon-sm" style={{ color: 'var(--ink-3)' }} />
                <input
                  ref={inputRef}
                  type="text"
                  value={user}
                  onChange={e => { setUser(e.target.value); setErr(''); }}
                  placeholder={t.login_user_ph}
                  autoComplete="username"
                  spellCheck="false"
                />
              </div>
            </label>

            <label className="login-field">
              <span>{t.login_pass}</span>
              <div className={"login-input-wrap " + (err ? 'err' : '')}>
                <Icon.Lock className="icon icon-sm" style={{ color: 'var(--ink-3)' }} />
                <input
                  type={showPass ? 'text' : 'password'}
                  value={pass}
                  onChange={e => { setPass(e.target.value); setErr(''); }}
                  placeholder={t.login_pass_ph}
                  autoComplete="current-password"
                />
                <button type="button" className="btn-ghost" style={{ padding: 4, color: 'var(--ink-3)' }} onClick={() => setShowPass(s => !s)} tabIndex={-1}>
                  {showPass ? <Icon.EyeOff className="icon icon-sm" /> : <Icon.Eye className="icon icon-sm" />}
                </button>
              </div>
            </label>

            {err && (
              <div className="login-err">
                <Icon.AlertCircle className="icon icon-sm" />
                <span>{err}</span>
              </div>
            )}

            <div className="login-row">
              <label className="login-check">
                <input type="checkbox" checked={remember} onChange={e => setRemember(e.target.checked)} />
                <span>{t.login_remember}</span>
              </label>
              <a href="#" onClick={e => e.preventDefault()} className="login-forgot">{t.login_forgot}</a>
            </div>

            <button type="submit" className="btn btn-primary login-submit" disabled={loading}>
              {loading
                ? <span className="login-spinner"></span>
                : <><Icon.ArrowRight className="icon icon-sm" /> {t.login_submit}</>}
            </button>

            <div className="login-foot">
              <div className="row" style={{ gap: 6, color: 'var(--ok)' }}>
                <Icon.Lock className="icon icon-sm" /> <span style={{ fontSize: 12 }}>{t.login_secure}</span>
              </div>
              <div className="t-muted" style={{ fontSize: 11.5 }}>{t.login_footer}</div>
            </div>
          </form>
        </main>
      </div>
    </div>
  );
}

window.Login = Login;