@extends('admin.layouts.admin')

@section('title', '短链接管理')

@section('content')
<div class="short-links-management">
    <!-- 页面标题 -->
    <div class="page-header mb-4">
        <h1>短链接管理</h1>
        <p class="text-muted">管理微信小程序短链接和自定义重定向链接</p>
    </div>

    <!-- Tab导航 -->
    <ul class="nav nav-tabs" id="shortLinkTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="wechat-tab" data-bs-toggle="tab"
                    data-bs-target="#wechat-panel" type="button" role="tab">
                <i class="fab fa-weixin"></i> 微信短链接管理
                <span class="badge bg-primary ms-2" id="wechat-count">{{ $wechatLinksCount }}</span>
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="custom-tab" data-bs-toggle="tab"
                    data-bs-target="#custom-panel" type="button" role="tab">
                <i class="fas fa-link"></i> 自定义短链接管理
                <span class="badge bg-success ms-2" id="custom-count">{{ $customLinksCount }}</span>
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="stats-tab" data-bs-toggle="tab"
                    data-bs-target="#stats-panel" type="button" role="tab">
                <i class="fas fa-chart-bar"></i> 访问统计
            </button>
        </li>
    </ul>

    <!-- Tab内容区域 -->
    <div class="tab-content mt-4" id="shortLinkTabContent">

        <!-- 微信短链接管理面板 -->
        <div class="tab-pane fade show active" id="wechat-panel" role="tabpanel">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">微信小程序短链接</h5>
                    <button class="btn btn-primary" onclick="showWechatLinkModal()">
                        <i class="fas fa-plus"></i> 创建微信短链接
                    </button>
                </div>
                <div class="card-body">
                    <!-- 筛选区域 -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <select class="form-select" id="wechatStatusFilter">
                                <option value="">全部状态</option>
                                <option value="active">正常</option>
                                <option value="failed">续期失败</option>
                                <option value="expired">已过期</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="搜索链接名称..." id="wechatSearchInput">
                                <button class="btn btn-outline-secondary" type="button" onclick="loadWechatLinks()">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-outline-secondary" onclick="loadWechatLinks()">
                                <i class="fas fa-sync-alt"></i> 刷新
                            </button>
                        </div>
                    </div>

                    <!-- 微信短链接列表 -->
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>小程序路径</th>
                                    <th>环境</th>
                                    <th>过期时间</th>
                                    <th>续期状态</th>
                                    <th>关联链接</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="wechat-links-table">
                                <tr>
                                    <td colspan="7" class="text-center py-4">
                                        <div class="spinner-border" role="status">
                                            <span class="visually-hidden">加载中...</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div id="wechat-pagination"></div>
                </div>
            </div>
        </div>

        <!-- 自定义短链接管理面板 -->
        <div class="tab-pane fade" id="custom-panel" role="tabpanel">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">自定义短链接 (vsrp.cn)</h5>
                    <button class="btn btn-success" onclick="showCustomLinkModal()">
                        <i class="fas fa-plus"></i> 创建自定义短链接
                    </button>
                </div>
                <div class="card-body">
                    <!-- 快速筛选 -->
                    <div class="row mb-3">
                        <div class="col-md-2">
                            <select class="form-select" id="statusFilter" onchange="loadCustomLinks()">
                                <option value="">全部状态</option>
                                <option value="active">正常</option>
                                <option value="inactive">已停用</option>
                                <option value="expired">已过期</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-select" id="linkTypeFilter" onchange="loadCustomLinks()">
                                <option value="">全部类型</option>
                                <option value="miniprogram">小程序</option>
                                <option value="h5">H5页面</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-select" id="wechatLinkFilter" onchange="loadCustomLinks()">
                                <option value="">全部微信链接</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="搜索链接名称或ID..." id="customSearchInput">
                                <button class="btn btn-outline-secondary" type="button" onclick="loadCustomLinks()">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-outline-secondary" onclick="loadCustomLinks()">
                                <i class="fas fa-sync-alt"></i> 刷新
                            </button>
                        </div>
                    </div>

                    <!-- 自定义短链接列表 -->
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>短链接</th>
                                    <th>名称</th>
                                    <th>类型</th>
                                    <th>目标链接</th>
                                    <th>状态</th>
                                    <th>访问次数</th>
                                    <th>二维码</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="custom-links-table">
                                <tr>
                                    <td colspan="8" class="text-center py-4">
                                        <div class="spinner-border" role="status">
                                            <span class="visually-hidden">加载中...</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div id="custom-pagination"></div>
                </div>
            </div>
        </div>

        <!-- 访问统计面板 -->
        <div class="tab-pane fade" id="stats-panel" role="tabpanel">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">访问统计概览</h5>
                        </div>
                        <div class="card-body">
                            <!-- 统计数据卡片 -->
                            <div class="row mb-4">
                                <div class="col-md-3">
                                    <div class="card bg-primary text-white">
                                        <div class="card-body text-center">
                                            <h3 id="totalVisits">0</h3>
                                            <p class="mb-0">总访问次数</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="card bg-success text-white">
                                        <div class="card-body text-center">
                                            <h3 id="activeLinks">0</h3>
                                            <p class="mb-0">活跃链接数</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="card bg-info text-white">
                                        <div class="card-body text-center">
                                            <h3 id="todayVisits">0</h3>
                                            <p class="mb-0">今日访问</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="card bg-warning text-white">
                                        <div class="card-body text-center">
                                            <h3 id="avgVisits">0</h3>
                                            <p class="mb-0">平均访问/链接</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 图表区域 -->
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="card">
                                        <div class="card-header">
                                            <h6 class="mb-0">最近7天访问趋势</h6>
                                        </div>
                                        <div class="card-body">
                                            <canvas id="visitsChart" height="200"></canvas>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card">
                                        <div class="card-header">
                                            <h6 class="mb-0">热门链接 TOP 10</h6>
                                        </div>
                                        <div class="card-body">
                                            <div id="topLinks">
                                                <div class="text-center py-4">
                                                    <div class="spinner-border spinner-border-sm" role="status">
                                                        <span class="visually-hidden">加载中...</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 创建/编辑微信短链接模态框 -->
