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

{% block page_title %}مدیریت کلمات کلیدی{% endblock %}

{% block content %}
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
    <div>
        <h5 class="fw-bold"><i class="fas fa-tags" style="color:#c41e3a;"></i> بانک کلمات کلیدی</h5>
        <p class="text-secondary small mb-0">
            مدیریت کلمات کلیدی و صفحات سئو شده
            <span class="badge bg-primary ms-1">{{ keywords|length|persian_numbers }} کلمه</span>
            <span class="badge bg-success ms-1">{{ keywords|selectattr('is_active')|list|length|persian_numbers }} فعال</span>
            <span class="badge bg-info ms-1">{{ keywords|selectattr('is_targeted')|list|length|persian_numbers }} هدف‌گذاری</span>
        </p>
    </div>
    <div class="d-flex gap-2 flex-wrap">
        <a href="{{ url_for('admin_keyword_create') }}" class="btn-admin-primary">
            <i class="fas fa-plus"></i> افزودن کلمه جدید
        </a>
        <form method="POST" action="{{ url_for('admin_seo_update') }}" style="display:inline-block;" 
              onsubmit="return confirm('آیا از بروزرسانی خودکار سئو مطمئن هستید؟');">
            <button type="submit" class="btn btn-success btn-sm rounded-pill">
                <i class="fas fa-sync-alt"></i> بروزرسانی سئو
            </button>
        </form>
        <form method="POST" action="{{ url_for('admin_seo_pages_generate') }}" style="display:inline-block;"
              onsubmit="return confirm('آیا از تولید خودکار تمام صفحات سئو مطمئن هستید؟ این عمل ممکن است چند دقیقه طول بکشد.');">
            <button type="submit" class="btn btn-warning btn-sm rounded-pill">
                <i class="fas fa-magic"></i> تولید همه صفحات
            </button>
        </form>
    </div>
</div>

<!-- ============================================================
   فیلترها و جستجو
   ============================================================ -->
<div class="card border-0 shadow-sm mb-4" style="border-radius:12px;overflow:hidden;">
    <div class="card-body p-3 p-md-4">
        <div class="row g-2 align-items-end">
            <div class="col-md-4">
                <label class="form-label fw-bold small">جستجو</label>
                <input type="text" id="searchKeyword" class="form-control form-control-sm" placeholder="جستجوی کلمه کلیدی...">
            </div>
            <div class="col-md-3">
                <label class="form-label fw-bold small">دسته‌بندی</label>
                <select id="filterCategory" class="form-select form-select-sm">
                    <option value="">همه دسته‌بندی‌ها</option>
                    <option value="brand">برند</option>
                    <option value="service">خدمات</option>
                    <option value="region">منطقه</option>
                    <option value="neighborhood">محله</option>
                    <option value="parts">قطعات</option>
                    <option value="warranty">ضمانت</option>
                    <option value="pricing">قیمت‌گذاری</option>
                    <option value="emergency">اضطراری</option>
                    <option value="maintenance">نگهداری</option>
                    <option value="installation">نصب</option>
                    <option value="general">عمومی</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label fw-bold small">وضعیت</label>
                <select id="filterStatus" class="form-select form-select-sm">
                    <option value="">همه</option>
                    <option value="active">فعال</option>
                    <option value="inactive">غیرفعال</option>
                    <option value="targeted">هدف‌گذاری شده</option>
                    <option value="has_seo">دارای صفحه سئو</option>
                    <option value="no_seo">بدون صفحه سئو</option>
                </select>
            </div>
            <div class="col-md-2">
                <button onclick="filterTable()" class="btn btn-danger btn-sm w-100 rounded-pill">
                    <i class="fas fa-filter"></i> فیلتر
                </button>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================
   لیست کلمات کلیدی
   ============================================================ -->
