import DecisionBoundaryPlot from "./DecisionBoundaryPlot.tsx";
import Sidebar from "./Sidebar.tsx";
// import { LoadingScreen } from "@elvis/ui";
import useAppLogic from "./useAppLogic.ts";


export default function App() {

  const app = useAppLogic();

  //if (!app.backendReady) {
    //return <LoadingScreen message="Loading" />;
  //}

  return (
			<div className="grid grid-cols-[1fr_12fr_1fr] lg:h-dvh bg-stone-50">
				<div/>
				<div className="flex flex-col gap-6 p-6 min-h-0">
					<div className="title">Decision Boundary Visualizer</div>
					{/* <div className="desc">Description</div> */}
				
					<div className="grid grid-cols-1 lg:grid-cols-[8fr_4fr] gap-12 flex-1 min-h-0 overflow-auto">
						<DecisionBoundaryPlot 
							dataPoints={app.dataPoints}
							addDataPoint={app.handleAddDataPoint}
							decisionBoundaryResult={app.decisionBoundaryResult}
							xRangeRef={app.xRangeRef}
							yRangeRef={app.yRangeRef}
							setRanges={app.handleRangeChange}
							canAddPoints={app.canAddPoints}
							pointLabel={app.pointLabel}
							labelColors={app.labelColors}
							plotHandle={app.plotHandle}
						/>

						<Sidebar 
							pointLabel={app.pointLabel}
							setPointLabel={app.setPointLabel}
							setCanAddPoints={app.setCanAddPoints}
							undoDataPoint={app.handleUndoDataPoint}
							clearDataPoints={app.handleClearDataPoints}
							modelSettings={app.modelSettings}
							setModelSettings={app.handleModelSettingsChange}
							csvSettings={app.csvSettings}
							onCsvSettingsChange={app.handleCsvSettingsChange}
							onGetDecisionBoundary={app.handleGetDecisionBoundary}
							onCsvUpload={app.handleCsvUpload}
							csvError={app.csvError}
							onCsvExport={app.getCsvDataset}
							onSvgExport={app.getPlotSvg}
						/>
					</div>
				</div>
				<div/>
		</div>
  );
}