{% extends "base.html" %}
{% block title %}门店管理 - 总部{% endblock %}
{% block extra_head %}
<style>
.wecom-user-item { cursor: pointer; transition: background-color 0.15s; }
.wecom-user-item:hover { background-color: #e9ecef; }
.wecom-user-item.selected { background-color: #d1e7dd; border-color: #198754; }
</style>
{% endblock %}
{% block content %}

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url_for('dashboard') }}">工作台</a></li>
        <li class="breadcrumb-item active">门店管理</li>
    </ol>
</nav>

<div class="row">
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header bg-success text-white">
                <strong><i class="bi bi-plus-circle"></i> 添加门店</strong>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ url_for('admin_stores_add') }}">
                    <div class="mb-3">
                        <label class="form-label">门店名称</label>
                        <input type="text" name="name" class="form-control" placeholder="如：浦东新区店" required>
                    </div>
                    <button type="submit" class="btn btn-success w-100">
                        <i class="bi bi-check-lg"></i> 添加门店
                    </button>
                </form>
            </div>
        </div>

        <!-- 未分配人员的门店 -->
        {% set ns = namespace(empty_names=[]) %}
        {% for s in stores %}
            {% if store_users[s.id]|length == 0 %}
                {% set ns.empty_names = ns.empty_names + [s.name] %}
            {% endif %}
        {% endfor %}
        {% if ns.empty_names %}
        <div class="card mt-3 border-warning">
            <div class="card-header bg-warning bg-opacity-25">
                <strong><i class="bi bi-exclamation-triangle"></i> 未分配人员的门店</strong>
                <span class="badge bg-warning ms-1">{{ ns.empty_names|length }}</span>
            </div>
            <div class="card-body p-2">
                <ul class="list-unstyled mb-0">
                    {% for name in ns.empty_names %}
                    <li class="py-1 px-2 border-bottom small">
                        <i class="bi bi-shop text-warning"></i> {{ name }}
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        {% endif %}
    </div>

    <div class="col-lg-8">
        <div class="card">
            <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center">
                <strong><i class="bi bi-shop"></i> 门店列表</strong>
                <span class="badge bg-primary">{{ stores|length }} 家门店</span>
            </div>
            <div class="card-body p-0">
                {% for store in stores %}
                <div class="border-bottom {% if not loop.first %}border-top-0{% endif %}">
                    <div class="d-flex justify-content-between align-items-center p-3 bg-light bg-opacity-50
                        {% if store_users[store.id]|length == 0 %}border-start border-warning border-4{% endif %}">
                        <h6 class="mb-0">
                            <i class="bi bi-shop text-success"></i>
                            <strong>{{ store.name }}</strong>
                            {% if store_users[store.id]|length == 0 %}
                            <span class="badge bg-warning ms-2"><i class="bi bi-exclamation-circle"></i> 未分配人员</span>
                            {% else %}
                            <span class="badge bg-info ms-2">{{ store_users[store.id]|length }} 人</span>
                            {% endif %}
                        </h6>
                        <div>
                            <button type="button" class="btn btn-outline-primary btn-sm"
                                    data-bs-toggle="collapse" data-bs-target="#store-{{ store.id }}-users">
                                <i class="bi bi-people"></i> 人员管理
                            </button>
                            <form method="POST" action="{{ url_for('admin_stores_delete', store_id=store.id) }}"
                                  class="d-inline" onsubmit="return confirm('确定删除门店「{{ store.name }}」？')">
                                <button type="submit" class="btn btn-outline-danger btn-sm">
                                    <i class="bi bi-trash"></i> 删除
                                </button>
                            </form>
                        </div>
                    </div>

                    <div class="collapse" id="store-{{ store.id }}-users">
                        <div class="p-3">
                            <!-- 当前已分配人员 -->
                            <h6 class="mb-2"><i class="bi bi-people-fill"></i> 当前人员</h6>
                            {% if store_users[store.id] %}
                            <table class="table table-sm table-hover mb-3">
                                <thead>
                                    <tr>
                                        <th>姓名</th>
                                        <th>企微账号</th>
                                        <th style="width:80px">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for u in store_users[store.id] %}
                                    <tr>
                                        <td><i class="bi bi-person-circle"></i> {{ u.name }}</td>
                                        <td><code>{{ u.wechat_userid }}</code></td>
                                        <td>
                                            <form method="POST" action="{{ url_for('admin_stores_unassign') }}"
                                                  onsubmit="return confirm('解除 {{ u.name }} 与「{{ store.name }}」的关联？')">
                                                <input type="hidden" name="user_id" value="{{ u.id }}">
                                                <button type="submit" class="btn btn-outline-warning btn-sm">解除</button>
                                            </form>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            {% else %}
                            <p class="text-muted small mb-3">该门店尚未分配人员，请从下方企业微信通讯录中选择并分配</p>
                            {% endif %}

                            <hr class="my-3">
                            <h6 class="mb-2 text-primary"><i class="bi bi-diagram-3"></i> 从企业微信通讯录分配</h6>

                            <div id="wework-loading-{{ store.id }}" class="text-center py-3 d-none">
                                <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
                                <span class="ms-2 text-muted small">正在加载企业微信通讯录...</span>
                            </div>
                            <div id="wework-error-{{ store.id }}" class="alert alert-danger py-2 d-none small"></div>
                            <div id="wework-content-{{ store.id }}" class="d-none">
                                <div class="mb-2">
                                    <input type="text" class="form-control form-control-sm"
                                           placeholder="搜索成员姓名..." oninput="filterWecomUsers({{ store.id }}, this.value)">
                                </div>
                                <div id="wework-list-{{ store.id }}" class="list-group list-group-flush border mb-2"
                                     style="max-height: 300px; overflow-y: auto;">
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted" id="wework-count-{{ store.id }}">0 位成员</small>
                                    <div>
                                        <button type="button" class="btn btn-outline-secondary btn-sm me-1"
                                                onclick="loadWecomUsers({{ store.id }})">
                                            <i class="bi bi-arrow-clockwise"></i> 刷新
                                        </button>
                                        <form method="POST" action="{{ url_for('admin_stores_assign_wework') }}"
                                              class="d-inline m-0">
                                            <input type="hidden" name="store_id" value="{{ store.id }}">
                                            <input type="hidden" name="wework_userid" id="wework-selected-{{ store.id }}" value="">
                                            <button type="submit" class="btn btn-success btn-sm"
                                                    id="wework-btn-{{ store.id }}" disabled>
                                                分配
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% else %}
                <div class="text-center text-muted py-5">
                    <i class="bi bi-shop" style="font-size:3rem"></i>
                    <p class="mt-2">暂无门店，请在左侧添加</p>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

