{% extends "admin/base.html" %}

{% block page_title %}مدیریت پنل‌ها{% endblock %}
{% block page_subtitle %}مدیریت سرورها و اتصالات VPN{% endblock %}

{% block content %}
<div class="fade-in">
    <!-- Actions Bar -->
    <div class="card" style="margin-bottom: var(--sp-xl);">
        <div
            style="display: flex; flex-wrap: wrap; gap: var(--sp-md); justify-content: space-between; align-items: center;">
            <div style="display: flex; align-items: center; gap: var(--sp-sm);">
                <div
                    style="width: 40px; height: 40px; border-radius: var(--radius-lg); background: rgba(16, 185, 129, 0.1); color: var(--p-success); display: flex; align-items: center; justify-content: center;">
                    <i class="fas fa-server"></i>
                </div>
                <div>
                    <div style="font-weight: 700;">لیست پنل‌ها</div>
                    <div style="font-size: 0.8rem; color: var(--p-text-muted);">{{ panels|length }} سرور متصل</div>
                </div>
            </div>

            <div style="display: flex; flex-wrap: wrap; gap: var(--sp-sm);">
                <button class="btn btn-secondary btn-sm" onclick="showRecoverServicesModal()">
                    <i class="fas fa-undo-alt" style="color: var(--p-info);"></i>
                    <span>بازیابی</span>
                </button>
                <button class="btn btn-secondary btn-sm" onclick="showMigratePanelModal()">
                    <i class="fas fa-exchange-alt" style="color: var(--p-warning);"></i>
                    <span>مهاجرت</span>
                </button>
                <button class="btn btn-primary" onclick="showAddPanelModal()">
                    <i class="fas fa-plus"></i>
                    <span>افزودن پنل</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Panels Grid -->
    <div class="grid-3" id="panelsGrid">
        {% if panels %}
        {% for panel in panels %}
        <div class="card panel-card">
            <div class="card-header"
                style="margin-bottom: var(--sp-md); border-bottom: 1px solid var(--border-color); padding-bottom: var(--sp-md);">
                <div style="display: flex; gap: var(--sp-md); align-items: center;">
                    <div class="panel-icon-wrapper">
                        <div
                            class="panel-icon {% if panel.panel_type == 'marzban' %}icon-marzban{% elif panel.panel_type == 'rebecca' %}icon-rebecca{% elif panel.panel_type == 'pasargad' %}icon-pasargad{% elif panel.panel_type == 'marzneshin' %}icon-marzneshin{% else %}icon-3xui{% endif %}">
                            <i class="fas fa-server"></i>
                        </div>
                    </div>
                    <div>
                        <div style="font-weight: 800; font-size: 1.1rem; margin-bottom: 2px;">{{ panel.name }}</div>
                        <div style="display: flex; gap: var(--sp-xs);">
                            <span
                                class="badge {% if panel.panel_type == 'marzban' %}badge-info{% elif panel.panel_type == 'rebecca' %}badge-error{% elif panel.panel_type == 'pasargad' %}badge-success{% elif panel.panel_type == 'marzneshin' %}badge-warning{% else %}badge-warning{% endif %}">
                                {{ panel.panel_type|upper }}
                            </span>
                            {% if panel.is_active %}
                            <span class="badge badge-success">فعال</span>
                            {% else %}
                            <span class="badge badge-error">غیرفعال</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div style="display: flex; flex-direction: column; gap: var(--sp-sm); margin-bottom: var(--sp-lg);">
                <div class="detail-row">
                    <span class="detail-label"><i class="fas fa-link"></i> آدرس</span>
                    <span class="detail-value" title="{{ panel.url }}">{{ panel.url[:30] }}...</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label"><i class="fas fa-dollar-sign"></i> قیمت/GB</span>
                    <span class="detail-value">{{ "{:,}".format(panel.price_per_gb or 0) }} تومان</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label"><i class="fas fa-shopping-cart"></i> فروش</span>
                    <span class="detail-value">
                        {% if panel.sale_type == 'gigabyte' %}گیگابایتی{% elif panel.sale_type == 'plan' %}پلنی{% else
                        %}هر دو{% endif %}
                    </span>
                </div>
            </div>

            <div style="display: flex; gap: var(--sp-sm);">
                <button class="btn btn-sm btn-secondary" style="flex: 1;" onclick="testPanel({{ panel.id }})">
                    <i class="fas fa-plug"></i> تست
                </button>
                <button class="btn btn-sm btn-secondary" style="flex: 1;" onclick="editPanel({{ panel.id }})">
                    <i class="fas fa-edit"></i> ویرایش
                </button>
                <button class="btn btn-sm btn-outline"
                    style="flex: 0 0 auto; border-color: var(--p-error); color: var(--p-error);"
                    onclick="deletePanel({{ panel.id }})">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        </div>
        {% endfor %}
        {% else %}
        <div class="card" style="grid-column: 1 / -1; text-align: center; padding: var(--sp-3xl);">
            <i class="fas fa-server"
                style="font-size: 3rem; color: var(--p-bg-active); margin-bottom: var(--sp-lg);"></i>
            <h3 style="margin-bottom: var(--sp-sm);">هیچ پنلی وجود ندارد</h3>
            <p class="text-muted" style="margin-bottom: var(--sp-xl);">برای شروع فروش، اولین پنل خود را اضافه کنید.</p>
            <button class="btn btn-primary" onclick="showAddPanelModal()">
                <i class="fas fa-plus"></i>
                افزودن پنل جدید
            </button>
        </div>
        {% endif %}
    </div>
