{% extends 'base.html' %}

{% block title %}{{ product.name }} - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
.product-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.card {
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: none;
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-radius: 15px 15px 0 0 !important;
}

.card-body {
    border-radius: 15px;
}

.product-image-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto 2rem;
    padding: 8px;
    background: linear-gradient(45deg, #8B5CF6, #EC4899);
    border-radius: 20px;
}

.product-image {
    width: 100%;
    height: auto;
    cursor: zoom-in;
    border-radius: 15px;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: block;
}

.product-details {
    text-align: center;
    margin-bottom: 2rem;
}

.product-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: #333;
}

.product-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #666;
    max-width: 800px;
    margin: 0 auto 2rem;
}

.product-meta {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.meta-item {
    text-align: center;
}

.meta-label {
    font-weight: bold;
    color: #555;
    margin-bottom: 0.5rem;
}

.meta-value {
    color: #666;
}

.actions-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.image-zoom-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    overflow: auto;
}

.zoom-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90vh;
    margin-top: 4%;
}

.close-zoom {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.reviews-section {
    max-width: 1000px;
    margin: 0 auto;
}

.review-card {
    text-align: left;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    background-color: #f8f9fa;
}

.btn {
    border-radius: 25px;
    padding: 8px 20px;
    transition: all 0.3s ease;
}

.btn-primary {
    background: linear-gradient(45deg, #8B5CF6, #6366F1);
    border: none;
    box-shadow: 0 4px 6px rgba(139, 92, 246, 0.2);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(139, 92, 246, 0.3);
    background: linear-gradient(45deg, #7C3AED, #4F46E5);
}

.form-control {
    border-radius: 25px;
    border: 1px solid #e2e8f0;
    padding: 8px 20px;
}

.form-control:focus {
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
    border-color: #8B5CF6;
}
</style>
{% endblock %}

{% block content %}
<div class="product-container">
    <div class="card">
        <div class="card-body">
            <div class="product-details">
                <h1 class="product-title">{{ product.name }}</h1>
                
                {% if product.image %}
                <div class="product-image-container">
                    <img data-src="{{ product.image.url }}" 
                         alt="{{ product.name }}" 
                         class="product-image furry-lazy-image"
                         onclick="openZoom(this.src)">
                </div>
                <!-- Zoom Modal -->
                <div id="imageZoomModal" class="image-zoom-modal">
                    <span class="close-zoom" onclick="closeZoom()">&times;</span>
                    <img class="zoom-content" id="zoomedImage">
                </div>
                {% endif %}

                <p class="product-description">{{ product.description }}</p>

                <div class="product-meta">
                    <div class="meta-item">
                        <div class="meta-label">Preis</div>
                        <div class="meta-value">{{ product.price }} €</div>
                    </div>
                    <div class="meta-item">
                        <div class="meta-label">Verfügbarkeit</div>
                        <div class="meta-value">{{ product.stock }} Stück</div>
                    </div>
                    <div class="meta-item">
                        <div class="meta-label">Hinzugefügt am</div>
                        <div class="meta-value">{{ product.created|date:"d.m.Y" }}</div>
                    </div>
                    <div class="meta-item">
                        <div class="meta-label">Bewertung</div>
                        <div class="meta-value">
                            {% with avg_rating=product.average_rating %}
                            {% if avg_rating > 0 %}
                            {{ avg_rating|floatformat:1 }} von 5 Sternen
                            {% else %}
                            Noch keine Bewertungen
                            {% endif %}
                            {% endwith %}
                        </div>
                    </div>
                </div>

                <div class="actions-container">
                    <form method="post" action="{% url 'products:add_to_cart' product.id %}" class="d-flex align-items-center">
                        {% csrf_token %}
                        <input type="number" name="quantity" value="1" min="1" max="{{ product.stock }}" 
                               class="form-control me-2" style="width: 100px;">
                        <button type="submit" class="btn btn-primary">In den Warenkorb</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Bewertungen -->
    <div class="reviews-section mt-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="mb-0">Bewertungen</h3>
                {% if user.is_authenticated and not user_has_reviewed %}
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#reviewModal">
                    Bewertung schreiben
                </button>
                {% endif %}
            </div>
            <div class="card-body">
                {% if product.reviews.all %}
                {% for review in product.reviews.all %}
                <div class="review-card">
                    <div class="d-flex justify-content-between">
                        <h5 class="mb-1">{{ review.user.username }}</h5>
                        <small class="text-muted">{{ review.created|date:"d.m.Y" }}</small>
                    </div>
                    <div class="mb-2">
                        {% for i in "12345"|make_list %}
                        {% if forloop.counter <= review.rating %}
                        <i class="bi bi-star-fill text-warning"></i>
                        {% else %}
                        <i class="bi bi-star text-warning"></i>
                        {% endif %}
                        {% endfor %}
                    </div>
                    <p class="mb-0">{{ review.comment }}</p>
                </div>
                {% if not forloop.last %}<hr>{% endif %}
                {% endfor %}
                {% else %}
                <p class="text-center mb-0">Noch keine Bewertungen vorhanden.</p>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="social-sharing">
        <div class="share-label">Teilen:</div>
        
        <!-- Twitter/X -->
        <a class="share-btn twitter" href="https://twitter.com/intent/tweet?url={{ request.build_absolute_uri }}&text=Schau%20dir%20dieses%20tolle%20Fursuit%20an!%20{{ product.name|urlencode }}" target="_blank" title="Auf Twitter/X teilen">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
            </svg>
        </a>
        
        <!-- Facebook -->
        <a class="share-btn facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri }}" target="_blank" title="Auf Facebook teilen">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
            </svg>
        </a>
        
        <!-- WhatsApp -->
        <a class="share-btn whatsapp" href="https://wa.me/?text=Schau%20dir%20dieses%20tolle%20Fursuit%20an!%20{{ product.name|urlencode }}%20{{ request.build_absolute_uri }}" target="_blank" title="Auf WhatsApp teilen">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
            </svg>
        </a>
        
        <!-- Telegram -->
        <a class="share-btn telegram" href="https://t.me/share/url?url={{ request.build_absolute_uri }}&text=Schau%20dir%20dieses%20tolle%20Fursuit%20an!%20{{ product.name|urlencode }}" target="_blank" title="Auf Telegram teilen">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
            </svg>
        </a>
        
        <!-- Pinterest -->
        <a class="share-btn pinterest" href="https://pinterest.com/pin/create/button/?url={{ request.build_absolute_uri }}&description=Schau%20dir%20dieses%20tolle%20Fursuit%20an!%20{{ product.name|urlencode }}" target="_blank" title="Auf Pinterest teilen">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001 12.017.001z"/>
            </svg>
        </a>
        
        <!-- LinkedIn -->
        <a class="share-btn linkedin" href="https://www.linkedin.com/sharing/share-offsite/?url={{ request.build_absolute_uri }}" target="_blank" title="Auf LinkedIn teilen">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
            </svg>
        </a>
        
        <!-- Email -->
        <a class="share-btn email" href="mailto:?subject=Schau%20dir%20dieses%20tolle%20Fursuit%20an!&body=Hallo!%20Ich%20habe%20ein%20tolles%20Fursuit%20gefunden:%20{{ product.name|urlencode }}%20{{ request.build_absolute_uri }}" title="Per E-Mail teilen">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
            </svg>
        </a>
        
        <!-- Copy Link -->
        <button class="share-btn copy" onclick="copyToClipboard('{{ request.build_absolute_uri }}')" title="Link kopieren">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
            </svg>
        </button>
    </div>
</div>

<!-- Bewertungs-Modal -->
{% if user.is_authenticated and not user_has_reviewed %}
<div class="modal fade" id="reviewModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bewertung schreiben</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" action="{% url 'products:add_review' product.id %}">
                <div class="modal-body">
                    {% csrf_token %}
                    {% for field in review_form %}
                    <div class="mb-3">
                        <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
                        {{ field }}
                        {% if field.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in field.errors %}
                            {{ error }}
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-primary">Bewertung absenden</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
function openZoom(imgSrc) {
    const modal = document.getElementById('imageZoomModal');
    const zoomedImg = document.getElementById('zoomedImage');
    modal.style.display = "block";
    zoomedImg.src = imgSrc;
}

function closeZoom() {
    document.getElementById('imageZoomModal').style.display = "none";
}

// Schließen beim Klick außerhalb des Bildes
window.onclick = function(event) {
    const modal = document.getElementById('imageZoomModal');
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

// Schließen mit Escape-Taste
document.addEventListener('keydown', function(event) {
    if (event.key === "Escape") {
        document.getElementById('imageZoomModal').style.display = "none";
    }
});

// Copy to Clipboard Function
function copyToClipboard(text) {
    if (navigator.clipboard && window.isSecureContext) {
        // Modern approach
        navigator.clipboard.writeText(text).then(() => {
            showCopySuccess();
        }).catch(err => {
            console.error('Failed to copy: ', err);
            fallbackCopyTextToClipboard(text);
        });
    } else {
        // Fallback for older browsers
        fallbackCopyTextToClipboard(text);
    }
}

function fallbackCopyTextToClipboard(text) {
    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.top = "0";
    textArea.style.left = "0";
    textArea.style.position = "fixed";
    textArea.style.opacity = "0";
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    try {
        const successful = document.execCommand('copy');
        if (successful) {
            showCopySuccess();
        } else {
            showCopyError();
        }
    } catch (err) {
        console.error('Fallback: Oops, unable to copy', err);
        showCopyError();
    }
    
    document.body.removeChild(textArea);
}

function showCopySuccess() {
    const copyBtn = document.querySelector('.share-btn.copy');
    const originalContent = copyBtn.innerHTML;
    
    // Add success animation
    copyBtn.classList.add('copied');
    copyBtn.innerHTML = `
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
        </svg>
    `;
    
    // Show success message
    const successMsg = document.createElement('div');
    successMsg.className = 'copy-success-msg';
    successMsg.textContent = 'Link kopiert! 🎉';
    successMsg.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: linear-gradient(135deg, #25d366 0%, #20ba5a 100%);
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 16px;
        font-weight: 700;
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
        z-index: 10000;
        animation: slideInRight 0.3s ease;
    `;
    
    document.body.appendChild(successMsg);
    
    // Remove success message after 3 seconds
    setTimeout(() => {
        successMsg.style.animation = 'slideOutRight 0.3s ease';
        setTimeout(() => {
            document.body.removeChild(successMsg);
        }, 300);
    }, 3000);
    
    // Reset button after animation
    setTimeout(() => {
        copyBtn.classList.remove('copied');
        copyBtn.innerHTML = originalContent;
    }, 600);
}

function showCopyError() {
    const errorMsg = document.createElement('div');
    errorMsg.className = 'copy-error-msg';
    errorMsg.textContent = 'Kopieren fehlgeschlagen 😔';
    errorMsg.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: linear-gradient(135deg, #ff6f91 0%, #e74c3c 100%);
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 16px;
        font-weight: 700;
        box-shadow: 0 4px 20px rgba(231, 76, 60, 0.3);
        z-index: 10000;
        animation: slideInRight 0.3s ease;
    `;
    
    document.body.appendChild(errorMsg);
    
    setTimeout(() => {
        errorMsg.style.animation = 'slideOutRight 0.3s ease';
        setTimeout(() => {
            document.body.removeChild(errorMsg);
        }, 300);
    }, 3000);
}

// Add CSS animations
const style = document.createElement('style');
style.textContent = `
    @keyframes slideInRight {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    
    @keyframes slideOutRight {
        from { transform: translateX(0); opacity: 1; }
        to { transform: translateX(100%); opacity: 0; }
    }
`;
document.head.appendChild(style);

// Social sharing analytics
document.querySelectorAll('.share-btn').forEach(btn => {
    btn.addEventListener('click', function(e) {
        const platform = this.className.includes('twitter') ? 'twitter' :
                        this.className.includes('facebook') ? 'facebook' :
                        this.className.includes('whatsapp') ? 'whatsapp' :
                        this.className.includes('telegram') ? 'telegram' :
                        this.className.includes('pinterest') ? 'pinterest' :
                        this.className.includes('linkedin') ? 'linkedin' :
                        this.className.includes('email') ? 'email' : 'copy';
        
        // Track social share (if analytics is available)
        if (typeof gtag !== 'undefined') {
            gtag('event', 'share', {
                method: platform,
                content_type: 'product',
                item_id: '{{ product.id }}'
            });
        }
    });
});
</script>
{% endblock %}