import { forwardRef } from 'react';
import { type PageData } from '../types';
import type { EditorObject } from '@/pages/editor/store/editorStore';
import { toCssLinearGradient } from '@/pages/editor/utils/gradient';
import { getFontFamily } from '@/pages/editor/utils/fontFamily';
import {
  getCssFontWeight,
  getViewerTextLayout,
  usesWrappedLayout,
} from '@/pages/editor/utils/textStyle';
import '@/pages/viewer/styles/entranceAnimations.css';
import { mergeEntranceAnimationStyle } from '@/pages/viewer/utils/entranceAnimationStyle';
import { getMaskImageStyle, getMaskedLayout } from '@/pages/viewer/utils/maskStyle';
import type { EntrancePhase } from '@/pages/viewer/hooks/useBookEntranceController';

type RenderObjectOptions = {
  skipEntrance?: boolean;
};

type BookPageProps = {
  page: PageData;
  scale?: number;
  pageWidth?: number;
  pageHeight?: number;
  onLinkClick?: (linkUrl: string) => void;
  backgroundType?: 'color' | 'gradient' | 'image';
  backgroundColor?: string;
  backgroundGradient?: {
    from: string;
    to: string;
    angle: number;
  };
  backgroundImageUrl?: string;
  /** فاز انیمیشن ورود — از BookViewer کنترل می‌شود */
  entrancePhase?: EntrancePhase;
  /** در پیش‌نمایش کاتالوگ انیمیشن ورود غیرفعال باشد */
  disableEntranceAnimations?: boolean;
  /** سایهٔ لبهٔ کاغذ (گرادیان داخل DOM — سازگار با iOS قدیمی) */
  showPaperShadow?: boolean;
  /** ورق سخت به‌جای clip-path برای iOS قدیمی */
  useHardPage?: boolean;
};

/**
 * کامپوننت خالص برای نمایش محتوای یک صفحه کتاب
 * تمام المنت‌ها با absolute positioning رندر می‌شوند
 * از HTML استفاده می‌شود (نه Canvas) برای سازگاری با Konva در آینده
 * این کامپوننت به عنوان child برای HTMLFlipBook استفاده می‌شود
 * نیاز به forwardRef دارد تا react-pageflip بتواند ref را مدیریت کند
 */
