import { AppShellWithMenu } from '../components/Appshell/Appshell';
import { Stack, Box } from '@mantine/core';

import {
  CanvasDisplay,
  ControlPanel,
  CaptureGrid,
  GridConfigPanel,
  useCamaraNoir
} from '../components/Camara_noir';

export function Camara_noir() {
  const camara = useCamaraNoir();
  const totalSlots = camara.numFilas * camara.numColumnas;

  return (
    <AppShellWithMenu>
      <Stack p="md" gap="md">

        {/* Contenedor para botones encima del video */}
        <Box style={{ position: 'relative', width: '100%' }}>
          <ControlPanel
            grabando={camara.grabando}
            onAlternar={camara.alternarGrabacion}
            onLimpiar={camara.limpiarCapturas}
            onDesfijar={camara.desfijarTodos}
          />
          <Box style={{ marginTop: 8 }}>
            <CanvasDisplay canvasRef={camara.canvasRef} />
          </Box>
        </Box>

        {/* Grilla de capturas + configurador lateral */}
        <Box style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
          <CaptureGrid
            totalSlots={totalSlots}
            capturas={camara.capturas}
            frameIndices={camara.frameIndices}
            fijados={camara.fijados}
            frameTemporal={camara.frameTemporal}
            onScroll={camara.manejarScrollEnSlider}
            onSliderChange={camara.setFrameTemporal}
            onSliderEnd={camara.moverFrameYFijar}
            numColumnas={camara.numColumnas}
          />

          <GridConfigPanel
            numFilas={camara.numFilas}
            setNumFilas={camara.setNumFilas}
            numColumnas={camara.numColumnas}
            setNumColumnas={camara.setNumColumnas}
          />
        </Box>
      </Stack>
    </AppShellWithMenu>
  );
}