{% extends "generic/object_detail.html" %}
{% load helpers %}

{% block extra_buttons %}
    {% if perms.intent_networking.change_intent %}
        <a href="{% url 'extras:job_run_by_class_path' class_path='intent_networking.jobs.IntentResolutionJob' %}?intent_id={{ object.intent_id }}"
           class="btn btn-sm btn-primary" title="Resolve">
            <i class="mdi mdi-cog-outline"></i> Resolve
        </a>
    {% endif %}
    {% if perms.intent_networking.change_intent %}
        <a href="{% url 'extras:job_run_by_class_path' class_path='intent_networking.jobs.IntentConfigPreviewJob' %}?intent_id={{ object.intent_id }}"
           class="btn btn-sm btn-secondary" title="Config Preview">
            <i class="mdi mdi-eye-outline"></i> Preview
        </a>
    {% endif %}
    {% if perms.intent_networking.deploy_intent %}
        <a href="{% url 'extras:job_run_by_class_path' class_path='intent_networking.jobs.IntentDeploymentJob' %}?intent_id={{ object.intent_id }}"
           class="btn btn-sm btn-success" title="Deploy">
            <i class="mdi mdi-rocket-launch"></i> Deploy
        </a>
        <a href="{% url 'extras:job_run_by_class_path' class_path='intent_networking.jobs.IntentDeploymentJob' %}?intent_id={{ object.intent_id }}&amp;commit=false"
           class="btn btn-sm btn-info" title="Dry-Run Deploy">
            <i class="mdi mdi-flask-outline"></i> Dry Run
        </a>
    {% endif %}
    {% if perms.intent_networking.change_intent %}
        <a href="{% url 'extras:job_run_by_class_path' class_path='intent_networking.jobs.IntentVerificationJob' %}?intent_id={{ object.intent_id }}"
           class="btn btn-sm btn-warning" title="Verify">
            <i class="mdi mdi-check-decagram"></i> Verify
        </a>
    {% endif %}
    {% if perms.intent_networking.rollback_intent %}
        <a href="{% url 'extras:job_run_by_class_path' class_path='intent_networking.jobs.IntentRollbackJob' %}?intent_id={{ object.intent_id }}"
           class="btn btn-sm btn-danger" title="Rollback">
            <i class="mdi mdi-undo"></i> Rollback
        </a>
    {% endif %}
{% endblock extra_buttons %}

