// flow-app.jsx — wires the design canvas + 5 artboards

const { useState: useS } = React;

const Artboard = ({ children }) => (
  <div style={{ width: '100%', height: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column', background: 'var(--bg)' }}>
    {children}
  </div>
);

// --- Artboard hosts ----------------------------------------------------------

const DashboardBoard = () => {
  const [route, setRoute] = useS('dashboard');
  return (
    <Artboard>
      <AppShell screenLabel="01 Dashboard"
                activeRoute={route} onNav={setRoute}
                crumbs={['Flow', 'Dashboard']}>
        <Dashboard onNav={setRoute} />
      </AppShell>
    </Artboard>
  );
};

const ListBoard = () => {
  const [route, setRoute] = useS('shipments/list');
  return (
    <Artboard>
      <AppShell screenLabel="02 Shipments List"
                activeRoute={route} onNav={setRoute}
                crumbs={['Flow', 'Shipments', 'List']}>
        <ShipmentsList onOpen={() => {}} />
      </AppShell>
    </Artboard>
  );
};

const DetailBoard = () => {
  const [route, setRoute] = useS('shipments');
  return (
    <Artboard>
      <AppShell screenLabel="03 Shipment Detail"
                activeRoute={route} onNav={setRoute}
                crumbs={['Flow', 'Shipments', window.FLOW_DATA.SHIPMENTS[0].id]}>
        <ShipmentDetail shipment={window.FLOW_DATA.SHIPMENTS[0]} onBack={() => {}} onOpenEcmr={() => {}} />
      </AppShell>
    </Artboard>
  );
};

const EcmrBoard = () => (
  <Artboard>
    <div data-screen-label="04 eCMR Generation" style={{ height: '100%' }}>
      <ECMRDialog s={window.FLOW_DATA.SHIPMENTS[0]} onClose={() => {}} />
    </div>
  </Artboard>
);

const FreetimeBoard = () => {
  const [route, setRoute] = useS('freetime');
  return (
    <Artboard>
      <AppShell screenLabel="05 Free-time Clocks"
                activeRoute={route} onNav={setRoute}
                crumbs={['Flow', 'Free-time clocks']}>
        <FreetimeDashboard />
      </AppShell>
    </Artboard>
  );
};

// --- Canvas ------------------------------------------------------------------

const App = () => (
  <DesignCanvas projectName="Flow — Orcavera Suite"
                projectSubtitle="Top 5 hi-fi screens · matched to TradeShield's design system">
    <DCSection id="control-tower" title="Control tower" subtitle="Where the day starts — what needs attention right now.">
      <DCArtboard id="dashboard" label="01 · Dashboard" width={1440} height={1100}>
        <DashboardBoard />
      </DCArtboard>
    </DCSection>

    <DCSection id="shipments" title="Shipments" subtitle="Find, triage, and drill in.">
      <DCArtboard id="list" label="02 · List view" width={1440} height={1024}>
        <ListBoard />
      </DCArtboard>
      <DCArtboard id="detail" label="03 · Detail · Overview tab" width={1440} height={1500}>
        <DetailBoard />
      </DCArtboard>
    </DCSection>

    <DCSection id="ecmr" title="eCMR generation" subtitle="From documents tab → a 4-step flow with live preview.">
      <DCArtboard id="ecmr" label="04 · Generate eCMR" width={1440} height={1024}>
        <EcmrBoard />
      </DCArtboard>
    </DCSection>

    <DCSection id="freetime" title="Free-time clocks" subtitle="Where the money is bleeding right now.">
      <DCArtboard id="freetime" label="05 · Free-time dashboard" width={1440} height={1500}>
        <FreetimeBoard />
      </DCArtboard>
    </DCSection>
  </DesignCanvas>
);

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