import type { ReactNode } from 'react'
import { useScale } from '../../hooks/useScale'
import Header from './Header'
import ActivityBar from '../ui/ActivityBar'

interface ScaleWrapperProps {
  children: ReactNode
  /** Imagen de fondo opcional (ruta relativa a public/) */
  backgroundImage?: string
  /** Props para el ActivityBar. Si no se pasa, la pantalla hija debe renderizar su propio ActivityBar. */
  barProps?: {
    preguntaActual?: number
    totalPreguntas?: number
    mensaje: string
    puedeAnterior?: boolean
    puedeSiguiente?: boolean
    onPrev?: () => void
    onNext?: () => void
  }
}

/**
 * Envoltorio de escalado adaptativo 1920×1080.
 * Incluye Header + contenido + ActivityBar (si se pasan barProps).
 */
export default function ScaleWrapper({ children, backgroundImage, barProps }: ScaleWrapperProps) {
  const scaleRef = useScale()

  return (
    <div className="w-screen h-screen overflow-hidden bg-white relative">
      <div
        ref={scaleRef}
        className="flex flex-col overflow-hidden"
        style={{
          width: '1920px',
          height: '1080px',
          ...(backgroundImage
            ? {
                backgroundImage: `url('${backgroundImage}')`,
                backgroundSize: '100% 100%',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
              }
            : { backgroundColor: '#ffffff' }),
        }}
      >
        <Header />
        <div className="flex-1 flex flex-col overflow-hidden" style={{ minHeight: 0 }}>
          {children}
        </div>
        {barProps && (
          <ActivityBar
            preguntaActual={barProps.preguntaActual ?? 0}
            totalPreguntas={barProps.totalPreguntas ?? 0}
            mensaje={barProps.mensaje}
            puedeAnterior={barProps.puedeAnterior ?? false}
            puedeSiguiente={barProps.puedeSiguiente ?? false}
            onPrev={barProps.onPrev}
            onNext={barProps.onNext}
          />
        )}
      </div>
    </div>
  )
}