{% block content_left_page %}
  {# ── Identity ──────────────────────────────────────────────────────── #}
    <div class="panel panel-default">
        <div class="panel-heading"><strong>Intent Details</strong></div>
        <table class="table table-hover panel-body attr-table">
            <tr>
                <td>Intent ID</td>
                <td><strong>{{ object.intent_id }}</strong></td>
            </tr>
            <tr>
                <td>Version</td>
                <td>{{ object.version }}</td>
            </tr>
            <tr>
                <td>Type</td>
                <td>{{ object.get_intent_type_display }}</td>
            </tr>
            <tr>
                <td>Status</td>
                <td>{% if object.status %}{{ object.status }}{% else %}&mdash;{% endif %}</td>
            </tr>
            <tr>
                <td>Tenant</td>
                <td>
                    {% if object.tenant %}
                        <a href="{{ object.tenant.get_absolute_url }}">{{ object.tenant }}</a>
                    {% else %}
                        &mdash;
                    {% endif %}
                </td>
            </tr>
            <tr>
                <td>Change Ticket</td>
                <td>{{ object.change_ticket|default:"&mdash;" }}</td>
            </tr>
            <tr>
                <td>Deployment Strategy</td>
                <td>{{ object.get_deployment_strategy_display|default:"All at once" }}</td>
            </tr>
        </table>
    </div>

  {# ── Approval Status (#2) ─────────────────────────────────────────── #}
    <div class="panel panel-{% if object.is_approved %}success{% else %}warning{% endif %}">
        <div class="panel-heading">
            <strong>Approval Status</strong>
            {% if object.is_approved %}
                <span class="label label-success pull-right">✅ Approved</span>
            {% else %}
                <span class="label label-warning pull-right">⏳ Pending Approval</span>
            {% endif %}
        </div>
        {% if approvals %}
            <table class="table table-hover panel-body">
                <thead>
                    <tr>
                        <th>Approver</th>
                        <th>Decision</th>
                        <th>Comment</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
                    {% for a in approvals %}
                        <tr class="{% if a.decision == 'approved' %}success{% elif a.decision == 'rejected' %}danger{% else %}info{% endif %}">
                            <td>{{ a.approver }}</td>
                            <td>{{ a.get_decision_display }}</td>
                            <td>{{ a.comment|default:"&mdash;" }}</td>
                            <td>{{ a.decided_at }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div class="panel-body text-muted">No approval decisions yet. Legacy: {{ object.approved_by|default:"&mdash;" }}</div>
        {% endif %}
        {% if perms.intent_networking.approve_intent %}
            <div class="panel-footer">
                <div class="row">
                    <div class="col-md-12">
                        <form method="post" class="form-inline" style="display: inline-block; margin-right: 8px;"
                              action="{% url 'plugins:intent_networking:intent_approve' pk=object.pk %}">
                            {% csrf_token %}
                            <input type="text" name="comment" class="form-control input-sm" placeholder="Comment (optional)" style="width: 260px; margin-right: 4px;">
                            <button type="submit" class="btn btn-sm btn-success" title="Approve this intent">
                                <i class="mdi mdi-check-bold"></i> Approve
                            </button>
                        </form>
                        <form method="post" class="form-inline" style="display: inline-block;"
                              action="{% url 'plugins:intent_networking:intent_reject' pk=object.pk %}">
                            {% csrf_token %}
                            <input type="hidden" name="comment" value="">
                            <button type="submit" class="btn btn-sm btn-danger" title="Reject this intent"
                                    onclick="var c=prompt('Reason for rejection:',''); if(c===null) return false; this.form.comment.value=c;">
                                <i class="mdi mdi-close-thick"></i> Reject
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

  {# ── Timestamps ────────────────────────────────────────────────────── #}
    <div class="panel panel-default">
        <div class="panel-heading"><strong>Timestamps</strong></div>
        <table class="table table-hover panel-body attr-table">
            <tr>
                <td>Created</td>
                <td>{{ object.created }}</td>
            </tr>
            <tr>
                <td>Last Updated</td>
                <td>{{ object.last_updated }}</td>
            </tr>
            <tr>
                <td>Deployed At</td>
                <td>{{ object.deployed_at|default:"&mdash;" }}</td>
            </tr>
            <tr>
                <td>Last Verified At</td>
                <td>{{ object.last_verified_at|default:"&mdash;" }}</td>
            </tr>
            <tr>
                <td>Scheduled Deploy At</td>
                <td>{{ object.scheduled_deploy_at|default:"Not scheduled" }}</td>
            </tr>
        </table>
    </div>

  {# ── Raw Intent Data ───────────────────────────────────────────────── #}
    <div class="panel panel-default">
        <div class="panel-heading"><strong>Intent Data (JSON)</strong></div>
        <div class="panel-body">
      <pre class="pre-scrollable" style="max-height: 400px;">{{ object.intent_data|pprint }}</pre>
        </div>
    </div>

  {# ── Rendered Config Preview (#1) ──────────────────────────────────── #}
    {% if rendered_configs %}
        <div class="panel panel-info">
            <div class="panel-heading">
                <strong>🔍 Config Preview (Dry-Run)</strong>
                <a href="{% url 'plugins:intent_networking:config_preview' intent_id=object.intent_id %}"
                   class="btn btn-xs btn-default pull-right">Full Preview</a>
            </div>
            <div class="panel-body">
                {% for device_name, config in rendered_configs.items %}
                    <h5><code>{{ device_name }}</code></h5>
        <pre class="pre-scrollable" style="max-height: 200px;">{{ config }}</pre>
                {% endfor %}
            </div>
        </div>
    {% endif %}
{% endblock content_left_page %}

{% block content_right_page %}
  {# ── Git Source ────────────────────────────────────────────────────── #}
    <div class="panel panel-default">
        <div class="panel-heading"><strong>Git Source</strong></div>
        <table class="table table-hover panel-body attr-table">
            <tr>
                <td>Repository</td>
                <td>
                    {% if object.git_repository %}
                        <a href="{{ object.git_repository.get_absolute_url }}">{{ object.git_repository.name }}</a>
                    {% else %}
                        &mdash;
                    {% endif %}
                </td>
            </tr>
            <tr>
                <td>Branch</td>
                <td><code>{{ object.git_branch|default:"&mdash;" }}</code></td>
            </tr>
            <tr>
                <td>Commit SHA</td>
                <td><code>{{ object.git_commit_sha|default:"&mdash;"|truncatechars:12 }}</code></td>
            </tr>
            <tr>
                <td>PR #</td>
                <td>{{ object.git_pr_number|default:"&mdash;" }}</td>
            </tr>
        </table>
    </div>

  {# ── Latest Resolution Plan ────────────────────────────────────────── #}
    <div class="panel panel-default">
        <div class="panel-heading"><strong>Resolution Plans (latest 5)</strong></div>
        {% if resolution_plans %}
            <table class="table table-hover panel-body">
                <thead>
                    <tr>
                        <th>Version</th>
                        <th>VRF</th>
                        <th>Devices</th>
                        <th>Affected Devices</th>
                        <th>Primitives</th>
                        <th>Resolved At</th>
                    </tr>
                </thead>
                <tbody>
                    {% for plan in resolution_plans %}
                        <tr>
                            <td>v{{ plan.intent_version }}</td>
                            <td>{{ plan.vrf_name|default:"&mdash;" }}</td>
                            <td>{{ plan.affected_devices.count }}</td>
                            <td>{{ plan.affected_device_names|join:", "|default:"&mdash;" }}</td>
                            <td>{{ plan.primitive_count }}</td>
                            <td>{{ plan.resolved_at }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div class="panel-body text-muted">No resolution plans yet.</div>
        {% endif %}
    </div>

  {# ── Verification History ──────────────────────────────────────────── #}
    <div class="panel panel-default">
        <div class="panel-heading"><strong>Verification History (latest 10)</strong></div>
        {% if verifications %}
            <table class="table table-hover panel-body">
                <thead>
                    <tr>
                        <th>Result</th>
                        <th>Trigger</th>
                        <th>Latency</th>
                        <th>Verified At</th>
                    </tr>
                </thead>
                <tbody>
                    {% for v in verifications %}
                        <tr class="{% if v.passed %}success{% else %}danger{% endif %}">
                            <td>{% if v.passed %}✅ Pass{% else %}❌ Fail{% endif %}</td>
                            <td>{{ v.triggered_by }}</td>
                            <td>{{ v.measured_latency_ms|default:"&mdash;" }} ms</td>
                            <td>{{ v.verified_at }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div class="panel-body text-muted">No verification runs yet.</div>
        {% endif %}
    </div>

  {# ── Audit Trail (#4) ─────────────────────────────────────────────── #}
    <div class="panel panel-default">
        <div class="panel-heading">
            <strong>🔍 Audit Trail (latest 20)</strong>
            <a href="{% url 'plugins:intent_networking:intentauditentry_list' %}"
               class="btn btn-xs btn-default pull-right">View All</a>
        </div>
        {% if audit_entries %}
            <table class="table table-hover panel-body table-condensed">
                <thead>
                    <tr>
                        <th>Action</th>
                        <th>Actor</th>
                        <th>Timestamp</th>
                        <th>Commit</th>
                    </tr>
                </thead>
                <tbody>
                    {% for e in audit_entries %}
                        <tr>
                            <td><span class="label label-default">{{ e.action }}</span></td>
                            <td>{{ e.actor }}</td>
                            <td>{{ e.timestamp }}</td>
                            <td><code>{{ e.git_commit_sha|default:"&mdash;"|truncatechars:8 }}</code></td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div class="panel-body text-muted">No audit entries yet.</div>
        {% endif %}
    </div>
{% endblock content_right_page %}