{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="mb-0">Probe: {{ probe.serial_number }}</h2>
                <span class="badge 
                    {% if probe.retired_at %}bg-secondary
                    {% else %}bg-success{% endif %}">
                    {% if probe.retired_at %}Retired{% else %}Active{% endif %}
                </span>
            </div>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-6">
                    <h5>Details</h5>
                    <dl class="row">
                        <dt class="col-sm-4">Serial Number</dt>
                        <dd class="col-sm-8">{{ probe.serial_number }}</dd>

                        <dt class="col-sm-4">Created</dt>
                        <dd class="col-sm-8">{{ probe.created_at.strftime('%Y-%m-%d') }}</dd>

                        {% if probe.retired_at %}
                        <dt class="col-sm-4">Retired</dt>
                        <dd class="col-sm-8">{{ probe.retired_at.strftime('%Y-%m-%d') }}</dd>
                        {% endif %}
                    </dl>
                </div>
            </div>

            </div>

            {% if channels %}
            <div class="mt-4">
                <h5>Channels</h5>
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Serial Number</th>
                                <th>Parameter</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for channel in channels %}
                            <tr>
                                <td>{{ channel.serial_number }}</td>
                                <td>{{ channel.parameter.parameter_name }}</td>
                                <td>
                                    <a href="{{ url_for('channels.view_channel', channel_id=channel.id) }}"
                                       class="btn btn-sm btn-outline-primary">View</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% else %}
            <div class="alert alert-info mt-4">No channels found for this probe</div>
            {% endif %}

            {% if not probe.retired_at %}
            <div class="mt-4">
                <h5>Add Channel</h5>
                <form method="POST" action="{{ url_for('probes.add_channel', probe_id=probe.id) }}">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="parameter_id" class="form-label">Parameter</label>
                            <select class="form-select" id="parameter_id" name="parameter_id" required>
                                {% for param in parameters %}
                                <option value="{{ param.id }}">{{ param.parameter_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="channel_serial" class="form-label">Channel Serial</label>
                            <input type="text" class="form-control" id="channel_serial" name="channel_serial" 
                                   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>
                    <button type="submit" class="btn btn-primary mt-3">Add Channel</button>
                </form>
            </div>
            {% endif %}

            {% if locations %}
            <div class="mt-4">
                <h5>Location History</h5>
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Location</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for location in locations %}
                            <tr>
                                <td>{{ location.location.name }}</td>
                                <td>{{ location.start_date.strftime('%Y-%m-%d') }}</td>
                                <td>
                                    {% if location.end_date %}
                                        {{ location.end_date.strftime('%Y-%m-%d') }}
                                    {% else %}
                                        Current
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% else %}
            <div class="alert alert-info mt-4">No location history found for this probe</div>
            {% endif %}

            <div class="mt-4">
                <a href="{{ url_for('probes.list_probes') }}" 
                   class="btn btn-outline-secondary">Back to List</a>
                
                {% if not probe.retired_at %}
                <form method="POST" action="{{ url_for('probes.retire_probe', probe_id=probe.id) }}" class="d-inline">
                    <button type="submit" class="btn btn-warning ms-2">Retire Probe</button>
                </form>
                {% endif %}
                
                {% if not channels %}
                <button class="btn btn-danger ms-2" id="delete-probe">Delete Probe</button>
                {% endif %}
            </div>

            <script>
                document.getElementById('delete-probe')?.addEventListener('click', async function() {
                    if (confirm('Are you sure you want to delete this probe?')) {
                        try {
                            const response = await fetch("{{ url_for('probes.delete_probe', probe_id=probe.id) }}", {
                                method: 'DELETE',
                                headers: {
                                    'Content-Type': 'application/json',
                                }
                            });
                            
                            if (response.ok) {
                                window.location.href = "{{ url_for('probes.list_probes') }}";
                            } else {
                                const error = await response.json();
                                alert(error.error || 'Failed to delete probe');
                            }
                        } catch (error) {
                            alert('Error deleting probe: ' + error.message);
                        }
                    }
                });
            </script>
        </div>
    </div>
</div>
{% endblock %}