/* ============================================================
   login.jsx — Email sign-in via Backend.whoami() + lock screen.
   For GAS mode: validates email against Users tab.
   For local mode: any input passes (demo).
   ============================================================ */
const ROLES = [
  { key: 'mt', label: 'นักเทคนิค' },
  { key: 'chief', label: 'หัวหน้าแล็บ' },
  { key: 'admin', label: 'ผู้ดูแลระบบ' },
];

function LoginScreen({ onEnter }) {
  const isGas = window.Backend && window.Backend.mode === 'gas';
  const [emailVal, setEmailVal] = useState(window.Backend ? window.Backend.getEmail() : '');
  const [user, setUser] = useState('mt.staff');
  const [pass, setPass] = useState('labops2569');
  const [show, setShow] = useState(false);
  const [role, setRole] = useState('mt');
  const [remember, setRemember] = useState(true);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState('');

  const submitGas = async (e) => {
    e && e.preventDefault();
    const em = emailVal.trim().toLowerCase();
    if (!em || !em.includes('@')) { setErr('กรุณากรอกอีเมล Google ให้ถูกต้อง'); return; }
    setBusy(true); setErr('');
    try {
      window.Backend.setEmail(em);
      const res = await window.Backend.whoami();
      if (res.ok && res.user) {
        onEnter({ user: res.user.name || em, email: em, role: res.user.role || 'user', gasUser: res.user, remember });
      } else {
        setErr(res.message || 'อีเมลนี้ยังไม่ได้รับสิทธิ์เข้าใช้ระบบ กรุณาติดต่อผู้ดูแลระบบ');
      }
    } catch (ex) {
      setErr('ไม่สามารถเชื่อมต่อเซิร์ฟเวอร์ได้ ลองอีกครั้ง');
    }
    setBusy(false);
  };

  const submitLocal = (e) => {
    e && e.preventDefault();
    setBusy(true);
    setTimeout(() => onEnter({ user, role, remember }), 540);
  };

  return (
    <div className="auth">
      {/* showcase */}
      <div className="auth-show">
        <div className="auth-scan" />
        <div className="auth-brand">
          <div className="auth-mark"><I.beaker size={26} /></div>
          <div>
            <div style={{ fontWeight: 700, fontSize: 18, letterSpacing: '-.01em' }}>LabInstrument</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--mono)' }}>Equipment Operations · v2.5</div>
          </div>
        </div>

        <h1 className="auth-headline">ศูนย์ควบคุมเครื่องมือห้องปฏิบัติการ</h1>
        <div className="auth-tag">ติดตามความพร้อม สอบเทียบ และบำรุงรักษาเครื่องมือทุกแผนกได้จากที่เดียว แม่นยำ ทันเวลา ตรวจสอบย้อนหลังได้ตามมาตรฐาน ISO 15189</div>

        <div className="auth-stats">
          <div className="auth-stat"><div className="v">183</div><div className="l">เครื่องมือ</div></div>
          <div className="auth-stat"><div className="v">7</div><div className="l">แผนก</div></div>
          <div className="auth-stat"><div className="v" style={{ color: 'var(--accent)' }}>62%</div><div className="l">พร้อมใช้งาน</div></div>
          <div className="auth-stat"><div className="v" style={{ color: 'var(--warn)' }}>23</div><div className="l">ใกล้ครบกำหนด</div></div>
        </div>

        <div className="auth-foot">
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><span className="live-dot" style={{ width: 7, height: 7, borderRadius: 99, background: 'var(--accent)', boxShadow: '0 0 10px var(--accent)' }} /> ระบบออนไลน์</span>
          <span>โรงพยาบาลอำนาจเจริญ</span>
          <span>· อัปเดต 01 มิ.ย. 2569</span>
        </div>
      </div>

      {/* form */}
      <div className="auth-form">
        {isGas ? (
          <form className="auth-card" onSubmit={submitGas}>
            <div className="auth-title">เข้าสู่ระบบ</div>
            <div className="auth-sub">กรอกอีเมล Google ที่ได้รับสิทธิ์เข้าใช้ระบบ</div>

            <div className="auth-field">
              <label className="field-label">อีเมล Google</label>
              <div className="auth-inputwrap">
                <I.user className="ico" size={17} />
                <input type="email" value={emailVal} onChange={e => { setEmailVal(e.target.value); setErr(''); }} placeholder="example@gmail.com" autoComplete="email" autoFocus />
              </div>
            </div>

            {err && <div style={{ color: 'var(--danger)', fontSize: 13, padding: '6px 0', lineHeight: 1.5 }}>{err}</div>}

            <div className="auth-row">
              <label className="auth-check"><input type="checkbox" checked={remember} onChange={e => setRemember(e.target.checked)} /> จดจำฉัน</label>
            </div>

            <button className="auth-submit" type="submit" disabled={busy}>
              {busy ? <><I.refresh size={18} style={{ animation: 'spin 1s linear infinite' }} /> กำลังตรวจสอบ…</> : <><I.unlock size={18} /> เข้าสู่ระบบ</>}
            </button>

            <div className="auth-demo">เข้าสู่ระบบด้วยอีเมล Google ที่ผู้ดูแลระบบเพิ่มสิทธิ์ไว้แล้ว</div>
          </form>
        ) : (
          <form className="auth-card" onSubmit={submitLocal}>
            <div className="auth-title">เข้าสู่ระบบ</div>
            <div className="auth-sub">ลงชื่อเข้าใช้เพื่อจัดการเครื่องมือห้องปฏิบัติการ</div>

            <div className="auth-field">
              <label className="field-label">ชื่อผู้ใช้ / รหัสพนักงาน</label>
              <div className="auth-inputwrap">
                <I.user className="ico" size={17} />
                <input value={user} onChange={e => setUser(e.target.value)} placeholder="ชื่อผู้ใช้" autoComplete="username" />
              </div>
            </div>

            <div className="auth-field">
              <label className="field-label">รหัสผ่าน</label>
              <div className="auth-inputwrap">
                <I.lock className="ico" size={17} />
                <input type={show ? 'text' : 'password'} value={pass} onChange={e => setPass(e.target.value)} placeholder="รหัสผ่าน" autoComplete="current-password" />
                <button type="button" className="auth-eye" onClick={() => setShow(s => !s)} title={show ? 'ซ่อน' : 'แสดง'}>
                  {show ? <I.eyeoff size={17} /> : <I.eye size={17} />}
                </button>
              </div>
            </div>

            <div className="auth-field">
              <label className="field-label">บทบาท</label>
              <div className="auth-segrole">
                {ROLES.map(r => (
                  <button type="button" key={r.key} className={role === r.key ? 'on' : ''} onClick={() => setRole(r.key)}>{r.label}</button>
                ))}
              </div>
            </div>

            <div className="auth-row">
              <label className="auth-check"><input type="checkbox" checked={remember} onChange={e => setRemember(e.target.checked)} /> จดจำฉัน</label>
              <span className="auth-link">ลืมรหัสผ่าน?</span>
            </div>

            <button className="auth-submit" type="submit" disabled={busy}>
              {busy ? <><I.refresh size={18} style={{ animation: 'spin 1s linear infinite' }} /> กำลังเข้าสู่ระบบ…</> : <><I.unlock size={18} /> เข้าสู่ระบบ</>}
            </button>

            <div className="auth-or">หรือ</div>
            <div className="auth-sso">
              <button type="button" onClick={submitLocal}><I.scan size={17} /> บัตรพนักงาน</button>
              <button type="button" onClick={submitLocal}><I.finger size={17} /> ลายนิ้วมือ</button>
            </div>

            <div className="auth-demo">โหมดสาธิต — กด "เข้าสู่ระบบ" ได้เลยโดยไม่ต้องกรอกข้อมูลจริง</div>
          </form>
        )}
      </div>
    </div>
  );
}

