import { useEffect } from 'react';
import useAuthStore from './store/authStore';
import { LoginPage } from './pages/LoginPage';
import { EmployeeApp } from './pages/EmployeeApp';
import { AdminApp } from './pages/AdminApp';

function App() {
  const user = useAuthStore((s) => s.user);
  const loading = useAuthStore((s) => s.loading);
  const logout = useAuthStore((s) => s.logout);
  const init = useAuthStore((s) => s.init);

  useEffect(() => {
    init();
  }, [init]);

  if (loading) {
    return <div className="empty-line">&gt; načítám…</div>;
  }

  if (!user) {
    return <LoginPage />;
  }

  return (
    <div className="app-shell">
      <header className="chrome">
        <div className="chrome-inner">
          <div>
            <span className="brand">EatMe</span>
            <span className="brand-sub">docházka</span>
          </div>
          <div className="chrome-user">
            <span>
              {user.name ?? user.email} &middot; {user.role === 'admin' ? 'admin' : 'zaměstnanec'}
            </span>
            <button className="btn-ghost" onClick={logout}>
              odhlásit [x]
            </button>
          </div>
        </div>
      </header>
      <main className="scroll">
        <div className="scroll-inner">{user.role === 'admin' ? <AdminApp /> : <EmployeeApp />}</div>
      </main>
    </div>
  );
}

export default App;
