---
import DiagramFrame from '../primitives/DiagramFrame.astro';
import AppContainer from '../primitives/AppContainer.astro';
import LogicBox from '../primitives/LogicBox.astro';
import DataBox from '../primitives/DataBox.astro';
import TargetBullet from '../primitives/TargetBullet.astro';
import FlowArrow from '../primitives/FlowArrow.astro';
import Connector from '../primitives/Connector.astro';

// Matches app-def.svg: same structure as AppOverview, but the App
// container is highlighted (we're talking about binding the app).
const APP_PAD_X = 30;
const STATE_W = 96,  STATE_H = 48;
const XFM_W   = 120, XFM_H   = 56;
const TS_W    = 110, TS_H    = 50;
const GAP     = 48;
const APP_W   = STATE_W + GAP + XFM_W + GAP + TS_W + APP_PAD_X * 2;

const VB_W = APP_W + 260, VB_H = 200;
const TOP_Y = 20, TOP_H = 160;
const CY = TOP_Y + TOP_H / 2;

const SRC = { x: 20,          y: TOP_Y, w: 100, h: TOP_H };
const APP = { x: 140,         y: TOP_Y, w: APP_W, h: TOP_H };
const TGT = { x: APP.x + APP_W + 20, y: TOP_Y, w: 100, h: TOP_H };

const STATE_DX = APP_PAD_X;
const XFM_DX   = STATE_DX + STATE_W + GAP;
const TS_DX    = XFM_DX + XFM_W + GAP;
const INNER_CY = APP.h / 2;
---
<DiagramFrame
  viewBox={`0 0 ${VB_W} ${VB_H}`}
  maxWidth={800}
  title="App definition"
  desc="An App binds source → transform → target state into a single runnable unit."
>
  <LogicBox x={SRC.x} y={SRC.y} w={SRC.w} h={SRC.h} label="Source System" />
  <AppContainer x={APP.x} y={APP.y} w={APP.w} h={APP.h} highlight={true}>
    <DataBox x={STATE_DX} y={INNER_CY - STATE_H / 2} w={STATE_W} h={STATE_H} label="State" />
    <LogicBox x={XFM_DX} y={INNER_CY - XFM_H / 2} w={XFM_W} h={XFM_H} label="Transform F(x)" />
    <TargetBullet x={TS_DX} y={INNER_CY - TS_H / 2} w={TS_W} h={TS_H} label="Target State" />

    <FlowArrow d={`M ${STATE_DX + STATE_W} ${INNER_CY} L ${XFM_DX} ${INNER_CY}`} />
    <FlowArrow d={`M ${XFM_DX + XFM_W} ${INNER_CY} L ${TS_DX} ${INNER_CY}`} />
  </AppContainer>
  <LogicBox x={TGT.x} y={TGT.y} w={TGT.w} h={TGT.h} label="Target System" />

  <Connector d={`M ${SRC.x + SRC.w} ${CY} L ${APP.x + STATE_DX} ${CY}`} dashed={true} />
  <Connector d={`M ${APP.x + TS_DX + TS_W} ${CY} L ${TGT.x} ${CY}`} dashed={true} />
</DiagramFrame>
