'use client';

import React from 'react';
import { useSliderEditor } from './SliderEditorContext';
import styles from './SliderPreview.module.css';

export default function SliderPreview() {
  const { sliderContent, formState } = useSliderEditor();

  const currentSlide = sliderContent.slides[formState.currentSlideIndex];
  if (!currentSlide) return null;

  const getTextStyle = (formatting: { color?: string; bold?: boolean; italic?: boolean }) => {
    return {
      color: formatting.color || '#ffffff',
      fontWeight: formatting.bold ? 'bold' : 'normal',
      fontStyle: formatting.italic ? 'italic' : 'normal',
      textAlign: 'left' as const,
    };
  };

  const hasTextContent =
    currentSlide.headline || currentSlide.subheading || currentSlide.button.text;

  return (
    <div className={styles.previewContainer}>
      <div className={styles.sliderFrame}>
        {/* Hero Slide Preview */}
        {currentSlide.image.url ? (
          <div
            className={styles.slide}
            style={{
              backgroundImage: `url(${currentSlide.image.url})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }}
          >
            {/* Dark Overlay (only shown when text is present) */}
            {hasTextContent && <div className={styles.overlay} />}

            {/* Text Content */}
            <div className={styles.slideContent}>
              <div
                style={{
                  width: '550px',
                  marginLeft: currentSlide.alignment === 'right' ? 'auto' : '0',
                  marginRight: currentSlide.alignment === 'left' ? 'auto' : '0',
                }}
              >
                {currentSlide.headline && (
                  <h2
                    className={styles.headline}
                    style={getTextStyle(currentSlide.headlineFormatting)}
                  >
                    {currentSlide.headline}
                  </h2>
                )}

                {currentSlide.subheading && (
                  <p
                    className={styles.subheading}
                    style={getTextStyle(currentSlide.subheadingFormatting)}
                  >
                    {currentSlide.subheading}
                  </p>
                )}

                {currentSlide.button.text && (
                  <a href={currentSlide.button.url || '#'} className={styles.button}>
                    {currentSlide.button.text}
                  </a>
                )}
              </div>
            </div>
          </div>
        ) : (
          <div className={styles.emptySlide}>
            <div className={styles.emptyMessage}>
              <p>No image selected</p>
              <p className={styles.emptyHint}>Add an image from the form</p>
            </div>
          </div>
        )}
      </div>

      {/* Desktop Size Indicator */}
      <div className={styles.sizeIndicator}>Desktop Preview (1920×1080)</div>
    </div>
  );
}