{% extends "base.html" %}

{% block title %}{{ sbc.name }} - Lab Controller{% endblock %}

{% block content %}
<div class="page-header">
    <a href="{{ url_for('views.index') }}" class="back-link">&larr; Back to Dashboard</a>
    <h1>{{ sbc.name }}</h1>
    <span class="status-badge status-{{ sbc.status.value }}">{{ sbc.status.value }}</span>
</div>

{% if active_claim %}
<div class="claim-section">
    <h3>Active Claim</h3>
    <div class="info-row">
        <span class="label">Held by:</span>
        <span class="value">{{ active_claim.agent_name }} ({{ active_claim.session_kind }})</span>
    </div>
    <div class="info-row">
        <span class="label">Reason:</span>
        <span class="value">{{ active_claim.reason }}</span>
    </div>
    {% if active_claim.time_remaining %}
        {% set rem = active_claim.time_remaining.total_seconds()|int %}
        <div class="info-row">
            <span class="label">Time remaining:</span>
            <span class="value">
                {% if rem >= 3600 %}{{ rem // 3600 }}h {{ (rem % 3600) // 60 }}m
                {% elif rem >= 60 %}{{ rem // 60 }}m {{ rem % 60 }}s
                {% else %}{{ rem }}s{% endif %}
            </span>
        </div>
    {% endif %}
    {% if active_claim.renewal_count %}
    <div class="info-row">
        <span class="label">Renewed:</span>
        <span class="value">{{ active_claim.renewal_count }}x</span>
    </div>
    {% endif %}
    {% for req in active_claim.pending_requests %}
    <div class="claim-release-request">
        Release requested by <strong>{{ req.requested_by }}</strong>: {{ req.reason }}
    </div>
    {% endfor %}
    <form action="{{ url_for('views.sbc_force_release', name=sbc.name) }}" method="post" class="mt-2" style="display:inline;">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="reason" value="force-released via web dashboard">
        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Force-release this claim?')">Force Release</button>
    </form>
</div>
{% endif %}

<div class="detail-grid">
    <!-- Basic Info with Edit Form -->
    <div class="detail-card">
        <h3>Basic Information
            <button class="btn btn-sm btn-secondary" onclick="toggleEdit('basic')" style="float: right;">Edit</button>
        </h3>

        <!-- Display view -->
        <div id="basic-display">
            <table class="detail-table">
                <tr><th>Name</th><td>{{ sbc.name }}</td></tr>
                <tr><th>Project</th><td>{{ sbc.project or '-' }}</td></tr>
                <tr><th>Description</th><td>{{ sbc.description or '-' }}</td></tr>
                <tr><th>SSH User</th><td>{{ sbc.ssh_user }}</td></tr>
                <tr><th>Status</th><td>{{ sbc.status.value }}</td></tr>
            </table>
            <p class="mt-2">
                <a href="{{ url_for('views.sbc_history', name=sbc.name) }}" class="btn btn-secondary btn-sm">View Status History</a>
            </p>
        </div>

        <!-- Edit form (hidden by default) -->
        <form id="basic-edit" action="{{ url_for('views.sbc_edit', name=sbc.name) }}" method="post" style="display: none;">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
            <div class="form-group">
                <label>Name</label>
                <input type="text" name="name" value="{{ sbc.name }}" class="form-control">
            </div>
            <div class="form-group">
                <label>Project</label>
                <input type="text" name="project" value="{{ sbc.project or '' }}" class="form-control">
            </div>
            <div class="form-group">
                <label>Description</label>
                <input type="text" name="description" value="{{ sbc.description or '' }}" class="form-control">
            </div>
            <div class="form-group">
                <label>SSH User</label>
                <input type="text" name="ssh_user" value="{{ sbc.ssh_user }}" class="form-control">
            </div>
            <div class="form-group">
                <label>Status</label>
                <select name="status" class="form-control">
                    {% for s in Status %}
                    <option value="{{ s.value }}" {% if s == sbc.status %}selected{% endif %}>{{ s.value }}</option>
                    {% endfor %}
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Save</button>
            <button type="button" class="btn btn-secondary" onclick="toggleEdit('basic')">Cancel</button>
        </form>
    </div>

    <!-- Power Control -->
    <div class="detail-card">
        <h3>Power Control</h3>
        {% if sbc.power_plug %}
        <table class="detail-table">
            <tr><th>Plug Type</th><td>{{ sbc.power_plug.plug_type.value }}</td></tr>
            <tr><th>Address</th><td>{{ sbc.power_plug.address }}</td></tr>
            <tr><th>Index</th><td>{{ sbc.power_plug.plug_index }}</td></tr>
            <tr>
                <th>State</th>
                <td>
                    <span class="power-indicator power-{{ power_state.value if power_state else 'unknown' }}"></span>
                    {{ power_state.value.upper() if power_state else 'UNKNOWN' }}
                </td>
            </tr>
        </table>
        <div class="power-actions-large">
            <form action="{{ url_for('views.sbc_power_action', name=sbc.name, action='on') }}" method="post" class="inline-form">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-success">Power ON</button>
            </form>
            <form action="{{ url_for('views.sbc_power_action', name=sbc.name, action='off') }}" method="post" class="inline-form">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-danger">Power OFF</button>
            </form>
            <form action="{{ url_for('views.sbc_power_action', name=sbc.name, action='cycle') }}" method="post" class="inline-form">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-warning">Power Cycle</button>
            </form>
        </div>
        <form action="{{ url_for('views.sbc_plug_remove', name=sbc.name) }}" method="post" class="mt-2">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn btn-sm btn-secondary" onclick="return confirm('Remove power plug?')">Remove Plug</button>
        </form>
        {% else %}
        <p class="text-muted">No power plug assigned.</p>
        <button class="btn btn-sm btn-primary" onclick="toggleEdit('plug')">Assign Power Plug</button>
        <form id="plug-edit" action="{{ url_for('views.sbc_plug_assign', name=sbc.name) }}" method="post" style="display: none; margin-top: 1rem;">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
            <div class="form-group">
                <label>Plug Type</label>
                <select name="plug_type" class="form-control" required>
                    {% for pt in PlugType %}
                    <option value="{{ pt.value }}">{{ pt.value }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label>Address (IP)</label>
                <input type="text" name="address" placeholder="192.168.1.100" class="form-control" required>
            </div>
            <div class="form-group">
                <label>Outlet Index</label>
                <input type="number" name="plug_index" value="1" min="1" class="form-control">
            </div>
            <button type="submit" class="btn btn-primary">Assign</button>
            <button type="button" class="btn btn-secondary" onclick="toggleEdit('plug')">Cancel</button>
        </form>
        {% endif %}
    </div>

    <!-- Serial Ports -->
    <div class="detail-card">
        <h3>Serial Ports
            <button class="btn btn-sm btn-primary" onclick="toggleEdit('port')" style="float: right;">Add Port</button>
        </h3>
        {% if sbc.serial_ports %}
        <table class="detail-table">
            <tr><th>Type</th><th>Alias</th><th>Device</th><th>TCP Port</th><th>Baud</th><th></th></tr>
            {% for port in sbc.serial_ports %}
            <tr>
                <td>{{ port.port_type.value }}</td>
                <td>{{ port.alias or '-' }}</td>
                <td><code>{{ port.device_path }}</code></td>
                <td>{{ port.tcp_port or '-' }}</td>
                <td>{{ port.baud_rate }}</td>
                <td>
                    <form action="{{ url_for('views.sbc_port_remove', name=sbc.name, port_type=port.port_type.value) }}" method="post" class="inline-form">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="btn btn-xs btn-danger" onclick="return confirm('Remove this port?')">X</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </table>
        {% if sbc.console_port and sbc.console_port.tcp_port %}
        <p class="mt-2">
            Connect: <code>nc localhost {{ sbc.console_port.tcp_port }}</code>
            <a href="{{ url_for('views.sbc_console', name=sbc.name) }}" class="btn btn-primary btn-sm" style="margin-left: 1rem;">Open Web Console</a>
        </p>
        {% endif %}
        {% else %}
        <p class="text-muted">No serial ports assigned.</p>
        {% endif %}

        <!-- Add port form (hidden by default) -->
        <form id="port-edit" action="{{ url_for('views.sbc_port_assign', name=sbc.name) }}" method="post" style="display: none; margin-top: 1rem;">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
            <div class="form-group">
                <label>Port Type</label>
                <select name="port_type" class="form-control" required>
                    {% for pt in PortType %}
                    <option value="{{ pt.value }}">{{ pt.value }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label>Alias (optional)</label>
                <input type="text" name="alias" placeholder="e.g. jetson-console" class="form-control">
            </div>
            <div class="form-group">
                <label>Device Path</label>
                <input type="text" name="device" placeholder="/dev/lab/port-1" class="form-control" required>
            </div>
            <div class="form-group">
                <label>TCP Port (optional)</label>
                <input type="number" name="tcp_port" placeholder="Auto-assign" class="form-control">
            </div>
            <div class="form-group">
                <label>Baud Rate</label>
                <input type="number" name="baud_rate" value="115200" class="form-control">
            </div>
            <button type="submit" class="btn btn-primary">Add Port</button>
            <button type="button" class="btn btn-secondary" onclick="toggleEdit('port')">Cancel</button>
        </form>
    </div>

    <!-- Network Addresses -->
    <div class="detail-card">
        <h3>Network Addresses
            <button class="btn btn-sm btn-primary" onclick="toggleEdit('network')" style="float: right;">Add Address</button>
        </h3>
        {% if sbc.network_addresses %}
        <table class="detail-table">
            <tr><th>Type</th><th>IP Address</th><th>MAC</th><th></th></tr>
            {% for addr in sbc.network_addresses %}
            <tr>
                <td>{{ addr.address_type.value }}</td>
                <td>{{ addr.ip_address }}</td>
                <td>{{ addr.mac_address or '-' }}</td>
                <td>
                    <form action="{{ url_for('views.sbc_network_remove', name=sbc.name, address_type=addr.address_type.value) }}" method="post" class="inline-form">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="btn btn-xs btn-danger" onclick="return confirm('Remove this address?')">X</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </table>
        {% if sbc.primary_ip %}
        <p class="mt-2">
            SSH: <code>ssh {{ sbc.ssh_user }}@{{ sbc.primary_ip }}</code>
        </p>
        {% endif %}
        {% else %}
        <p class="text-muted">No network addresses configured.</p>
        {% endif %}

        <!-- Add network form (hidden by default) -->
        <form id="network-edit" action="{{ url_for('views.sbc_network_set', name=sbc.name) }}" method="post" style="display: none; margin-top: 1rem;">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
            <div class="form-group">
                <label>Address Type</label>
                <select name="address_type" class="form-control" required>
                    {% for at in AddressType %}
                    <option value="{{ at.value }}">{{ at.value }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label>IP Address</label>
                <input type="text" name="ip_address" placeholder="192.168.1.100" class="form-control" required>
            </div>
            <div class="form-group">
                <label>MAC Address (optional)</label>
                <input type="text" name="mac_address" placeholder="aa:bb:cc:dd:ee:ff" class="form-control">
            </div>
            <div class="form-group">
                <label>Hostname (optional)</label>
                <input type="text" name="hostname" placeholder="sbc1.local" class="form-control">
            </div>
            <button type="submit" class="btn btn-primary">Add Address</button>
            <button type="button" class="btn btn-secondary" onclick="toggleEdit('network')">Cancel</button>
        </form>
    </div>
</div>

<script>
function toggleEdit(section) {
    var display = document.getElementById(section + '-display');
    var edit = document.getElementById(section + '-edit');

    if (display) {
        display.style.display = display.style.display === 'none' ? 'block' : 'none';
    }
    if (edit) {
        edit.style.display = edit.style.display === 'none' ? 'block' : 'none';
    }
}
</script>
{% endblock %}