{% set c = module.content %}
{% set s = module.style %}
{% set o = module.overlay %}
{% set b = module.behavior %}
{% set spacing = module.spacing %}
{% set a = module.advanced %}

{# Build CSS classes #}
{% set module_classes = "video-embed" %}
{% set module_classes = module_classes ~ " video-embed--align-" ~ s.alignment %}
{% set module_classes = module_classes ~ " video-embed--play-" ~ o.play_button_style %}
{% if a.custom_class %}
  {% set module_classes = module_classes ~ " " ~ a.custom_class %}
{% endif %}

{# Determine thumbnail URL #}
{% if c.poster_image and c.poster_image.src %}
  {% set poster_src = c.poster_image.src %}
  {% if '../../images/' in poster_src %}
    {% set poster_src = get_asset_url(poster_src) %}
  {% endif %}
  {% set poster_width = c.poster_image.width|default(1280) %}
  {% set poster_height = c.poster_image.height|default(720) %}
{% elif c.video_source == "youtube" and c.video_id %}
  {% set poster_src = "https://img.youtube.com/vi/" ~ c.video_id ~ "/maxresdefault.jpg" %}
  {% set poster_width = 1280 %}
  {% set poster_height = 720 %}
{% elif c.video_source == "vimeo" and c.video_id %}
  {# Vimeo requires API call for thumbnail, use placeholder pattern #}
  {% set poster_src = "" %}
  {% set poster_width = 1280 %}
  {% set poster_height = 720 %}
{% endif %}

{# Determine embed URL #}
{% if c.video_source == "youtube" %}
  {% if b.privacy_mode %}
    {% set embed_domain = "www.youtube-nocookie.com" %}
  {% else %}
    {% set embed_domain = "www.youtube.com" %}
  {% endif %}
  {% set embed_url = "https://" ~ embed_domain ~ "/embed/" ~ c.video_id ~ "?autoplay=1&rel=0" %}
{% elif c.video_source == "vimeo" %}
  {% set embed_url = "https://player.vimeo.com/video/" ~ c.video_id ~ "?autoplay=1" %}
{% endif %}

<figure class="{{ module_classes }}"
        {% if a.custom_id %}id="{{ a.custom_id }}"{% endif %}
        style="
          --ve-aspect: {{ s.aspect_ratio }};
          --ve-max-width: {{ s.max_width }};
          --ve-radius: {{ s.border_radius }};
          --ve-play-size: {{ o.play_button_size }};
          --ve-play-color: {{ o.play_button_color.color }};
          --ve-play-bg: rgba({{ o.play_button_bg.color|convert_rgb|default('0, 0, 0', true) }}, {{ o.play_button_bg.opacity / 100 }});
          --ve-overlay: rgba({{ o.overlay_color.color|convert_rgb|default('0, 0, 0', true) }}, {{ o.overlay_color.opacity / 100 }});
          --ve-pt: {{ spacing.padding_top }};
          --ve-pb: {{ spacing.padding_bottom }};
        ">

  <div class="video-embed__wrapper video-embed__shadow--{{ s.shadow }}"
       data-source="{{ c.video_source }}"
       data-video-id="{{ c.video_id }}"
       data-embed-url="{{ embed_url }}">

    {# Facade: Thumbnail + Play button #}
    <button class="video-embed__facade" aria-label="Play video: {{ c.title|escape }}">
      {% if poster_src %}
        <img src="{{ poster_src }}"
             alt="{{ c.title|escape }}"
             width="{{ poster_width }}"
             height="{{ poster_height }}"
             loading="lazy"
             decoding="async"
             {% if c.video_source == "youtube" and c.video_id %}onerror="this.onerror=null;this.src='https://img.youtube.com/vi/{{ c.video_id }}/hqdefault.jpg';"{% endif %}
             class="video-embed__poster">
      {% else %}
        {# Fallback for Vimeo without custom thumbnail #}
        <div class="video-embed__poster video-embed__poster--placeholder"
             style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);">
          <span class="video-embed__poster-text">{{ c.title|escape }}</span>
        </div>
      {% endif %}

      {# Overlay #}
      <span class="video-embed__overlay" aria-hidden="true"></span>

      {# Play button #}
      <span class="video-embed__play" aria-hidden="true">
        {% if o.play_button_style == "minimal" %}
          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
            <path d="M8 5v14l11-7z"/>
          </svg>
        {% else %}
          <svg viewBox="0 0 68 68" fill="none">
            <circle cx="34" cy="34" r="34" fill="currentColor" class="video-embed__play-bg"/>
            <path d="M28 22L48 34L28 46V22Z" fill="currentColor" class="video-embed__play-icon"/>
          </svg>
        {% endif %}
      </span>
    </button>

    {# Video embed container (populated on click) #}
    <div class="video-embed__player"></div>
  </div>

  {% if c.caption %}
    <figcaption class="video-embed__caption">{{ c.caption|escape }}</figcaption>
  {% endif %}
</figure>

{% require_css %}
<style>
  .video-embed {
    padding: var(--ve-pt, 0) 0 var(--ve-pb, 0);
    margin: 0;
  }

  .video-embed--align-left { text-align: left; }
  .video-embed--align-center { text-align: center; }
  .video-embed--align-right { text-align: right; }

  .video-embed__wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: var(--ve-max-width, 100%);
    aspect-ratio: var(--ve-aspect, 16/9);
    border-radius: var(--ve-radius, 8px);
    overflow: hidden;
    background: #000;
  }

  .video-embed__shadow--sm { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
  .video-embed__shadow--md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
  .video-embed__shadow--lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }

  /* Facade (thumbnail + play button) */
  .video-embed__facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .video-embed__facade:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }

  .video-embed__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .video-embed__poster--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-embed__poster-text {
    color: rgba(255,255,255,0.5);
    font-size: 1.25rem;
  }

  .video-embed__overlay {
    position: absolute;
    inset: 0;
    background: var(--ve-overlay, rgba(0,0,0,0.2));
    transition: background 0.2s ease;
  }

  .video-embed__facade:hover .video-embed__overlay {
    background: rgba(0,0,0,0.3);
  }

  /* Play button */
  .video-embed__play {
    position: relative;
    z-index: 1;
    width: var(--ve-play-size, 68px);
    height: var(--ve-play-size, 68px);
    color: var(--ve-play-color, #fff);
    transition: transform 0.2s ease;
  }

  .video-embed__facade:hover .video-embed__play {
    transform: scale(1.1);
  }

  .video-embed__play svg {
    width: 100%;
    height: 100%;
  }

  .video-embed__play-bg {
    fill: var(--ve-play-bg, rgba(0,0,0,0.7));
  }

  .video-embed__play-icon {
    fill: var(--ve-play-color, #fff);
  }

  /* Minimal play button */
  .video-embed--play-minimal .video-embed__play {
    width: calc(var(--ve-play-size, 68px) * 0.7);
    height: calc(var(--ve-play-size, 68px) * 0.7);
    background: var(--ve-play-bg, rgba(0,0,0,0.7));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-embed--play-minimal .video-embed__play svg {
    width: 40%;
    height: 40%;
  }

  /* Rounded play button */
  .video-embed--play-rounded .video-embed__play-bg {
    rx: 12;
    ry: 12;
  }

  /* Player (visible after click) */
  .video-embed__player {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
  }

  .video-embed__player.active {
    display: block;
  }

  .video-embed__player iframe {
    width: 100%;
    height: 100%;
    border: none;
  }

  /* Caption */
  .video-embed__caption {
    color: var(--color-text-muted, #6b7280);
    font-size: 0.875rem;
    margin-top: 0.75rem;
    text-align: inherit;
  }

  /* Hide facade when playing */
  .video-embed__wrapper.playing .video-embed__facade {
    display: none;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .video-embed__play,
    .video-embed__overlay {
      transition: none;
    }
  }

  /* Print */
  @media print {
    .video-embed__wrapper {
      border: 1px solid #e5e7eb;
    }

    .video-embed__play {
      display: none;
    }

    .video-embed__poster-text::after {
      content: " (Video)";
    }
  }
</style>
{% end_require_css %}

{% require_js position="footer" defer=true %}
<script>
(function() {
  document.querySelectorAll('.video-embed__facade').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var wrapper = btn.closest('.video-embed__wrapper');
      var player = wrapper.querySelector('.video-embed__player');
      var embedUrl = wrapper.dataset.embedUrl;

      if (embedUrl && player) {
        var iframe = document.createElement('iframe');
        iframe.src = embedUrl;
        iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
        iframe.allowFullscreen = true;
        iframe.title = btn.getAttribute('aria-label').replace('Play video: ', '');

        player.appendChild(iframe);
        player.classList.add('active');
        wrapper.classList.add('playing');
      }
    });
  });
})();
</script>
{% end_require_js %}