<div class="modal fade" id="wechatLinkModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="wechatModalTitle">创建微信短链接</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="wechatLinkForm">
                    <input type="hidden" id="wechatLinkId">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">链接名称 *</label>
                                <input type="text" class="form-control" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">小程序环境 *</label>
                                <select class="form-select" name="env_version" required>
                                    <option value="release">正式版</option>
                                    <option value="trial">体验版</option>
                                    <option value="develop">开发版</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">小程序页面路径 *</label>
                        <input type="text" class="form-control" name="path"
                               placeholder="例如: privilege/index" required>
                        <small class="form-text text-muted">不需要以/开头</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">查询参数</label>
                        <input type="text" class="form-control" name="query"
                               placeholder="例如: param1=value1&param2=value2">
                        <small class="form-text text-muted">可选，不需要以?开头</small>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="auto_renew" checked>
                            <label class="form-check-label">
                                自动续期
                                <small class="text-muted d-block">链接过期前5天自动续期</small>
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveWechatLink()">
                    <span class="btn-text">创建链接</span>
                    <span class="btn-loading d-none">
                        <span class="spinner-border spinner-border-sm" role="status"></span>
                        创建中...
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 创建/编辑自定义短链接模态框 -->
<div class="modal fade" id="customLinkModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="customModalTitle">创建自定义短链接</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="customLinkForm">
                    <input type="hidden" id="customLinkId">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">链接名称 *</label>
                                <input type="text" class="form-control" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">链接类型 *</label>
                                <select class="form-select" name="link_type" required id="linkTypeSelect" onchange="toggleLinkTypeFields()">
                                    <option value="miniprogram">小程序</option>
                                    <option value="h5">H5页面</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- 小程序类型的字段 -->
                    <div class="row" id="miniprogramFields">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">关联微信短链接 <span class="text-danger" id="wechatLinkRequired">*</span></label>
                                <select class="form-select" name="wechat_short_link_id" id="wechatLinkSelect">
                                    <option value="">请选择微信短链接</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- H5类型的字段 -->
                    <div class="row" id="h5Fields" style="display: none;">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">H5页面URL</label>
                                <input type="url" class="form-control" name="h5_url" placeholder="https://example.com/page">
                                <small class="form-text text-muted">可以留空，之后再配置跳转链接</small>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">短链接ID</label>
                                <div class="input-group">
                                    <span class="input-group-text">vsrp.cn/</span>
                                    <input type="text" class="form-control" name="link_id"
                                           placeholder="留空自动生成" maxlength="10">
                                    <button class="btn btn-outline-secondary" type="button"
                                            onclick="generateLinkId()">随机生成</button>
                                </div>
                                <small class="form-text text-muted">5-10位字母数字组合</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check mt-4">
                                    <input class="form-check-input" type="checkbox" name="is_active" checked>
                                    <label class="form-check-label">立即启用重定向</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">描述</label>
                        <textarea class="form-control" name="description" rows="2"
                                  placeholder="可选的链接描述..."></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">生效时间</label>
                                <input type="datetime-local" class="form-control" name="starts_at">
                                <small class="form-text text-muted">留空则立即生效</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">失效时间</label>
                                <input type="datetime-local" class="form-control" name="ends_at">
                                <small class="form-text text-muted">留空则永不失效</small>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" onclick="saveCustomLink()">
                    <span class="btn-text">创建链接</span>
                    <span class="btn-loading d-none">
                        <span class="spinner-border spinner-border-sm" role="status"></span>
                        创建中...
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 二维码预览模态框 -->
<div class="modal fade" id="qrCodeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">二维码预览</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <img id="qrCodeImage" src="" alt="二维码" class="img-fluid">
                <p class="mt-3 text-muted" id="qrCodeUrl"></p>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// 全局变量