const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
  ({ page, scale = 1, pageWidth, pageHeight, onLinkClick, backgroundType, backgroundColor, backgroundGradient, backgroundImageUrl, entrancePhase = 'idle', disableEntranceAnimations = false, showPaperShadow = true, useHardPage = false }, ref) => {
    const phase: EntrancePhase = disableEntranceAnimations ? 'settled' : entrancePhase;
    // تابع برای تبدیل opacity به رنگ (مثل editor)
    // در editor، getColorWithOpacity انتظار opacity 0-100 دارد
    // در dataTransformer، opacity از 0-1 به 0-100 تبدیل شده است
    // پس opacity را مستقیماً استفاده می‌کنیم
    const getColorWithOpacity = (fill?: string, opacity?: number): string => {
      if (!fill) return '#000000';

      // opacity در EditorObject به صورت 0-100 است (بعد از تبدیل در dataTransformer)
      // در editor getColorWithOpacity انتظار 0-100 دارد
      const opacityValue = opacity !== undefined ? opacity : 100;

      // اگر opacity 100% باشد، رنگ را بدون تغییر برگردان (مثل editor)
      if (opacityValue >= 100) return fill;

      const hex = fill.replace('#', '');
      // اگر hex کوتاه‌تر از 6 کاراکتر باشد، padding اضافه کن
      const paddedHex = hex.length === 3
        ? hex.split('').map(char => char + char).join('')
        : hex;

      const r = parseInt(paddedHex.substring(0, 2), 16);
      const g = parseInt(paddedHex.substring(2, 4), 16);
      const b = parseInt(paddedHex.substring(4, 6), 16);
      // opacityValue را به alpha تبدیل کن (0-100 -> 0-1) مثل editor
      const alpha = opacityValue / 100;

      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    };

    const flyLayoutPx = {
      width: pageWidth ?? 794 * scale,
      height: pageHeight ?? 1123 * scale,
    };

    const withEntrance = (
      style: React.CSSProperties,
      obj: EditorObject,
      index: number,
      extra?: {
        transformOrigin?: React.CSSProperties['transformOrigin'];
        rotationDeg?: number;
      },
    ) =>
      mergeEntranceAnimationStyle(style, obj, scale, index, phase, {
        ...extra,
        flyLayoutPx,
      });

    const renderObjectContent = (
      obj: EditorObject,
      index: number,
      options: RenderObjectOptions = {},
    ) => {
      const applyStyle = (
        style: React.CSSProperties,
        styleObj: EditorObject,
        styleIndex: number,
        extra?: {
          transformOrigin?: React.CSSProperties['transformOrigin'];
          rotationDeg?: number;
        },
      ) =>
        options.skipEntrance
          ? style
          : withEntrance(style, styleObj, styleIndex, extra);

      const actualStrokeWidth = obj.strokeWidth ?? 0;
      const hasStroke = actualStrokeWidth > 0;
      const baseStyle: React.CSSProperties = {
        position: 'absolute',
        left: `${(obj.x || 0) * scale}px`,
        top: `${(obj.y || 0) * scale}px`,
        // editor opacity is stored as 0-100, CSS expects 0-1
        opacity: (obj.opacity ?? 100) / 100,
        transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
        // Konva default transform origin is top-left for Rect/Text/Image/etc.
        transformOrigin: 'top left',
      };

      if (obj.visible === false) {
        return null;
      }

      const objectFillStyle: React.CSSProperties =
        obj.fillType === 'gradient' && obj.gradient
          ? { backgroundImage: toCssLinearGradient(obj.gradient) }
          : { backgroundColor: obj.fill || 'transparent' };

      switch (obj.type) {
        case 'text': {
          // برای text، opacity در رنگ اعمال می‌شود، پس باید opacity را از baseStyle حذف کنیم
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          const { opacity, transform: _baseTransform, ...textBaseStyle } = baseStyle;
          const lineHeight = obj.lineHeight ?? 1.2;
          const wrapped = usesWrappedLayout(obj.text, obj.height, obj.fontSize || 24, lineHeight);
          const rotation = obj.rotation || 0;
          const fontSize = obj.fontSize || 24;
          const measureOpts = {
            fontSize,
            fontFamily: obj.fontFamily,
            fontWeight: obj.fontWeight,
            letterSpacing: obj.letterSpacing ?? 0,
            lineHeight,
          };
          const textLayout = getViewerTextLayout({
            x: obj.x || 0,
            width: obj.width,
            text: obj.text,
            textAlign: obj.textAlign,
            rotation,
            scale,
            measureOpts,
            wrapped,
          });
          return (
            <div
              key={obj.id || index}
              style={applyStyle(
                {
                  ...textBaseStyle,
                  left: `${textLayout.leftPx}px`,
                  width: textLayout.widthPx !== undefined ? `${textLayout.widthPx}px` : 'max-content',
                  fontSize: `${fontSize * scale}px`,
                  fontFamily: getFontFamily(obj.fontFamily),
                  fontWeight: getCssFontWeight(obj.fontWeight),
                  lineHeight,
                  textAlign: textLayout.textAlign,
                  direction: 'rtl',
                  color: getColorWithOpacity(obj.fill, obj.opacity),
                  whiteSpace: wrapped ? 'pre-wrap' : 'nowrap',
                  overflowWrap: wrapped ? 'break-word' : 'normal',
                  letterSpacing: obj.letterSpacing ? `${obj.letterSpacing * scale}px` : undefined,
                  boxSizing: 'content-box',
                  transform: textLayout.transform,
                  transformOrigin: textLayout.transformOrigin,
                },
                obj,
                index,
                { rotationDeg: rotation, transformOrigin: textLayout.transformOrigin },
              )}
            >
              {obj.text || ''}
            </div>
          );
        }

        case 'image':
        case 'sticker':
          return (
            <img
              key={obj.id || index}
              src={obj.imageUrl || ''}
              alt=""
              style={applyStyle(
                {
                  ...baseStyle,
                  width: obj.width ? `${obj.width * scale}px` : 'auto',
                  height: obj.height ? `${obj.height * scale}px` : 'auto',
                  objectFit: 'fill', // مشابه Konva که image را با width و height مشخص شده رندر می‌کند
                  zIndex: index, // برای حفظ ترتیب رندر
                },
                obj,
                index,
              )}
            />
          );

        case 'video':
          return (
            <video
              key={obj.id || index}
              src={obj.videoUrl || ''}
              controls
              style={applyStyle(
                {
                  ...baseStyle,
                  width: obj.width ? `${obj.width * scale}px` : 'auto',
                  height: obj.height ? `${obj.height * scale}px` : 'auto',
                  objectFit: 'contain',
                  zIndex: index,
                  pointerEvents: 'auto',
                },
                obj,
                index,
              )}
              onClick={(e) => {
                e.stopPropagation();
              }}
              onMouseDown={(e) => {
                e.stopPropagation();
              }}
              onTouchStart={(e) => {
                e.stopPropagation();
              }}
            />
          );

        case 'audio':
          return (
            <audio
              key={obj.id || index}
              src={obj.audioUrl || ''}
              controls
              preload="metadata"
              style={applyStyle(
                {
                  ...baseStyle,
                  width: obj.width ? `${obj.width * scale}px` : `${320 * scale}px`,
                  height: obj.height ? `${obj.height * scale}px` : `${56 * scale}px`,
                  zIndex: index,
                  pointerEvents: 'auto',
                },
                obj,
                index,
              )}
              onClick={(e) => {
                e.stopPropagation();
              }}
              onMouseDown={(e) => {
                e.stopPropagation();
              }}
              onTouchStart={(e) => {
                e.stopPropagation();
              }}
            />
          );

        case 'link': {
          const isInternalLink = obj.linkUrl?.startsWith('page://');
          const linkStyle = {
            ...baseStyle,
            width: obj.width ? `${obj.width * scale}px` : 'auto',
            height: obj.height ? `${obj.height * scale}px` : 'auto',
            color: obj.fill || '#3b82f6',
            fontSize: `${(obj.fontSize || 24) * scale}px`,
            fontFamily: getFontFamily(obj.fontFamily),
            fontWeight: getCssFontWeight(obj.fontWeight),
            textDecoration: 'underline',
            display: 'flex',
            alignItems: 'center',
            whiteSpace: 'pre-wrap' as const,
            cursor: 'pointer',
          };

          if (isInternalLink) {
            // لینک داخلی - از button با onClick استفاده می‌کنیم
            return (
              <button
                key={obj.id || index}
                type="button"
                style={applyStyle(
                  {
                    ...linkStyle,
                    zIndex: 9999,
                    pointerEvents: 'auto',
                    border: 'none',
                    background: 'none',
                    padding: 0,
                    cursor: 'pointer',
                  },
                  obj,
                  index,
                )}
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  if (obj.linkUrl && onLinkClick) {
                    onLinkClick(obj.linkUrl);
                  }
                }}
                onMouseDown={(e) => {
                  e.stopPropagation();
                }}
                onTouchStart={(e) => {
                  e.stopPropagation();
                }}
              >
                {obj.text || obj.linkUrl || ''}
              </button>
            );
          } else {
            // لینک خارجی - از <a> با target="_blank" استفاده می‌کنیم
            return (
              <a
                key={obj.id || index}
                href={obj.linkUrl || '#'}
                target="_blank"
                rel="noopener noreferrer"
                style={applyStyle(
                  {
                    ...linkStyle,
                    zIndex: 9999,
                    pointerEvents: 'auto',
                  },
                  obj,
                  index,
                )}
                onClick={(e) => {
                  e.stopPropagation();
                }}
                onMouseDown={(e) => {
                  e.stopPropagation();
                }}
              >
                {obj.text || obj.linkUrl || ''}
              </a>
            );
          }
        }

        case 'rectangle': {
          if (obj.shapeType === 'circle') {
            // در editor، circle با مرکز در x, y رندر می‌شود (radius = width/2)
            // در dataTransformer از گوشه بالا-چپ به مرکز تبدیل شده است
            const radius = ((obj.width || 100) / 2) * scale;
            const centerX = (obj.x || 0) * scale;
            const centerY = (obj.y || 0) * scale;

            return (
              <div
                key={obj.id || index}
                style={applyStyle(
                  {
                    position: 'absolute',
                    left: `${centerX - radius}px`,
                    top: `${centerY - radius}px`,
                    width: `${radius * 2}px`,
                    height: `${radius * 2}px`,
                    borderRadius: '50%',
                    ...objectFillStyle,
                    border: hasStroke && obj.stroke
                      ? `${actualStrokeWidth * scale}px solid ${obj.stroke}`
                      : 'none',
                    boxSizing: 'border-box',
                    opacity: (obj.opacity ?? 100) / 100,
                    transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
                    transformOrigin: 'center center',
                    zIndex: index, // برای حفظ ترتیب رندر
                  },
                  obj,
                  index,
                  { transformOrigin: 'center center' },
                )}
              />
            );
          }

          if (obj.shapeType === 'triangle') {
            // در editor، triangle با مرکز در x + width/2, y + height/2 رندر می‌شود
            // RegularPolygon در Konva یک مثلث متساوی‌الاضلاع است با radius از مرکز تا رأس
            // radius باید بر اساس ابعاد اصلی (قبل از scale) محاسبه شود
            const baseWidth = obj.width || 100;
            const baseHeight = obj.height || 100;
            const baseRadius = Math.min(baseWidth, baseHeight) / 2;
            const radius = baseRadius * scale;

            // محاسبه مرکز مثلث (مثل editor)
            const centerX = ((obj.x || 0) + baseWidth / 2) * scale;
            const centerY = ((obj.y || 0) + baseHeight / 2) * scale;

            // برای مثلث متساوی‌الاضلاع، size = radius * 2
            const size = radius * 2;
            const halfSize = size / 2;

            // نقاط مثلث متساوی‌الاضلاع: رأس بالا (50%, 0%), پایین چپ (0%, 100%), پایین راست (100%, 100%)
            // اما برای مثلث متساوی‌الاضلاع واقعی، باید ارتفاع را محاسبه کنیم
            // ارتفاع مثلث متساوی‌الاضلاع = size * sqrt(3) / 2 ≈ size * 0.866
            const triangleHeight = size * 0.8660254; // sqrt(3) / 2
            const topY = (size - triangleHeight) / 2;
            const bottomY = size - topY;
            const halfWidth = triangleHeight * 0.5773503; // tan(30°) = 1/sqrt(3)

            const topX = halfSize;
            const bottomLeftX = halfSize - halfWidth;
            const bottomRightX = halfSize + halfWidth;

            const strokeWidth = hasStroke && obj.stroke ? actualStrokeWidth * scale : 0;
            const fillColor = obj.fill || '#000000';
            const strokeColor = obj.stroke || 'transparent';
            const gradientId = `triangle-grad-${obj.id}-${index}`;

            return (
              <svg
                key={obj.id || index}
                style={applyStyle(
                  {
                    position: 'absolute',
                    left: `${centerX - radius}px`,
                    top: `${centerY - radius}px`,
                    width: `${size}px`,
                    height: `${size}px`,
                    opacity: (obj.opacity ?? 100) / 100,
                    transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
                    transformOrigin: 'center center',
                    zIndex: index,
                    overflow: 'visible',
                  },
                  obj,
                  index,
                  { transformOrigin: 'center center' },
                )}
                viewBox={`0 0 ${size} ${size}`}
              >
                {obj.fillType === 'gradient' && obj.gradient ? (
                  <defs>
                    <linearGradient
                      id={gradientId}
                      gradientUnits="userSpaceOnUse"
                      x1="0"
                      y1="0"
                      x2={size}
                      y2={size}
                      gradientTransform={`rotate(${obj.gradient.angle}, ${size / 2}, ${size / 2})`}
                    >
                      <stop offset="0%" stopColor={obj.gradient.from} />
                      <stop offset="100%" stopColor={obj.gradient.to} />
                    </linearGradient>
                  </defs>
                ) : null}
                <polygon
                  points={`${topX},${topY} ${bottomLeftX},${bottomY} ${bottomRightX},${bottomY}`}
                  fill={obj.fillType === 'gradient' && obj.gradient ? `url(#${gradientId})` : fillColor}
                  stroke={strokeColor}
                  strokeWidth={strokeWidth}
                />
              </svg>
            );
          }

          if (obj.shapeType === 'abstract') {
            // در editor، abstract (star) با مرکز در x + width/2, y + height/2 رندر می‌شود
            const width = (obj.width || 100) * scale;
            const height = (obj.height || 100) * scale;
            const baseRadius = Math.min(width, height) / 2;
            const abstractScale = 0.85;
            const radius = baseRadius * abstractScale;
            const centerX = (obj.x || 0) * scale + width / 2;
            const centerY = (obj.y || 0) * scale + height / 2;

            return (
              <div
                key={obj.id || index}
                style={applyStyle(
                  {
                    position: 'absolute',
                    left: `${centerX - radius}px`,
                    top: `${centerY - radius}px`,
                    width: `${radius * 2}px`,
                    height: `${radius * 2}px`,
                    clipPath: 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)',
                    ...objectFillStyle,
                    border: obj.stroke
                      ? `${(obj.strokeWidth || 1) * scale}px solid ${obj.stroke}`
                      : 'none',
                    boxSizing: 'border-box',
                    opacity: (obj.opacity ?? 100) / 100,
                    transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
                    transformOrigin: 'center center',
                  },
                  obj,
                  index,
                  { transformOrigin: 'center center' },
                )}
              />
            );
          }

          // Rectangle عادی
          const shapeStyle: React.CSSProperties = {
            ...baseStyle,
            width: `${(obj.width || 100) * scale}px`,
            height: `${(obj.height || 100) * scale}px`,
            ...objectFillStyle,
            borderRadius: `${Math.max(0, (obj.borderRadius || 0) * scale)}px`,
            border: hasStroke && obj.stroke
              ? `${actualStrokeWidth * scale}px solid ${obj.stroke}`
              : 'none',
            boxSizing: 'border-box',
            zIndex: index, // برای حفظ ترتیب رندر
          };

          return <div key={obj.id || index} style={applyStyle(shapeStyle, obj, index)} />;
        }

        case 'line': {
          // در EditorObject، width و height به عنوان مختصات انتهایی استفاده می‌شوند
          // در Konva Line، points به صورت [0, 0, endX - startX, endY - startY] است
          const startX = (obj.x || 0) * scale;
          const startY = (obj.y || 0) * scale;
          // width و height مستقیماً مختصات نقطه پایان هستند
          const endX = (obj.width ?? obj.x ?? 0) * scale;
          const endY = (obj.height ?? obj.y ?? 0) * scale;
          const dx = endX - startX;
          const dy = endY - startY;
          const lineLength = Math.sqrt(dx * dx + dy * dy);
          const lineAngle = Math.atan2(dy, dx) * (180 / Math.PI);

          return (
            <div
              key={obj.id || index}
              style={applyStyle(
                {
                  position: 'absolute',
                  left: `${startX}px`,
                  top: `${startY}px`,
                  width: `${lineLength}px`,
                  height: `${(obj.strokeWidth || 2) * scale}px`,
                  backgroundColor: obj.stroke || '#000000',
                  opacity: (obj.opacity ?? 100) / 100,
                  transform: `rotate(${lineAngle}deg)`,
                  transformOrigin: 'left center',
                },
                obj,
                index,
                { rotationDeg: lineAngle, transformOrigin: 'left center' },
              )}
            />
          );
        }

        case 'arrow': {
          // در EditorObject، width و height به عنوان مختصات انتهایی استفاده می‌شوند
          // در Konva Arrow، points به صورت [0, 0, endX - startX, endY - startY] است
          const startX = (obj.x || 0) * scale;
          const startY = (obj.y || 0) * scale;
          // width و height مستقیماً مختصات نقطه پایان هستند
          const endX = (obj.width ?? obj.x ?? 0) * scale;
          const endY = (obj.height ?? obj.y ?? 0) * scale;
          const dx = endX - startX;
          const dy = endY - startY;
          const arrowLength = Math.sqrt(dx * dx + dy * dy);
          const arrowAngle = Math.atan2(dy, dx) * (180 / Math.PI);
          const strokeWidth = (obj.strokeWidth || 4) * scale;

          return (
            <div
              key={obj.id || index}
              style={applyStyle(
                {
                  position: 'absolute',
                  left: `${startX}px`,
                  top: `${startY}px`,
                  width: `${arrowLength}px`,
                  height: `${strokeWidth}px`,
                  backgroundColor: obj.stroke || '#000000',
                  opacity: (obj.opacity ?? 100) / 100,
                  transform: `rotate(${arrowAngle}deg)`,
                  transformOrigin: 'left center',
                },
                obj,
                index,
                { rotationDeg: arrowAngle, transformOrigin: 'left center' },
              )}
            >
              <div
                style={{
                  position: 'absolute',
                  right: `-${strokeWidth * 2}px`,
                  top: '50%',
                  transform: 'translateY(-50%)',
                  width: 0,
                  height: 0,
                  borderTop: `${strokeWidth * 2}px solid transparent`,
                  borderBottom: `${strokeWidth * 2}px solid transparent`,
                  borderLeft: `${strokeWidth * 2}px solid ${obj.stroke || '#000000'}`,
                }}
              />
            </div>
          );
        }

        case 'custom-shape': {
          const rawPoints = obj.points ?? [];
          const isClosed = obj.closed ?? true;
          const minLength = isClosed ? 6 : 4;
          if (rawPoints.length < minLength) return null;

          const width = (obj.width || 100) * scale;
          const height = (obj.height || 100) * scale;
          const pointsStr = Array.from(
            { length: rawPoints.length / 2 },
            (_, i) => `${rawPoints[i * 2] * scale},${rawPoints[i * 2 + 1] * scale}`,
          ).join(' ');

          const strokeWidth = hasStroke && obj.stroke ? actualStrokeWidth * scale : 0;
          const fillColor = obj.fill || '#3b82f6';
          const strokeColor = obj.stroke || 'transparent';
          const gradientId = `custom-shape-grad-${obj.id}-${index}`;

          return (
            <svg
              key={obj.id || index}
              style={applyStyle(
                {
                  position: 'absolute',
                  left: `${(obj.x || 0) * scale}px`,
                  top: `${(obj.y || 0) * scale}px`,
                  width: `${width}px`,
                  height: `${height}px`,
                  opacity: (obj.opacity ?? 100) / 100,
                  transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
                  transformOrigin: 'top left',
                  zIndex: index,
                  overflow: 'visible',
                },
                obj,
                index,
              )}
              viewBox={`0 0 ${width} ${height}`}
            >
              {obj.fillType === 'gradient' && obj.gradient ? (
                <defs>
                  <linearGradient
                    id={gradientId}
                    gradientUnits="userSpaceOnUse"
                    x1="0"
                    y1="0"
                    x2={width}
                    y2={height}
                    gradientTransform={`rotate(${obj.gradient.angle}, ${width / 2}, ${height / 2})`}
                  >
                    <stop offset="0%" stopColor={obj.gradient.from} />
                    <stop offset="100%" stopColor={obj.gradient.to} />
                  </linearGradient>
                </defs>
              ) : null}
              {isClosed ? (
                <polygon
                  points={pointsStr}
                  fill={obj.fillType === 'gradient' && obj.gradient ? `url(#${gradientId})` : fillColor}
                  stroke={strokeColor}
                  strokeWidth={strokeWidth}
                />
              ) : (
                <polyline
                  points={pointsStr}
                  fill="none"
                  stroke={strokeColor}
                  strokeWidth={strokeWidth}
                />
              )}
            </svg>
          );
        }

        case 'grid': {
          if (!obj.tableData) return null;

          const { rows, cols, cells, cellWidth, cellHeight, stroke, strokeWidth } =
            obj.tableData;

          return (
            <div
              key={obj.id || index}
              style={applyStyle(
                {
                  ...baseStyle,
                  display: 'grid',
                  gridTemplateRows: `repeat(${rows}, ${cellHeight * scale}px)`,
                  gridTemplateColumns: `repeat(${cols}, ${cellWidth * scale}px)`,
                  border: stroke ? `${(strokeWidth || 1) * scale}px solid ${stroke}` : 'none',
                },
                obj,
                index,
              )}
            >
              {Array.from({ length: rows }).map((_, rowIndex) =>
                Array.from({ length: cols }).map((_, colIndex) => {
                  const cellId = `cell-${rowIndex}-${colIndex}`;
                  const cell = cells[cellId];

                  return (
                    <div
                      key={cellId}
                      style={{
                        border: stroke ? `${(strokeWidth || 1) * scale}px solid ${stroke}` : `${1 * scale}px solid #ccc`,
                        backgroundColor: cell?.background || '#ffffff',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        padding: `${4 * scale}px`,
                        fontSize: `${14 * scale}px`,
                      }}
                    >
                      {cell?.text || ''}
                    </div>
                  );
                })
              )}
            </div>
          );
        }

        default:
          return null;
      }
    };

    const renderObject = (obj: EditorObject, index: number, allElements: EditorObject[]) => {
      if (obj.isMask) return null;

      const maskShape = obj.maskId
        ? allElements.find((m) => m.id === obj.maskId)
        : null;

      if (!maskShape) {
        return renderObjectContent(obj, index);
      }

      const layout = getMaskedLayout(obj, maskShape, scale);
      const unionLeft = layout.left / scale;
      const unionTop = layout.top / scale;

      const content = renderObjectContent(
        { ...obj, x: (obj.x || 0) - unionLeft, y: (obj.y || 0) - unionTop },
        index,
        { skipEntrance: true },
      );

      if (!content) return null;

      const wrapperStyle: React.CSSProperties = {
        position: 'absolute',
        left: `${layout.left}px`,
        top: `${layout.top}px`,
        width: `${layout.width}px`,
        height: `${layout.height}px`,
        overflow: 'visible',
        zIndex: index,
        ...getMaskImageStyle(obj, maskShape, scale, layout),
      };

      return (
        <div
          key={`masked-${obj.id || index}`}
          style={withEntrance(wrapperStyle, obj, index)}
        >
          {content}
        </div>
      );
    };

    const width = pageWidth ?? 794 * scale;
    const height = pageHeight ?? 1123 * scale;

    const effectiveBackgroundType = backgroundType ?? page.backgroundType ?? 'color';
    const effectiveBackgroundColor = backgroundColor ?? page.backgroundColor ?? '#ffffff';
    const effectiveBackgroundGradient = backgroundGradient ?? page.backgroundGradient;
    const effectiveBackgroundImageUrl = backgroundImageUrl ?? page.backgroundImageUrl ?? '';

    const bgStyle: React.CSSProperties =
      effectiveBackgroundType === 'image' && effectiveBackgroundImageUrl
        ? {
            backgroundImage: `url(${effectiveBackgroundImageUrl})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
          }
        : effectiveBackgroundType === 'gradient' && effectiveBackgroundGradient
          ? {
              backgroundImage: toCssLinearGradient(effectiveBackgroundGradient),
            }
        : { backgroundColor: effectiveBackgroundColor };

    return (
      <div
        ref={ref}
        dir="rtl"
        className="page"
        data-density={useHardPage ? 'hard' : 'soft'}
        style={{
          position: 'relative',
          overflow: 'hidden',
          boxSizing: 'border-box',
          width: `${width}px`,
          height: `${height}px`,
          zIndex: 1,
          ...(useHardPage
            ? { backgroundColor: effectiveBackgroundColor, ...bgStyle }
            : {}),
        }}
      >
        {!useHardPage && (
          <div
            aria-hidden
            style={{
              position: 'absolute',
              inset: 0,
              ...bgStyle,
              pointerEvents: 'none',
              zIndex: 0,
            }}
          />
        )}
        <div style={{ position: 'absolute', inset: 0, zIndex: 1 }}>
          {page.elements.map((element, index) => renderObject(element, index, page.elements))}
        </div>
        {useHardPage && showPaperShadow && <div aria-hidden className="page-paper-shadow" />}
      </div>
    );
  });

BookPage.displayName = 'BookPage';

export default BookPage;