import React, { useState, useEffect } from 'react';
import OperationsConsole from './pages/OperationsConsole';

interface User {
  email: string;
  name?: string;
}

function App() {
  const [user, setUser] = useState<User | null>(null);
  const [authChecked, setAuthChecked] = useState(false);

  useEffect(() => {
    fetch('/auth/me', { credentials: 'include' })
      .then((r) => (r.ok ? r.json() : null))
      .then(setUser)
      .finally(() => setAuthChecked(true));
  }, []);

  if (!authChecked) {
    return null; // or a loading spinner
  }

  if (!user) {
    return (
      <div className="login">
        <h1>OPAX</h1>
        <a href="/auth/google">Continue with Google</a>
      </div>
    );
  }

  return (
    <div className="emma-workspace">
      <OperationsConsole user={user} />
    </div>
  );
}

export default App;