// ===== Login screen =====
const LoginScreen = ({ onLogin }) => {
  const [user, setUser] = React.useState("admin");
  const [pass, setPass] = React.useState("••••••••");
  const [loading, setLoading] = React.useState(false);
  const [shake, setShake] = React.useState(false);

  const submit = (e) => {
    e && e.preventDefault();
    setLoading(true);
    setTimeout(() => { onLogin && onLogin(); }, 900);
  };

  return (
    <div className="page-enter" style={{
      minHeight: "100vh",
      display: "grid",
      gridTemplateColumns: "1fr 1fr",
      gap: 0,
    }}>
      {/* LEFT — branding */}
      <div style={{
        position: "relative",
        padding: "60px 70px",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        overflow: "hidden",
        borderRight: "1px solid var(--border)",
      }}>
        <GlowBlob color="rgba(124,92,255,0.55)" x={-100} y={-100} size={500} opacity={0.4} />
        <GlowBlob color="rgba(0,212,168,0.45)" x={100} y="60vh" size={400} opacity={0.3} />

        <div style={{ position: "relative", zIndex: 2 }}>
          <div className="row gap-12" style={{ marginBottom: 8 }}>
            <div style={{
              width: 42, height: 42, borderRadius: 12,
              background: "linear-gradient(135deg, #7c5cff, #00d4a8)",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: 20, color: "white", fontWeight: 700,
              boxShadow: "0 10px 30px -8px rgba(124,92,255,0.5)"
            }}>M</div>
            <div className="col gap-4">
              <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: -0.2 }}>MyEmpInfo</div>
              <div className="faint" style={{ fontSize: 12 }}>Employee Information System</div>
            </div>
          </div>
        </div>

        <div style={{ position: "relative", zIndex: 2, maxWidth: 460 }}>
          <div className="chip chip-teal" style={{ marginBottom: 20 }}>
            <span className="live-dot" /> ระบบพร้อมใช้งาน · v2.4.0
          </div>
          <h1 style={{
            fontSize: 44,
            fontWeight: 700,
            lineHeight: 1.15,
            letterSpacing: -0.8,
            margin: "0 0 18px",
          }}>
            ทุกข้อมูลพนักงาน<br/>
            <span style={{
              background: "linear-gradient(135deg, #00d4a8, #7c5cff)",
              WebkitBackgroundClip: "text",
              WebkitTextFillColor: "transparent",
              backgroundClip: "text",
            }}>รวมในที่เดียว</span>
          </h1>
          <p className="muted" style={{ fontSize: 15, lineHeight: 1.7, margin: 0 }}>
            จัดการข้อมูลบุคลากร ดูภาพรวมองค์กรแบบเรียลไทม์ ส่งออกเป็น Excel หรือ PDF ได้ในคลิกเดียว
            พร้อมระบบ Activity log ที่ติดตามการเปลี่ยนแปลงทุกครั้ง
          </p>

          {/* preview tiles */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12, marginTop: 32 }}>
            {[
              { label: "พนักงานปัจจุบัน", value: 98, color: "#00d4a8" },
              { label: "ฝ่ายงาน", value: 7, color: "#7c5cff" },
              { label: "เข้าใหม่เดือนนี้", value: 4, color: "#ff5d8f" },
            ].map((s, i) => (
              <div key={i} className="glass" style={{ padding: "14px 16px" }}>
                <div className="num-display" style={{ fontSize: 26, color: s.color, lineHeight: 1 }}>{s.value}</div>
                <div className="faint" style={{ fontSize: 11.5, marginTop: 6 }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="row faint" style={{ fontSize: 12, gap: 16, position: "relative", zIndex: 2 }}>
          <span>© 2026 MyEmpInfo</span>
          <span>·</span>
          <span>Privacy</span>
          <span>·</span>
          <span>Terms</span>
        </div>
      </div>

      {/* RIGHT — form */}
      <div style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "40px",
        position: "relative",
      }}>
        <form onSubmit={submit} className={shake ? "shake" : ""} style={{
          width: "100%", maxWidth: 380,
          display: "flex", flexDirection: "column", gap: 4
        }}>
          <h2 style={{ fontSize: 26, fontWeight: 600, margin: 0, letterSpacing: -0.3 }}>เข้าสู่ระบบ</h2>
          <p className="muted" style={{ fontSize: 13.5, margin: "4px 0 28px" }}>
            ยินดีต้อนรับกลับ กรุณายืนยันตัวตน
          </p>

          <label className="field-label">ชื่อผู้ใช้งาน หรืออีเมล</label>
          <div style={{ position: "relative", marginBottom: 16 }}>
            <Icon name="user" size={16} color="var(--text-faint)"
              style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)" }} />
            <input className="input" value={user} onChange={(e) => setUser(e.target.value)}
              style={{ paddingLeft: 40 }} placeholder="admin@company.co.th" />
          </div>

          <label className="field-label">รหัสผ่าน</label>
          <div style={{ position: "relative", marginBottom: 8 }}>
            <Icon name="lock" size={16} color="var(--text-faint)"
              style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)" }} />
            <input className="input" type="password" value={pass} onChange={(e) => setPass(e.target.value)}
              style={{ paddingLeft: 40 }} />
          </div>

          <div className="row" style={{ justifyContent: "space-between", marginBottom: 22, marginTop: 6 }}>
            <label className="row gap-8 cursor-pointer" style={{ fontSize: 13 }}>
              <CheckBox checked={true} onChange={() => {}} />
              <span className="muted">จดจำการเข้าสู่ระบบ</span>
            </label>
            <a className="muted" href="#" style={{ fontSize: 13, color: "var(--teal)", textDecoration: "none" }}>
              ลืมรหัสผ่าน?
            </a>
          </div>

          <button type="submit" className="btn btn-primary shine" disabled={loading}
            style={{ height: 44, justifyContent: "center", fontSize: 14.5 }}>
            {loading ? <>
              <span className="live-dot" /> กำลังตรวจสอบ…
            </> : <>เข้าสู่ระบบ <Icon name="chevron-r" size={16} /></>}
          </button>

          <div className="row gap-12" style={{ margin: "26px 0 22px" }}>
            <div style={{ flex: 1, height: 1, background: "var(--border)" }} />
            <span className="faint" style={{ fontSize: 12 }}>หรือ</span>
            <div style={{ flex: 1, height: 1, background: "var(--border)" }} />
          </div>

          <button type="button" className="btn btn-ghost"
            style={{ height: 42, justifyContent: "center" }}>
            <Icon name="briefcase" size={16} /> เข้าด้วย SSO ขององค์กร
          </button>

          <div className="faint" style={{ fontSize: 12, textAlign: "center", marginTop: 30, lineHeight: 1.7 }}>
            ยังไม่มีบัญชี? ติดต่อ <span style={{ color: "var(--teal)" }}>HR Department</span><br/>
            เพื่อขอสิทธิ์การเข้าใช้งาน
          </div>
        </form>
      </div>
    </div>
  );
};

window.LoginScreen = LoginScreen;