/* @component-map
 * App — Main container, layout shell [app.jsx]
 * CoworkingSpace — Main workspace with timer grid and controls [components/CoworkingSpace.jsx]
 * TimerDisplay — Individual Pomodoro timer component [components/TimerDisplay.jsx]
 * AmbientSounds — Ambient sound mixer panel [components/AmbientSounds.jsx]
 * Header — Top bar with room info and user count [components/Header.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"cron": [{"name": "daily-reset-and-stats-broadcast", "schedule": "0 0 * * *", "action": "event", "config": {"event_type": "daily_stats_reset"}}]}


import { useState } from 'react';
import { useIdentity } from '@deplixo/sdk';
import { Header } from './components/Header.jsx';
import { CoworkingSpace } from './components/CoworkingSpace.jsx';
import { AmbientSounds } from './components/AmbientSounds.jsx';

// PROGRESS:sc_001:complete:Setting up the co-working space

function App() {
  const { user, loading } = useIdentity();
  const [showSounds, setShowSounds] = useState(false);

  if (loading) {
    return (
      <div className="loading-screen">
        <div className="loading-icon">🌿</div>
        <p className="loading-text">Entering the garden...</p>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <Header user={user} onToggleSounds={() => setShowSounds(!showSounds)} showSounds={showSounds} />
      <main className="main-content">
        <CoworkingSpace user={user} />
      </main>
      {showSounds && <AmbientSounds onClose={() => setShowSounds(false)} />}
    </div>
  );
}

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