ui/src/App.jsx

import React from 'react';
import { Play, SkipForward, Square } from 'lucide-react';

import { BalancePanel } from './components/BalancePanel';
import { MarketPanel } from './components/MarketPanel';
import { MetricsPanel } from './components/MetricsPanel';
import { OfficeScene } from './components/OfficeScene';
import { useSimulationStore } from './store';

function App() {
  const {
    simState,
    portfolioHistory,
    priceHistory,
    lastPortfolioDelta,
    lastPriceDelta,
    lastError,
    toggleSimulation,
    fetchState,
    stepSimulation,
  } = useSimulationStore();

  React.useEffect(() => {
    fetchState();
    const interval = window.setInterval(() => {
      fetchState();
    }, 600);
    return () => window.clearInterval(interval);
  }, [fetchState]);

  return (
    <div className="min-h-screen bg-[linear-gradient(180deg,#f9eadb_0%,#f6ddc6_42%,#ecd0bb_100%)] px-6 py-8 text-stone-800 md:px-8">
      <div className="mx-auto max-w-[1500px]">
        <div className="mb-8 flex flex-col gap-5 rounded-[2.2rem] border border-[#7d5a4f]/15 bg-[#fff8ef]/78 px-6 py-6 shadow-[0_24px_55px_rgba(77,44,26,0.12)] backdrop-blur md:flex-row md:items-end md:justify-between">
          <div className="max-w-3xl">
            <div className="inline-flex items-center gap-2 rounded-full bg-white/80 px-4 py-1 text-[11px] font-semibold uppercase tracking-[0.32em] text-stone-500">
              <span className={`h-2.5 w-2.5 rounded-full ${simState.is_running ? 'bg-emerald-500' : 'bg-stone-400'}`} />
              Wild Card Demo
            </div>
            <h1 className="mt-4 text-4xl font-semibold tracking-tight text-stone-900 md:text-5xl">
              Indie quant floor with live agent choreography
            </h1>
            <p className="mt-3 max-w-2xl text-sm leading-7 text-stone-600 md:text-base">
              The scene updates off the running trading environment: signals travel desk to desk, the trader fires orders, and the balance reacts to the trades in real time.
            </p>
          </div>

          <div className="flex flex-wrap items-center gap-3">
            {lastError ? (
              <div className="rounded-full border border-rose-200 bg-rose-50 px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-rose-600 shadow-sm">
                Demo error: {lastError}
              </div>
            ) : null}
            <div className="rounded-full bg-white/85 px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.24em] text-stone-500 shadow-sm">
              Step {simState.current_step}
            </div>
            <div className="rounded-full bg-white/85 px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.24em] text-stone-500 shadow-sm">
              {simState.engine?.mode}
            </div>
            <button
              onClick={() => stepSimulation()}
              className="inline-flex items-center gap-2 rounded-full border border-[#7d5a4f]/15 bg-white px-5 py-3 text-sm font-semibold text-stone-700 shadow-sm transition hover:bg-stone-50"
            >
              <SkipForward size={16} />
              Step
            </button>
            <button
              onClick={() => toggleSimulation(simState.is_running)}
              className={`inline-flex items-center gap-2 rounded-full px-5 py-3 text-sm font-semibold shadow-sm transition ${
                simState.is_running
                  ? 'bg-rose-500 text-white hover:bg-rose-600'
                  : 'bg-emerald-500 text-white hover:bg-emerald-600'
              }`}
            >
              {simState.is_running ? <Square size={16} /> : <Play size={16} />}
              {simState.is_running ? 'Stop Demo' : 'Run Demo'}
            </button>
          </div>
        </div>

        <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
          <OfficeScene
            agents={simState.agents}
            flow={simState.flow}
            trade={simState.trade}
            currentStep={simState.current_step}
            isRunning={simState.is_running}
            engine={simState.engine}
          />

          <div className="flex flex-col gap-6">
            <BalancePanel
              portfolio={simState.portfolio}
              history={portfolioHistory}
              lastDelta={lastPortfolioDelta}
              trade={simState.trade}
            />
            <MarketPanel
              chart={simState.chart}
              history={priceHistory}
              trade={simState.trade}
              engine={simState.engine}
              lastPriceDelta={lastPriceDelta}
            />
          </div>
        </div>

        <div className="mt-6">
          <MetricsPanel metrics={simState.metrics} trade={simState.trade} agents={simState.agents} />
        </div>
      </div>
    </div>
  );
}

export default App;