{% extends "base.html" %}

{% block title %}Add Set - {{ app_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto">
        <div class="card shadow">
            <div class="card-header bg-danger text-white">
                <h3 class="mb-0">
                    <i class="bi bi-plus-circle"></i> Add New LEGO Set or MOC
                </h3>
            </div>
            <div class="card-body">
                <!-- Set Type Selection -->
                <div class="mb-4 p-4 bg-light rounded border">
                    <h5 class="mb-3"><i class="bi bi-question-circle"></i> What are you adding?</h5>
                    <div class="row">
                        <div class="col-md-6 mb-3 mb-md-0">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="set_type" id="type_official" value="official" 
                                       {% if request.args.get('type') != 'moc' %}checked{% endif %}>
                                <label class="form-check-label" for="type_official">
                                    <strong><i class="bi bi-box-seam"></i> Official LEGO Set</strong>
                                    <br>
                                    <small class="text-muted">A set produced by LEGO with an official set number</small>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="set_type" id="type_moc" value="moc"
                                       {% if request.args.get('type') == 'moc' %}checked{% endif %}>
                                <label class="form-check-label" for="type_moc">
                                    <strong><i class="bi bi-star-fill text-warning"></i> MOC (My Own Creation)</strong>
                                    <br>
                                    <small class="text-muted">A custom build designed by you or another builder</small>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                
                {% if brickset_available %}
                    <!-- Brickset Search - Only for official sets -->
                    <div id="bricksetSection" class="mb-4 p-3 bg-light rounded">
                        <h5><i class="bi bi-search"></i> Search Brickset</h5>
                        <p class="text-muted small mb-3">Search for a set to auto-populate details</p>
                        <div class="input-group">
                            <input type="text" id="bricksetSearch" class="form-control" 
                                   placeholder="Enter set number or name...">
                            <button class="btn btn-primary" type="button" id="searchBtn">
                                <i class="bi bi-search"></i> Search
                            </button>
                        </div>
                        <div id="searchResults" class="mt-3"></div>
                    </div>
                    <hr id="bricksetDivider">
                {% endif %}
                
                <!-- Manual Entry Form -->
                <form method="POST" action="{{ url_for('sets.add_set') }}" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="set_number" class="form-label">
                                Set Number <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="set_number" 
                                   name="set_number" required placeholder="e.g., 10497">
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="year_released" class="form-label">
                                Year Released <span class="text-danger">*</span>
                            </label>
                            <input type="number" class="form-control" id="year_released" 
                                   name="year_released" required min="1949" max="2030" 
                                   placeholder="e.g., 2024">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="set_name" class="form-label">
                            Set Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" id="set_name" 
                               name="set_name" required placeholder="e.g., Galaxy Explorer">
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="theme" class="form-label">
                                Theme <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="theme" 
                                   name="theme" required placeholder="e.g., Space">
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="piece_count" class="form-label">
                                Piece Count
                            </label>
                            <input type="number" class="form-control" id="piece_count" 
                                   name="piece_count" placeholder="e.g., 1254">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="image_url" class="form-label">
                            Image URL (optional)
                        </label>
                        <input type="url" class="form-control" id="image_url" 
                               name="image_url" placeholder="https://...">
                        <div class="form-text">Enter a URL to an image of the set (e.g., from Brickset)</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="cover_image" class="form-label">
                            <i class="bi bi-upload"></i> Upload Cover Picture
                        </label>
                        <input type="file" class="form-control" id="cover_image" 
                               name="cover_image" accept="image/*">
                        <div class="form-text">
                            <i class="bi bi-info-circle"></i> 
                            Upload your own photo of the set or MOC (JPG, PNG, GIF). Max 800px, optimized automatically.
                        </div>
                        <div id="imagePreview" class="mt-2" style="display: none;">
                            <img id="previewImg" src="" alt="Preview" style="max-width: 200px; max-height: 200px; border-radius: 8px;">
                        </div>
                    </div>
                    
                    <!-- MOC (My Own Creation) Section -->
                    <div class="card mb-3 border-warning" id="mocSection" style="display: none;">
                        <div class="card-header bg-warning bg-opacity-25">
                            <h5 class="mb-0">
                                <i class="bi bi-star-fill text-warning"></i> MOC Information
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-info mb-3">
                                <small>
                                    <i class="bi bi-info-circle"></i> 
                                    <strong>MOC Tips:</strong>
                                    <ul class="mb-0 mt-2">
                                        <li>Use any set number format (e.g., MOC-001, CUSTOM-2024, MYBUILD-01)</li>
                                        <li>Credit yourself or the original designer</li>
                                        <li>Add notes about techniques, inspiration, or building tips</li>
                                    </ul>
                                </small>
                            </div>
                            
                            <input type="hidden" id="is_moc" name="is_moc" value="off">
                            
                            <div class="mb-3">
                                <label for="moc_designer" class="form-label">
                                    <i class="bi bi-person"></i> Designer / Creator Name <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" id="moc_designer" 
                                       name="moc_designer" placeholder="e.g., Your Name or Original Designer">
                                <div class="form-text">Who designed this MOC?</div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="moc_description" class="form-label">
                                    <i class="bi bi-card-text"></i> Description / Build Notes
                                </label>
                                <textarea class="form-control" id="moc_description" name="moc_description" 
                                          rows="4" placeholder="Add details about your MOC, building techniques, inspiration, special features, etc."></textarea>
                                <div class="form-text">Share details about your custom creation</div>
                            </div>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('sets.list_sets') }}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left"></i> Cancel
                        </a>
                        <button type="submit" class="btn btn-danger btn-lg">
                            <i class="bi bi-plus-circle"></i> Add Set
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{% if brickset_available %}
<script>
$(document).ready(function() {
    $('#searchBtn').click(function() {
        const query = $('#bricksetSearch').val().trim();
        if (!query) {
            alert('Please enter a search term');
            return;
        }
        
        $('#searchResults').html('<div class="text-center"><div class="spinner-border text-primary" role="status"></div></div>');
        
        $.ajax({
            url: '{{ url_for("sets.search_brickset") }}',
            data: { q: query },
            success: function(data) {
                if (data.length === 0) {
                    $('#searchResults').html('<div class="alert alert-info">No results found</div>');
                    return;
                }
                
                let html = '<div class="list-group">';
                data.forEach(function(set) {
                    html += `
                        <a href="#" class="list-group-item list-group-item-action search-result" 
                           data-number="${set.setNumber}" 
                           data-name="${set.name}" 
                           data-theme="${set.theme}" 
                           data-year="${set.year}" 
                           data-pieces="${set.pieces || ''}" 
                           data-image="${set.imageUrl || ''}">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">${set.setNumber}: ${set.name}</h6>
                                <small>${set.year}</small>
                            </div>
                            <small class="text-muted">${set.theme} - ${set.pieces || 'Unknown'} pieces</small>
                        </a>
                    `;
                });
                html += '</div>';
                $('#searchResults').html(html);
                
                // Handle click on search result
                $('.search-result').click(function(e) {
                    e.preventDefault();
                    $('#set_number').val($(this).data('number'));
                    $('#set_name').val($(this).data('name'));
                    $('#theme').val($(this).data('theme'));
                    $('#year_released').val($(this).data('year'));
                    $('#piece_count').val($(this).data('pieces'));
                    $('#image_url').val($(this).data('image'));
                    $('#searchResults').html('<div class="alert alert-success">Form populated! Review and submit.</div>');
                });
            },
            error: function() {
                $('#searchResults').html('<div class="alert alert-danger">Search failed. Please try again.</div>');
            }
        });
    });
    
    // Allow enter key to search
    $('#bricksetSearch').keypress(function(e) {
        if (e.which === 13) {
            e.preventDefault();
            $('#searchBtn').click();
        }
    });
});
</script>
{% endif %}

