function App() {
  const [loading, setLoading] = React.useState(true);
  const [session, setSession] = React.useState(null);
  const [user, setUser] = React.useState(null);
  const [deniedEmail, setDeniedEmail] = React.useState(null);

  async function loadMe() {
    const token = await window.OKR_AUTH.getAccessToken();
    const r = await fetch("/api/me", {
      headers: token ? { Authorization: `Bearer ${token}` } : {},
    });
    const me = await r.json();
    if (me.email && me.role) {
      setUser(me);
      setDeniedEmail(null);
    } else if (me.email) {
      // login สำเร็จฝั่ง Supabase แต่ไม่อยู่ใน allowed_users
      setDeniedEmail(me.email);
      setUser(null);
    } else {
      setUser(null);
    }
  }

  React.useEffect(() => {
    (async () => {
      const s = await window.OKR_AUTH.getSession();
      setSession(s);
      if (s) await loadMe();
      setLoading(false);
      window.OKR_AUTH.onAuthStateChange((_event, newSession) => {
        setSession(newSession);
        if (newSession) loadMe();
        else { setUser(null); setDeniedEmail(null); }
      });
    })();
  }, []);

  async function handleSignOut() {
    await window.OKR_AUTH.signOut();
    setSession(null);
    setUser(null);
  }

  if (loading) return <div className="loading-screen">กำลังโหลด...</div>;

  if (!session) return <LoginScreen onLoggedIn={loadMe} />;

  if (deniedEmail) {
    return (
      <div className="login-page">
        <div className="login-card">
          <h1>ไม่มีสิทธิ์เข้าใช้งาน</h1>
          <p>อีเมล <strong>{deniedEmail}</strong> ยังไม่ได้รับสิทธิ์เข้าระบบ กรุณาติดต่อ HR ให้เพิ่มชื่อในระบบก่อน</p>
          <button onClick={handleSignOut}>ออกจากระบบ</button>
        </div>
      </div>
    );
  }

  if (!user) return <div className="loading-screen">กำลังตรวจสอบสิทธิ์...</div>;

  return <DashboardScreen user={user} onSignOut={handleSignOut} />;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);