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

{% block title %}Create Activity - {{ workflow.name }}{% endblock %}

{% block content %}
<div class="container mt-4" data-testid="activity-create">
    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'playbook_list' %}">Playbooks</a></li>
            <li class="breadcrumb-item"><a href="{% url 'playbook_detail' pk=playbook.pk %}">{{ playbook.name }}</a></li>
            <li class="breadcrumb-item"><a href="{% url 'workflow_list' playbook_pk=playbook.pk %}">Workflows</a></li>
            <li class="breadcrumb-item"><a href="{% url 'workflow_detail' playbook_pk=playbook.pk pk=workflow.pk %}">{{ workflow.name }}</a></li>
            <li class="breadcrumb-item"><a href="{% url 'activity_list' playbook_pk=playbook.pk workflow_pk=workflow.pk %}">Activities</a></li>
            <li class="breadcrumb-item active" aria-current="page">Create</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-start mb-4">
        <div>
            <h2>
                <i class="fa-solid fa-plus"></i> Create Activity
            </h2>
            <p class="text-muted">Add a new activity to {{ workflow.name }}</p>
        </div>
    </div>

    <!-- Create Form -->
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Activity Details</h5>
                </div>
                <div class="card-body">
                    <form method="post" data-testid="activity-form">
                        {% csrf_token %}
                        
                        <!-- Name -->
                        <div class="mb-3">
                            <label for="name" class="form-label">
                                Name <span class="text-danger">*</span>
                            </label>
                            <input type="text" 
                                   class="form-control {% if errors.name %}is-invalid{% endif %}" 
                                   id="name" 
                                   name="name" 
                                   maxlength="200"
                                   value="{{ form_data.name }}"
                                   data-testid="name-input"
                                   required>
                            {% if errors.name %}
                                <div class="invalid-feedback">{{ errors.name }}</div>
                            {% endif %}
                            <small class="form-text text-muted">Unique name for this activity (max 200 characters)</small>
                        </div>

                        <!-- Guidance -->
                        <div class="mb-3">
                            <label for="guidance" class="form-label">
                                Guidance <span class="text-danger">*</span>
                                <i class="fa-solid fa-info-circle text-muted" 
                                   data-bs-toggle="tooltip"
                                   title="Supports Markdown formatting, code blocks, images, and Mermaid diagrams"></i>
                            </label>
                            <textarea class="form-control {% if errors.guidance %}is-invalid{% endif %}" 
                                      id="guidance" 
                                      name="guidance" 
                                      rows="8"
                                      data-testid="guidance-input"
                                      placeholder="## Overview&#10;&#10;Brief description of what this activity involves.&#10;&#10;## Steps&#10;&#10;1. First step&#10;2. Second step&#10;&#10;## Example&#10;&#10;```python&#10;# Code example&#10;```"
                                      required>{{ form_data.guidance }}</textarea>
                            {% if errors.guidance %}
                                <div class="invalid-feedback">{{ errors.guidance }}</div>
                            {% endif %}
                            <small class="form-text text-muted">
                                <i class="fa-brands fa-markdown"></i> Rich Markdown guidance with instructions, examples, images, and Mermaid diagrams
                            </small>
                        </div>

                        <!-- Phase -->
                        <div class="mb-3">
                            <label for="phase" class="form-label">
                                Phase
                                <i class="fa-solid fa-info-circle text-muted" 
                                   data-bs-toggle="tooltip"
                                   title="Optional lifecycle stage grouping for organizing activities"></i>
                            </label>
                            <select class="form-select" 
                                    id="phase" 
                                    name="phase"
                                    data-testid="phase-select">
                                <option value="">-- No Phase --</option>
                                {% for phase in available_phases %}
                                <option value="{{ phase.id }}" {% if form_data.phase|stringformat:"s" == phase.id|stringformat:"s" %}selected{% endif %}>
                                    {{ phase.name }}{% if phase.description %} - {{ phase.description }}{% endif %}
                                </option>
                                {% endfor %}
                            </select>
                            <small class="form-text text-muted">
                                Optional: Assign to a lifecycle phase
                                {% if not available_phases %}
                                <span class="text-warning"><i class="fa-solid fa-exclamation-triangle"></i> No phases defined for this playbook yet.</span>
                                {% endif %}
                            </small>
                        </div>

                        <!-- Order -->
                        <div class="mb-3">
                            <label for="order" class="form-label">
                                Order
                                <i class="fa-solid fa-info-circle text-muted" 
                                   data-bs-toggle="tooltip"
                                   title="Auto-assigned if left empty"></i>
                            </label>
                            <input type="number" 
                                   class="form-control {% if errors.order %}is-invalid{% endif %}" 
                                   id="order" 
                                   name="order"
                                   min="1"
                                   value="{{ form_data.order }}"
                                   data-testid="order-input"
                                   placeholder="Auto">
                            {% if errors.order %}
                                <div class="invalid-feedback">{{ errors.order }}</div>
                            {% endif %}
                            <small class="form-text text-muted">Leave empty to auto-assign next available order</small>
                        </div>

                        <!-- Dependencies -->
                        <div class="row">
                            <!-- Predecessor -->
                            <div class="col-md-6 mb-4">
                                <label for="predecessor" class="form-label">
                                    Predecessor Activity
                                    <i class="fa-solid fa-info-circle text-muted" 
                                       data-bs-toggle="tooltip"
                                       title="Activity that must complete before this one"></i>
                                </label>
                                <select name="predecessor" 
                                        id="predecessor" 
                                        class="form-select"
                                        data-testid="predecessor-select"
                                        {% if disable_dependencies %}disabled{% endif %}>
                                    <option value="">-- None --</option>
                                    {% for act in available_predecessors %}
                                    <option value="{{ act.id }}" 
                                            {% if form_data.predecessor|stringformat:"s" == act.id|stringformat:"s" %}selected{% endif %}>
                                        {{ act.reference_label|default:act.reference_name }} - {{ act.name }}
                                    </option>
                                    {% endfor %}
                                </select>
                                {% if disable_dependencies %}
                                <small class="form-text text-muted">No other activities yet - dependencies will be available after creating more activities</small>
                                {% endif %}
                            </div>
                            
                            <!-- Successor -->
                            <div class="col-md-6 mb-4">
                                <label for="successor" class="form-label">
                                    Successor Activity
                                    <i class="fa-solid fa-info-circle text-muted" 
                                       data-bs-toggle="tooltip"
                                       title="Next activity that depends on this one"></i>
                                </label>
                                <select name="successor" 
                                        id="successor" 
                                        class="form-select"
                                        data-testid="successor-select"
                                        {% if disable_dependencies %}disabled{% endif %}>
                                    <option value="">-- None --</option>
                                    {% for act in available_successors %}
                                    <option value="{{ act.id }}" 
                                            {% if form_data.successor|stringformat:"s" == act.id|stringformat:"s" %}selected{% endif %}>
                                        {{ act.reference_label|default:act.reference_name }} - {{ act.name }}
                                    </option>
                                    {% endfor %}
                                </select>
                                {% if disable_dependencies %}
                                <small class="form-text text-muted">No other activities yet - dependencies will be available after creating more activities</small>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Rules (IDE) -->
                        <div class="mb-4">
                            <label class="form-label">
                                <i class="fa-solid fa-scale-balanced"></i> Rules
                            </label>
                            {% if available_rules %}
                            <div class="border rounded p-3" style="max-height:220px;overflow-y:auto;" data-testid="activity-rules-select">
                                {% for rule in available_rules %}
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="rules" value="{{ rule.id }}"
                                           id="rule_{{ rule.id }}"
                                           {% if rule.id|stringformat:"s" in selected_rule_ids %}checked{% endif %}
                                           data-testid="rule-checkbox-{{ rule.id }}">
                                    <label class="form-check-label" for="rule_{{ rule.id }}">{{ rule.title }} <code class="small">{{ rule.slug }}</code></label>
                                </div>
                                {% endfor %}
                            </div>
                            {% else %}
                            <p class="text-muted small mb-0">No rules in this playbook. <a href="{% url 'rule_create' playbook_pk=playbook.pk %}">Create a rule</a>.</p>
                            {% endif %}
                        </div>

                        <!-- Buttons -->
                        <div class="d-flex justify-content-between mt-4">
                            <a 
                                href="{% url 'activity_list' playbook_pk=playbook.pk workflow_pk=workflow.pk %}" 
                                class="btn btn-secondary"
                                data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                title="Cancel and return to activities list"
                                data-testid="cancel-btn">
                                <i class="fa-solid fa-times"></i> Cancel
                            </a>
                            <button 
                                type="submit" 
                                class="btn btn-primary"
                                data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                title="Create activity and add to workflow"
                                data-testid="save-btn">
                                <i class="fa-solid fa-save"></i> Save Activity
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Helper Info Sidebar -->
        <div class="col-md-4">
            <div class="card border-0 bg-light">
                <div class="card-body">
                    <h6 class="card-title">
                        <i class="fa-solid fa-lightbulb text-warning"></i> Tips
                    </h6>
                    <ul class="small mb-0">
                        <li><strong>Name:</strong> Keep it concise and descriptive</li>
                        <li><strong>Guidance:</strong> Use Markdown for rich formatting, code examples, and diagrams</li>
                        <li><strong>Phase:</strong> Use consistent naming across activities</li>
                        <li><strong>Order:</strong> Leave blank for automatic sequencing</li>
                        <li><strong>Dependencies:</strong> Mark if prerequisites exist</li>
                    </ul>
                </div>
            </div>

            <div class="card border-0 bg-light mt-3">
                <div class="card-body">
                    <h6 class="card-title">
                        <i class="fa-solid fa-info-circle text-info"></i> About Phases
                    </h6>
                    <p class="small mb-0">
                        Phases help organize activities into logical groups. Common examples:
                        <span class="badge bg-secondary">Planning</span>
                        <span class="badge bg-secondary">Execution</span>
                        <span class="badge bg-secondary">Review</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Initialize tooltips
    document.addEventListener('DOMContentLoaded', function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
        
        // Predecessor/Successor filtering logic
        const predecessorSelect = document.getElementById('predecessor');
        const successorSelect = document.getElementById('successor');
        
        if (predecessorSelect && successorSelect) {
            // Store original options
            const predecessorOptions = Array.from(predecessorSelect.options).map(opt => ({
                value: opt.value,
                text: opt.text
            }));
            const successorOptions = Array.from(successorSelect.options).map(opt => ({
                value: opt.value,
                text: opt.text
            }));
            
            // Function to filter options
            function filterOptions(sourceSelect, targetSelect, targetOptions) {
                const selectedValue = sourceSelect.value;
                const currentTargetValue = targetSelect.value;
                
                // Rebuild target select options
                targetSelect.innerHTML = '';
                targetOptions.forEach(opt => {
                    // Only add option if it's not the selected value in source
                    if (!selectedValue || opt.value !== selectedValue) {
                        const option = document.createElement('option');
                        option.value = opt.value;
                        option.text = opt.text;
                        if (opt.value === currentTargetValue) {
                            option.selected = true;
                        }
                        targetSelect.appendChild(option);
                    }
                });
            }
            
            // When predecessor changes, filter successor options
            predecessorSelect.addEventListener('change', function() {
                filterOptions(predecessorSelect, successorSelect, successorOptions);
            });
            
            // When successor changes, filter predecessor options
            successorSelect.addEventListener('change', function() {
                filterOptions(successorSelect, predecessorSelect, predecessorOptions);
            });
            
            // Run initial filtering on page load
            if (predecessorSelect.value) {
                filterOptions(predecessorSelect, successorSelect, successorOptions);
            }
            if (successorSelect.value) {
                filterOptions(successorSelect, predecessorSelect, predecessorOptions);
            }
        }
    });
</script>
{% endblock %}