let wechatLinksData = [];
let customLinksData = [];
let currentWechatPage = 1;
let currentCustomPage = 1;
let visitsChart = null;

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    // 从localStorage恢复上次活跃的标签页
    const lastActiveTab = localStorage.getItem('shortLinks_activeTab') || 'wechat-tab';

    // 如果上次活跃的标签页不是默认的微信标签页，则切换到该标签页
    if (lastActiveTab !== 'wechat-tab') {
        const savedTab = document.getElementById(lastActiveTab);
        const savedPanel = document.querySelector(savedTab.getAttribute('data-bs-target'));

        // 移除当前活跃标签页
        document.querySelector('#wechat-tab').classList.remove('active');
        document.querySelector('#wechat-panel').classList.remove('show', 'active');

        // 激活保存的标签页
        savedTab.classList.add('active');
        savedPanel.classList.add('show', 'active');
    }

    // 加载微信短链接选项
    loadWechatLinkOptions();

    // 加载微信短链接列表（如果微信标签页是活跃的）
    if (lastActiveTab === 'wechat-tab') {
        loadWechatLinks();
    }

    // 为所有标签页添加点击事件监听器，保存活跃状态到localStorage
    document.querySelectorAll('[data-bs-toggle="tab"]').forEach(tab => {
        tab.addEventListener('click', function() {
            localStorage.setItem('shortLinks_activeTab', this.id);
        });
    });

    // Tab切换时加载数据
    document.getElementById('wechat-tab').addEventListener('click', function() {
        if (wechatLinksData.length === 0) {
            loadWechatLinks();
        }
    });

    document.getElementById('custom-tab').addEventListener('click', function() {
        if (customLinksData.length === 0) {
            loadCustomLinks();
        }
    });

    document.getElementById('stats-tab').addEventListener('click', function() {
        loadStats();
    });

    // 如果页面加载时活跃标签页不是微信标签页，则加载对应的数据
    if (lastActiveTab === 'custom-tab' && customLinksData.length === 0) {
        loadCustomLinks();
    } else if (lastActiveTab === 'stats-tab') {
        loadStats();
    }

    // 搜索框回车事件
    document.getElementById('wechatSearchInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            loadWechatLinks();
        }
    });

    document.getElementById('customSearchInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            loadCustomLinks();
        }
    });

    // 筛选器变化事件
    document.getElementById('wechatStatusFilter').addEventListener('change', loadWechatLinks);
    document.getElementById('statusFilter').addEventListener('change', loadCustomLinks);
    document.getElementById('wechatLinkFilter').addEventListener('change', loadCustomLinks);
});

// ==================== 微信短链接相关函数 ====================

