/**
 * InfoPanelOverlay Component
 *
 * Overlay panel that displays header, title, info spans, text, and image cards.
 * Section-based structure similar to Gallery for consistent styling.
 * Positioned absolutely within the canvas (not fullscreen).
 * Supports keyboard navigation, click outside to close, and mobile touch.
 */

import React, {
  useState,
  useEffect,
  useCallback,
  useRef,
  useMemo,
} from 'react';
import type {
  CanvasElement,
  InfoPanelImage,
  InfoPanelSectionInstance,
} from '../../types/constructor';
import { getInfoPanelSections } from '../../types/constructor';
import { resolveAssetPlaybackUrl } from '../../lib/assetUrl';
import {
  buildInfoPanelHeaderStyle,
  buildInfoPanelTitleStyle,
  buildInfoPanelTextStyle,
  buildInfoPanelSpanStyle,
  buildInfoPanelSpanGridStyleWithSection,
  buildInfoPanelCardStyle,
  buildInfoPanelCardTitleStyle,
  buildInfoPanelCardGridStyleWithSection,
  buildInfoPanelWrapperStyle,
  buildImagesPreviewStyle,
} from '../../lib/infoPanelSectionStyles';

interface InfoPanelOverlayProps {
  element: CanvasElement;
  onClose: () => void;
  resolveUrl?: (url: string | undefined) => string;
  letterboxStyles?: React.CSSProperties;
  /** CSS custom properties including --cu for canvas units */
  cssVars?: React.CSSProperties;
  /** Callback when an image/360 is clicked. Pass null to close the detail panel. */
  onImageClick: (image: InfoPanelImage | null) => void;
  /** Callback when an image is selected in the images section preview */
  onSelectImage?: (imageId: string) => void;
  isEditMode?: boolean;
  /** Callback when panel position changes (edit mode only) */
  onPanelPositionChange?: (xPercent: number, yPercent: number) => void;
  /** Currently active 360° item ID (for toggle state sync with parent) */
  active360ItemId?: string | null;
}

