{% extends 'mastery/base.html' %}
{% load l10n %}
{% load evelinks %}

{% block details %}
<div class="container mt-4">
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
        <h2 class="mb-0">Summary Group Settings</h2>
        <a class="btn btn-sm btn-outline-secondary" href="{% url 'mastery:summary_list' %}">Back to summaries</a>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header">Create group</div>
        <div class="card-body">
            <form method="post" class="row g-2 align-items-end">
                {% csrf_token %}
                <input type="hidden" name="action" value="create_group">
                <div class="col-12 col-lg-4">
                    <label class="form-label small text-muted" for="newGroupName">Name</label>
                    <input id="newGroupName" class="form-control" name="name" required>
                </div>
                <div class="col-12 col-lg-6">
                    <label class="form-label small text-muted" for="newGroupDescription">Description</label>
                    <input id="newGroupDescription" class="form-control" name="description">
                </div>
                <div class="col-12 col-lg-2">
                    <button class="btn btn-primary w-100" type="submit">Create</button>
                </div>
            </form>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-12 col-xl-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header">Groups</div>
                <div class="list-group list-group-flush">
                    {% for group in summary_groups %}
                    <a class="list-group-item list-group-item-action {% if selected_group and selected_group.id == group.id %}active{% endif %}" href="{% url 'mastery:summary_settings' %}?group_id={{ group.id }}">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>{{ group.name }}</span>
                            {% if group.is_active %}
                            <span class="badge bg-success">Active</span>
                            {% else %}
                            <span class="badge bg-secondary">Disabled</span>
                            {% endif %}
                        </div>
                    </a>
                    {% empty %}
                    <div class="list-group-item text-muted">No groups yet.</div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-8">
            {% if selected_group %}
            <div class="card border-0 shadow-sm mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>{{ selected_group.name }}</span>
                    <div class="d-flex gap-2">
                        <form method="post">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="toggle_group_active">
                            <input type="hidden" name="group_id" value="{{ selected_group.id }}">
                            <button type="submit" class="btn btn-sm btn-outline-primary">{% if selected_group.is_active %}Disable{% else %}Enable{% endif %}</button>
                        </form>
                        <form method="post" onsubmit="return confirm('Delete this group?');">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="delete_group">
                            <input type="hidden" name="group_id" value="{{ selected_group.id }}">
                            <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                        </form>
                    </div>
                </div>
                <div class="card-body">
                    <div class="text-muted">{{ selected_group.description|default:'No description.' }}</div>
                </div>
            </div>

            <div class="card border-0 shadow-sm mb-3">
                <div class="card-header">Add corporation/alliance</div>
                <div class="card-body">
                    <form method="post" class="row g-2 align-items-end">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="add_entry">
                        <input type="hidden" name="group_id" value="{{ selected_group.id }}">
                        <div class="col-12 col-md-3">
                            <label class="form-label small text-muted" for="entryType">Type</label>
                            <select id="entryType" name="entity_type" class="form-select" required>
                                {% for value, label in entity_type_choices %}
                                <option value="{{ value }}">{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label small text-muted" for="entryEntityId">Entity</label>
                            <select id="entryEntityId" class="form-select" name="entity_id" required>
                                {% for corp in corporation_options %}
                                <option value="{{ corp.id|unlocalize }}" data-type="corporation">{{ corp.name }} - {{ corp.count }} chars</option>
                                {% endfor %}
                                {% for alliance in alliance_options %}
                                <option value="{{ alliance.id|unlocalize }}" data-type="alliance" hidden>{{ alliance.name }} - {{ alliance.count }} chars</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-12 col-md-4">
                            <label class="form-label small text-muted" for="entryLabel">Label (optional)</label>
                            <input id="entryLabel" class="form-control" name="label">
                        </div>
                        <div class="col-12 col-md-2">
                            <button class="btn btn-primary w-100" type="submit">Add</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-header">Configured entries</div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm align-middle mb-0">
                            <thead class="table-light">
                            <tr>
                                <th>Type</th>
                                <th>Entity</th>
                                <th>Label</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for row in selected_group_entries %}
                            <tr>
                                <td>{{ row.entry.get_entity_type_display }}</td>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        {% if row.entry.entity_type == 'corporation' %}
                                        <img src="{{ row.entry.entity_id|corporation_logo_url:32 }}" class="rounded" width="24" height="24" alt="{{ row.entity_name }}">
                                        {% else %}
                                        <img src="{{ row.entry.entity_id|alliance_logo_url:32 }}" class="rounded" width="24" height="24" alt="{{ row.entity_name }}">
                                        {% endif %}
                                        <span>{{ row.entity_name }}</span>
                                    </div>
                                </td>
                                <td>{{ row.entry.label|default:'-' }}</td>
                                <td>
                                    <form method="post" onsubmit="return confirm('Delete this entry?');">
                                        {% csrf_token %}
                                        <input type="hidden" name="action" value="delete_entry">
                                        <input type="hidden" name="entry_id" value="{{ row.entry.id|unlocalize }}">
                                        <button class="btn btn-sm btn-outline-danger" type="submit">Delete</button>
                                    </form>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-muted">No entries configured yet.</td>
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="alert alert-info mb-0">Create a summary group to start configuring corporation/alliance audiences.</div>
            {% endif %}
        </div>
    </div>
</div>

<script>
    $(document).ready(() => {
        const typeSelect = document.getElementById('entryType');
        const entitySelect = document.getElementById('entryEntityId');
        if (!typeSelect || !entitySelect) {
            return;
        }

        const syncEntityOptions = () => {
            const selectedType = typeSelect.value;
            let firstVisible = null;
            Array.from(entitySelect.options).forEach((option) => {
                const visible = option.dataset.type === selectedType;
                option.hidden = !visible;
                if (visible && !firstVisible) {
                    firstVisible = option;
                }
            });
            if (firstVisible) {
                entitySelect.value = firstVisible.value;
            }
        };

        typeSelect.addEventListener('change', syncEntityOptions);
        syncEntityOptions();
    });
</script>
{% endblock %}