{% endblock %}
{% block extra_scripts %}
<script>
var wecomUsersCache = null;

function loadWecomUsers(storeId) {
    if (wecomUsersCache) {
        renderWecomUsers(storeId);
        return;
    }
    var loading = document.getElementById('wework-loading-' + storeId);
    var content = document.getElementById('wework-content-' + storeId);
    loading.classList.remove('d-none');
    content.classList.add('d-none');

    fetch('/api/wework/users')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            loading.classList.add('d-none');
            if (data.error) {
                document.getElementById('wework-error-' + storeId).textContent = data.error;
                return;
            }
            wecomUsersCache = data.users || [];
            renderWecomUsers(storeId);
            // 自动展开后加载其它门店的 tab（缓存已就绪）
            document.querySelectorAll('[id^="wework-list-"]').forEach(function(el) {
                if (!el.children.length) {
                    var sid = el.id.replace('wework-list-', '');
                    if (sid != storeId) renderWecomUsers(sid);
                }
            });
        })
        .catch(function(err) {
            loading.classList.add('d-none');
            document.getElementById('wework-error-' + storeId).textContent = '网络错误: ' + err.message;
        });
}

function renderWecomUsers(storeId) {
    var content = document.getElementById('wework-content-' + storeId);
    var list = document.getElementById('wework-list-' + storeId);
    if (!content || !list) return;
    content.classList.remove('d-none');
    list.innerHTML = '';

    wecomUsersCache.forEach(function(u) {
        var div = document.createElement('div');
        div.className = 'list-group-item list-group-item-action wecom-user-item small py-2';
        div.dataset.store = storeId;
        div.dataset.userid = u.userid;
        div.dataset.name = u.name;
        div.innerHTML = '<i class="bi bi-person-circle text-primary"></i> <strong>' + u.name + '</strong> ' +
            '<code class="ms-1">' + u.userid + '</code>' +
            '<span class="text-muted ms-2 small">' + (u.main_dept || '') + '</span>';
        div.addEventListener('click', function(e) {
            var sid = this.dataset.store;
            document.querySelectorAll('#wework-list-' + sid + ' .wecom-user-item').forEach(function(el) {
                el.classList.remove('selected');
            });
            this.classList.add('selected');
            document.getElementById('wework-selected-' + sid).value = this.dataset.userid;
            document.getElementById('wework-btn-' + sid).disabled = false;
            document.getElementById('wework-btn-' + sid).innerHTML = '分配 ' + this.dataset.name;
        });
        list.appendChild(div);
    });

    var count = document.getElementById('wework-count-' + storeId);
    if (count) count.textContent = wecomUsersCache.length + ' 位成员';
}

function filterWecomUsers(storeId, keyword) {
    var items = document.querySelectorAll('#wework-list-' + storeId + ' .wecom-user-item');
    var visible = 0;
    items.forEach(function(el) {
        if (el.dataset.name.indexOf(keyword) >= 0) {
            el.style.display = '';
            visible++;
        } else {
            el.style.display = 'none';
        }
    });
    var count = document.getElementById('wework-count-' + storeId);
    if (count) count.textContent = visible + ' / ' + wecomUsersCache.length + ' 位成员';
}

// 点击人员管理按钮时触发加载
document.addEventListener('click', function(e) {
    var btn = e.target.closest('[data-bs-toggle="collapse"]');
    if (btn && btn.getAttribute('data-bs-target')) {
        var targetId = btn.getAttribute('data-bs-target');
        var panel = document.querySelector(targetId);
        if (panel) {
            // 提取 store id
            var match = targetId.match(/store-(\d+)-users/);
            if (match) {
                var sid = match[1];
                // 延时等待 collapse 展开
                setTimeout(function() { loadWecomUsers(sid); }, 300);
            }
        }
    }
});
</script>
{% endblock %}