const InfoPanelOverlay: React.FC<InfoPanelOverlayProps> = ({
  element,
  onClose,
  resolveUrl,
  letterboxStyles,
  cssVars,
  onImageClick,
  onSelectImage,
  isEditMode = false,
  onPanelPositionChange,
  active360ItemId,
}) => {
  const resolve = resolveUrl ?? resolveAssetPlaybackUrl;
  const overlayRef = useRef<HTMLDivElement>(null);
  const panelRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const [isVisible, setIsVisible] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const dragStartRef = useRef<{
    x: number;
    y: number;
    panelX: number;
    panelY: number;
  } | null>(null);

  // Track selected image per section (local UI state)
  const [selectedImagePerSection, setSelectedImagePerSection] = useState<
    Record<string, string>
  >({});

  // Section styles computed from element settings
  const headerStyle = useMemo(
    () => buildInfoPanelHeaderStyle(element),
    [element],
  );
  const titleStyle = useMemo(
    () => buildInfoPanelTitleStyle(element),
    [element],
  );
  const textStyle = useMemo(() => buildInfoPanelTextStyle(element), [element]);
  const spanStyle = useMemo(() => buildInfoPanelSpanStyle(element), [element]);
  const cardStyle = useMemo(() => buildInfoPanelCardStyle(element), [element]);
  const cardTitleStyle = useMemo(
    () => buildInfoPanelCardTitleStyle(element),
    [element],
  );
  const wrapperStyle = useMemo(
    () => buildInfoPanelWrapperStyle(element),
    [element],
  );
  const imagesPreviewStyle = useMemo(
    () => buildImagesPreviewStyle(element),
    [element],
  );

  // Get section instances
  const sections = useMemo(() => getInfoPanelSections(element), [element]);

  // Fade in animation
  useEffect(() => {
    requestAnimationFrame(() => setIsVisible(true));
  }, []);

  // Keyboard navigation (ESC to close)
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [onClose]);

  // Focus trap
  useEffect(() => {
    const panel = panelRef.current;
    if (!panel) return;

    // Focus the panel on mount
    panel.focus();
  }, []);

  // Drag handling for edit mode
  const handleDragStart = useCallback(
    (e: React.MouseEvent) => {
      if (!isEditMode || !onPanelPositionChange) return;
      e.preventDefault();
      e.stopPropagation();

      const panelX = element.panelXPercent ?? 50;
      const panelY = element.panelYPercent ?? 50;

      dragStartRef.current = {
        x: e.clientX,
        y: e.clientY,
        panelX,
        panelY,
      };
      setIsDragging(true);
    },
    [
      isEditMode,
      onPanelPositionChange,
      element.panelXPercent,
      element.panelYPercent,
    ],
  );

  useEffect(() => {
    if (!isEditMode || !isDragging || !onPanelPositionChange) return;

    const handleMouseMove = (e: MouseEvent) => {
      if (!dragStartRef.current || !containerRef.current) return;

      const container = containerRef.current;
      const rect = container.getBoundingClientRect();

      const deltaX = e.clientX - dragStartRef.current.x;
      const deltaY = e.clientY - dragStartRef.current.y;

      // Convert pixel delta to percentage
      const deltaXPercent = (deltaX / rect.width) * 100;
      const deltaYPercent = (deltaY / rect.height) * 100;

      const newX = Math.max(
        0,
        Math.min(100, dragStartRef.current.panelX + deltaXPercent),
      );
      const newY = Math.max(
        0,
        Math.min(100, dragStartRef.current.panelY + deltaYPercent),
      );

      onPanelPositionChange(newX, newY);
    };

    const handleMouseUp = () => {
      dragStartRef.current = null;
      setIsDragging(false);
    };

    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseup', handleMouseUp);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isEditMode, isDragging, onPanelPositionChange]);

  // Handle backdrop click (close when clicking outside panel)
  const handleBackdropClick = useCallback(
    (e: React.MouseEvent) => {
      if (e.target === overlayRef.current && !isEditMode) {
        onClose();
      }
    },
    [onClose, isEditMode],
  );

  // Handle touch on backdrop
  const handleBackdropTouch = useCallback(
    (e: React.TouchEvent) => {
      if (e.target === overlayRef.current && !isEditMode) {
        onClose();
      }
    },
    [onClose, isEditMode],
  );

  // Extract panel styling from element
  const panelXPercent = element.panelXPercent ?? 50;
  const panelYPercent = element.panelYPercent ?? 50;
  const panelWidth = element.panelWidth ?? '400';
  const panelHeight = element.panelHeight ?? 'auto';
  const panelBackgroundColor =
    element.panelBackgroundColor ?? 'rgba(0, 0, 0, 0.85)';
  const panelBorderRadius = element.panelBorderRadius ?? '12';
  const panelBorderWidth = element.panelBorderWidth || '0';
  const panelBorderColor = element.panelBorderColor || '#ffffff';
  const panelBorderStyle = element.panelBorderStyle || 'solid';
  const panelPadding = element.panelPadding ?? '20';
  const panelBackdropBlur = element.panelBackdropBlur ?? '10px';
  const panelTitle = element.panelTitle ?? 'Information';
  const panelText = element.panelText ?? '';
  const panelOverlayColor = element.panelOverlayColor ?? 'rgba(0, 0, 0, 0.3)';

  // Check if overlay should be visible
  const isOverlayVisible =
    panelOverlayColor !== 'transparent' && panelOverlayColor !== 'none';

  // Convert numeric values to canvas units for responsive scaling
  const toCU = (value: string): string => {
    const trimmed = value.trim();
    // Zero doesn't need a unit
    if (trimmed === '0') return '0';
    // Already uses canvas units - return as-is
    if (trimmed.includes('var(--cu') || trimmed.includes('--cu'))
      return trimmed;
    // CSS functions (calc, var, min, max, etc.) - return as-is
    if (/^(calc|var|min|max|clamp)\(/i.test(trimmed)) return trimmed;
    // Already has a unit suffix - return as-is
    if (/[a-z%]+$/i.test(trimmed)) return trimmed;
    // Parse numeric value and convert to canvas units
    const num = parseFloat(trimmed);
    if (!Number.isFinite(num)) return trimmed;
    return `calc(${num} * var(--cu, 1px))`;
  };

  // Panel style with responsive constraints
  const panelStyle: React.CSSProperties = {
    position: 'absolute',
    left: `${panelXPercent}%`,
    top: `${panelYPercent}%`,
    transform: 'translate(-50%, -50%)',
    width:
      panelWidth === 'auto'
        ? 'auto'
        : `min(${toCU(panelWidth)}, calc(100vw - 32px))`,
    maxHeight:
      panelHeight === 'auto'
        ? 'calc(100dvh - 64px)'
        : `min(${toCU(panelHeight)}, calc(100dvh - 64px))`,
    backgroundColor: panelBackgroundColor,
    borderRadius: toCU(panelBorderRadius),
    border:
      panelBorderWidth !== '0' && panelBorderWidth
        ? `${toCU(panelBorderWidth)} ${panelBorderStyle} ${panelBorderColor}`
        : 'none',
    padding: toCU(panelPadding),
    WebkitBackdropFilter: `blur(${panelBackdropBlur})`,
    backdropFilter: `blur(${panelBackdropBlur})`,
    overflowY: 'auto',
    opacity: isVisible ? 1 : 0,
    transition: 'opacity 200ms ease-out',
    // Safe area for notched devices
    paddingTop: `max(${toCU(panelPadding)}, env(safe-area-inset-top))`,
    paddingRight: `max(${toCU(panelPadding)}, env(safe-area-inset-right))`,
    paddingBottom: `max(${toCU(panelPadding)}, env(safe-area-inset-bottom))`,
    paddingLeft: `max(${toCU(panelPadding)}, env(safe-area-inset-left))`,
  };

  return (
    <>
      {/* Backdrop overlay - separate from panel for correct z-index stacking */}
      <div
        ref={overlayRef}
        className='fixed inset-0 z-[51] overflow-hidden'
        style={{
          backgroundColor: isOverlayVisible ? panelOverlayColor : 'transparent',
          pointerEvents: isEditMode ? 'none' : 'auto',
        }}
        onClick={handleBackdropClick}
        onTouchEnd={handleBackdropTouch}
      />

      {/* Inner container constrained to canvas bounds */}
      <div
        ref={containerRef}
        className='fixed inset-0 z-[53] overflow-hidden pointer-events-none'
        style={{
          ...cssVars,
          ...(letterboxStyles || { position: 'absolute', inset: 0 }),
        }}
      >
        {/* Info Panel */}
        <div
          ref={panelRef}
          role='dialog'
          aria-modal='true'
          aria-labelledby='info-panel-title'
          tabIndex={-1}
          style={{
            ...panelStyle,
            cursor:
              isEditMode && onPanelPositionChange
                ? isDragging
                  ? 'grabbing'
                  : 'grab'
                : undefined,
            pointerEvents: 'auto', // Ensure panel receives events
          }}
          onClick={(e) => e.stopPropagation()}
          onTouchEnd={(e) => e.stopPropagation()}
        >
          {/* Drag handle header (edit mode only) */}
          {isEditMode && onPanelPositionChange && (
            <div
              className='absolute top-0 left-0 right-0 h-8 cursor-grab active:cursor-grabbing rounded-t-xl'
              style={{
                borderRadius: `${toCU(panelBorderRadius)} ${toCU(panelBorderRadius)} 0 0`,
              }}
              onMouseDown={handleDragStart}
            >
              {/* Drag indicator dots */}
              <div className='flex items-center justify-center h-full gap-1'>
                <div className='w-8 h-1 rounded-full bg-white/30' />
              </div>
            </div>
          )}

          {/* Close button */}
          <button
            type='button'
            className='absolute top-2 right-2 p-1 rounded-full text-white/70 hover:text-white hover:bg-white/10 transition-colors z-10'
            onClick={onClose}
            aria-label='Close panel'
          >
            <svg
              xmlns='http://www.w3.org/2000/svg'
              fill='none'
              viewBox='0 0 24 24'
              strokeWidth={2}
              stroke='currentColor'
              className='w-5 h-5'
            >
              <path
                strokeLinecap='round'
                strokeLinejoin='round'
                d='M6 18 18 6M6 6l12 12'
              />
            </svg>
          </button>

          {/* Content wrapper - disable pointer events in edit mode for dragging */}
          <div
            style={{
              pointerEvents: isEditMode ? 'none' : 'auto',
              display: 'flex',
              flexDirection: 'column',
              gap: toCU(element.infoPanelSectionGap ?? '12'),
            }}
          >
            {/* Render sections in dynamic order using section instances */}
            {sections.map((section) => {
              switch (section.type) {
                case 'header': {
                  // Header section: use section-level data or fall back to element-level
                  const headerImageUrl =
                    section.headerImageUrl ?? element.infoPanelHeaderImageUrl;
                  const headerText =
                    section.headerText ?? element.infoPanelHeaderText;

                  // Image takes priority, otherwise render text
                  if (headerImageUrl) {
                    return (
                      <div
                        key={section.id}
                        style={{
                          ...headerStyle,
                          padding: 0,
                          overflow: 'hidden',
                        }}
                      >
                        {/* eslint-disable-next-line @next/next/no-img-element */}
                        <img
                          src={resolve(headerImageUrl)}
                          alt=''
                          style={{
                            width: '100%',
                            height: '100%',
                            objectFit: 'cover',
                          }}
                          draggable={false}
                        />
                      </div>
                    );
                  }
                  if (headerText) {
                    return (
                      <div key={section.id} style={headerStyle}>
                        {headerText}
                      </div>
                    );
                  }
                  return null;
                }

                case 'title': {
                  // Use section-level title or fall back to element-level
                  const titleContent = section.title ?? panelTitle;
                  if (!titleContent) return null;
                  return (
                    <h2
                      key={section.id}
                      id='info-panel-title'
                      style={{
                        ...titleStyle,
                        marginTop:
                          isEditMode && onPanelPositionChange
                            ? '16px'
                            : undefined,
                      }}
                    >
                      {titleContent}
                    </h2>
                  );
                }

                case 'text': {
                  // Use section-level text or fall back to element-level
                  const textContent = section.text ?? panelText;
                  if (!textContent) return null;
                  return (
                    <p key={section.id} style={textStyle}>
                      {textContent}
                    </p>
                  );
                }

                case 'spans': {
                  // Use section-level spans
                  const sectionSpans = section.spans || [];
                  if (sectionSpans.length === 0) return null;

                  // Build grid style with per-section settings
                  const spanGridStyle = buildInfoPanelSpanGridStyleWithSection(
                    element,
                    section,
                  );

                  return (
                    <div key={section.id} style={spanGridStyle}>
                      {sectionSpans.map((span) => (
                        <div key={span.id} style={spanStyle}>
                          {span.iconUrl ? (
                            /* eslint-disable-next-line @next/next/no-img-element */
                            <img
                              src={resolve(span.iconUrl)}
                              alt={span.text || ''}
                              style={{
                                width: '1em',
                                height: '1em',
                                objectFit: 'contain',
                              }}
                              draggable={false}
                            />
                          ) : (
                            span.text
                          )}
                        </div>
                      ))}
                    </div>
                  );
                }

                case 'cards': {
                  // Use section-level images
                  const sectionImages = section.images || [];
                  if (sectionImages.length === 0) return null;

                  // Build grid style with per-section settings
                  const cardGridStyle = buildInfoPanelCardGridStyleWithSection(
                    element,
                    section,
                  );

                  return (
                    <div key={section.id} style={cardGridStyle}>
                      {sectionImages.map((image) => (
                        <button
                          key={image.id}
                          type='button'
                          style={{
                            ...cardStyle,
                            display: 'block', // Needed for aspectRatio to work on buttons
                            position: 'relative',
                            cursor: 'pointer',
                            border: 'none',
                            padding: 0,
                            overflow: 'hidden', // Respect borderRadius on children
                          }}
                          className='focus:outline-none'
                          onClick={() => onImageClick(image)}
                          aria-label={image.caption || 'View image'}
                        >
                          {image.itemType === '360' ? (
                            // Embed placeholder - shows globe icon
                            <div className='w-full h-full flex flex-col items-center justify-center text-white/60'>
                              <svg
                                xmlns='http://www.w3.org/2000/svg'
                                fill='none'
                                viewBox='0 0 24 24'
                                strokeWidth={1.5}
                                stroke='currentColor'
                                className='w-8 h-8 mb-1'
                              >
                                <path
                                  strokeLinecap='round'
                                  strokeLinejoin='round'
                                  d='M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5a17.92 17.92 0 0 1-8.716-4.247m0 0A8.966 8.966 0 0 1 3 12c0-1.97.633-3.79 1.706-5.27'
                                />
                              </svg>
                              <span className='text-xs'>360/Embed</span>
                            </div>
                          ) : image.imageUrl ? (
                            // Regular image thumbnail
                            // eslint-disable-next-line @next/next/no-img-element
                            <img
                              src={resolve(image.imageUrl)}
                              alt={image.caption || ''}
                              style={{
                                width: '100%',
                                height: '100%',
                                objectFit: 'cover',
                              }}
                              draggable={false}
                            />
                          ) : (
                            // Empty placeholder
                            <div className='w-full h-full flex items-center justify-center text-white/40'>
                              <svg
                                xmlns='http://www.w3.org/2000/svg'
                                fill='none'
                                viewBox='0 0 24 24'
                                strokeWidth={1.5}
                                stroke='currentColor'
                                className='w-8 h-8'
                              >
                                <path
                                  strokeLinecap='round'
                                  strokeLinejoin='round'
                                  d='m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'
                                />
                              </svg>
                            </div>
                          )}

                          {/* Card title overlay */}
                          {image.caption && (
                            <span
                              style={{
                                ...cardTitleStyle,
                                position: 'absolute',
                                bottom: 0,
                                left: 0,
                                right: 0,
                              }}
                            >
                              {image.caption}
                            </span>
                          )}
                        </button>
                      ))}
                    </div>
                  );
                }

                case 'images': {
                  // Use section-level images
                  const sectionImages = section.images || [];

                  // Filter to get only regular images (not 360°)
                  const imageItems = sectionImages.filter(
                    (img) => img.itemType !== '360',
                  );
                  // Get 360° items for trigger buttons
                  const triggerItems = sectionImages.filter(
                    (img) => img.itemType === '360',
                  );

                  // Nothing to show if no items
                  if (imageItems.length === 0 && triggerItems.length === 0)
                    return null;

                  // Use per-section selected state, fallback to first image
                  const selectedId =
                    selectedImagePerSection[section.id] || imageItems[0]?.id;
                  const selectedImage = imageItems.find(
                    (img) => img.id === selectedId,
                  );

                  // Handler to update selected image for this section
                  const handleSelectImage = (imageId: string) => {
                    setSelectedImagePerSection((prev) => ({
                      ...prev,
                      [section.id]: imageId,
                    }));
                    // Also call the optional external handler
                    onSelectImage?.(imageId);
                  };

                  // Build grid style with per-section settings
                  const gridStyle = buildInfoPanelCardGridStyleWithSection(
                    element,
                    section,
                  );

                  // Thumbnail style for grid items
                  const thumbnailStyle: React.CSSProperties = {
                    ...cardStyle,
                    display: 'block',
                    width: '100%',
                    cursor: 'pointer',
                    border: 'none',
                    padding: 0,
                    overflow: 'hidden',
                  };

                  return (
                    <div
                      key={section.id}
                      className='images-section'
                      style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: gridStyle.gap || 'calc(8 * var(--cu, 1px))',
                      }}
                    >
                      {/* Large Preview - always visible */}
                      <div
                        style={{
                          ...imagesPreviewStyle,
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                        }}
                      >
                        {selectedImage?.imageUrl ? (
                          // eslint-disable-next-line @next/next/no-img-element
                          <img
                            src={resolve(selectedImage.imageUrl)}
                            alt={selectedImage.caption || ''}
                            style={{
                              width: '100%',
                              height: '100%',
                              objectFit: 'contain',
                            }}
                            draggable={false}
                          />
                        ) : (
                          <div className='text-white/40 text-sm'>
                            {imageItems.length === 0
                              ? 'No images added'
                              : 'No image selected'}
                          </div>
                        )}
                      </div>

                      {/* Thumbnail Grid */}
                      <div style={gridStyle}>
                        {/* Image thumbnails - click to select for preview */}
                        {imageItems.map((img) => (
                          <button
                            key={img.id}
                            type='button'
                            style={{
                              ...thumbnailStyle,
                              opacity: img.id === selectedId ? 1 : 0.6,
                            }}
                            className='transition-opacity hover:opacity-100 focus:outline-none'
                            onClick={() => handleSelectImage(img.id)}
                            aria-label={img.caption || 'Select image'}
                            aria-pressed={img.id === selectedId}
                          >
                            {img.imageUrl ? (
                              // eslint-disable-next-line @next/next/no-img-element
                              <img
                                src={resolve(img.imageUrl)}
                                alt=''
                                style={{
                                  width: '100%',
                                  height: '100%',
                                  objectFit: 'cover',
                                }}
                                draggable={false}
                              />
                            ) : (
                              <div className='w-full h-full flex items-center justify-center text-white/40'>
                                <svg
                                  xmlns='http://www.w3.org/2000/svg'
                                  fill='none'
                                  viewBox='0 0 24 24'
                                  strokeWidth={1.5}
                                  stroke='currentColor'
                                  className='w-6 h-6'
                                >
                                  <path
                                    strokeLinecap='round'
                                    strokeLinejoin='round'
                                    d='m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'
                                  />
                                </svg>
                              </div>
                            )}
                          </button>
                        ))}

                        {/* 360° trigger buttons - click to open 360° view */}
                        {triggerItems.map((img) => (
                          <button
                            key={img.id}
                            type='button'
                            style={thumbnailStyle}
                            className='trigger-360 focus:outline-none'
                            onClick={() => {
                              // Toggle behavior: if already open, close; otherwise open
                              if (active360ItemId === img.id) {
                                onImageClick(null);
                              } else {
                                onImageClick(img);
                              }
                            }}
                            aria-label={
                              active360ItemId === img.id
                                ? 'Close 360° view'
                                : 'Open 360° view'
                            }
                            aria-pressed={active360ItemId === img.id}
                          >
                            {img.iconUrl ? (
                              // eslint-disable-next-line @next/next/no-img-element
                              <img
                                src={resolve(img.iconUrl)}
                                alt='360°'
                                style={{
                                  width: '100%',
                                  height: '100%',
                                  objectFit: 'contain',
                                }}
                                draggable={false}
                              />
                            ) : (
                              <div className='w-full h-full flex flex-col items-center justify-center text-white/60'>
                                <svg
                                  xmlns='http://www.w3.org/2000/svg'
                                  fill='none'
                                  viewBox='0 0 24 24'
                                  strokeWidth={1.5}
                                  stroke='currentColor'
                                  className='w-8 h-8 mb-1'
                                >
                                  <path
                                    strokeLinecap='round'
                                    strokeLinejoin='round'
                                    d='M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5a17.92 17.92 0 0 1-8.716-4.247m0 0A8.966 8.966 0 0 1 3 12c0-1.97.633-3.79 1.706-5.27'
                                  />
                                </svg>
                                <span className='text-xs'>360°</span>
                              </div>
                            )}
                          </button>
                        ))}
                      </div>
                    </div>
                  );
                }

                default:
                  return null;
              }
            })}
          </div>
        </div>
      </div>
    </>
  );
};

export default InfoPanelOverlay;