function loadWechatLinks(page = 1) {
    const search = document.getElementById('wechatSearchInput').value;
    const status = document.getElementById('wechatStatusFilter').value;

    fetch(`/admin/api/short-links/wechat?page=${page}&search=${search}&status=${status}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderWechatLinks(data.data);
                wechatLinksData = data.data.data;
                currentWechatPage = page;
            } else {
                showAlert('error', '加载失败: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('error', '网络错误，请稍后重试');
        });
}

function renderWechatLinks(paginatedData) {
    const tbody = document.getElementById('wechat-links-table');

    if (paginatedData.data.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" class="text-center py-4 text-muted">暂无数据</td></tr>';
        return;
    }

    tbody.innerHTML = paginatedData.data.map(link => `
        <tr>
            <td>
                <strong>${link.name}</strong>
                <br><small class="text-muted">${link.wechat_url}</small>
            </td>
            <td>
                <code>${link.path}</code>
                ${link.query ? `<br><small class="text-muted">?${link.query}</small>` : ''}
            </td>
            <td>
                <span class="badge bg-${getEnvVersionColor(link.env_version)}">${getEnvVersionLabel(link.env_version)}</span>
            </td>
            <td>
                ${formatDateTime(link.expires_at)}
                <br><small class="text-muted">${getTimeFromNow(link.expires_at)}</small>
            </td>
            <td>
                <span class="badge bg-${getRenewStatusColor(link.renew_status)}">${getRenewStatusLabel(link.renew_status)}</span>
                ${link.auto_renew ? '<br><small class="text-success">自动续期</small>' : '<br><small class="text-muted">手动续期</small>'}
            </td>
            <td>
                <span class="badge bg-info">${link.custom_short_links.length}</span>
            </td>
            <td>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-outline-primary" onclick="editWechatLink(${link.id})" title="编辑">
                        <i class="fas fa-edit"></i>
                    </button>
                    ${link.renew_status === 'active' ? `
                        <button class="btn btn-outline-warning" onclick="renewWechatLink(${link.id})" title="手动续期">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    ` : ''}
                    <button class="btn btn-outline-danger" onclick="deleteWechatLink(${link.id})" title="删除">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </td>
        </tr>
    `).join('');

    // 渲染分页
    renderPagination('wechat-pagination', paginatedData, loadWechatLinks);
}

function showWechatLinkModal(linkId = null) {
    const modal = new bootstrap.Modal(document.getElementById('wechatLinkModal'));
    const form = document.getElementById('wechatLinkForm');
    const title = document.getElementById('wechatModalTitle');
    const saveBtn = document.querySelector('#wechatLinkModal .btn-primary .btn-text');

    form.reset();

    if (linkId) {
        // 编辑模式
        title.textContent = '编辑微信短链接';
        saveBtn.textContent = '保存修改';

        const link = wechatLinksData.find(l => l.id === linkId);
        if (link) {
            document.getElementById('wechatLinkId').value = link.id;
            form.name.value = link.name;
            form.path.value = link.path;
            form.query.value = link.query || '';
            form.env_version.value = link.env_version;
            form.auto_renew.checked = link.auto_renew;

            // 编辑时禁用路径和参数修改（因为这些影响微信API生成的链接）
            form.path.disabled = true;
            form.query.disabled = true;
            form.env_version.disabled = true;
        }
    } else {
        // 创建模式
        title.textContent = '创建微信短链接';
        saveBtn.textContent = '创建链接';
        document.getElementById('wechatLinkId').value = '';

        // 启用所有字段
        form.path.disabled = false;
        form.query.disabled = false;
        form.env_version.disabled = false;
    }

    modal.show();
}

function saveWechatLink() {
    const form = document.getElementById('wechatLinkForm');
    const linkId = document.getElementById('wechatLinkId').value;
    const saveBtn = document.querySelector('#wechatLinkModal .btn-primary');
    const btnText = saveBtn.querySelector('.btn-text');
    const btnLoading = saveBtn.querySelector('.btn-loading');

    if (!form.checkValidity()) {
        form.reportValidity();
        return;
    }

    // 显示加载状态
    btnText.classList.add('d-none');
    btnLoading.classList.remove('d-none');
    saveBtn.disabled = true;

    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());
    data.auto_renew = form.auto_renew.checked;

    const url = linkId ? `/admin/api/short-links/wechat/${linkId}` : '/admin/api/short-links/wechat';
    const method = linkId ? 'PUT' : 'POST';

    fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            bootstrap.Modal.getInstance(document.getElementById('wechatLinkModal')).hide();
            loadWechatLinks(currentWechatPage);
            loadWechatLinkOptions(); // 重新加载选项

            // 更新计数（只在创建时增加）
            if (!linkId) {
                document.getElementById('wechat-count').textContent = parseInt(document.getElementById('wechat-count').textContent) + 1;
            }
        } else {
            showAlert('error', data.message);
        }
    })
    .catch(error => {
        console.error('保存微信短链接失败:', error);
        showAlert('error', '网络错误，请稍后重试');
    })
    .finally(() => {
        // 恢复按钮状态
        btnText.classList.remove('d-none');
        btnLoading.classList.add('d-none');
        saveBtn.disabled = false;
    });
}

function renewWechatLink(linkId) {
    if (!confirm('确定要手动续期这个微信短链接吗？')) {
        return;
    }

    fetch(`/admin/api/short-links/wechat/${linkId}/renew`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            loadWechatLinks(currentWechatPage);
        } else {
            showAlert('error', data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', '网络错误，请稍后重试');
    });
}

function editWechatLink(linkId) {
    showWechatLinkModal(linkId);
}

function deleteWechatLink(linkId) {
    if (!confirm('确定要删除这个微信短链接吗？\n注意：如果有关联的自定义短链接，需要先删除它们。')) {
        return;
    }

    fetch(`/admin/api/short-links/wechat/${linkId}`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            loadWechatLinks(currentWechatPage);
            loadWechatLinkOptions(); // 重新加载选项

            // 更新计数
            const countElement = document.getElementById('wechat-count');
            countElement.textContent = parseInt(countElement.textContent) - 1;
        } else {
            showAlert('error', data.message);
        }
    })
    .catch(error => {
        console.error('删除微信短链接失败:', error);
        showAlert('error', '网络错误，请稍后重试');
    });
}

// ==================== 自定义短链接相关函数 ====================

function loadCustomLinks(page = 1) {
    const search = document.getElementById('customSearchInput').value;
    const status = document.getElementById('statusFilter').value;
    const linkType = document.getElementById('linkTypeFilter').value;
    const wechatLinkId = document.getElementById('wechatLinkFilter').value;

    fetch(`/admin/api/short-links/custom?page=${page}&search=${search}&status=${status}&link_type=${linkType}&wechat_link_id=${wechatLinkId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderCustomLinks(data.data);
                customLinksData = data.data.data;
                currentCustomPage = page;
            } else {
                showAlert('error', '加载失败: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('error', '网络错误，请稍后重试');
        });
}

function renderCustomLinks(paginatedData) {
    const tbody = document.getElementById('custom-links-table');

    if (paginatedData.data.length === 0) {
        tbody.innerHTML = '<tr><td colspan="8" class="text-center py-4 text-muted">暂无数据</td></tr>';
        return;
    }

    tbody.innerHTML = paginatedData.data.map(link => `
        <tr>
            <td>
                <strong class="text-primary">vsrp.cn/${link.link_id}</strong>
                <br><small class="text-muted">${link.description || ''}</small>
            </td>
            <td>
                <strong>${link.name}</strong>
            </td>
            <td>
                <span class="badge bg-${link.link_type === 'miniprogram' ? 'success' : 'info'}">${link.link_type_label}</span>
            </td>
            <td>
                ${link.link_type === 'miniprogram' ? `
                    ${link.wechat_short_link ? `
                        <small>${link.wechat_short_link.name}</small>
                        <br><span class="badge bg-${getRenewStatusColor(link.wechat_short_link.renew_status)}">${getRenewStatusLabel(link.wechat_short_link.renew_status)}</span>
                    ` : `
                        <span class="text-muted">未关联</span>
                    `}
                ` : `
                    ${link.h5_url ? `
                        <small class="text-break" style="max-width: 200px; display: inline-block;">${link.h5_url}</small>
                    ` : `
                        <span class="badge bg-warning text-dark">未配置</span>
                    `}
                `}
            </td>
            <td>
                <span class="badge bg-${link.status_color}">${link.status_label}</span>
                ${!link.has_target_url ? '<br><small class="text-warning">目标未配置</small>' : ''}
            </td>
            <td>
                <strong>${link.total_visits}</strong>
            </td>
            <td>
                ${link.qr_code_url ? `
                    <div class="qr-actions">
                        <img src="${link.qr_code_url}" alt="二维码" width="30" height="30"
                             class="cursor-pointer" onclick="showQrCode('${link.qr_code_url}', '${link.full_url}')"
                             title="点击查看大图">
                    </div>
                ` : `
                    <span class="text-muted">-</span>
                `}
            </td>
            <td>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-outline-primary" onclick="editCustomLink(${link.id})" title="编辑">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-outline-info" onclick="copyToClipboard('${link.full_url}')" title="复制链接">
                        <i class="fas fa-copy"></i>
                    </button>
                    <button class="btn btn-outline-danger" onclick="deleteCustomLink(${link.id})" title="删除">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </td>
        </tr>
    `).join('');

    // 渲染分页
    renderPagination('custom-pagination', paginatedData, loadCustomLinks);
}

function showCustomLinkModal(linkId = null) {
    const modal = new bootstrap.Modal(document.getElementById('customLinkModal'));
    const form = document.getElementById('customLinkForm');
    const title = document.getElementById('customModalTitle');
    const saveBtn = document.querySelector('#customLinkModal .btn-success .btn-text');

    form.reset();
    // 重置为默认类型
    form.link_type.value = 'miniprogram';
    toggleLinkTypeFields();

    if (linkId) {
        // 编辑模式
        title.textContent = '编辑自定义短链接';
        saveBtn.textContent = '保存修改';

        const link = customLinksData.find(l => l.id === linkId);
        if (link) {
            document.getElementById('customLinkId').value = link.id;
            form.name.value = link.name;
            form.description.value = link.description || '';
            form.link_type.value = link.link_type || 'miniprogram';
            form.wechat_short_link_id.value = link.wechat_short_link_id || '';
            form.h5_url.value = link.h5_url || '';
            form.link_id.value = link.link_id;
            form.is_active.checked = link.is_active;

            if (link.starts_at) {
                form.starts_at.value = new Date(link.starts_at).toISOString().slice(0, 16);
            }
            if (link.ends_at) {
                form.ends_at.value = new Date(link.ends_at).toISOString().slice(0, 16);
            }

            // 编辑时禁用link_id修改
            form.link_id.disabled = true;

            // 切换显示对应的字段
            toggleLinkTypeFields();
        }
    } else {
        // 创建模式
        title.textContent = '创建自定义短链接';
        saveBtn.textContent = '创建链接';
        document.getElementById('customLinkId').value = '';

        // 启用link_id字段
        form.link_id.disabled = false;
    }

    modal.show();
}

// 切换链接类型时显示/隐藏对应字段
function toggleLinkTypeFields() {
    const linkType = document.getElementById('linkTypeSelect').value;
    const miniprogramFields = document.getElementById('miniprogramFields');
    const h5Fields = document.getElementById('h5Fields');
    const wechatSelect = document.getElementById('wechatLinkSelect');

    if (linkType === 'miniprogram') {
        miniprogramFields.style.display = '';
        h5Fields.style.display = 'none';
        wechatSelect.required = true;
    } else {
        miniprogramFields.style.display = 'none';
        h5Fields.style.display = '';
        wechatSelect.required = false;
    }
}

function saveCustomLink() {
    const form = document.getElementById('customLinkForm');
    const linkId = document.getElementById('customLinkId').value;
    const saveBtn = document.querySelector('#customLinkModal .btn-success');
    const btnText = saveBtn.querySelector('.btn-text');
    const btnLoading = saveBtn.querySelector('.btn-loading');

    if (!form.checkValidity()) {
        form.reportValidity();
        return;
    }

    // 显示加载状态
    btnText.classList.add('d-none');
    btnLoading.classList.remove('d-none');
    saveBtn.disabled = true;

    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());
    data.is_active = form.is_active.checked;

    const url = linkId ? `/admin/api/short-links/custom/${linkId}` : '/admin/api/short-links/custom';
    const method = linkId ? 'PUT' : 'POST';

    fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            bootstrap.Modal.getInstance(document.getElementById('customLinkModal')).hide();
            loadCustomLinks(currentCustomPage);

            // 更新计数（只在创建时增加）
            if (!linkId) {
                document.getElementById('custom-count').textContent = parseInt(document.getElementById('custom-count').textContent) + 1;
            }
        } else {
            showAlert('error', data.message);
        }
    })
    .catch(error => {
        console.error('保存自定义短链接失败:', error);
        showAlert('error', '网络错误，请稍后重试');
    })
    .finally(() => {
        // 恢复按钮状态
        btnText.classList.remove('d-none');
        btnLoading.classList.add('d-none');
        saveBtn.disabled = false;
    });
}

