{% extends 'base.html' %}

{% block content %}
{# Safety fallback for undefined products variable #}
{% if products is not defined %}
{% set products = recent_products if recent_products else [] %}
{% endif %}

<style>
    :root {
        --primary-orange: #ff9017;
        --premium-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    }

    /* Professional Hero Section */
    .hero-container {
        display: flex;
        gap: 20px;
        margin-top: 20px;
        margin-bottom: 40px;
    }

    .hero-banner-large {
        flex: 2;
        background: #111827;
        border-radius: 20px;
        padding: 50px;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 280px;
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center right;
        box-shadow: var(--premium-shadow);
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent 60%),
        url("{{ url_for('static', filename='images/phone_banner.png') }}");
    }

    .hero-banner-small {
        flex: 1;
        background: #000;
        border-radius: 20px;
        padding: 40px;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 280px;
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        box-shadow: var(--premium-shadow);
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent),
        url("{{ url_for('static', filename='images/small_banner.png') }}");
    }

    .btn-premium {
        background: var(--primary-orange);
        color: white;
        padding: 12px 30px;
        border-radius: 12px;
        font-weight: 700;
        text-decoration: none;
        display: inline-flex;
        width: fit-content;
        transition: 0.3s;
    }

    .btn-premium:hover {
        background: #e57e0b;
        transform: translateY(-2px);
        color: white;
    }



    /* Product Grid Styling */
    .section-title {
        font-weight: 800;
        font-size: 20px;
        margin-bottom: 20px;
        color: #111827;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 40px;
        justify-content: center;
    }

    .premium-card {
        background: white;
        border-radius: 16px;
        border: 1px solid rgba(0,0,0,0.03);
        padding: 12px;
        text-decoration: none;
        color: inherit;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        height: 100%;
        display: flex;
        flex-direction: column;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    }

    .premium-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
        border-color: rgba(255, 144, 23, 0.3);
    }

    .card-img {
        background: #f9f9f9;
        border-radius: 12px;
        height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        padding: 20px;
        overflow: hidden;
    }

    .card-img img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: 0.4s;
    }

    .premium-card:hover .card-img img {
        transform: scale(1.1);
    }

    .card-info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .card-cat {
        font-size: 10px;
        font-weight: 700;
        color: var(--primary-orange);
        text-transform: uppercase;
        margin-bottom: 5px;
        letter-spacing: 0.5px;
    }

    .card-name {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 15px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;
    }

    .card-price-row {
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .price {
        font-weight: 800;
        font-size: 16px;
        color: #111827;
    }

    .btn-add {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #111827;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
    }

    .premium-card:hover .btn-add {
        background: var(--primary-orange);
    }

    /* Gifts specifically - Round design requested */
    .gift-card-circle {
        text-align: center;
        background: white !important;
        border: 1px solid rgba(0,0,0,0.02) !important;
        padding: 20px 10px !important;
        border-radius: 20px !important;
    }

    .gift-card-circle .card-img {
        border-radius: 50% !important;
        width: 120px !important;
        height: 120px !important;
        margin: 0 auto 15px !important;
        border: 4px solid #fff;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 0 !important; /* Remove padding to let image fill the circle */
    }

    .gift-card-circle .card-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .gift-card-circle .card-name {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .gift-card-circle .price {
        font-size: 15px;
        color: var(--primary-orange);
    }

    /* Video Products Styling */
    .video-card {
        position: relative;
    }
    .video-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        background: rgba(255, 144, 23, 0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
        box-shadow: 0 0 20px rgba(255, 144, 23, 0.4);
        transition: 0.3s;
    }
    .video-card:hover .video-overlay {
        transform: translate(-50%, -50%) scale(1.1);
        background: var(--primary-orange);
    }

    /* Category Circles Styling */
    .cat-circle-card {
        text-align: center;
        text-decoration: none;
        color: inherit;
        transition: 0.3s;
    }

    .cat-circle-img {
        width: 80px;
        height: 80px;
        background: #f8f9fa;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 12px;
        border: 1px solid #eee;
        transition: 0.3s;
        overflow: hidden;
    }

    .cat-circle-card:hover .cat-circle-img {
        border-color: var(--primary-orange);
        background: white;
        box-shadow: 0 10px 20px rgba(255,144,23,0.1);
        transform: translateY(-5px);
    }

    .cat-name-small {
        font-size: 13px;
        font-weight: 700;
        color: #4b5563;
    }

    .cat-circle-card:hover .cat-name-small {
        color: var(--primary-orange);
    }
</style>

<div class="hero-container">
    <div class="hero-banner-large">
        <h5 class="text-uppercase fw-bold mb-2" style="letter-spacing: 2px; color: var(--primary-orange);">Latest Tech
        </h5>
        <h1 class="display-5 fw-bold mb-4">SwiftPhone 15 Pro <br>Titanium Build.</h1>
        <p class="mb-5 opacity-75" style="max-width: 400px;">The most powerful and elegant smartphone we've ever
            created. Now available.</p>
        <a href="{{ url_for('web.collection') }}" class="btn-premium">Shop Now</a>
    </div>
    <div class="hero-banner-small">
        <h4 class="fw-bold mb-3">Professional <br>Audio Gear</h4>
        <a href="{{ url_for('web.collection') }}" class="btn btn-light rounded-pill btn-sm px-4 fw-bold">Discover</a>
    </div>
</div>


{# 1. Recently Viewed #}
{% if recent_products %}
<div class="section-title">
    <span>Recently Viewed</span>
    <a href="{{ url_for('web.collection') }}" class="text-muted small fw-bold text-decoration-none">View All</a>
</div>
<div class="product-grid">
    {% for product in recent_products %}
    <div class="premium-card">
        <a href="{{ url_for('web.collection', cat_id=product.category_id) }}" class="text-decoration-none color-inherit flex-grow-1 d-flex flex-column">
            <div class="card-img position-relative">
                <a href="{{ url_for('web.toggle_wishlist', product_id=product.id) }}" 
                   class="btn btn-light shadow-sm position-absolute top-0 end-0 m-2 d-flex align-items-center justify-content-center" 
                   style="border-radius: 50%; width: 35px; height: 35px; z-index: 10; border: 1px solid #f0f0f0;">
                    <i class="bi bi-heart{% if product.id in user_wishlist_ids %}-fill text-danger{% endif %}"></i>
                </a>
                <img src="{{ url_for('static', filename='uploads/' + (product.image_file if product.image_file else 'default.png')) }}"
                    onerror="this.src='https://via.placeholder.com/300x300?text=Premium+Item'">
            </div>
            <div class="card-info">
                <div class="card-cat">{{ product.category.name if product.category else 'Premium' }}</div>
                <h3 class="card-name">{{ product.name }}</h3>
                
                {% set reviews = product.reviews %}
                {% if reviews|length > 0 %}
                    {% set avg_rating = (reviews|sum(attribute='rating') / reviews|length)|round(1) %}
                    <div class="mb-2 text-warning small d-flex align-items-center gap-1">
                        <i class="bi bi-star-fill"></i>
                        <span class="text-dark fw-bold">{{ avg_rating }}</span>
                    </div>
                {% endif %}
            </div>
        </a>
        <div class="card-price-row mt-auto">
            <span class="price">{{ currency }} {{ "{:,.0f}".format(product.price) }}</span>
            <a href="{{ url_for('web.add_to_cart', product_id=product.id) }}" class="btn-add"><i class="bi bi-plus"></i></a>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

{# 2. Gifts for every occasion #}
{% if gift_products %}
<div class="section-title">
    <span>Gifts for every occasion</span>
</div>
<div class="product-grid">
    {% for product in gift_products %}
    <div class="premium-card gift-card-circle">
        <a href="{{ url_for('web.collection', cat_id=product.category_id) }}" class="text-decoration-none color-inherit">
            <div class="card-img">
                <img src="{{ url_for('static', filename='uploads/' + (product.image_file if product.image_file else 'default.png')) }}"
                    onerror="this.src='https://via.placeholder.com/300x300?text=Premium+Item'">
            </div>
            <div class="card-info">
                <h3 class="card-name">{{ product.name }}</h3>
            </div>
        </a>
        <div class="d-flex flex-column align-items-center">
            <span class="price">{{ currency }} {{ "{:,.0f}".format(product.price) }}</span>
            <a href="{{ url_for('web.add_to_cart', product_id=product.id) }}" class="btn-add mt-2"><i class="bi bi-cart-plus"></i></a>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

{# 3. Big Deals #}
{% if deal_products %}
<div class="section-title">
    <span>Today's Big Deals</span>
</div>
<div class="product-grid">
    {% for product in deal_products %}
    <div class="premium-card">
        <a href="{{ url_for('web.collection', cat_id=product.category_id) }}" class="text-decoration-none color-inherit flex-grow-1 d-flex flex-column">
            <div class="card-img position-relative">
                <a href="{{ url_for('web.toggle_wishlist', product_id=product.id) }}" 
                   class="btn btn-light shadow-sm position-absolute top-0 end-0 m-2 d-flex align-items-center justify-content-center" 
                   style="border-radius: 50%; width: 35px; height: 35px; z-index: 10; border: 1px solid #f0f0f0;">
                    <i class="bi bi-heart{% if product.id in user_wishlist_ids %}-fill text-danger{% endif %}"></i>
                </a>
                {% if product.discount_price > 0 %}
                <span class="badge bg-danger position-absolute top-0 start-0 m-3 shadow-sm"
                    style="border-radius: 6px;">SALE</span>
                {% endif %}
                <img src="{{ url_for('static', filename='uploads/' + (product.image_file if product.image_file else 'default.png')) }}"
                    onerror="this.src='https://via.placeholder.com/300x300?text=Premium+Item'">
            </div>
            <div class="card-info">
                <div class="card-cat">{{ product.category.name if product.category else 'Premium' }}</div>
                <h3 class="card-name">{{ product.name }}</h3>
                
                {% set reviews = product.reviews %}
                {% if reviews|length > 0 %}
                    {% set avg_rating = (reviews|sum(attribute='rating') / reviews|length)|round(1) %}
                    <div class="mb-2 text-warning small d-flex align-items-center gap-1">
                        <i class="bi bi-star-fill"></i>
                        <span class="text-dark fw-bold">{{ avg_rating }}</span>
                    </div>
                {% endif %}

                {% if product.show_in_deals %}
                    {% if product.flash_sale_end %}
                    <div class="text-danger small fw-bold mt-1 mb-2 countdown-timer" data-end="{{ product.flash_sale_end.strftime('%Y-%m-%dT%H:%M:%S') }}" style="font-size: 11px;">
                        <i class="bi bi-stopwatch"></i> Ends: <span>{{ product.flash_sale_end.strftime('%d %b, %I:%M %p') }}</span>
                    </div>
                    {% endif %}
                    {% if product.flash_sale_video %}
                    <object style="pointer-events: all; display: block;">
                        <a href="{{ product.flash_sale_video }}" target="_blank" class="btn btn-sm btn-danger fw-bold rounded-pill w-100 mt-1" style="font-size: 12px;" onclick="event.stopPropagation();">
                            <i class="bi bi-play-circle-fill"></i> Watch Video
                        </a>
                    </object>
                    {% endif %}
                {% endif %}
            </div>
        </a>
        <div class="card-price-row mt-auto">
            <span class="price">{{ currency }} {{ "{:,.0f}".format(product.price) }}</span>
            <a href="{{ url_for('web.add_to_cart', product_id=product.id) }}" class="btn-add"><i class="bi bi-plus"></i></a>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

{# 4. Video Showcases #}
{% if video_products %}
<div class="section-title">
    <span>Video Showcases</span>
    <span class="badge bg-warning text-dark small">New</span>
</div>
<div class="product-grid">
    {% for product in video_products %}
    <div class="premium-card video-card">
        <a href="{{ url_for('web.collection', cat_id=product.category_id) }}" class="text-decoration-none color-inherit flex-grow-1 d-flex flex-column">
            <div class="card-img position-relative">
                <div class="video-overlay"><i class="bi bi-play-fill"></i></div>
                <img src="{{ url_for('static', filename='uploads/' + (product.image_file if product.image_file else 'default.png')) }}"
                    onerror="this.src='https://via.placeholder.com/300x300?text=Premium+Item'">
            </div>
            <div class="card-info">
                <div class="card-cat">Video Demo</div>
                <h3 class="card-name">{{ product.name }}</h3>
            </div>
        </a>
        <div class="card-price-row mt-auto">
            <span class="price">{{ currency }} {{ "{:,.0f}".format(product.price) }}</span>
            <a href="{{ url_for('web.add_to_cart', product_id=product.id) }}" class="btn-add"><i class="bi bi-eye"></i></a>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const timers = document.querySelectorAll('.countdown-timer');
        
        setInterval(() => {
            const now = new Date().getTime();
            
            timers.forEach(timer => {
                const endTimeRaw = timer.getAttribute('data-end');
                const endDate = new Date(endTimeRaw).getTime();
                const distance = endDate - now;
                
                const span = timer.querySelector('span');
                
                if (distance < 0) {
                    span.innerHTML = "EXPIRED";
                    return;
                }
                
                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);
                
                let timeStr = "";
                if (days > 0) timeStr += days + "d ";
                timeStr += ("0" + hours).slice(-2) + "h " + ("0" + minutes).slice(-2) + "m " + ("0" + seconds).slice(-2) + "s";
                
                span.innerHTML = timeStr;
            });
        }, 1000);
    });
</script>

{% endblock %}