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

{% block title %}New Fit - New Style{% endblock %}

{% block extra_css %}
<style>
    .builder-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-bottom: 100px;
    }

    .preview-canvas {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        height: 400px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .preview-canvas .placeholder-text {
        color: var(--text-muted);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .preview-canvas img {
        max-height: 80%;
        max-width: 80%;
        object-fit: contain;
        position: absolute;
        transition: all 0.3s ease;
    }

    .category-tabs {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 10px;
        scrollbar-width: none;
    }
    .category-tabs::-webkit-scrollbar { display: none; }

    .tab-item {
        white-space: nowrap;
        padding: 5px 15px;
        border-radius: 20px;
        border: 1px solid var(--border);
        font-size: 0.7rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }
    .tab-item.active {
        background: var(--accent);
        color: #000;
        border-color: var(--accent);
    }

    .items-selector {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .selector-card {
        aspect-ratio: 1/1;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        position: relative;
    }
    .selector-card.selected {
        border-color: var(--accent);
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
    }
    .selector-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .selector-card .selected-badge {
        position: absolute;
        top: 5px;
        right: 5px;
        background: var(--accent);
        color: #000;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
        font-weight: 800;
    }
    .selector-card.selected .selected-badge {
        display: flex;
    }

    .save-bar {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 450px;
        background: var(--bg-color);
        border-top: 1px solid var(--border);
        padding: 15px;
        display: flex;
        gap: 10px;
        z-index: 1000;
    }
</style>
{% endblock %}

{% block content %}
<div class="builder-container">
    <div class="preview-canvas" id="previewCanvas">
        <div class="placeholder-text">Outfit Preview</div>
        <!-- Images will be injected here via JS -->
    </div>

    <div class="category-tabs">
        <div class="tab-item active" data-category="all">ALL</div>
        {% for cat in categories %}
            <div class="tab-item" data-category="{{ cat.id }}">{{ cat.name|upper }}</div>
        {% endfor %}
    </div>

    <div class="items-selector" id="itemsSelector">
        {% for item in items %}
            <div class="selector-card" data-id="{{ item.id }}" data-category="{{ item.category.id }}" data-image="{{ item.image.url }}">
                <img src="{{ item.image.url }}" alt="{{ item.name }}">
                <div class="selected-badge"><i class="bi bi-check"></i></div>
            </div>
        {% empty %}
            <div class="col-12 text-center text-muted py-5">
                <p>No items in your wardrobe yet.</p>
                <a href="{% url 'wardrobe' %}" class="btn-custom">Add Items</a>
            </div>
        {% endfor %}
    </div>
</div>

<div class="save-bar">
    <input type="text" id="outfitName" class="form-control" placeholder="Outfit Name (e.g. Summer Night)">
    <button class="btn-accent" id="saveOutfitBtn">SAVE FIT</button>
</div>

<!-- Hidden Form for Saving -->
<form id="saveOutfitForm" action="{% url 'save_outfit' %}" method="POST" style="display: none;">
    {% csrf_token %}
    <input type="hidden" name="name" id="hiddenName">
    <div id="hiddenItems"></div>
</form>
{% endblock %}

{% block extra_js %}
<script>
    const selectedItems = new Set();
    const previewCanvas = document.getElementById('previewCanvas');
    const itemsSelector = document.getElementById('itemsSelector');
    const categoryTabs = document.querySelectorAll('.tab-item');
    const saveOutfitBtn = document.getElementById('saveOutfitBtn');
    const saveOutfitForm = document.getElementById('saveOutfitForm');

    // Category Filtering
    categoryTabs.forEach(tab => {
        tab.addEventListener('click', () => {
            categoryTabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            
            const category = tab.dataset.category;
            const cards = itemsSelector.querySelectorAll('.selector-card');
            
            cards.forEach(card => {
                if (category === 'all' || card.dataset.category === category) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    });

    // Item Selection
    itemsSelector.querySelectorAll('.selector-card').forEach(card => {
        card.addEventListener('click', () => {
            const id = card.dataset.id;
            const imageUrl = card.dataset.image;
            
            if (selectedItems.has(id)) {
                selectedItems.delete(id);
                card.classList.remove('selected');
                removePreview(id);
            } else {
                selectedItems.add(id);
                card.classList.add('selected');
                addPreview(id, imageUrl);
            }
            
            updatePlaceholder();
        });
    });

    function addPreview(id, url) {
        const img = document.createElement('img');
        img.src = url;
        img.dataset.id = id;
        img.style.zIndex = selectedItems.size;
        // Basic stack logic - could be improved
        previewCanvas.appendChild(img);
    }

    function removePreview(id) {
        const img = previewCanvas.querySelector(`img[data-id="${id}"]`);
        if (img) img.remove();
    }

    function updatePlaceholder() {
        const placeholder = previewCanvas.querySelector('.placeholder-text');
        if (selectedItems.size > 0) {
            placeholder.style.display = 'none';
        } else {
            placeholder.style.display = 'block';
        }
    }

    // Save Logic
    saveOutfitBtn.addEventListener('click', () => {
        if (selectedItems.size === 0) {
            alert('Please select at least one item.');
            return;
        }
        
        const name = document.getElementById('outfitName').value || 'Untitled Outfit';
        document.getElementById('hiddenName').value = name;
        
        const hiddenItemsDiv = document.getElementById('hiddenItems');
        hiddenItemsDiv.innerHTML = '';
        selectedItems.forEach(id => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'items';
            input.value = id;
            hiddenItemsDiv.appendChild(input);
        });
        
        saveOutfitForm.submit();
    });
</script>
{% endblock %}