function editCustomLink(linkId) {
    showCustomLinkModal(linkId);
}

function deleteCustomLink(linkId) {
    if (!confirm('确定要删除这个自定义短链接吗？\n删除后将无法恢复，用户也无法再通过此链接访问。')) {
        return;
    }

    fetch(`/admin/api/short-links/custom/${linkId}`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            loadCustomLinks(currentCustomPage);

            // 更新计数
            const countElement = document.getElementById('custom-count');
            countElement.textContent = parseInt(countElement.textContent) - 1;
        } else {
            showAlert('error', data.message);
        }
    })
    .catch(error => {
        console.error('删除自定义短链接失败:', error);
        showAlert('error', '网络错误，请稍后重试');
    });
}

function generateLinkId() {
    fetch('/admin/api/short-links/generate-link-id')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.querySelector('#customLinkForm [name="link_id"]').value = data.data.link_id;
            } else {
                showAlert('error', data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('error', '网络错误，请稍后重试');
        });
}

// ==================== 统计相关函数 ====================

function loadStats() {
    fetch('/admin/api/short-links/stats')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderStats(data.data);
            } else {
                showAlert('error', '加载统计数据失败: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('error', '网络错误，请稍后重试');
        });
}

function renderStats(stats) {
    // 更新统计数字
    document.getElementById('totalVisits').textContent = stats.totalVisits;
    document.getElementById('activeLinks').textContent = stats.activeLinks;
    document.getElementById('todayVisits').textContent = stats.todayVisits;
    document.getElementById('avgVisits').textContent = stats.avgVisits;

    // 渲染访问趋势图表
    renderVisitsChart(stats.visitsTrend);

    // 渲染热门链接排行榜
    renderTopLinks(stats.topLinks);
}

