// 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 = () => {
    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 = () => {
    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) => {
    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);
  };
