{% extends 'base.html.twig' %}
{% block title %}Clients – Rise Mailer{% endblock %}

{% block stylesheets %}
<style>
:root{--primary:#7c3aed;--secondary:#ec4899;--success:#10b981}

/* ── KPI strip ── */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-bottom:1.5rem}
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.kpi-grid{grid-template-columns:1fr 1fr}}
.kpi{background:#fff;border-radius:1.1rem;padding:1rem;box-shadow:0 4px 18px rgba(0,0,0,.07);
     display:flex;align-items:center;gap:.85rem;border-left:4px solid transparent;transition:transform .2s,box-shadow .2s}
.kpi:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.11)}
.kpi-ico{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.kpi-v{font-size:1.5rem;font-weight:700;color:#1e293b;line-height:1}
.kpi-l{font-size:.7rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;margin-top:.2rem}

/* ── Cards ── */
.tc{background:#fff;border-radius:1.1rem;box-shadow:0 4px 18px rgba(0,0,0,.07);overflow:hidden;margin-bottom:1.25rem}
.tc-head{padding:1rem 1.35rem;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.tc-head h3{font-size:.95rem;font-weight:700;color:#1e293b;margin:0;display:flex;align-items:center;gap:.4rem}
.tc-head h3 i{color:var(--primary)}
.tc-body{padding:1.1rem 1.35rem}

/* ── Filter bar ── */
.filter-grid{display:grid;grid-template-columns:2fr 1.5fr 1fr auto;gap:.75rem;align-items:end}
@media(max-width:900px){.filter-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.filter-grid{grid-template-columns:1fr}}
.fl{display:flex;flex-direction:column;gap:.3rem}
.fl label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em}
.form-ctrl{border:1.5px solid #e2e8f0;border-radius:.65rem;padding:.55rem .85rem;font-size:.875rem;
           font-family:inherit;color:#1e293b;background:#fff;transition:border-color .2s,box-shadow .2s;width:100%;outline:none}
.form-ctrl:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.1)}

/* ── Table ── */
.trk-table{width:100%;border-collapse:collapse}
.trk-table thead tr{background:linear-gradient(135deg,#7c3aed,#ec4899)}
.trk-table thead th{padding:.65rem 1rem;font-size:.72rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.04em;border:none;white-space:nowrap}
.trk-table tbody tr{border-bottom:1px solid #f1f5f9;transition:background .15s}
.trk-table tbody tr:last-child{border-bottom:none}
.trk-table tbody tr:hover{background:#fafafa}
.trk-table tbody td{padding:.75rem 1rem;font-size:.84rem;color:#334155;vertical-align:middle}
.avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--secondary));
        display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.85rem;flex-shrink:0}

/* ── Buttons ── */
.btn-primary-g{background:linear-gradient(135deg,var(--primary),var(--secondary));border:none;border-radius:.65rem;
               padding:.55rem 1.1rem;color:#fff;font-weight:600;font-size:.875rem;cursor:pointer;
               display:inline-flex;align-items:center;gap:.4rem;transition:opacity .2s;text-decoration:none}
.btn-primary-g:hover{opacity:.88;color:#fff}
.btn-outline-g{background:#fff;border:1.5px solid #e2e8f0;border-radius:.65rem;padding:.5rem 1rem;
               color:#475569;font-weight:600;font-size:.85rem;cursor:pointer;
               display:inline-flex;align-items:center;gap:.4rem;transition:all .2s;text-decoration:none}
.btn-outline-g:hover{border-color:var(--primary);color:var(--primary)}
.btn-icon{width:32px;height:32px;border-radius:8px;border:none;display:inline-flex;align-items:center;justify-content:center;
          cursor:pointer;font-size:.85rem;transition:all .2s}
.btn-icon-edit{background:#ede9fe;color:#7c3aed}
.btn-icon-edit:hover{background:#7c3aed;color:#fff}
.btn-icon-del{background:#fee2e2;color:#ef4444}
.btn-icon-del:hover{background:#ef4444;color:#fff}

/* ── Pagination ── */
.page-link{border-radius:.5rem !important;font-size:.8rem;font-weight:600;color:#475569;border:1.5px solid #e2e8f0}
.page-item.active .page-link{background:linear-gradient(135deg,var(--primary),var(--secondary));border-color:transparent;color:#fff}

/* ── Category pills ── */
.cat-pill{display:inline-flex;align-items:center;gap:.35rem;border:1.5px solid #e2e8f0;border-radius:999px;
          padding:.3rem .85rem;background:#fff;font-size:.82rem;font-weight:500;color:#334155;
          box-shadow:0 2px 8px rgba(0,0,0,.05);transition:border-color .2s}
.cat-pill:hover{border-color:var(--primary)}
.cat-pill-name{font-weight:600}
.cat-pill-btn{width:22px;height:22px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;
              font-size:.72rem;cursor:pointer;transition:all .2s;flex-shrink:0;padding:0}
.cat-pill-edit{background:#ede9fe;color:#7c3aed}
.cat-pill-edit:hover{background:#7c3aed;color:#fff}
.cat-pill-del{background:#fee2e2;color:#ef4444}
.cat-pill-del:hover{background:#ef4444;color:#fff}

@media(max-width:768px){
    .trk-table thead{display:none}
    .trk-table tbody tr{display:block;border:1px solid #f1f5f9;border-radius:.75rem;margin-bottom:.75rem;padding:.5rem}
    .trk-table tbody td{display:flex;justify-content:space-between;align-items:center;padding:.4rem .6rem;border:none;font-size:.8rem}
    .trk-table tbody td::before{content:attr(data-label);font-weight:600;color:#94a3b8;font-size:.72rem;text-transform:uppercase;margin-right:.5rem;flex-shrink:0}
}
</style>
{% endblock %}

{% block body %}

{# ── Page header ── #}
<div class="tc-head" style="background:transparent;border:none;margin-bottom:1.25rem;padding:0">
    <h1 style="font-size:1.5rem;font-weight:700;color:#fff;margin:0;display:flex;align-items:center;gap:.5rem">
        <i class="bi bi-people-fill"></i> Clients
    </h1>
    <div style="display:flex;gap:.6rem;flex-wrap:wrap;align-items:center">
        <div class="dropdown">
            <button class="btn-outline-g dropdown-toggle" data-bs-toggle="dropdown">
                <i class="bi bi-download"></i> Export
            </button>
            <ul class="dropdown-menu shadow border-0" style="border-radius:.85rem;min-width:190px">
                <li><a class="dropdown-item py-2" href="{{ path('app_client_export') }}"><i class="bi bi-filetype-csv me-2 text-primary"></i> audience_export.csv</a></li>
                <li><a class="dropdown-item py-2" href="{{ path('app_client_export_excel') }}"><i class="bi bi-filetype-xls me-2 text-success"></i> audience_export.xls</a></li>
            </ul>
        </div>
        <button class="btn-outline-g" data-bs-toggle="modal" data-bs-target="#importModal">
            <i class="bi bi-upload"></i> Import CSV
        </button>
        <button class="btn-primary-g" data-bs-toggle="modal" data-bs-target="#clientModal" onclick="resetClientForm()">
            <i class="bi bi-plus-circle"></i> Add Client
        </button>
    </div>
</div>

{# ── KPI strip ── #}
<div class="kpi-grid animate-fade-in">
    <div class="kpi" style="border-left-color:#7c3aed">
        <div class="kpi-ico" style="background:#f5f3ff"><i class="bi bi-people-fill" style="color:#7c3aed"></i></div>
        <div><div class="kpi-v" id="kpi-total">—</div><div class="kpi-l">Total Clients</div></div>
    </div>
    <div class="kpi" style="border-left-color:#10b981">
        <div class="kpi-ico" style="background:#f0fdf4"><i class="bi bi-tags-fill" style="color:#10b981"></i></div>
        <div><div class="kpi-v" id="kpi-cats">—</div><div class="kpi-l">Categories</div></div>
    </div>
    <div class="kpi" style="border-left-color:#3b82f6">
        <div class="kpi-ico" style="background:#eff6ff"><i class="bi bi-funnel-fill" style="color:#3b82f6"></i></div>
        <div><div class="kpi-v" id="kpi-filtered">—</div><div class="kpi-l">Filtered</div></div>
    </div>
    <div class="kpi" style="border-left-color:#ef4444">
        <div class="kpi-ico" style="background:#fef2f2"><i class="bi bi-exclamation-triangle-fill" style="color:#ef4444"></i></div>
        <div><div class="kpi-v" id="kpi-bounced">—</div><div class="kpi-l">Bounced</div></div>
    </div>
    <div class="kpi" style="border-left-color:#f59e0b">
        <div class="kpi-ico" style="background:#fffbeb"><i class="bi bi-file-earmark-arrow-up-fill" style="color:#f59e0b"></i></div>
        <div>
            <div class="kpi-v" style="font-size:1rem;padding-top:.25rem">
                <a href="{{ path('app_client_export') }}" style="color:#f59e0b;text-decoration:none;font-weight:700;font-size:.8rem">CSV</a>
                &nbsp;/&nbsp;
                <a href="{{ path('app_client_export_excel') }}" style="color:#10b981;text-decoration:none;font-weight:700;font-size:.8rem">XLS</a>
            </div>
            <div class="kpi-l">Export</div>
        </div>
    </div>
</div>

{# ── Categories ── #}
<div class="tc animate-fade-in" style="animation-delay:.05s">
    <div class="tc-head">
        <h3><i class="bi bi-tags-fill"></i> Categories</h3>
        <a href="{{ path('app_category_export') }}" class="btn-outline-g" style="font-size:.78rem;padding:.35rem .75rem">
            <i class="bi bi-download"></i> Export
        </a>
    </div>
    <div class="tc-body">
        <div style="display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem">
            <div style="flex:1;min-width:180px;position:relative">
                <i class="bi bi-plus-circle" style="position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:#94a3b8;pointer-events:none"></i>
                <input type="text" id="newCategoryName" class="form-ctrl" style="padding-left:2.2rem" placeholder="New category name…">
            </div>
            <button class="btn-primary-g" onclick="addCategoryFromForm()">
                <i class="bi bi-plus-circle"></i> Add
            </button>
        </div>
        <div id="categoryList" style="display:flex;flex-wrap:wrap;gap:.5rem">
            <span style="color:#94a3b8;font-size:.85rem;font-style:italic">Loading categories…</span>
        </div>
    </div>
</div>

{# ── Clients table ── #}
<div class="tc animate-fade-in" style="animation-delay:.1s">
    <div class="tc-head">
        <h3><i class="bi bi-table"></i> All Clients</h3>
        <span style="font-size:.75rem;color:#94a3b8" id="clientsCountLabel">Loading…</span>
    </div>
    <div class="tc-body" style="padding-bottom:.5rem">
        <div class="filter-grid" style="margin-bottom:1.1rem">
            <div class="fl">
                <label>Search</label>
                <div style="position:relative">
                    <i class="bi bi-search" style="position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:#94a3b8;pointer-events:none"></i>
                    <input type="text" id="clientSearch" class="form-ctrl" style="padding-left:2.2rem" placeholder="Name or email…">
                </div>
            </div>
            <div class="fl">
                <label>Category</label>
                <select id="categoryFilter" class="form-ctrl">
                    <option value="all">All categories</option>
                    <option value="none">No category</option>
                </select>
            </div>
            <div class="fl">
                <label>Per page</label>
                <select id="itemsPerPage" class="form-ctrl">
                    <option value="25">25 / page</option>
                    <option value="50">50 / page</option>
                    <option value="100">100 / page</option>
                </select>
            </div>
            <div style="display:flex;align-items:flex-end">
                <button class="btn-primary-g" onclick="fetchClients()" style="width:100%;justify-content:center">
                    <i class="bi bi-funnel-fill"></i> Filter
                </button>
            </div>
        </div>
    </div>
    <div style="overflow-x:auto">
        <table class="trk-table">
            <thead>
                <tr>
                    <th>Client</th>
                    <th>Contact</th>
                    <th>Category</th>
                    <th>Created</th>
                    <th style="text-align:center">Actions</th>
                </tr>
            </thead>
            <tbody id="clientsTable">
                <tr>
                    <td colspan="5" style="text-align:center;padding:2.5rem;color:#94a3b8">
                        <div class="spinner-border spinner-border-sm text-primary me-2"></div> Loading clients…
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div style="padding:1rem 1.35rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;border-top:1px solid #f1f5f9">
        <div style="font-size:.8rem;color:#94a3b8" id="paginationSummary">Loading…</div>
        <ul class="pagination pagination-sm mb-0" id="paginationContainer"></ul>
    </div>
</div>

{# ── Client Modal ── #}
<div class="modal fade" id="clientModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="clientModalTitle">Add Client</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="clientForm">
                    <input type="hidden" id="clientId">
                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <input type="text" class="form-control" id="clientName" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" id="clientEmail" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Contact (Optional)</label>
                        <input type="text" class="form-control" id="clientContact">
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <label class="form-label mb-0">Category (Optional)</label>
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="addCategory()">
                                <i class="bi bi-plus-circle"></i> Add Category
                            </button>
                        </div>
                        <select id="clientCategory" class="form-select mt-2">
                            <option value="">No category</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveClient()">Save</button>
            </div>
        </div>
    </div>
</div>

{# ── Import Modal ── #}
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Import Clients (CSV)</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info small">
                    <i class="bi bi-info-circle-fill me-2"></i> <strong>Format:</strong> Row 1: Headers (Name, Email, Contact, Category). Data follows.
                    <br><strong>Note:</strong> Use <strong>CSV</strong> files for importing.
                </div>
                <form id="importForm">
                    <div class="mb-3">
                        <label class="form-label">Choose CSV File</label>
                        <input type="file" id="importFile" class="form-control" accept=".csv" required>
                    </div>
                </form>
                <div id="importProgress" class="d-none">
                    <div class="text-center mb-2 small text-primary">Processing…</div>
                    <div class="progress" style="height: 10px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="btnDoImport" onclick="doImport()">Start Import</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
<script>
const state = {
    page: 1,
    limit: 25,
    search: '',
    category: 'all',
    totalPages: 0,
    totalItems: 0
};

const elements = {
    searchInput: document.getElementById('clientSearch'),
    categoryFilter: document.getElementById('categoryFilter'),
    itemsPerPage: document.getElementById('itemsPerPage'),
    clientsTable: document.getElementById('clientsTable'),
    paginationContainer: document.getElementById('paginationContainer'),
    paginationSummary: document.getElementById('paginationSummary'),
    clientsCountLabel: document.getElementById('clientsCountLabel'),
};

const debounce = (fn, delay = 300) => {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => fn(...args), delay);
    };
};

async function getCsrfToken(tokenId) {
    const response = await fetch(`/csrf-token/${tokenId}`, { credentials: 'same-origin' });
    const data = await response.json();
    return data.token;
}

async function getCategories() {
    const res = await fetch('/categories/list', { credentials: 'same-origin', cache: 'no-store' });
    if (!res.ok) throw new Error(`Categories request failed (${res.status})`);
    return res.json();
}

async function loadCategoryOptions(selectedId = null) {
    const sel = document.getElementById('clientCategory');
    if (!sel) return;
    sel.innerHTML = '<option value="">Loading categories...</option>';
    try {
        const categories = await getCategories();
        sel.innerHTML = '<option value="">No category</option>';
        categories.forEach(c => {
            const opt = document.createElement('option');
            opt.value = c.id;
            opt.textContent = c.name;
            sel.appendChild(opt);
        });
        if (selectedId) sel.value = String(selectedId);
    } catch (e) {
        console.error('Failed to load categories', e);
        sel.innerHTML = '<option value="">Failed to load categories</option>';
    }
}

async function populateCategoryFilter() {
    elements.categoryFilter.innerHTML = `
        <option value="all">All categories</option>
        <option value="none">No category</option>
    `;
    try {
        const categories = await getCategories();
        categories.forEach(c => {
            const opt = document.createElement('option');
            opt.value = c.id;
            opt.textContent = c.name;
            elements.categoryFilter.appendChild(opt);
        });
        elements.categoryFilter.value = state.category;
        document.getElementById('kpi-cats').textContent = categories.length;
    } catch (e) {
        console.error('Failed to populate category filter', e);
    }
}

function escHtml(str) {
    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

async function loadCategoryList() {
    const container = document.getElementById('categoryList');
    container.innerHTML = '<span style="color:#94a3b8;font-size:.85rem;font-style:italic">Loading categories…</span>';
    try {
        const categories = await getCategories();
        if (!categories.length) {
            container.innerHTML = '<span style="color:#94a3b8;font-size:.85rem;font-style:italic">No categories yet.</span>';
            return;
        }
        container.innerHTML = categories.map(c => `
            <div class="cat-pill">
                <span class="cat-pill-name">${escHtml(c.name)}</span>
                <button class="cat-pill-btn cat-pill-edit" title="Rename" onclick="renameCategory(${c.id}, '${escHtml(c.name).replace(/'/g,"\\'")}')">
                    <i class="bi bi-pencil-fill"></i>
                </button>
                <button class="cat-pill-btn cat-pill-del" title="Delete" onclick="deleteCategoryItem(${c.id})">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
        `).join('');
        document.getElementById('kpi-cats').textContent = categories.length;
    } catch (e) {
        console.error(e);
        container.innerHTML = '<span style="color:#ef4444;font-size:.85rem">Failed to load categories</span>';
    }
}

async function renameCategory(id, currentName) {
    const newName = prompt('Rename category:', currentName);
    if (!newName || newName.trim() === '' || newName.trim() === currentName) return;
    try {
        const token = await getCsrfToken(`category_edit_${id}`);
        const res = await fetch(`/categories/${id}/edit`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'same-origin',
            body: JSON.stringify({ name: newName.trim(), _token: token })
        });
        const data = await res.json();
        if (data.success) {
            await loadCategoryList();
            await populateCategoryFilter();
            await loadCategoryOptions();
        } else {
            alert(data.error || 'Error renaming category');
        }
    } catch (e) {
        console.error(e);
        alert('Error renaming category');
    }
}

async function deleteCategoryItem(id) {
    if (!confirm('Delete this category? Clients in it will become uncategorized.')) return;
    try {
        const token = await getCsrfToken(`category_delete_${id}`);
        const res = await fetch(`/categories/${id}/delete`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'same-origin',
            body: JSON.stringify({ _token: token })
        });
        const data = await res.json();
        if (data.success) {
            await loadCategoryList();
            await populateCategoryFilter();
            await loadCategoryOptions();
        } else {
            alert(data.error || 'Error deleting category');
        }
    } catch (e) {
        console.error(e);
        alert('Error deleting category');
    }
}

function resetClientForm() {
    document.getElementById('clientForm').reset();
    document.getElementById('clientId').value = '';
    document.getElementById('clientModalTitle').textContent = 'Add Client';
    loadCategoryOptions();
}

function editClient(id, name, email, contact, categoryId) {
    document.getElementById('clientId').value = id;
    document.getElementById('clientName').value = name;
    document.getElementById('clientEmail').value = email;
    document.getElementById('clientContact').value = contact || '';
    document.getElementById('clientModalTitle').textContent = 'Edit Client';
    loadCategoryOptions(categoryId && Number(categoryId) > 0 ? categoryId : null);
    new bootstrap.Modal(document.getElementById('clientModal')).show();
}

function setTableLoading() {
    elements.clientsTable.innerHTML = `
        <tr>
            <td colspan="5" style="text-align:center;padding:2.5rem;color:#94a3b8">
                <div class="spinner-border spinner-border-sm text-primary me-2"></div> Loading…
            </td>
        </tr>
    `;
}

function renderClients(clients) {
    if (!clients.length) {
        elements.clientsTable.innerHTML = `
            <tr>
                <td colspan="5" style="text-align:center;padding:2.5rem;color:#94a3b8">
                    <i class="bi bi-people" style="font-size:2rem;display:block;margin-bottom:.5rem"></i>
                    No clients found. Adjust filters or add a new client.
                </td>
            </tr>
        `;
        return;
    }

    elements.clientsTable.innerHTML = clients.map(client => {
        const bounceBadge = client.bounced
            ? `<span style="background:#fee2e2;color:#ef4444;border-radius:999px;padding:.1rem .5rem;font-size:.68rem;font-weight:700;margin-left:.3rem"><i class="bi bi-exclamation-triangle-fill me-1"></i>Bounced</span>`
            : '';
        const unsubBadge = client.unsubscribed
            ? `<span style="background:#fef3c7;color:#d97706;border-radius:999px;padding:.1rem .5rem;font-size:.68rem;font-weight:700;margin-left:.3rem"><i class="bi bi-bell-slash-fill me-1"></i>Unsub</span>`
            : '';
        return `
        <tr id="client-${client.id}">
            <td data-label="Client">
                <div style="display:flex;align-items:center;gap:.65rem">
                    <div class="avatar" style="${client.bounced ? 'background:#ef4444' : ''}">${(client.name||'?')[0].toUpperCase()}</div>
                    <div>
                        <div style="font-weight:600;color:#1e293b;font-size:.84rem">${escHtml(client.name)}${bounceBadge}${unsubBadge}</div>
                        <div style="font-size:.73rem;color:#94a3b8">${escHtml(client.email)}</div>
                    </div>
                </div>
            </td>
            <td data-label="Contact" style="font-size:.83rem;color:#64748b">${client.contact ? escHtml(client.contact) : '<span style="color:#cbd5e1">—</span>'}</td>
            <td data-label="Category">
                ${client.category
                    ? `<span style="background:#ede9fe;color:#7c3aed;border-radius:999px;padding:.2rem .65rem;font-size:.75rem;font-weight:700">${escHtml(client.category.name)}</span>`
                    : `<span style="color:#cbd5e1;font-size:.78rem">None</span>`
                }
            </td>
            <td data-label="Created" style="color:#94a3b8;font-size:.78rem;white-space:nowrap">${client.createdAt}</td>
            <td data-label="Actions" style="text-align:center">
                <div style="display:flex;gap:.4rem;justify-content:center">
                    <button class="btn-icon btn-icon-edit" title="Edit"
                        onclick="editClient(${client.id}, '${(client.name||'').replace(/'/g,"\\'")}', '${(client.email||'').replace(/'/g,"\\'")}', '${(client.contact||'').replace(/'/g,"\\'")}', ${client.category ? client.category.id : 'null'})">
                        <i class="bi bi-pencil-fill"></i>
                    </button>
                    <button class="btn-icon btn-icon-del" title="Delete" onclick="deleteClient(${client.id})">
                        <i class="bi bi-trash-fill"></i>
                    </button>
                </div>
            </td>
        </tr>
    `;
    }).join('');
}

function renderPagination() {
    const totalPages = state.totalPages;
    elements.paginationContainer.innerHTML = '';
    if (totalPages <= 1) { elements.paginationContainer.classList.add('d-none'); return; }
    elements.paginationContainer.classList.remove('d-none');

    const createPageItem = (label, page, disabled = false, active = false) => {
        const li = document.createElement('li');
        li.className = `page-item ${disabled ? 'disabled' : ''} ${active ? 'active' : ''}`;
        const a = document.createElement('a');
        a.className = 'page-link';
        a.href = '#';
        a.innerHTML = label;
        a.dataset.page = page;
        li.appendChild(a);
        return li;
    };

    elements.paginationContainer.appendChild(createPageItem('<i class="bi bi-chevron-left"></i>', state.page - 1, state.page === 1));
    const maxButtons = 5;
    let start = Math.max(1, state.page - 2);
    let end   = Math.min(totalPages, start + maxButtons - 1);
    start = Math.max(1, end - maxButtons + 1);
    for (let p = start; p <= end; p++) {
        elements.paginationContainer.appendChild(createPageItem(p, p, false, p === state.page));
    }
    elements.paginationContainer.appendChild(createPageItem('<i class="bi bi-chevron-right"></i>', state.page + 1, state.page === totalPages));
}

function updateSummary() {
    const startItem = state.totalItems === 0 ? 0 : (state.page - 1) * state.limit + 1;
    const endItem   = Math.min(state.page * state.limit, state.totalItems);
    elements.paginationSummary.textContent = state.totalItems
        ? `Showing ${startItem}–${endItem} of ${state.totalItems} clients`
        : 'No clients to display';
    elements.clientsCountLabel.textContent = `${state.totalItems} clients`;
    document.getElementById('kpi-total').textContent = state.totalItems;
    document.getElementById('kpi-filtered').textContent = state.totalItems;
}

async function fetchClients() {
    setTableLoading();
    try {
        const params = new URLSearchParams({ page: state.page, limit: state.limit });
        if (state.search)   params.append('search', state.search);
        if (state.category) params.append('category', state.category);

        const res  = await fetch(`/clients/paginated?${params.toString()}`, { credentials: 'same-origin', cache: 'no-store' });
        const data = await res.json();

        state.totalItems  = data.pagination.totalItems;
        state.totalPages  = data.pagination.totalPages;
        state.page        = data.pagination.currentPage;

        renderClients(data.clients);
        renderPagination();
        updateSummary();
    } catch (e) {
        console.error(e);
        elements.clientsTable.innerHTML = `
            <tr>
                <td colspan="5" style="text-align:center;color:#ef4444;padding:2rem">
                    Failed to load clients. Please try again.
                </td>
            </tr>
        `;
        elements.paginationSummary.textContent = 'Failed to load clients';
    }
}

async function saveClient() {
    const id         = document.getElementById('clientId').value;
    const name       = document.getElementById('clientName').value;
    const email      = document.getElementById('clientEmail').value;
    const contact    = document.getElementById('clientContact').value;
    const categoryId = document.getElementById('clientCategory').value;

    const url     = id ? `/clients/${id}/edit` : '/clients/new';
    const tokenId = id ? `client_edit_${id}` : 'client_new';

    try {
        const token = await getCsrfToken(tokenId);
        const response = await fetch(url, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            credentials: 'same-origin',
            body: JSON.stringify({ name, email, contact, category_id: categoryId || null, _token: token })
        });
        const data = await response.json();
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('clientModal'))?.hide();
            await fetchClients();
        } else {
            if (data.errors) {
                alert('Validation failed:\n' + Object.values(data.errors).map(m => `- ${m}`).join('\n'));
            } else {
                alert(data.error || 'Error saving client');
            }
        }
    } catch (error) {
        console.error(error);
        alert('Error saving client');
    }
}

async function deleteClient(id) {
    if (!confirm('Delete this client?')) return;
    try {
        const token = await getCsrfToken(`client_delete_${id}`);
        const response = await fetch(`/clients/${id}/delete`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            credentials: 'same-origin',
            body: JSON.stringify({ _token: token })
        });
        const data = await response.json();
        if (data.success) {
            if ((state.totalItems - 1) <= (state.page - 1) * state.limit && state.page > 1) state.page -= 1;
            await fetchClients();
        } else {
            alert(data.error || 'Error deleting client');
        }
    } catch (error) {
        console.error(error);
        alert('Error deleting client');
    }
}

window.addCategory = async function() {
    const name = prompt('Enter new category name');
    if (!name) return;
    try {
        const token = await getCsrfToken('category_new');
        const res = await fetch('/categories/new', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'same-origin',
            body: JSON.stringify({ name, _token: token })
        });
        const data = await res.json();
        if (data.success) {
            await loadCategoryOptions(data.category.id);
            await populateCategoryFilter();
            await loadCategoryList();
        } else {
            alert(data.error || 'Error creating category');
        }
    } catch (e) {
        console.error(e);
        alert('Error creating category');
    }
};

async function addCategoryFromForm() {
    const input = document.getElementById('newCategoryName');
    const name  = input.value.trim();
    if (!name) { input.focus(); return; }
    try {
        const token = await getCsrfToken('category_new');
        const res = await fetch('/categories/new', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'same-origin',
            body: JSON.stringify({ name, _token: token })
        });
        const data = await res.json();
        if (data.success) {
            input.value = '';
            await loadCategoryList();
            await loadCategoryOptions(data.category.id);
            await populateCategoryFilter();
        } else {
            alert(data.error || 'Error creating category');
        }
    } catch (e) {
        console.error(e);
        alert('Error creating category');
    }
}

function bindEventHandlers() {
    elements.searchInput?.addEventListener('input', debounce(e => {
        state.search = e.target.value.trim();
        state.page   = 1;
        fetchClients();
    }, 300));

    elements.categoryFilter?.addEventListener('change', () => {
        state.category = elements.categoryFilter.value;
        state.page     = 1;
        fetchClients();
    });

    elements.itemsPerPage?.addEventListener('change', () => {
        state.limit = parseInt(elements.itemsPerPage.value, 10) || 25;
        state.page  = 1;
        fetchClients();
    });

    elements.paginationContainer?.addEventListener('click', e => {
        if (e.target.tagName !== 'A' && !e.target.closest('a')) return;
        e.preventDefault();
        const a          = e.target.closest('a') || e.target;
        const targetPage = parseInt(a.dataset.page, 10);
        if (Number.isNaN(targetPage) || targetPage === state.page || targetPage < 1 || targetPage > state.totalPages) return;
        state.page = targetPage;
        fetchClients();
    });
}

async function loadClientStats() {
    try {
        const res  = await fetch('/clients/stats', { credentials: 'same-origin', cache: 'no-store' });
        const data = await res.json();
        const el = document.getElementById('kpi-bounced');
        if (el) el.textContent = data.bounced ?? '—';
    } catch (e) { /* non-critical */ }
}

document.addEventListener('DOMContentLoaded', async () => {
    bindEventHandlers();
    await populateCategoryFilter();
    await loadCategoryOptions();
    await loadCategoryList();
    await fetchClients();
    await loadClientStats();
});

async function doImport() {
    const fileInput = document.getElementById('importFile');
    if (!fileInput.files.length) { alert('Please select a file first.'); return; }

    const formData = new FormData();
    formData.append('file', fileInput.files[0]);

    try {
        const token = await getCsrfToken('client_import');
        formData.append('_token', token);

        document.getElementById('importProgress').classList.remove('d-none');
        document.getElementById('btnDoImport').disabled = true;

        const res  = await fetch('/clients/import', { method: 'POST', body: formData, credentials: 'same-origin' });
        const data = await res.json();

        if (data.success) {
            alert(data.message);
            location.reload();
        } else {
            alert(data.error || 'Import failed.');
        }
    } catch (e) {
        console.error(e);
        alert('An error occurred during import.');
    } finally {
        document.getElementById('importProgress').classList.add('d-none');
        document.getElementById('btnDoImport').disabled = false;
    }
}
</script>
{% endblock %}