{% extends 'base.html' %}
{% load static %}
{% block extra_head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/css/glightbox.min.css">
<style>
  .media-card {
    transition: all 0.3s ease;
  }
  .media-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
  }
  .media-card video {
    transition: all 0.3s ease;
  }
  .share-icons a {
    transition: transform 0.2s ease;
  }
  .share-icons a:hover {
    transform: scale(1.2);
  }

  /* Video player */
  .video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: #111;
  }
  .video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    background: #111;
  }

  /* Loading spinner for lazy videos */
  .video-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    z-index: 4;
    display: none;
  }
  .video-wrapper.loading .video-loader {
    display: block;
  }
  @keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }

  /* Custom play overlay (shown when paused) */
  .video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.9);
    color: #fff;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.25s ease;
    opacity: 1;
  }
  .video-play-btn:hover {
    background: rgba(106, 13, 173, 0.85);
    transform: translate(-50%, -50%) scale(1.08);
  }
  .video-play-btn.hidden {
    opacity: 0;
    pointer-events: none;
  }

  /* Fullscreen styles */
  .video-wrapper:fullscreen,
  .video-wrapper:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    background: #000;
  }
  .video-wrapper:fullscreen video,
  .video-wrapper:-webkit-full-screen video {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }

  video::-webkit-media-controls-panel {
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
  }

  @media (max-width: 768px) {
    .ratio.ratio-16x9 {
      height: 220px;
    }
    .media-card .card-body {
      padding: 1rem;
    }
    .video-play-btn {
      width: 48px;
      height: 48px;
      font-size: 1.2rem;
    }
  }
</style>
{% endblock %}
{% block content %}
<div class="container-fluid py-4">
  <!-- PROFILE HEADER -->
  <div class="card shadow-sm border-0 mb-4">
    <div class="card-body">
      <div class="d-flex flex-column flex-md-row justify-content-between align-items-start gap-3">
        <div class="flex-grow-1">
          <h2 class="mb-1">{{ profile.display_name|default:profile.user.username }}</h2>
          <p class="text-muted mb-2 lead">{{ profile.headline|default:"No headline provided" }}</p>
          <div class="d-md-flex flex-wrap gap-3 text-muted small">
            <span id="follower-count-display">👥 <strong>{{ profile.follower_count }}</strong> Followers</span>
            <span>📸 <strong>{{ profile.media_count }}</strong> Media</span>
            <span>🔒 {{ profile.visibility|title }}</span>
            {% if profile.user.is_verified %}<span class="text-success">✓ Verified</span>{% endif %}
          </div>
        </div>
        {% if profile.user != request.user %}
        <div class="d-flex flex-column flex-sm-row gap-2">
          <div id="follow-wrapper-{{ profile.user.username }}">
            {% include "core/partials/follow_button.html" with profile=profile following=is_following %}
          </div>
          {% if can_send_message %}
          <a href="{% url 'core:message_new_with_recipient' profile.user.username %}" class="btn btn-primary btn-sm">
            <i class="fas fa-paper-plane"></i> Message
          </a>
          {% endif %}
          <a href="{% url 'core:book_profile' profile.user.username %}" class="btn btn-outline-dark btn-sm">
            <i class="fas fa-calendar"></i> Book
          </a>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="row g-4">
    <div class="col-lg-9">
      <!-- ABOUT -->
      <div class="card shadow-sm border-0 mb-4">
        <div class="card-body">
          <h5>About</h5>
          <p class="text-muted">{{ profile.bio|default:"No biography available." }}</p>
          <hr>
          <div class="row small text-muted">
            <div class="col-sm-6"><strong>Location:</strong><br>{{ profile.city }}, {{ profile.country }}</div>
            <div class="col-sm-6"><strong>Joined:</strong><br>{{ profile.created_at|date:"F j, Y" }}</div>
          </div>
        </div>
      </div>
      <!-- MEDIA GALLERY -->
      {% if active_media_items %}
      <h5 class="mb-3">Media Gallery</h5>
      <div class="row g-4">
        {% for media in active_media_items %}
        <div class="col-md-6 col-xl-4">
          <div class="card shadow-sm border-0 h-100 media-card">
            <!-- Media Container -->
            <div class="ratio ratio-16x9 bg-dark overflow-hidden position-relative">
              {% if media.is_video %}
                <div class="video-wrapper"
                     data-video-id="{{ media.id }}"
                     onmouseenter="onVideoHoverIn({{ media.id }})"
                     onmouseleave="onVideoHoverOut({{ media.id }})">
                  <!-- preload=none + data-src = true lazy load -->
                  <video id="video-{{ media.id }}"
                         class="lazy-video"
                         loop muted playsinline controls
                         preload="none"
                         controlslist="nodownload"
                         data-src="{{ media.media_file.url }}"
                         onclick="togglePlayPauseById({{ media.id }})"
                         ondblclick="enterFullscreen({{ media.id }})">
                    Your browser does not support the video tag.
                  </video>
                  <div class="video-loader" aria-hidden="true"></div>
                  <!-- Custom Play overlay -->
                  <button type="button"
                          class="video-play-btn"
                          id="play-btn-{{ media.id }}"
                          onclick="event.stopPropagation(); togglePlayPauseById({{ media.id }})"
                          aria-label="Play video">
                    <i class="fas fa-play"></i>
                  </button>
                </div>
              {% else %}
                <a href="{{ media.media_file.url }}" class="glightbox d-block h-100">
                  <img src="{{ media.media_file.url }}"
                       class="w-100 h-100 object-fit-cover"
                       loading="lazy"
                       alt="{{ media.title }}">
                </a>
              {% endif %}
            </div>
            <div class="card-body">
              <h6 class="mb-1">{{ media.title|default:media.get_category_display }}</h6>
              <p class="text-muted small">{{ media.description|truncatechars:85 }}</p>
              <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="badge bg-secondary">{{ media.get_category_display }}</span>
                <a href="{{ media.media_file.url }}" download class="btn btn-sm btn-outline-secondary">
                  <i class="fas fa-download"></i>
                </a>
              </div>
              <!-- Social Share Icons -->
              <div class="share-icons d-flex gap-2 mb-3">
                <a href="https://twitter.com/intent/tweet?text={{ media.title|urlencode }}&url={{ request.build_absolute_uri }}"
                   target="_blank" class="text-info"><i class="fab fa-twitter"></i></a>
                <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri }}"
                   target="_blank" class="text-primary"><i class="fab fa-facebook"></i></a>
                <a href="https://wa.me/?text={{ media.title|urlencode }}%20{{ request.build_absolute_uri }}"
                   target="_blank" class="text-success"><i class="fab fa-whatsapp"></i></a>
              </div>
              <!-- Reactions & Bookmark -->
              <div class="d-flex flex-wrap gap-2">
                {% include "core/partials/reactions.html" with media=media %}
                {% include "core/partials/bookmark.html" with media=media %}
              </div>
              <!-- Comments -->
              <div class="mt-4">
                <form hx-post="{% url 'core:add_comment' media.id %}"
                      hx-target="#comments-{{ media.id }}"
                      hx-swap="innerHTML" class="d-flex gap-2">
                  {% csrf_token %}
                  <input type="text" name="body" class="form-control form-control-sm" placeholder="Add comment...">
                  <button class="btn btn-sm btn-dark">Post</button>
                </form>
                <div id="comments-{{ media.id }}" class="mt-2 small">
                  {% include "core/partials/comments.html" with media=media comments=media.comments.all %}
                </div>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
      {% endif %}
    </div>
    <!-- SIDEBAR -->
    <div class="col-lg-3">
      <div class="card shadow-sm border-0 sticky-top" style="top: 90px;">
        <div class="card-body">
          <h6>Profile Details</h6>
          {% if profile.interests %}
          <p><strong>Interests:</strong> {{ profile.interests|join:", " }}</p>
          {% endif %}
          <hr>
          <p><strong>Followers:</strong> <span id="follower-count-sidebar">{{ profile.follower_count }}</span></p>
          <p><strong>Media:</strong> {{ profile.media_count }}</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Lightbox -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/js/glightbox.min.js"></script>