function renderVisitsChart(trendData) {
    const ctx = document.getElementById('visitsChart').getContext('2d');

    if (visitsChart) {
        visitsChart.destroy();
    }

    const labels = trendData.map(item => new Date(item.date).toLocaleDateString());
    const data = trendData.map(item => item.visits);

    visitsChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: '访问次数',
                data: data,
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

function renderTopLinks(topLinks) {
    const container = document.getElementById('topLinks');

    if (topLinks.length === 0) {
        container.innerHTML = '<p class="text-muted text-center">暂无数据</p>';
        return;
    }

    container.innerHTML = topLinks.map((link, index) => `
        <div class="d-flex justify-content-between align-items-center mb-2">
            <div>
                <span class="badge bg-secondary me-2">${index + 1}</span>
                <strong>vsrp.cn/${link.link_id}</strong>
                <br><small class="text-muted">${link.name}</small>
            </div>
            <span class="badge bg-primary">${link.total_visits}</span>
        </div>
    `).join('');
}

// ==================== 工具函数 ====================

function loadWechatLinkOptions() {
    fetch('/admin/api/short-links/wechat-options')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const selects = [
                    document.getElementById('wechatLinkSelect'),
                    document.getElementById('wechatLinkFilter')
                ];

                selects.forEach(select => {
                    if (select) {
                        const currentValue = select.value;
                        select.innerHTML = select.id === 'wechatLinkSelect'
                            ? '<option value="">请选择微信短链接</option>'
                            : '<option value="">全部微信链接</option>';

                        data.data.forEach(option => {
                            const optionElement = document.createElement('option');
                            optionElement.value = option.id;
                            optionElement.textContent = `${option.name} (${getEnvVersionLabel(option.env_version)})`;
                            select.appendChild(optionElement);
                        });

                        if (currentValue) {
                            select.value = currentValue;
                        }
                    }
                });
            }
        })
        .catch(error => {
            console.error('Error loading wechat link options:', error);
        });
}

