{% extends "base.html" %}
{% load static %}
{% load markdown_filters %}

{% block title %}{{ playbook.name }} - Playbook{% endblock %}

{% block content %}
<div class="container mt-4" data-testid="playbook-detail">
    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'playbook_list' %}">Playbooks</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ playbook.name }}</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-start mb-4" data-testid="playbook-header">
        <div>
            <h2>
                <i class="fa-solid fa-book-sparkles"></i> {{ playbook.name }}
            </h2>
            <p class="text-muted">
                <span class="badge bg-{{ playbook.get_status_badge_color }}" data-testid="status-badge">{{ playbook.get_status_display }}</span>
                <span class="badge bg-secondary" data-testid="version-badge">v{{ playbook.version }}</span>
                <span class="badge bg-info">{{ playbook.get_category_display }}</span>
                <span class="badge bg-dark" data-testid="visibility-badge">{{ playbook.get_visibility_display }}</span>
            </p>
            <p class="text-muted small">
                <i class="fa-solid fa-user"></i> {{ playbook.author.username }}
                <i class="fa-solid fa-clock ms-2"></i> Updated {{ playbook.updated_at|timesince }} ago
            </p>
        </div>
        <div class="btn-group" data-testid="playbook-header-actions" role="group" aria-label="Playbook actions">
            {% if playbook.source == 'owned' and playbook.author == request.user %}
                {# Delete is always leftmost among header actions (destructive, isolated from primary CTAs). #}
                <button type="button"
                        class="btn btn-outline-danger"
                        data-testid="delete-button"
                        data-bs-toggle="tooltip"
                        title="Delete this playbook"
                        hx-get="{% url 'playbook_delete_confirm' pk=playbook.pk %}"
                        hx-target="#playbook-delete-modal-container"
                        hx-swap="innerHTML">
                    <i class="fa-solid fa-trash"></i> Delete
                </button>
                {% if playbook.is_draft %}
                    <!-- Edit button for draft playbooks -->
                    <a href="{% url 'playbook_edit' pk=playbook.pk %}"
                       class="btn btn-primary"
                       data-bs-toggle="tooltip"
                       title="Edit this playbook (v{{ playbook.version }})">
                        <i class="fa-solid fa-edit"></i> Edit
                    </a>
                    <!-- Release button for draft playbooks -->
                    <button type="button"
                            class="btn btn-success"
                            data-bs-toggle="modal"
                            data-bs-target="#release-modal"
                            data-testid="open-release-modal"
                            title="Release this playbook to the next major line (read-only; changes require PIP)">
                        <i class="fa-solid fa-rocket"></i> Release
                    </button>
                {% elif playbook.is_released %}
                    <!-- Edit button disabled for released playbooks -->
                    <button type="button"
                            class="btn btn-secondary"
                            disabled
                            data-bs-toggle="tooltip"
                            title="Released playbooks cannot be edited directly. Please submit a PIP (Process Improvement Proposal) to make changes.">
                        <i class="fa-solid fa-edit"></i> Edit
                    </button>
                    <button type="button"
                            class="btn btn-success"
                            data-bs-toggle="modal"
                            data-bs-target="#release-modal"
                            data-testid="open-release-modal-released"
                            title="Cut the next major release line (for example v1.x → v2.0).">
                        <i class="fa-solid fa-rocket"></i> Next major
                    </button>
                    <!-- Submit PIP — primary CTA for released playbooks (rightmost before Back) -->
                    <a href="{% url 'pip_create' %}?playbook={{ playbook.pk }}"
                       class="btn btn-primary"
                       data-testid="playbook-submit-pip"
                       data-bs-toggle="tooltip"
                       title="Submit a Process Improvement Proposal to change this playbook">
                        <i class="fa-solid fa-lightbulb"></i> Submit PIP
                    </a>
                {% else %}
                    <!-- Active/Disabled status - legacy, allow edit -->
                    <a href="{% url 'playbook_edit' pk=playbook.pk %}"
                       class="btn btn-primary"
                       data-bs-toggle="tooltip"
                       title="Edit this playbook">
                        <i class="fa-solid fa-edit"></i> Edit
                    </a>
                {% endif %}
            {% endif %}
            <a href="{% url 'playbook_list' %}"
               class="btn btn-outline-secondary"
               data-bs-toggle="tooltip"
               title="Back to playbooks list">
                <i class="fa-solid fa-arrow-left"></i> Back
            </a>
        </div>
    </div>

    <!-- Tab Navigation -->
    <ul class="nav nav-tabs mb-4" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" 
                    data-testid="tab-overview"
                    id="overview-tab" 
                    data-bs-toggle="tab" 
                    data-bs-target="#overview" 
                    type="button" 
                    role="tab">
                <i class="fa-solid fa-info-circle"></i> Overview
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" 
                    data-testid="tab-workflows"
                    id="workflows-tab" 
                    data-bs-toggle="tab" 
                    data-bs-target="#workflows-content" 
                    type="button" 
                    role="tab">
                <i class="fa-solid fa-diagram-project"></i> Workflows
                {% if quick_stats.workflows %}
                <span class="badge bg-secondary ms-1">{{ quick_stats.workflows }}</span>
                {% endif %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link"
                    data-testid="tab-phases"
                    id="phases-tab"
                    data-bs-toggle="tab"
                    data-bs-target="#phases-content"
                    type="button"
                    role="tab">
                <i class="fa-solid fa-bars-progress"></i> Phases
                {% if quick_stats.phases %}
                <span class="badge bg-secondary ms-1">{{ quick_stats.phases }}</span>
                {% endif %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link"
                    data-testid="tab-agents"
                    id="agents-tab"
                    data-bs-toggle="tab"
                    data-bs-target="#agents-content"
                    type="button"
                    role="tab">
                <i class="fa-solid fa-brain-circuit"></i> Agents
                {% if quick_stats.agents %}
                <span class="badge bg-secondary ms-1">{{ quick_stats.agents }}</span>
                {% endif %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" 
                    data-testid="tab-history"
                    id="history-tab" 
                    data-bs-toggle="tab" 
                    data-bs-target="#history" 
                    type="button" 
                    role="tab">
                <i class="fa-solid fa-history"></i> History
            </button>
        </li>
        {% if can_edit %}
        <li class="nav-item" role="presentation">
            <button class="nav-link" 
                    data-testid="tab-settings"
                    id="settings-tab" 
                    data-bs-toggle="tab" 
                    data-bs-target="#settings" 
                    type="button" 
                    role="tab">
                <i class="fa-solid fa-cog"></i> Settings
            </button>
        </li>
        {% endif %}
    </ul>

    <!-- Tab Content -->
    <div class="tab-content">
        <!-- Overview Tab -->
        <div class="tab-pane fade show active" id="overview" role="tabpanel">
            <!-- Description -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fa-solid fa-align-left"></i> Description</h5>
                </div>
                <div class="card-body">
                    <p>{{ playbook.description }}</p>
                </div>
            </div>

            <!-- Quick Stats & Content Row -->
            <div class="row">
                <div class="col-md-8">
                    <!-- Quick Stats Card -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fa-solid fa-chart-bar"></i> Quick Stats</h5>
                        </div>
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-md-4 mb-3" data-testid="stat-workflows">
                                    <a href="{% url 'workflow_list' playbook.pk %}"
                                       class="d-block text-decoration-none text-reset p-3 border rounded h-100 quick-stat-link"
                                       data-testid="stat-workflows-link"
                                       data-bs-toggle="tooltip"
                                       title="View workflows in this playbook">
                                        <i class="fa-solid fa-diagram-project fa-2x text-primary mb-2"></i>
                                        <h3 class="mb-0">{{ quick_stats.workflows }}</h3>
                                        <small class="text-muted">Workflows</small>
                                    </a>
                                </div>
                                <div class="col-md-4 mb-3" data-testid="stat-phases">
                                    <a href="{% url 'phase_list_global' %}?playbook={{ playbook.pk }}"
                                       class="d-block text-decoration-none text-reset p-3 border rounded h-100 quick-stat-link"
                                       data-testid="stat-phases-link"
                                       data-bs-toggle="tooltip"
                                       title="View phases in global list (filtered to this playbook)">
                                        <i class="fa-solid fa-bars-progress fa-2x text-info mb-2"></i>
                                        <h3 class="mb-0">{{ quick_stats.phases }}</h3>
                                        <small class="text-muted">Phases</small>
                                    </a>
                                </div>
                                <div class="col-md-4 mb-3" data-testid="stat-activities">
                                    <a href="{% url 'activity_list_for_playbook' playbook.pk %}"
                                       class="d-block text-decoration-none text-reset p-3 border rounded h-100 quick-stat-link"
                                       data-testid="stat-activities-link"
                                       data-bs-toggle="tooltip"
                                       title="View all activities in this playbook">
                                        <i class="fa-solid fa-list-check fa-2x text-success mb-2"></i>
                                        <h3 class="mb-0">{{ quick_stats.activities }}</h3>
                                        <small class="text-muted">Activities</small>
                                    </a>
                                </div>
                                <div class="col-md-4 mb-3" data-testid="stat-artifacts">
                                    <a href="{% url 'artifact_list' playbook_id=playbook.pk %}"
                                       class="d-block text-decoration-none text-reset p-3 border rounded h-100 quick-stat-link"
                                       data-testid="stat-artifacts-link"
                                       data-bs-toggle="tooltip"
                                       title="View artifacts for this playbook">
                                        <i class="fa-solid fa-gift fa-2x text-warning mb-2"></i>
                                        <h3 class="mb-0">{{ quick_stats.artifacts }}</h3>
                                        <small class="text-muted">Artifacts</small>
                                    </a>
                                </div>
                                <div class="col-md-4 mb-3" data-testid="stat-agents">
                                    <a href="{% url 'agent_list_for_playbook' playbook.pk %}"
                                       class="d-block text-decoration-none text-reset p-3 border rounded h-100 quick-stat-link"
                                       data-testid="stat-agents-link"
                                       data-bs-toggle="tooltip"
                                       title="View agents for this playbook">
                                        <i class="fa-solid fa-brain-circuit fa-2x text-primary mb-2"></i>
                                        <h3 class="mb-0">{{ quick_stats.agents }}</h3>
                                        <small class="text-muted">Agents</small>
                                    </a>
                                </div>
                                <div class="col-md-4 mb-3" data-testid="stat-skills">
                                    <a href="{% url 'skill_list_playbook' playbook.pk %}"
                                       class="d-block text-decoration-none text-reset p-3 border rounded h-100 quick-stat-link"
                                       data-testid="stat-skills-link"
                                       data-bs-toggle="tooltip"
                                       title="View skills for this playbook">
                                        <i class="fa-solid fa-hand-holding-magic fa-2x text-danger mb-2"></i>
                                        <h3 class="mb-0">{{ quick_stats.skills }}</h3>
                                        <small class="text-muted">Skills</small>
                                    </a>
                                </div>
                                <div class="col-md-4 mb-3" data-testid="stat-rules">
                                    <a href="{% url 'rule_list_playbook' playbook.pk %}"
                                       class="d-block text-decoration-none text-reset p-3 border rounded h-100 quick-stat-link"
                                       data-testid="stat-rules-link"
                                       data-bs-toggle="tooltip"
                                       title="View rules for this playbook">
                                        <i class="fa-solid fa-scale-balanced fa-2x text-secondary mb-2"></i>
                                        <h3 class="mb-0">{{ quick_stats.rules }}</h3>
                                        <small class="text-muted">Rules</small>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Workflows Section -->
                    <div class="card mb-4" data-testid="workflows-section">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fa-solid fa-diagram-project"></i> Workflows</h5>
                        </div>
                        <div class="card-body">
                            {% if workflows %}
                                <ul class="list-group list-group-flush">
                                    {% for workflow in workflows %}
                                        <li class="list-group-item">
                                            <i class="fa-solid fa-diagram-project text-primary"></i>
                                            {% if workflow.abbreviation %}
                                            <span class="badge bg-secondary font-monospace me-1"
                                                  data-testid="workflow-code-{{ workflow.pk }}">{{ workflow.abbreviation }}</span>
                                            {% endif %}
                                            <strong>{{ workflow.name }}</strong>
                                            {% if workflow.description %}
                                                <p class="mb-0 text-muted small">{{ workflow.description }}</p>
                                            {% endif %}
                                        </li>
                                    {% endfor %}
                                </ul>
                            {% else %}
                                <p class="text-muted mb-0">No workflows added yet.</p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <!-- Metadata -->
                    <div class="card mb-4" data-testid="metadata-section">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fa-solid fa-info-circle"></i> Metadata</h5>
                        </div>
                        <div class="card-body">
                            <dl class="row mb-0">
                                <dt class="col-sm-5">Category:</dt>
                                <dd class="col-sm-7">{{ playbook.get_category_display }}</dd>

                                <dt class="col-sm-5">Author:</dt>
                                <dd class="col-sm-7">{{ playbook.author.username }}</dd>

                                <dt class="col-sm-5">Created:</dt>
                                <dd class="col-sm-7">{{ playbook.created_at|timesince }} ago</dd>

                                <dt class="col-sm-5">Source:</dt>
                                <dd class="col-sm-7">{{ playbook.get_source_display }}</dd>

                                {% if playbook.tags %}
                                <dt class="col-sm-5">Tags:</dt>
                                <dd class="col-sm-7">
                                    {% for tag in playbook.tags %}
                                        <span class="badge bg-secondary">{{ tag }}</span>
                                    {% endfor %}
                                </dd>
                                {% endif %}
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Workflows Tab (placeholder) -->
        <div class="tab-pane fade" id="workflows-content" role="tabpanel">
            {% include "methodology/partials/workflows_tab_content.html" %}
        </div>

        <!-- Phases Tab -->
        <div class="tab-pane fade" id="phases-content" role="tabpanel" data-testid="phases-tab-content">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0"><i class="fa-solid fa-bars-progress me-2"></i>Lifecycle Phases</h5>
                {% if can_edit %}
                <a href="{% url 'phase_create' playbook.pk %}"
                   class="btn btn-primary btn-sm"
                   data-testid="create-phase-btn"
                   data-bs-toggle="tooltip"
                   title="Create a new lifecycle phase">
                    <i class="fa-solid fa-plus"></i> Create Phase
                </a>
                {% endif %}
            </div>
            {% if phases %}
            <div class="list-group" data-testid="phases-list-tab">
                {% for phase in phases %}
                <a href="{% url 'phase_detail' playbook_pk=playbook.pk phase_pk=phase.pk %}"
                   class="list-group-item list-group-item-action"
                   data-testid="phase-tab-row-{{ phase.pk }}">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <i class="fa-solid fa-bars-progress text-primary me-2"></i>
                            <strong>{{ phase.name }}</strong>
                            <span class="badge bg-secondary ms-2">Order: {{ phase.order }}</span>
                        </div>
                        <span class="badge bg-info">{{ phase.get_activity_count }} activities</span>
                    </div>
                    {% if phase.description %}
                    <p class="mb-0 text-muted small mt-1">{{ phase.description|truncatewords:20 }}</p>
                    {% endif %}
                </a>
                {% endfor %}
            </div>
            {% else %}
            <div class="alert alert-info" data-testid="no-phases-message">
                <i class="fa-solid fa-info-circle me-2"></i>
                No phases defined yet.
                {% if can_edit %}
                <a href="{% url 'phase_create' playbook.pk %}">Create the first phase</a>
                {% endif %}
            </div>
            {% endif %}
        </div>

        <!-- Agents Tab -->
        <div class="tab-pane fade" id="agents-content" role="tabpanel" data-testid="agents-tab-content">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0"><i class="fa-solid fa-brain-circuit me-2"></i>Agents</h5>
                {% if can_edit %}
                <a href="{% url 'agent_create' playbook_pk=playbook.pk %}"
                   class="btn btn-primary btn-sm"
                   data-testid="create-agent-btn"
                   data-bs-toggle="tooltip"
                   title="Create a new agent for this playbook">
                    <i class="fa-solid fa-plus"></i> Create New Agent
                </a>
                {% endif %}
            </div>
            {% if agents %}
            <div class="list-group" data-testid="agents-list-tab">
                {% for agent in agents %}
                <a href="{% url 'agent_detail' pk=agent.pk %}"
                   class="list-group-item list-group-item-action"
                   data-testid="agent-tab-row-{{ agent.pk }}">
                    <i class="fa-solid fa-brain-circuit text-primary me-2"></i>
                    <strong>{{ agent.name }}</strong>
                    {% if agent.description %}
                    <p class="mb-0 text-muted small">{{ agent.description|markdown|striptags|truncatewords:20 }}</p>
                    {% endif %}
                </a>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-4" data-testid="agents-tab-empty">
                <i class="fa-solid fa-brain-circuit fa-3x text-muted mb-3"></i>
                <p class="text-muted">No agents in this playbook yet.</p>
                {% if can_edit %}
                <a href="{% url 'agent_create' playbook_pk=playbook.pk %}"
                   class="btn btn-primary mt-2"
                   data-testid="create-first-agent-tab-btn">
                    <i class="fa-solid fa-plus"></i> Create First Agent
                </a>
                {% endif %}
            </div>
            {% endif %}
        </div>

        <!-- History Tab -->
        <div class="tab-pane fade" id="history" role="tabpanel" data-testid="history-tab-panel">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h5 class="mb-0" data-testid="history-heading">Version history</h5>
                {% if version_history|length >= 2 %}
                    <a class="btn btn-sm btn-outline-primary"
                       data-testid="history-compare-link"
                       href="{% url 'playbook_versions_compare' pk=playbook.pk %}?left={{ version_history.1.url_slug }}&right={{ version_history.0.url_slug }}">
                        Compare latest two
                    </a>
                {% endif %}
            </div>
            {% if version_history %}
            <ul class="list-group list-group-flush" data-testid="history-versions-table">
                {% for row in version_history %}
                <li class="list-group-item px-0 d-flex justify-content-between align-items-start gap-3"
                    data-testid="history-version-row">
                    <div>
                        <a href="{% url 'playbook_version_snapshot' pk=playbook.pk version_slug=row.url_slug %}"
                           class="fw-semibold link-primary"
                           data-testid="history-version-link">
                            v{{ row.label }}</a>
                        <span class="badge ms-2 {% if row.kind_major %}bg-primary{% else %}bg-secondary text-white{% endif %}"
                              data-testid="history-version-kind">{{ row.kind_major|yesno:'major,minor' }}</span>
                        <div class="text-muted small">{{ row.description|default:row.change_summary }}</div>
                    </div>
                    <div class="small text-muted text-end text-nowrap">
                        <div data-testid="history-version-source">{{ row.source }}</div>
                        {% if row.pip_id %}
                            <span data-testid="history-pip-link" data-pip-id="{{ row.pip_id }}">PIP&nbsp;#{{ row.pip_id }}</span>
                        {% endif %}
                    </div>
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <p class="text-muted">No captured versions yet.</p>
            {% endif %}
            <hr class="mt-4" />
            <div data-testid="history-timeline" class="timeline-placeholder small text-muted">
                Older entries appear above in chronological order when present.
            </div>
        </div>

        <!-- Settings Tab (placeholder) -->
        {% if can_edit %}
        <div class="tab-pane fade" id="settings" role="tabpanel">
            <p class="text-muted">Settings tab content (to be implemented)</p>
        </div>
        {% endif %}
    </div>
</div>


<style>
    .badge.bg-active { background-color: #28a745 !important; }
    .badge.bg-draft { background-color: #6c757d !important; }
    .badge.bg-disabled { background-color: #dc3545 !important; }
    .quick-stat-link {
        transition: border-color .15s ease-out, transform .05s ease-out;
        cursor: pointer;
    }
    .quick-stat-link:hover,
    .quick-stat-link:focus-visible {
        border-color: var(--bs-primary, #0d6efd) !important;
        outline: none;
    }
    .quick-stat-link:active {
        transform: translateY(1px);
    }
</style>

<div id="playbook-delete-modal-container"></div>
{% if playbook.source == 'owned' and playbook.author == request.user %}
    {% if playbook.is_draft or playbook.is_released %}
    <div class="modal fade" id="release-modal" tabindex="-1" aria-labelledby="release-modal-label" aria-hidden="true" data-testid="release-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="release-modal-label">Release playbook</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="post" action="{% url 'playbook_release' pk=playbook.pk %}">
                    {% csrf_token %}
                    <div class="modal-body">
                        <label for="release-description-input" class="form-label">Release description</label>
                        <textarea class="form-control" name="release_description" id="release-description-input" rows="4" data-testid="release-description-input" placeholder="Summarize what this release contains."></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success" data-testid="release-confirm">Confirm release</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endif %}
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('workflow-search');
    const table = document.getElementById('workflows-table');
    const rows = table ? table.querySelectorAll('tbody tr[data-workflow-row]') : [];
    const emptyState = document.getElementById('empty-state');

    function filterWorkflows() {
        if (!searchInput || rows.length === 0) return;

        const searchTerm = searchInput.value.toLowerCase();
        let visibleCount = 0;

        rows.forEach(row => {
            const nameElement = row.querySelector('[data-workflow-name]');
            const name = nameElement ? nameElement.textContent.toLowerCase() : '';
            const matchesSearch = name.includes(searchTerm);

            if (matchesSearch) {
                row.style.display = '';
                visibleCount++;
            } else {
                row.style.display = 'none';
            }
        });

        if (emptyState && table) {
            if (visibleCount === 0 && rows.length > 0) {
                emptyState.style.display = 'block';
                table.style.display = 'none';
            } else {
                emptyState.style.display = 'none';
                table.style.display = '';
            }
        }
    }

    if (searchInput) searchInput.addEventListener('input', filterWorkflows);
});
</script>
{% endblock %}