{% extends 'base.html' %}
{% load static %}

{% block title %}{{ video.title }} - YouTube Clone{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <!-- Main Video Content -->
        <div class="col-lg-8">
            <!-- Video Player -->
            <div class="video-container">
                <video class="w-100 h-100">
                    <source src="{{ video.video_file.url }}" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </div>

            <!-- Video Info -->
            <div class="card">
                <div class="card-body">
                    <h3>{{ video.title }}</h3>
                    
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <span class="text-muted">{{ video.views }} views</span>
                            <span class="text-muted">• {{ video.upload_date|timesince }} ago</span>
                        </div>
                        
                        <!-- Like Button -->
                        <div class="btn-group" role="group">
                            <button class="btn btn-outline-danger like-btn" 
                                    data-video-id="{{ video.id }}" 
                                    data-liked="{{ user_has_liked|yesno:'true,false' }}">
                                <i class="fas fa-thumbs-up"></i> 
                                <span class="likes-count">{{ video.likes }}</span>
                            </button>
                            <button class="btn btn-outline-secondary">
                                <i class="fas fa-share"></i> Share
                            </button>
                        </div>
                    </div>

                    <!-- Channel Info -->
                    <div class="d-flex align-items-center mb-3">
                        <div class="me-3">
                            {% if video.uploader.userprofile.profile_picture %}
                                <img src="{{ video.uploader.userprofile.profile_picture.url }}" 
                                     class="rounded-circle" width="40" height="40" alt="{{ video.uploader.username }}">
                            {% else %}
                                <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" 
                                     style="width: 40px; height: 40px;">
                                    <i class="fas fa-user text-white"></i>
                                </div>
                            {% endif %}
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="mb-0">
                                <a href="{% url 'accounts:channel' video.uploader.username %}" class="text-decoration-none">
                                    {{ video.uploader.username }}
                                </a>
                            </h6>
                            <small class="text-muted">{{ video.uploader.userprofile.subscriber_count }} subscribers</small>
                        </div>
                        {% if user.is_authenticated and user != video.uploader %}
                            <button class="btn btn-primary subscribe-btn" 
                                    data-user-id="{{ video.uploader.id }}">
                                Subscribe
                            </button>
                        {% endif %}
                    </div>

                    <!-- Description -->
                    <div class="border-top pt-3">
                        <h5>Description</h5>
                        <p>{{ video.description|linebreaks }}</p>
                        {% if video.tags %}
                            <div class="mt-2">
                                {% for tag in video.tag_list %}
                                    <span class="badge bg-secondary me-1">{{ tag }}</span>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Comments Section -->
            <div class="card mt-4">
                <div class="card-body">
                    <h5>Comments ({{ comments.count }})</h5>
                    
                    {% if user.is_authenticated %}
                        <form method="post" action="{% url 'videos:add_comment' video.id %}" class="mb-4 comment-form" data-video-id="{{ video.id }}">
                            {% csrf_token %}
                            <div class="mb-3">
                                {{ comment_form.text }}
                            </div>
                            <button type="submit" class="btn btn-primary">Post Comment</button>
                        </form>
                    {% else %}
                        <p class="text-muted">
                            <a href="{% url 'accounts:login' %}">Login</a> to add a comment.
                        </p>
                    {% endif %}

                    <!-- Comments List -->
                    <div class="comments-section">
                        {% include 'videos/comments_partial.html' %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Related Videos -->
            <h5 class="mb-3">Related Videos</h5>
            {% for related_video in related_videos %}
                <div class="d-flex mb-3">
                    <a href="{% url 'videos:video_detail' related_video.id %}" class="text-decoration-none">
                        {% if related_video.thumbnail %}
                            <img src="{{ related_video.thumbnail.url }}" 
                                 class="rounded me-3" width="120" height="68" alt="{{ related_video.title }}">
                        {% else %}
                            <div class="bg-secondary rounded me-3 d-flex align-items-center justify-content-center" 
                                 style="width: 120px; height: 68px;">
                                <i class="fas fa-play-circle text-white"></i>
                            </div>
                        {% endif %}
                    </a>
                    <div class="flex-grow-1">
                        <h6 class="mb-1">
                            <a href="{% url 'videos:video_detail' related_video.id %}" class="text-decoration-none text-dark">
                                {{ related_video.title|truncatechars:40 }}
                            </a>
                        </h6>
                        <p class="mb-0 text-muted small">{{ related_video.uploader.username }}</p>
                        <p class="mb-0 text-muted small">
                            {{ related_video.views }} views • {{ related_video.upload_date|timesince }} ago
                        </p>
                    </div>
                </div>
            {% empty %}
                <p class="text-muted">No related videos found.</p>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Like button functionality
    const likeBtn = document.querySelector('.like-btn');
    if (likeBtn) {
        likeBtn.addEventListener('click', function() {
            const videoId = this.dataset.videoId;
            const isLiked = this.dataset.liked === 'true';
            
            fetch(`/video/${videoId}/like/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCookie('csrftoken'),
                    'Content-Type': 'application/json',
                },
            })
            .then(response => response.json())
            .then(data => {
                this.dataset.liked = data.liked;
                this.querySelector('.likes-count').textContent = data.likes_count;
                
                if (data.liked) {
                    this.classList.remove('btn-outline-danger');
                    this.classList.add('btn-danger');
                } else {
                    this.classList.remove('btn-danger');
                    this.classList.add('btn-outline-danger');
                }
            });
        });
    }

    // Subscribe button functionality
    const subscribeBtn = document.querySelector('.subscribe-btn');
    if (subscribeBtn) {
        subscribeBtn.addEventListener('click', function() {
            const userId = this.dataset.userId;
            
            fetch(`/accounts/subscribe/${userId}/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCookie('csrftoken'),
                    'Content-Type': 'application/json',
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.subscribed) {
                    this.textContent = 'Subscribed';
                    this.classList.remove('btn-primary');
                    this.classList.add('btn-success');
                } else {
                    this.textContent = 'Subscribe';
                    this.classList.remove('btn-success');
                    this.classList.add('btn-primary');
                }
            });
        });
    }

    // Helper function to get CSRF token
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
});
</script>
{% endblock %}