function showQrCode(qrCodeUrl, fullUrl) {
    document.getElementById('qrCodeImage').src = qrCodeUrl;
    document.getElementById('qrCodeUrl').textContent = fullUrl;
    new bootstrap.Modal(document.getElementById('qrCodeModal')).show();
}

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        showAlert('success', '链接已复制到剪贴板');
    }).catch(() => {
        // 备用方案
        const textArea = document.createElement('textarea');
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        showAlert('success', '链接已复制到剪贴板');
    });
}

function renderPagination(containerId, paginatedData, loadFunction) {
    const container = document.getElementById(containerId);

    if (paginatedData.last_page <= 1) {
        container.innerHTML = '';
        return;
    }

    let paginationHtml = '<nav><ul class="pagination justify-content-center">';

    // 上一页
    if (paginatedData.current_page > 1) {
        paginationHtml += `<li class="page-item"><a class="page-link" href="#" onclick="${loadFunction.name}(${paginatedData.current_page - 1}); return false;">上一页</a></li>`;
    }

    // 页码
    for (let i = Math.max(1, paginatedData.current_page - 2); i <= Math.min(paginatedData.last_page, paginatedData.current_page + 2); i++) {
        const active = i === paginatedData.current_page ? 'active' : '';
        paginationHtml += `<li class="page-item ${active}"><a class="page-link" href="#" onclick="${loadFunction.name}(${i}); return false;">${i}</a></li>`;
    }

    // 下一页
    if (paginatedData.current_page < paginatedData.last_page) {
        paginationHtml += `<li class="page-item"><a class="page-link" href="#" onclick="${loadFunction.name}(${paginatedData.current_page + 1}); return false;">下一页</a></li>`;
    }

    paginationHtml += '</ul></nav>';
    container.innerHTML = paginationHtml;
}

