// Shared layout constants for the editor
export const LAYOUT_CONSTANTS = {
  // Fixed element heights
  HEADER_HEIGHT: 64, // Header with padding
  CONTROLS_HEIGHT: 48, // Button controls height

  // Canvas dimensions
  CANVAS_WIDTH: 720,
  CANVAS_HEIGHT: 1280,
  CANVAS_ASPECT_RATIO: 720 / 1280, // 9:16 aspect ratio

  // Spacing and padding
  MIN_PADDING: 16, // Minimum padding around elements
  CONTAINER_SPACING: 16, // Space between header, canvas, and controls (space-y-4 = 16px)
  CONTAINER_VERTICAL_PADDING: 24, // py-6 = 24px top + 24px bottom
};

// Calculate optimal maxWidth based on viewport dimensions
export const calculateOptimalMaxWidth = (): number => {
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;

  // Calculate total used height for fixed elements and spacing
  const usedHeight =
    LAYOUT_CONSTANTS.HEADER_HEIGHT +
    LAYOUT_CONSTANTS.CONTROLS_HEIGHT +
    (LAYOUT_CONSTANTS.CONTAINER_SPACING * 2) + // Space between elements
    LAYOUT_CONSTANTS.CONTAINER_VERTICAL_PADDING + // py-6 padding
    (LAYOUT_CONSTANTS.MIN_PADDING * 2); // Additional safety padding

  const availableHeight = viewportHeight - usedHeight;
  const availableWidth = viewportWidth - (LAYOUT_CONSTANTS.MIN_PADDING * 2);

  // Calculate maxWidth based on both width and height constraints
  const maxWidthFromHeight = availableHeight * LAYOUT_CONSTANTS.CANVAS_ASPECT_RATIO;
  const maxWidthFromWidth = availableWidth;

  // Use the smaller constraint to ensure everything fits
  const optimalMaxWidth = Math.min(maxWidthFromHeight, maxWidthFromWidth);

  // Ensure minimum viable size (but allow smaller if viewport is tiny)
  const minViableWidth = 280;

  return Math.max(optimalMaxWidth, Math.min(minViableWidth, availableWidth));
};

// Calculate responsive width based on optimal maxWidth
export const calculateResponsiveWidth = (): number => {
  const optimalMaxWidth = calculateOptimalMaxWidth();
  const viewportWidth = window.innerWidth;
  const padding = LAYOUT_CONSTANTS.MIN_PADDING * 2;
  const availableWidth = viewportWidth - padding;

  return Math.min(availableWidth, optimalMaxWidth);
};

// Calculate responsive scale for canvas
export const calculateResponsiveScale = (maxWidth: number): number => {
  const viewportWidth = window.innerWidth;
  const padding = LAYOUT_CONSTANTS.MIN_PADDING * 2;
  const availableWidth = viewportWidth - padding;
  const constrainedWidth = Math.min(availableWidth, maxWidth);
  const scale = constrainedWidth / LAYOUT_CONSTANTS.CANVAS_WIDTH;

  // Cap at 100% to avoid upscaling
  return Math.min(scale, 1);
};