<div class="table-responsive table-admin">
    <table class="table table-hover" id="keywordsTable">
        <thead>
            <tr>
                <th style="width:30px;">#</th>
                <th>کلمه کلیدی</th>
                <th>دسته‌بندی</th>
                <th>اولویت</th>
                <th>حجم جستجو</th>
                <th>رقابت</th>
                <th>سختی</th>
                <th>وضعیت</th>
                <th>صفحه سئو</th>
                <th>عملیات</th>
            </tr>
        </thead>
        <tbody>
            {% for kw in keywords %}
            {% set seo_page = kw.seo_page %}
            <tr data-category="{{ kw.category|default('general') }}" 
                data-status="{% if kw.is_active %}active{% else %}inactive{% endif %}"
                data-targeted="{% if kw.is_targeted %}true{% else %}false{% endif %}"
                data-has-seo="{% if seo_page and seo_page.is_active %}true{% else %}false{% endif %}">
                <td>{{ loop.index|persian_numbers }}</td>
                <td>
                    <strong style="font-size:0.9rem;">{{ kw.keyword }}</strong>
                    {% if kw.is_targeted %}
                        <span class="badge bg-info ms-1" style="font-size:0.5rem;" title="هدف‌گذاری شده">
                            <i class="fas fa-bullseye"></i>
                        </span>
                    {% endif %}
                </td>
                <td>
                    <span class="badge bg-secondary" style="font-size:0.65rem;">
                        {{ CATEGORY_NAMES[kw.category]|default(kw.category|default('عمومی')) }}
                    </span>
                </td>
                <td>
                    <span class="badge bg-{% if kw.priority >= 8 %}danger{% elif kw.priority >= 5 %}warning{% else %}info{% endif %}" style="font-size:0.65rem;">
                        {{ kw.priority|default(0)|persian_numbers }}
                    </span>
                </td>
                <td>{{ kw.search_volume|default(0)|persian_numbers }}</td>
                <td>
                    <div class="progress" style="width:50px;height:6px;">
                        <div class="progress-bar bg-{% if kw.competition < 0.3 %}success{% elif kw.competition < 0.6 %}warning{% else %}danger{% endif %}" 
                             style="width:{{ (kw.competition|default(0) * 100)|round|int }}%;"></div>
                    </div>
                </td>
                <td>
                    <div class="progress" style="width:50px;height:6px;">
                        <div class="progress-bar bg-{% if kw.difficulty < 30 %}success{% elif kw.difficulty < 60 %}warning{% else %}danger{% endif %}" 
                             style="width:{{ kw.difficulty|default(0) }}%;"></div>
                    </div>
                </td>
                <td>
                    <div class="d-flex flex-column gap-1">
                        <span class="badge bg-{% if kw.is_active %}success{% else %}secondary{% endif %}" style="font-size:0.6rem;">
                            {% if kw.is_active %}فعال{% else %}غیرفعال{% endif %}
                        </span>
                        {% if kw.is_targeted %}
                            <span class="badge bg-info" style="font-size:0.5rem;">هدف‌گذاری</span>
                        {% endif %}
                    </div>
                </td>
                <td>
                    {% if seo_page and seo_page.is_active %}
                        <div class="d-flex flex-column gap-1">
                            <span class="badge bg-success" style="font-size:0.6rem;">
                                <i class="fas fa-check-circle"></i> موجود
                            </span>
                            <span class="text-muted" style="font-size:0.55rem;">
                                <i class="fas fa-eye"></i> {{ seo_page.view_count|default(0)|persian_numbers }}
                            </span>
                            <a href="{{ url_for('seo_page', slug=seo_page.slug) }}" target="_blank" 
                               class="text-info" style="font-size:0.55rem;">
                                <i class="fas fa-external-link-alt"></i> مشاهده
                            </a>
                        </div>
                    {% elif kw.is_active and kw.is_targeted %}
                        <form method="POST" action="{{ url_for('admin_keyword_generate_seo', id=kw.id) }}" style="display:inline;">
                            <button type="submit" class="btn btn-sm btn-outline-success rounded-pill" style="font-size:0.55rem;padding:2px 8px;" 
                                    title="تولید صفحه سئو">
                                <i class="fas fa-magic"></i> تولید
                            </button>
                        </form>
                    {% else %}
                        <span class="text-muted" style="font-size:0.6rem;">غیرفعال</span>
                    {% endif %}
                </td>
                <td>
                    <div class="btn-group btn-group-sm">
                        <a href="{{ url_for('admin_keyword_edit', id=kw.id) }}" class="btn btn-outline-primary" title="ویرایش">
                            <i class="fas fa-edit"></i>
                        </a>
                        <a href="{{ url_for('admin_keyword_delete', id=kw.id) }}" class="btn btn-outline-danger" title="حذف" 
                           onclick="return confirm('آیا از حذف کلمه کلیدی "{{ kw.keyword }}" مطمئن هستید؟');">
                            <i class="fas fa-trash"></i>
                        </a>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- ============================================================
   آمار خلاصه
   ============================================================ -->