<script>
$(document).ready(function() {
    // Handle set type selection (Official vs MOC)
    $('input[name="set_type"]').change(function() {
        const isMoc = $('#type_moc').is(':checked');
        
        if (isMoc) {
            // Show MOC section, hide Brickset
            $('#mocSection').slideDown();
            $('#is_moc').val('on');
            $('#bricksetSection').slideUp();
            $('#bricksetDivider').hide();
            
            // Clear Brickset populated fields (they might not apply to MOCs)
            $('#image_url').val('');
            
            // Update placeholder text for MOC context
            $('#set_number').attr('placeholder', 'e.g., MOC-001, CUSTOM-2024');
            $('#theme').attr('placeholder', 'e.g., Custom, Space MOCs, My Creations');
            
        } else {
            // Show Brickset, hide MOC section
            $('#mocSection').slideUp();
            $('#is_moc').val('off');
            $('#bricksetSection').slideDown();
            $('#bricksetDivider').show();
            
            // Clear MOC fields
            $('#moc_designer').val('');
            $('#moc_description').val('');
            
            // Reset placeholder text for official sets
            $('#set_number').attr('placeholder', 'e.g., 10497');
            $('#theme').attr('placeholder', 'e.g., Space');
        }
    });
    
    // Initialize based on current selection (including URL parameter)
    const selectedType = $('input[name="set_type"]:checked').val();
    if (selectedType === 'moc') {
        $('#type_moc').trigger('change');
    } else {
        $('#type_official').trigger('change');
    }
    
    // Image preview
    $('#cover_image').change(function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#previewImg').attr('src', e.target.result);
                $('#imagePreview').slideDown();
            };
            reader.readAsDataURL(file);
        } else {
            $('#imagePreview').slideUp();
        }
    });
});
</script>
{% endblock %}