{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <h2>Add New Probe</h2>
    <form method="POST" action="{{ url_for('probes.create_probe') }}">
        <div class="mb-3">
            <label for="model_id" class="form-label">Probe Model</label>
            <select class="form-select" id="model_id" name="model_id" required>
                {% for model in probe_models %}
                <option value="{{ model.id }}">{{ model.model_name }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="mb-3">
            <h4>Channels</h4>
            <div id="channels-container">
                <div class="channel-entry mb-3">
                    <div class="row">
                        <div class="col">
                            <label for="parameter_id_0" class="form-label">Parameter</label>
                            <select class="form-select" id="parameter_id_0" name="parameter_ids[]" required>
                                {% for param in parameters %}
                                <option value="{{ param.id }}">{{ param.parameter_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col">
                            <label for="channel_serial_0" class="form-label">Channel Serial</label>
                            <input type="text" class="form-control" id="channel_serial_0" name="channel_serials[]" required>
                        </div>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-secondary" id="add-channel">Add Another Channel</button>
        </div>

        <button type="submit" class="btn btn-primary" id="create-probe">Create Probe</button>

        <script>
            // Channel serial validation regex
            const CHANNEL_SERIAL_REGEX = /^[0-9A-F]{16}$/i;

            async function validateChannelSerials() {
                const serialInputs = document.querySelectorAll('input[name="channel_serials[]"]');
                const serials = new Set();
                let hasValidChannel = false;

                // First validate format and duplicates in form
                for (const input of serialInputs) {
                    const serial = input.value.trim().toUpperCase();
                    if (!serial) continue;

                    if (!CHANNEL_SERIAL_REGEX.test(serial)) {
                        input.classList.add('is-invalid');
                        alert(`Invalid channel serial format: ${serial}. Must be 16 hex characters (0-9, A-F)`);
                        return false;
                    }

                    if (serials.has(serial)) {
                        input.classList.add('is-invalid');
                        alert(`Duplicate channel serial in form: ${serial}`);
                        return false;
                    }

                    serials.add(serial);
                    input.classList.remove('is-invalid');
                    hasValidChannel = true;
                }

                if (!hasValidChannel) {
                    alert('At least one channel must have a valid serial number');
                    return false;
                }

                // Check for duplicates in database
                try {
                    const response = await fetch('/probes/api/check-channel-serials', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({serials: Array.from(serials)})
                    });
                    
                    const data = await response.json();
                    if (data.duplicates && data.duplicates.length > 0) {
                        alert(`Channel serial already exists in database: ${data.duplicates[0]}`);
                        return false;
                    }
                } catch (error) {
                    console.error('Error checking channel serials:', error);
                    alert('Error validating channel serials. Please try again.');
                    return false;
                }

                return true;
            }

            document.getElementById('create-probe').addEventListener('click', async function(e) {
                e.preventDefault();
                if (await validateChannelSerials()) {
                    this.form.submit();
                }
            });

            document.getElementById('add-channel').addEventListener('click', function() {
                const container = document.getElementById('channels-container');
                const count = container.children.length;
                const newChannel = document.createElement('div');
                newChannel.className = 'channel-entry mb-3';
                newChannel.innerHTML = `
                    <div class="row">
                        <div class="col">
                            <label for="parameter_id_${count}" class="form-label">Parameter</label>
                            <select class="form-select" id="parameter_id_${count}" name="parameter_ids[]" required>
                                {% for param in parameters %}
                                <option value="{{ param.id }}">{{ param.parameter_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col">
                            <label for="channel_serial_${count}" class="form-label">Channel Serial</label>
                            <input type="text" class="form-control" id="channel_serial_${count}" name="channel_serials[]" required 
                                   pattern="[0-9A-F]{16}" title="16-character hex serial number">
                            <div class="invalid-feedback">
                                Must be a 16-character hex number (0-9, A-F)
                            </div>
                        </div>
                        <div class="col-auto d-flex align-items-end">
                            <button type="button" class="btn btn-danger remove-channel">Remove</button>
                        </div>
                    </div>
                `;
                container.appendChild(newChannel);
                
                // Add event listener to new remove button
                newChannel.querySelector('.remove-channel').addEventListener('click', function() {
                    container.removeChild(newChannel);
                });
            });
        </script>
    </form>
</div>
{% endblock %}