</div>

<!-- Add Panel Modal -->
<div id="addPanelModal" class="modal-overlay">
    <div class="modal-card">
        <div class="card-header">
            <div class="card-title">
                <i class="fas fa-plus-circle" style="color: var(--p-success);"></i>
                افزودن پنل جدید
            </div>
            <button onclick="closeModal('addPanelModal')" class="close-btn"><i class="fas fa-times"></i></button>
        </div>
        <form id="addPanelForm" onsubmit="addPanel(event)">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md);">
                <div class="form-group">
                    <label class="form-label">نام پنل</label>
                    <input type="text" name="name" class="form-control" required placeholder="مثال: سرور آلمان">
                </div>
                <div class="form-group">
                    <label class="form-label">نوع پنل</label>
                    <select name="panel_type" class="form-control" required>
                        <option value="3x-ui">3x-ui (X-UI)</option>
                        <option value="marzban">Marzban</option>
                        <option value="rebecca">Rebecca</option>
                        <option value="pasargad">Pasargad</option>
                        <option value="marzneshin">Marzneshin</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">URL پنل</label>
                <input type="text" name="url" class="form-control" required placeholder="https://example.com:2053">
            </div>

            <div class="form-group">
                <label class="form-label">API Endpoint (معمولا همان URL)</label>
                <input type="text" name="api_endpoint" class="form-control" required
                    placeholder="https://example.com:2053">
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md);">
                <div class="form-group">
                    <label class="form-label">نام کاربری</label>
                    <input type="text" name="username" class="form-control" required>
                </div>
                <div class="form-group">
                    <label class="form-label">رمز عبور</label>
                    <input type="password" name="password" class="form-control" required>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">لینک سابسکریپشن (اختیاری)</label>
                <input type="text" name="subscription_url" class="form-control" placeholder="https://sub.example.com">
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md);">
                <div class="form-group">
                    <label class="form-label">قیمت هر گیگ (تومان)</label>
                    <input type="number" name="price_per_gb" class="form-control" value="0" min="0">
                </div>
                <div class="form-group">
                    <label class="form-label">نوع فروش</label>
                    <select name="sale_type" class="form-control" required>
                        <option value="gigabyte">گیگابایتی</option>
                        <option value="plan">پلنی</option>
                        <option value="both">هر دو</option>
                    </select>
                </div>
            </div>

            <div id="add_inbound_container" class="form-group" style="display: none;">
                <label class="form-label">سرویس/اینباند پیش‌فرض</label>
                <select id="add_default_inbound_id" name="default_inbound_id" class="form-control">
                    <option value="">انتخاب کنید...</option>
                </select>
                <small class="text-muted" style="display: block; margin-top: 5px;">برای ربکا، ابتدا دکمه تست را
                    بزنید.</small>
            </div>

            <div id="add_pasargad_group_container" class="form-group" style="display: none;">
                <label class="form-label">گروه اصلی (Main Group)</label>
                <select id="add_pasargad_group" name="pasargad_group" class="form-control">
                    <option value="">ابتدا دکمه تست اتصال را بزنید...</option>
                </select>
                <small class="text-muted" style="display: block; margin-top: 5px;">کاربران جدید در این گروه ساخته خواهند
                    شد.</small>
            </div>

            <div style="display: flex; gap: var(--sp-md); margin-top: var(--sp-lg);">
                <button type="button" class="btn btn-secondary" onclick="testAndFetchServices()" style="flex: 1;">
                    <i class="fas fa-sync"></i> تست اتصال
                </button>
                <button type="submit" class="btn btn-primary" style="flex: 2;">
                    <i class="fas fa-check"></i> افزودن
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Panel Modal -->
<div id="editPanelModal" class="modal-overlay">
    <div class="modal-card">
        <div class="card-header">
            <div class="card-title">
                <i class="fas fa-edit" style="color: var(--p-info);"></i>
                ویرایش پنل
            </div>
            <button onclick="closeModal('editPanelModal')" class="close-btn"><i class="fas fa-times"></i></button>
        </div>
        <form id="editPanelForm" onsubmit="updatePanel(event)">
            <input type="hidden" name="panel_id">

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md);">
                <div class="form-group">
                    <label class="form-label">نام پنل</label>
                    <input type="text" name="name" class="form-control" required>
                </div>
                <div class="form-group">
                    <label class="form-label">نوع پنل</label>
                    <select name="panel_type" class="form-control" required>
                        <option value="3x-ui">3x-ui</option>
                        <option value="marzban">Marzban</option>
                        <option value="rebecca">Rebecca</option>
                        <option value="pasargad">Pasargad</option>
                        <option value="marzneshin">Marzneshin</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">URL پنل</label>
                <input type="text" name="url" class="form-control" required>
            </div>

            <div class="form-group">
                <label class="form-label">API Endpoint</label>
                <input type="text" name="api_endpoint" class="form-control" required>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md);">
                <div class="form-group">
                    <label class="form-label">نام کاربری</label>
                    <input type="text" name="username" class="form-control" required>
                </div>
                <div class="form-group">
                    <label class="form-label">رمز عبور (اختیاری)</label>
                    <input type="password" name="password" class="form-control" placeholder="تغییر نمی‌کند">
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">لینک سابسکریپشن</label>
                <input type="text" name="subscription_url" class="form-control">
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md);">
                <div class="form-group">
                    <label class="form-label">قیمت هر گیگ</label>
                    <input type="number" name="price_per_gb" class="form-control" min="0">
                </div>
                <div class="form-group">
                    <label class="form-label">نوع فروش</label>
                    <select name="sale_type" class="form-control" required>
                        <option value="gigabyte">گیگابایتی</option>
                        <option value="plan">پلنی</option>
                        <option value="both">هر دو</option>
                    </select>
                </div>
            </div>

            <div id="edit_inbound_container" class="form-group" style="display: none;">
                <label class="form-label">سرویس پیش‌فرض</label>
                <select id="edit_default_inbound_id" name="default_inbound_id" class="form-control">
                    <option value="">انتخاب کنید...</option>
                </select>
            </div>

            <div id="edit_pasargad_group_container" class="form-group" style="display: none;">
                <label class="form-label">گروه اصلی (Main Group)</label>
                <select id="edit_pasargad_group" name="pasargad_group" class="form-control">
                    <option value="">درحال بارگذاری...</option>
                </select>
            </div>

            <div style="display: flex; gap: var(--sp-md); margin-top: var(--sp-lg);">
                <button type="button" class="btn btn-secondary" onclick="closeModal('editPanelModal')"
                    style="flex: 1;">لغو</button>
                <button type="submit" class="btn btn-primary" style="flex: 2;">ذخیره تغییرات</button>
            </div>
        </form>
    </div>