function LockScreen({ userName, onUnlock, onLogout }) {
  const [now, setNow] = useState(new Date());
  const [pass, setPass] = useState('');
  useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  const hh = String(now.getHours()).padStart(2, '0');
  const mm = String(now.getMinutes()).padStart(2, '0');
  const dateStr = `${['อาทิตย์','จันทร์','อังคาร','พุธ','พฤหัสบดี','ศุกร์','เสาร์'][now.getDay()]} ${now.getDate()} ${THMONTH[now.getMonth()]} ${now.getFullYear() + 543}`;
  const initials = (userName || 'MT').slice(0, 2).toUpperCase();

  return (
    <div className="lock">
      <div className="lock-card enter">
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--mono)', marginBottom: 18, border: '1px solid var(--line)', borderRadius: 99, padding: '5px 12px', whiteSpace: 'nowrap' }}>
          <I.lock size={13} /> หน้าจอถูกล็อก
        </div>
        <div className="lock-clock">{hh}<span style={{ opacity: .4 }}>:</span>{mm}</div>
        <div className="lock-date">{dateStr}</div>

        <div className="lock-user">
          <div className="lock-avatar">{initials}</div>
          <div style={{ textAlign: 'left' }}>
            <div style={{ fontWeight: 600, fontSize: 15 }}>{userName || 'นักเทคนิคการแพทย์'}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>ผู้ดูแลเครื่องมือ</div>
          </div>
        </div>

        <form onSubmit={e => { e.preventDefault(); onUnlock(); }} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div className="auth-inputwrap">
            <I.lock className="ico" size={17} />
            <input type="password" value={pass} onChange={e => setPass(e.target.value)} placeholder="ป้อนรหัสผ่านเพื่อปลดล็อก" autoFocus />
          </div>
          <button className="auth-submit" type="submit"><I.unlock size={18} /> ปลดล็อก</button>
          <button type="button" onClick={onLogout} style={{ background: 'none', border: 'none', color: 'var(--ink-3)', fontFamily: 'inherit', fontSize: 13, cursor: 'pointer', padding: 6 }}>ออกจากระบบ</button>
        </form>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;
window.LockScreen = LockScreen;