---
import DiagramFrame from '../primitives/DiagramFrame.astro';
import AppContainer from '../primitives/AppContainer.astro';
import ProcessingComponent from '../primitives/ProcessingComponent.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';

interface Props { highlightFn?: boolean; highlightPC?: boolean; highlightFile?: boolean; }
const { highlightFn = false, highlightPC = false, highlightFile = false } = Astro.props;

// Matches component1.svg: Drive Folder → [App: a.pdf→PC(Convert→a.md); b.pdf→PC(Convert→b.md)] → Drive Folder(right)
const APP_PAD_X = 24;
const FILE_W = 62,  FILE_H = 28;
const PC_W   = 360, PC_H   = 90;
const FILE_TO_PC_GAP = 34;
const APP_W  = FILE_W + FILE_TO_PC_GAP + PC_W + APP_PAD_X * 2;

const VB_W = APP_W + 260, VB_H = 320;
const TOP_Y = 20, TOP_H = 280;

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

const FILE_DX = APP_PAD_X;
const PC_DX   = FILE_DX + FILE_W + FILE_TO_PC_GAP;

// PC internal columns (relative to PC top-left)
const PC_PAD_X = 24;
const XFM_W = 160, XFM_H = 48;
const OUT_W = 90,  OUT_H = 30;
const PC_GAP = 30;
const XFM_DX = PC_PAD_X;
const OUT_DX = XFM_DX + XFM_W + PC_GAP;
const PC_INNER_CY = PC_H / 2 + 6;

const ROW1_CY = TOP_Y + 80;
const ROW2_CY = TOP_Y + 200;
const rows = [
  { rowCY: ROW1_CY, src: 'a.pdf', out: 'a.md' },
  { rowCY: ROW2_CY, src: 'b.pdf', out: 'b.md' },
];
---
<DiagramFrame
  viewBox={`0 0 ${VB_W} ${VB_H}`}
  maxWidth={800}
  title="One processing component per file"
  desc="Each file gets its own processing component that converts it to markdown."
>
  <LogicBox x={DRIVE_L.x} y={DRIVE_L.y} w={DRIVE_L.w} h={DRIVE_L.h} label="Drive Folder" />
  <AppContainer x={APP.x} y={APP.y} w={APP.w} h={APP.h} />
  <LogicBox x={DRIVE_R.x} y={DRIVE_R.y} w={DRIVE_R.w} h={DRIVE_R.h} label="Drive Folder" />

  {rows.map((row) => {
    const pcY = row.rowCY - PC_H / 2;
    const fileY = row.rowCY - FILE_H / 2;
    return (
      <g>
        {/* Drive Folder → file: binding */}
        <Connector d={`M ${DRIVE_L.x + DRIVE_L.w} ${row.rowCY} L ${APP.x + FILE_DX} ${row.rowCY}`} dashed={true} />
        <DataBox x={APP.x + FILE_DX} y={fileY} w={FILE_W} h={FILE_H} label={row.src} highlight={highlightFile} />
        {/* file → PC */}
        <FlowArrow d={`M ${APP.x + FILE_DX + FILE_W} ${row.rowCY} L ${APP.x + PC_DX} ${row.rowCY}`} />

        <ProcessingComponent x={APP.x + PC_DX} y={pcY} w={PC_W} h={PC_H} highlight={highlightPC}>
          <LogicBox x={XFM_DX} y={PC_INNER_CY - XFM_H / 2} w={XFM_W} h={XFM_H} label="Convert to Markdown" highlight={highlightFn} />
          <FlowArrow d={`M ${XFM_DX + XFM_W} ${PC_INNER_CY} L ${OUT_DX} ${PC_INNER_CY}`} />
          <TargetBullet x={OUT_DX} y={PC_INNER_CY - OUT_H / 2} w={OUT_W} h={OUT_H} label={row.out} highlight={highlightFn} />
        </ProcessingComponent>

        {/* output → Drive Folder (right): binding */}
        <Connector
          d={`M ${APP.x + PC_DX + PC_W} ${row.rowCY} L ${DRIVE_R.x} ${row.rowCY}`}
          dashed={true}
        />
      </g>
    );
  })}
</DiagramFrame>