<script>
  GLightbox({ selector: '.glightbox' });

  // ---------- Helpers ----------
  function getVideo(id) {
    return document.getElementById('video-' + id);
  }
  function getPlayBtn(id) {
    return document.getElementById('play-btn-' + id);
  }
  function getWrapper(id) {
    return document.querySelector('.video-wrapper[data-video-id="' + id + '"]');
  }

  function hidePlayBtn(id) {
    const btn = getPlayBtn(id);
    if (btn) btn.classList.add('hidden');
  }
  function showPlayBtn(id) {
    const video = getVideo(id);
    const btn = getPlayBtn(id);
    if (btn && video && video.paused) {
      btn.classList.remove('hidden');
      btn.innerHTML = '<i class="fas fa-play"></i>';
    }
  }

  // ---------- True lazy load: set src only when needed ----------
  function ensureVideoSource(id) {
    const video = getVideo(id);
    if (!video) return Promise.resolve();

    // Already loaded
    if (video.dataset.loaded === '1') return Promise.resolve();

    const src = video.dataset.src;
    if (!src) return Promise.resolve();

    const wrapper = getWrapper(id);
    if (wrapper) wrapper.classList.add('loading');

    return new Promise((resolve) => {
      const onReady = () => {
        video.dataset.loaded = '1';
        if (wrapper) wrapper.classList.remove('loading');
        video.removeEventListener('loadeddata', onReady);
        video.removeEventListener('canplay', onReady);
        resolve();
      };
      video.addEventListener('loadeddata', onReady);
      video.addEventListener('canplay', onReady);

      // Create <source> dynamically for better browser support
      let source = video.querySelector('source');
      if (!source) {
        source = document.createElement('source');
        video.appendChild(source);
      }
      source.src = src;
      video.load(); // start fetching
    });
  }

  // ---------- Interaction handlers ----------
  async function onVideoHoverIn(id) {
    const video = getVideo(id);
    if (!video) return;
    await ensureVideoSource(id);
    if (video.paused) {
      video.play().catch(() => {});
      hidePlayBtn(id);
    }
  }

  function onVideoHoverOut(id) {
    const video = getVideo(id);
    if (!video) return;
    if (document.fullscreenElement || document.webkitFullscreenElement) return;
    video.pause();
    showPlayBtn(id);
  }

  async function togglePlayPauseById(id) {
    const video = getVideo(id);
    if (!video) return;

    await ensureVideoSource(id);

    if (video.paused) {
      // Pause other videos to save bandwidth/CPU
      pauseOtherVideos(id);
      video.play().catch(() => {});
      hidePlayBtn(id);
    } else {
      video.pause();
      showPlayBtn(id);
    }
  }

  function pauseOtherVideos(exceptId) {
    document.querySelectorAll('video.lazy-video').forEach(v => {
      const id = v.id.replace('video-', '');
      if (id !== String(exceptId) && !v.paused) {
        v.pause();
        showPlayBtn(id);
      }
    });
  }

  async function enterFullscreen(id) {
    const video = getVideo(id);
    const wrapper = getWrapper(id);
    if (!video || !wrapper) return;

    await ensureVideoSource(id);
    pauseOtherVideos(id);
    video.play().catch(() => {});
    hidePlayBtn(id);

    try {
      if (wrapper.requestFullscreen) {
        await wrapper.requestFullscreen();
      } else if (wrapper.webkitRequestFullscreen) {
        wrapper.webkitRequestFullscreen();
      } else if (wrapper.webkitRequestFullScreen) {
        wrapper.webkitRequestFullScreen();
      } else if (wrapper.msRequestFullscreen) {
        wrapper.msRequestFullscreen();
      } else if (video.webkitEnterFullscreen) {
        video.webkitEnterFullscreen(); // iOS
      } else if (video.requestFullscreen) {
        await video.requestFullscreen();
      }
    } catch (err) {
      console.error('Fullscreen error:', err);
    }
  }

  function bindVideoEvents() {
    document.querySelectorAll('video.lazy-video').forEach(video => {
      const id = video.id.replace('video-', '');
      video.addEventListener('play', () => hidePlayBtn(id));
      video.addEventListener('pause', () => {
        if (!(document.fullscreenElement || document.webkitFullscreenElement)) {
          showPlayBtn(id);
        }
      });
      video.addEventListener('ended', () => showPlayBtn(id));
    });
  }

  // ---------- Intersection Observer: preload near viewport, pause far away ----------
  let videoObserver = null;

  function initLazyVideos() {
    if (videoObserver) {
      videoObserver.disconnect();
    }

    const videos = document.querySelectorAll('video.lazy-video');
    if (!videos.length) return;

    videoObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        const video = entry.target;
        const id = video.id.replace('video-', '');

        if (entry.isIntersecting) {
          // Preload when ~200px away from viewport (rootMargin)
          ensureVideoSource(id);
        } else {
          // Out of view → pause to free decoder/CPU
          if (!(document.fullscreenElement || document.webkitFullscreenElement)) {
            video.pause();
            showPlayBtn(id);
          }
        }
      });
    }, {
      root: null,
      rootMargin: '200px 0px',  // start loading before fully visible
      threshold: 0.15
    });

    videos.forEach(v => videoObserver.observe(v));
  }

  // Fullscreen exit cleanup
  function onFullscreenChange() {
    const isFs = document.fullscreenElement || document.webkitFullscreenElement;
    if (!isFs) {
      document.querySelectorAll('video.lazy-video').forEach(video => {
        const id = video.id.replace('video-', '');
        const wrapper = video.closest('.video-wrapper');
        if (wrapper && !wrapper.matches(':hover')) {
          video.pause();
          showPlayBtn(id);
        }
      });
    }
  }
  document.addEventListener('fullscreenchange', onFullscreenChange);
  document.addEventListener('webkitfullscreenchange', onFullscreenChange);

  // HTMX follower update
  document.addEventListener('htmx:afterRequest', function(event) {
    if (event.detail.xhr.status === 200 && event.detail.xhr.getResponseHeader('HX-Trigger') === 'followerUpdated') {
      const newCount = event.detail.xhr.getResponseHeader('X-Follower-Count');
      if (newCount) {
        document.getElementById('follower-count-display').innerHTML = `👥 <strong>${newCount}</strong> Followers`;
        const sidebar = document.getElementById('follower-count-sidebar');
        if (sidebar) sidebar.textContent = newCount;
      }
    }
  });

  document.addEventListener('DOMContentLoaded', function() {
    bindVideoEvents();
    initLazyVideos();
  });
  document.body.addEventListener('htmx:afterSwap', function() {
    bindVideoEvents();
    initLazyVideos();
  });
</script>
{% endblock %}