// ChitraKar — router + app root.

function App() {
  // Persist screen state across reloads
  const [screen, setScreen] = React.useState(() => {
    try { return localStorage.getItem('chitrakar_screen') || 'dashboard'; }
    catch { return 'dashboard'; }
  });
  const [modal, setModal] = React.useState(null); // 'approval' | 'export' | null

  React.useEffect(() => {
    try { localStorage.setItem('chitrakar_screen', screen); } catch {}
  }, [screen]);

  const openModule = (key) => {
    // For prototype: all modules route to editor
    setScreen('editor');
  };

  const openProject = () => {
    setScreen('editor');
  };

  return (
    <>
      {screen === 'dashboard' && (
        <div data-screen-label="01 Dashboard" style={{ height: '100vh' }}>
          <Dashboard onOpenModule={openModule} onOpenProject={openProject}/>
        </div>
      )}

      {screen === 'editor' && (
        <div data-screen-label="02 Editor" style={{ height: '100vh' }}>
          <Editor
            onExit={() => setScreen('dashboard')}
            onOpenApproval={() => setModal('approval')}
            onOpenExport={() => setModal('export')}
          />
        </div>
      )}

      {modal === 'approval' && <ApprovalModal onClose={() => setModal(null)}/>}
      {modal === 'export' && <ExportModal onClose={() => setModal(null)}/>}
    </>
  );
}

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