{% extends 'layouts/admin.twig' %}

{% block head %}
    <link rel="stylesheet" href="/modules/BlockRegistry/admin/css/block_registry.css">
{% endblock %}

{% block content %}

    <ul class="breadcrumbs el">
        <li><a href="/admin/">Admin</a> /</li>
        <li><a href="{{ route('admin.blocks.index') }}">Block Registry</a> /</li>
        <li class="end">Categories</li>
    </ul>

    <h1>{{ title }}</h1>

    {% include 'admin/block_registry/_tabnav.twig' with { active_tab: 'categories' } %}

    {% for message in messages %}
        <div class="alert alert-{{ message.type }}">
            {{ message.content }}
        </div>
    {% endfor %}

    {% if is_production is defined and is_production %}
        <div class="alert alert-info">
            Categories are managed via block JSON files and synced on deploy. To add or change categories, update the <code>"category"</code> field in the block JSON files on local/staging.
        </div>
    {% endif %}

    <div class="category-management">
        {% if not (is_production is defined and is_production) %}
            <div class="category-form-section">
                <fieldset class="show">
                    <h1>Add New Category</h1>

                    <form action="{{ route('admin.blocks.categories.store') }}" method="POST" class="style">
                        <div class="row">
                            <label for="new_name">Name <span class="required">*</span></label>
                            <input type="text" name="name" id="new_name" required placeholder="e.g., Content, Layout, Media">
                        </div>

                        <div class="row">
                            <label for="new_slug">Slug</label>
                            <input type="text" name="slug" id="new_slug" placeholder="auto-generated if empty">
                        </div>

                        <div class="row">
                            <label for="new_icon">Icon</label>
                            <input type="text" name="icon" id="new_icon" placeholder="fa-folder" value="fa-folder">
                            <small>FontAwesome icon class</small>
                        </div>

                        <div class="row">
                            <label for="new_order">Order</label>
                            <input type="number" name="order_index" id="new_order" value="0" min="0">
                        </div>

                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-plus"></i> Add Category
                        </button>
                    </form>
                </fieldset>
            </div>
        {% endif %}

        <div class="category-list-section">
            <fieldset class="show">
                <h1>Existing Categories</h1>

                {% if categories|length > 0 %}
                    <table class="manage-items" id="categoriesTable">
                        <thead>
                            <tr>
                                <th width="40">#</th>
                                <th width="50">Icon</th>
                                <th>Name</th>
                                <th>Slug</th>
                                <th width="80">Blocks</th>
                                <th width="80">Order</th>
                                {% if not (is_production is defined and is_production) %}
                                    <th width="150">Actions</th>
                                {% endif %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for category in categories %}
                            <tr data-id="{{ category.id }}">
                                <td>{{ category.id }}</td>
                                <td><i class="fa {{ category.icon ?? 'fa-folder' }} fa-lg"></i></td>
                                <td>
                                    <strong class="category-name">{{ category.name }}</strong>
                                </td>
                                <td><code>{{ category.slug }}</code></td>
                                <td>
                                    <span class="badge">{{ category.blocks_count ?? 0 }}</span>
                                </td>
                                <td>{{ category.order_index }}</td>
                                {% if not (is_production is defined and is_production) %}
                                    <td class="actions">
                                        <button type="button" class="btn-link" onclick="editCategory({{ category.id }}, '{{ category.name|e('js') }}', '{{ category.slug|e('js') }}', '{{ category.icon|e('js') }}', {{ category.order_index }})" title="Edit">
                                            <i class="fa fa-pencil"></i>
                                        </button>
                                        <form action="{{ route('admin.blocks.categories.destroy', {'id': category.id}) }}" method="POST" onsubmit="return confirm('Delete this category? Blocks will be moved to uncategorized.')">
                                            <input type="hidden" name="_method" value="DELETE">
                                            <button type="submit" class="btn-link error" title="Delete">
                                                <i class="fa fa-times-circle"></i>
                                            </button>
                                        </form>
                                    </td>
                                {% endif %}
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <div class="empty-state">
                        <i class="fa fa-folder-open-o fa-2x"></i>
                        {% if is_production is defined and is_production %}
                            <p>No categories yet. Categories will be created when blocks with categories are imported.</p>
                        {% else %}
                            <p>No categories yet. Create your first category above.</p>
                        {% endif %}
                    </div>
                {% endif %}
            </fieldset>
        </div>
    </div>

    {% if not (is_production is defined and is_production) %}
        <!-- Edit Category Modal -->
        <div id="editModal" class="modal" style="display:none;">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>Edit Category</h2>
                    <button type="button" class="modal-close" onclick="closeModal()">&times;</button>
                </div>
                <form id="editForm" method="POST" class="style" data-store-url="{{ route('admin.blocks.categories.store') }}">
                    <div class="modal-body">
                        <div class="row">
                            <label for="edit_name">Name <span class="required">*</span></label>
                            <input type="text" name="name" id="edit_name" required>
                        </div>

                        <div class="row">
                            <label for="edit_slug">Slug</label>
                            <input type="text" name="slug" id="edit_slug">
                        </div>

                        <div class="row">
                            <label for="edit_icon">Icon</label>
                            <input type="text" name="icon" id="edit_icon">
                        </div>

                        <div class="row">
                            <label for="edit_order">Order</label>
                            <input type="number" name="order_index" id="edit_order" min="0">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>

        <script src="/modules/BlockRegistry/js/block-registry-categories.js"></script>
    {% endif %}

{% endblock %}