<div class="row g-3 mt-2">
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm" style="border-radius:12px;">
            <div class="card-body p-3 text-center">
                <div class="h5 mb-0 text-primary">{{ keywords|length|persian_numbers }}</div>
                <div class="text-secondary small">کل کلمات</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm" style="border-radius:12px;">
            <div class="card-body p-3 text-center">
                <div class="h5 mb-0 text-success">{{ keywords|selectattr('is_active')|list|length|persian_numbers }}</div>
                <div class="text-secondary small">فعال</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm" style="border-radius:12px;">
            <div class="card-body p-3 text-center">
                <div class="h5 mb-0 text-info">{{ keywords|selectattr('is_targeted')|list|length|persian_numbers }}</div>
                <div class="text-secondary small">هدف‌گذاری شده</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm" style="border-radius:12px;">
            <div class="card-body p-3 text-center">
                <div class="h5 mb-0 text-warning">
                    {% set has_seo = 0 %}
                    {% for kw in keywords %}
                        {% if kw.seo_page and kw.seo_page.is_active %}
                            {% set has_seo = has_seo + 1 %}
                        {% endif %}
                    {% endfor %}
                    {{ has_seo|persian_numbers }}
                </div>
                <div class="text-secondary small">دارای صفحه سئو</div>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================
   اسکریپت‌ها
   ============================================================ -->
<script>
    // ===== فیلتر جدول =====
    function filterTable() {
        var search = document.getElementById('searchKeyword').value.toLowerCase();
        var category = document.getElementById('filterCategory').value;
        var status = document.getElementById('filterStatus').value;
        var rows = document.querySelectorAll('#keywordsTable tbody tr');
        var visibleCount = 0;
        
        rows.forEach(function(row) {
            var text = row.textContent.toLowerCase();
            var rowCategory = row.getAttribute('data-category') || '';
            var rowStatus = row.getAttribute('data-status') || '';
            var rowTargeted = row.getAttribute('data-targeted') || 'false';
            var rowHasSeo = row.getAttribute('data-has-seo') || 'false';
            
            var matchSearch = text.indexOf(search) > -1;
            var matchCategory = category === '' || rowCategory === category;
            var matchStatus = true;
            
            if (status === 'active') {
                matchStatus = rowStatus === 'active';
            } else if (status === 'inactive') {
                matchStatus = rowStatus === 'inactive';
            } else if (status === 'targeted') {
                matchStatus = rowTargeted === 'true';
            } else if (status === 'has_seo') {
                matchStatus = rowHasSeo === 'true';
            } else if (status === 'no_seo') {
                matchStatus = rowHasSeo === 'false';
            }
            
            var show = matchSearch && matchCategory && matchStatus;
            row.style.display = show ? '' : 'none';
            if (show) visibleCount++;
        });
        
        var info = document.querySelector('.filter-info');
        if (!info) {
            var newInfo = document.createElement('div');
            newInfo.className = 'filter-info text-muted small mt-2';
            document.querySelector('.table-responsive').after(newInfo);
            info = newInfo;
        }
        info.textContent = '✅ ' + visibleCount + ' نتیجه یافت شد';
    }
    
    document.getElementById('searchKeyword').addEventListener('keyup', filterTable);
    document.getElementById('filterCategory').addEventListener('change', filterTable);
    document.getElementById('filterStatus').addEventListener('change', filterTable);
    document.addEventListener('DOMContentLoaded', filterTable);
</script>

<style>
    .form-label {
        font-size: 0.75rem;
        color: #6c757d;
        font-weight: 600;
    }
    .form-control-sm, .form-select-sm {
        font-size: 0.8rem;
        border-radius: 10px;
    }
    .btn-admin-primary {
        background: linear-gradient(135deg, #c41e3a, #8b0000);
        color: #fff;
        border: none;
        padding: 8px 20px;
        border-radius: 50px;
        font-weight: 600;
        font-size: 0.85rem;
        transition: 0.3s;
        text-decoration: none;
        display: inline-block;
    }
    .btn-admin-primary:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 30px rgba(196, 30, 58, 0.3);
        color: #fff;
    }
    .table-admin {
        background: #fff;
        border-radius: 16px;
        padding: 0;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    }
    .table-admin thead th {
        background: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #6c757d;
        font-weight: 700;
        padding: 12px 10px;
        white-space: nowrap;
    }
    .table-admin tbody td {
        padding: 12px 10px;
        vertical-align: middle;
        font-size: 0.8rem;
    }
    .table-admin tbody tr:hover {
        background: rgba(196, 30, 58, 0.03);
    }
    .progress {
        background: #e9ecef;
        border-radius: 10px;
        overflow: hidden;
    }
    .filter-info {
        padding: 8px 0;
        font-size: 0.8rem;
    }
    @media (max-width: 768px) {
        .table-admin {
            font-size: 0.7rem;
        }
        .table-admin thead th,
        .table-admin tbody td {
            padding: 6px 4px;
            font-size: 0.65rem;
        }
        .btn-admin-primary {
            padding: 5px 12px;
            font-size: 0.7rem;
        }
        .btn-group .btn {
            padding: 2px 6px;
            font-size: 0.6rem;
        }
    }
</style>

{% endblock %}