</div>

<!-- Migrate Modal -->
<div id="migratePanelModal" class="modal-overlay">
    <div class="modal-card">
        <div class="card-header">
            <div class="card-title">
                <i class="fas fa-exchange-alt" style="color: var(--p-warning);"></i>
                مهاجرت پنل
            </div>
            <button onclick="closeModal('migratePanelModal')" class="close-btn"><i class="fas fa-times"></i></button>
        </div>
        <form onsubmit="migratePanel(event)">
            <div class="form-group">
                <label class="form-label">پنل مبدا (Source)</label>
                <select name="source_panel_id" class="form-control" required>
                    <option value="">انتخاب کنید...</option>
                    {% for panel in panels %}
                    <option value="{{ panel.id }}">{{ panel.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <label class="form-label">پنل مقصد (Destination)</label>
                <select name="dest_panel_id" class="form-control" required>
                    <option value="">انتخاب کنید...</option>
                    {% for panel in panels %}
                    <option value="{{ panel.id }}">{{ panel.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group"
                style="background: rgba(239, 68, 68, 0.1); padding: var(--sp-md); border-radius: var(--radius-md); border: 1px solid rgba(239, 68, 68, 0.3);">
                <label
                    style="display: flex; align-items: center; gap: var(--sp-sm); cursor: pointer; color: var(--p-error); font-weight: 600;">
                    <input type="checkbox" name="delete_source" style="width: 18px; height: 18px;">
                    حذف کلاینت‌ها از پنل مبدا
                </label>
                <div style="font-size: 0.8rem; color: var(--p-text-muted); margin-top: 5px; margin-right: 26px;">
                    هشدار: این عملیات غیرقابل بازگشت است.
                </div>
            </div>

            <div id="migrationStats"
                style="display: none; margin-bottom: var(--sp-md); padding: var(--sp-md); background: var(--p-bg-hover); border-radius: var(--radius-md);">
            </div>

            <div style="display: flex; gap: var(--sp-md);">
                <button type="button" class="btn btn-secondary" onclick="closeModal('migratePanelModal')"
                    style="flex: 1;">لغو</button>
                <button type="submit" class="btn btn-primary"
                    style="flex: 2; background: var(--p-warning); border-color: var(--p-warning);">شروع مهاجرت</button>
            </div>
        </form>
    </div>
</div>

<!-- Recover Services Modal -->
<div id="recoverServicesModal" class="modal-overlay">
    <div class="modal-card">
        <div class="card-header">
            <div class="card-title">
                <i class="fas fa-undo-alt" style="color: var(--p-info);"></i>
                بازیابی سرویس‌ها
            </div>
            <button onclick="closeModal('recoverServicesModal')" class="close-btn"><i class="fas fa-times"></i></button>
        </div>
        <form onsubmit="recoverServices(event)">
            <div class="form-group"
                style="background: rgba(59, 130, 246, 0.1); padding: var(--sp-md); border-radius: var(--radius-md); margin-bottom: var(--sp-lg);">
                <div style="display: flex; gap: var(--sp-sm);">
                    <i class="fas fa-info-circle" style="color: var(--p-info); margin-top: 2px;"></i>
                    <div style="font-size: 0.9rem; color: var(--p-text-main);">
                        این ابزار شناسه پنل سرویس‌ها را در دیتابیس تغییر می‌دهد. زمانی استفاده کنید که سرویس‌ها از پنل
                        کاربری ناپدید شده‌اند.
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">پنل قدیمی (فعلی در دیتابیس)</label>
                <select name="source_panel_id" class="form-control" required>
                    <option value="">انتخاب کنید...</option>
                    {% for panel in panels %}
                    <option value="{{ panel.id }}">{{ panel.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <label class="form-label">پنل جدید (مقصد)</label>
                <select name="dest_panel_id" class="form-control" required>
                    <option value="">انتخاب کنید...</option>
                    {% for panel in panels %}
                    <option value="{{ panel.id }}">{{ panel.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div id="recoveryStats"
                style="display: none; margin-bottom: var(--sp-md); padding: var(--sp-md); background: var(--p-bg-hover); border-radius: var(--radius-md);">
            </div>

            <div style="display: flex; gap: var(--sp-md);">
                <button type="button" class="btn btn-secondary" onclick="closeModal('recoverServicesModal')"
                    style="flex: 1;">لغو</button>
                <button type="submit" class="btn btn-primary" style="flex: 2;">بازیابی</button>
            </div>
        </form>
    </div>
</div>

<style>
    /* Custom Styles for Panels Page */
    .panel-card {
        display: flex;
        flex-direction: column;
    }

    .panel-icon-wrapper {
        width: 50px;
        height: 50px;
        position: relative;
    }

    .panel-icon {
        width: 100%;
        height: 100%;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
    }

    .icon-3xui {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
    }

    .icon-marzban {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    }

    .icon-rebecca {
        background: linear-gradient(135deg, #ec4899, #db2777);
    }

    .icon-pasargad {
        background: linear-gradient(135deg, #10b981, #059669);
    }

    .icon-marzneshin {
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }

    .detail-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--sp-sm);
        background: var(--p-bg-hover);
        border-radius: var(--radius-md);
    }

    .detail-label {
        font-size: 0.85rem;
        color: var(--p-text-muted);
        display: flex;
        align-items: center;
        gap: var(--sp-sm);
    }

    .detail-value {
        font-weight: 700;
        font-size: 0.9rem;
    }

    /* Modal Styles */
    .modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(5px);
        z-index: 100;
        align-items: center;
        justify-content: center;
        padding: var(--sp-lg);
        overflow-y: auto;
    }

    .modal-card {
        background: var(--p-bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        width: 100%;
        max-width: 600px;
        padding: var(--sp-xl);
        position: relative;
        animation: slideUp 0.3s ease;
        margin: auto;
    }

    .close-btn {
        background: transparent;
        color: var(--p-text-muted);
        font-size: 1.2rem;
        cursor: pointer;
    }

    .close-btn:hover {
        color: var(--p-red-500);
    }

    @keyframes slideUp {
        from {
            transform: translateY(20px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
</style>

<script>
    // Modal Functions
    function showAddPanelModal() {
        document.getElementById('addPanelModal').style.display = 'flex';
    }

    function showMigratePanelModal() {
        document.getElementById('migratePanelModal').style.display = 'flex';
    }

    function showRecoverServicesModal() {
        document.getElementById('recoverServicesModal').style.display = 'flex';
    }

    function closeModal(id) {
        document.getElementById(id).style.display = 'none';
    }

    // Close modal on outside click
    window.onclick = function (event) {
        if (event.target.classList.contains('modal-overlay')) {
            event.target.style.display = 'none';
        }
    }

    // Panel Actions (Placeholders for logic)
    async function addPanel(event) {
        event.preventDefault();
        const form = event.target;
        const formData = new FormData(form);
        const data = Object.fromEntries(formData.entries());

        // Handle Pasargad extra config
        if (data.panel_type === 'pasargad') {
            const group = document.getElementById('add_pasargad_group').value;
            if (group) {
                data.extra_config = { main_group: group };
            }
        }

        // Convert checkbox to boolean if needed, though FormData usually handles it
        // Add logic to call API
        try {
            const btn = form.querySelector('button[type="submit"]');
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            btn.disabled = true;

            await apiCall('/api/admin/panels', {
                method: 'POST',
                body: JSON.stringify(data)
            });

            showToast('پنل با موفقیت افزوده شد', 'success');
            closeModal('addPanelModal');
            setTimeout(() => window.location.reload(), 1000);
        } catch (error) {
            // Error handled by apiCall
        } finally {
            // Reset button
        }
    }

    // ... Other functions (editPanel, updatePanel, deletePanel, migratePanel, recoverServices) 
    // would be similar to existing logic but using the new toast and apiCall helpers from base.html

    // Re-implementing specific logic for panel types (showing/hiding inbound select)
    document.querySelector('select[name="panel_type"]').addEventListener('change', function (e) {
        const inboundContainer = document.getElementById('add_inbound_container');
        const pasargadContainer = document.getElementById('add_pasargad_group_container');

        inboundContainer.style.display = 'none';
        pasargadContainer.style.display = 'none';

        if (e.target.value === 'rebecca') {
            inboundContainer.style.display = 'block';
        } else if (e.target.value === 'pasargad') {
            pasargadContainer.style.display = 'block';
        }
    });

    // Test connection and fetch services/groups
    async function testAndFetchServices() {
        const form = document.getElementById('addPanelForm');
        const formData = new FormData(form);
        const data = Object.fromEntries(formData.entries());

        if (!data.url || !data.username || !data.password) {
            showToast('لطفاً آدرس، نام کاربری و رمز عبور را وارد کنید', 'error');
            return;
        }

        const btn = form.querySelector('button[onclick="testAndFetchServices()"]');
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
        btn.disabled = true;

        try {
            // First check connection
            const response = await apiCall('/api/admin/panels/check-connection', {
                method: 'POST',
                body: JSON.stringify(data)
            });

            showToast(response.message, 'success');

            // Then fetch metadata if needed
            if (data.panel_type === 'pasargad' || data.panel_type === 'rebecca') {
                try {
                    const metaResponse = await apiCall('/api/admin/panels/fetch-metadata', {
                        method: 'POST',
                        body: JSON.stringify(data)
                    });

                    if (metaResponse.success) {
                        if (data.panel_type === 'pasargad' && metaResponse.groups) {
                            const select = document.getElementById('add_pasargad_group');
                            select.innerHTML = '<option value="">انتخاب کنید...</option>';
                            metaResponse.groups.forEach(group => {
                                const option = document.createElement('option');
                                option.value = group;
                                option.textContent = group;
                                select.appendChild(option);
                            });
                            showToast(`لیست گروه‌ها بروزرسانی شد (${metaResponse.groups.length} مورد)`, 'info');
                        } else if (data.panel_type === 'rebecca' && metaResponse.inbounds) {
                            const select = document.getElementById('add_default_inbound_id');
                            select.innerHTML = '<option value="">انتخاب کنید...</option>';
                            metaResponse.inbounds.forEach(inbound => {
                                const option = document.createElement('option');
                                option.value = inbound.id;
                                option.textContent = inbound.remark || inbound.tag || `Inbound ${inbound.id}`;
                                select.appendChild(option);
                            });
                            showToast(`لیست سرویس‌ها بروزرسانی شد (${metaResponse.inbounds.length} مورد)`, 'info');
                        }
                    }
                } catch (metaError) {
                    console.error('Error fetching metadata:', metaError);
                    showToast('خطا در دریافت اطلاعات تکمیلی پنل', 'warning');
                }
            }

        } catch (error) {
            // Error handled by apiCall
        } finally {
            btn.innerHTML = originalText;
            btn.disabled = false;
        }
    }

    // Edit Panel Logic
    async function editPanel(id) {
        try {
            const panel = await apiCall(`/api/admin/panels/${id}`);
            const form = document.getElementById('editPanelForm');

            // Populate form
            form.panel_id.value = panel.id;
            form.name.value = panel.name;
            form.panel_type.value = panel.panel_type;
            form.url.value = panel.url;
            form.api_endpoint.value = panel.api_endpoint;
            form.username.value = panel.username;
            form.subscription_url.value = panel.subscription_url || '';
            form.price_per_gb.value = panel.price_per_gb;
            form.sale_type.value = panel.sale_type;

            // Handle extra config for Pasargad
            const pasargadContainer = document.getElementById('edit_pasargad_group_container');
            const inboundContainer = document.getElementById('edit_inbound_container');

            pasargadContainer.style.display = 'none';
            inboundContainer.style.display = 'none';

            if (panel.panel_type === 'pasargad') {
                pasargadContainer.style.display = 'block';
                // Populate groups if possible, or show current value
                const select = document.getElementById('edit_pasargad_group');
                select.innerHTML = ''; // Clear

                let currentGroup = '';
                if (panel.extra_config) {
                    try {
                        const config = typeof panel.extra_config === 'string' ? JSON.parse(panel.extra_config) : panel.extra_config;
                        currentGroup = config.main_group || '';
                    } catch (e) { }
                }

                if (currentGroup) {
                    const option = document.createElement('option');
                    option.value = currentGroup;
                    option.textContent = currentGroup;
                    option.selected = true;
                    select.appendChild(option);

                    // Add option to fetch more
                    const fetchOption = document.createElement('option');
                    fetchOption.value = "";
                    fetchOption.textContent = "--- برای بروزرسانی لیست ذخیره کنید ---";
                    fetchOption.disabled = true;
                    select.appendChild(fetchOption);
                } else {
                    select.innerHTML = '<option value="">گروهی انتخاب نشده</option>';
                }
            } else if (panel.panel_type === 'rebecca') {
                inboundContainer.style.display = 'block';
                // Populate inbounds... (existing logic or simplified)
            }

            document.getElementById('editPanelModal').style.display = 'flex';
        } catch (error) {
            console.error(error);
        }
    }

    // Delete Panel
    async function deletePanel(id) {
        if (!confirm('آیا از حذف این پنل اطمینان دارید؟ این عمل غیرقابل بازگشت است.')) return;
        try {
            await apiCall(`/api/admin/panels/${id}`, { method: 'DELETE' });
            showToast('پنل با موفقیت حذف شد', 'success');
            setTimeout(() => window.location.reload(), 1000);
        } catch (error) {
            console.error(error);
        }
    }
</script>
{% endblock %}