function showAlert(type, message) {
    // 这里可以使用你现有的通知系统
    // 或者使用 Bootstrap Toast
    const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
    const alertHtml = `
        <div class="alert ${alertClass} alert-dismissible fade show position-fixed"
             style="top: 20px; right: 20px; z-index: 9999; min-width: 300px;">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;

    document.body.insertAdjacentHTML('beforeend', alertHtml);

    // 3秒后自动关闭
    setTimeout(() => {
        const alert = document.querySelector('.alert:last-of-type');
        if (alert) {
            bootstrap.Alert.getOrCreateInstance(alert).close();
        }
    }, 3000);
}

function getEnvVersionLabel(envVersion) {
    const labels = {
        'release': '正式版',
        'trial': '体验版',
        'develop': '开发版'
    };
    return labels[envVersion] || envVersion;
}

function getEnvVersionColor(envVersion) {
    const colors = {
        'release': 'success',
        'trial': 'warning',
        'develop': 'info'
    };
    return colors[envVersion] || 'secondary';
}

function getRenewStatusLabel(status) {
    const labels = {
        'active': '正常',
        'failed': '续期失败',
        'expired': '已过期'
    };
    return labels[status] || status;
}

function getRenewStatusColor(status) {
    const colors = {
        'active': 'success',
        'failed': 'danger',
        'expired': 'secondary'
    };
    return colors[status] || 'secondary';
}

function formatDateTime(dateTime) {
    return new Date(dateTime).toLocaleString('zh-CN');
}

function getTimeFromNow(dateTime) {
    const now = new Date();
    const target = new Date(dateTime);
    const diff = target - now;

    if (diff < 0) {
        return '已过期';
    }

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

    if (days > 0) {
        return `${days}天后过期`;
    } else if (hours > 0) {
        return `${hours}小时后过期`;
    } else {
        return '即将过期';
    }
}

</script>
@endpush

@push('styles')
<style>
.cursor-pointer {
    cursor: pointer;
}

.badge {
    font-size: 0.75em;
}

.table td {
    vertical-align: middle;
}

.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.page-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 1rem;
}

.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

.nav-tabs .nav-link.active {
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

.alert {
    border: 0;
    border-radius: 0.5rem;
}

#visitsChart {
    max-height: 300px;
}

.qr-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.qr-actions .btn {
    border-radius: 0.25rem;
}

.qr-actions .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
@endpush