/**
 * Alpine Component: Campaigns Page
 */
import { requestJson, formatDate, formatNumber, escapeHtml, renderStatsCards, downloadXlsx } from '../helpers';
import MSG from '../messages';

export function registerCampaignsPage(Alpine) {
    Alpine.data('campaignsPage', (initial) => ({
        page: 1,
        pageSize: 10,
        totalItems: 0,
        totalPages: 1,
        keyword: '',
        status: '',
        sortField: null,
        sortDirection: 'asc',
        rows: [],
        editingId: null,
        deletingId: null,
        loading: false,
        submittingAdd: false,
        submittingEdit: false,
        users: initial?.users || [],
        ownerMap: {},

        canExport: false,

        init() {
            const root = document.getElementById('campaigns-page');
            this.canExport = root?.dataset?.canExport === '1';
            const map = {};
            (Array.isArray(this.users) ? this.users : []).forEach(u => {
                map[u.id] = u.display_name || 'User ' + u.id;
            });
            this.ownerMap = map;
            this.load();
            this.loadMetrics();
            this._bindAddForm();
            this._bindEditForm();
            window.confirmDeleteCampaign = () => this.confirmDeleteCampaign();
            window.addEventListener('campaign-brief-changed', () => this.load());
        },

        get startItem() { return this.totalItems === 0 ? 0 : (this.page - 1) * this.pageSize + 1; },
        get endItem() { return Math.min(this.page * this.pageSize, this.totalItems); },
        get visiblePages() {
            const pages = [];
            const s = Math.max(1, this.page - 2);
            const e = Math.min(this.totalPages, this.page + 2);
            for (let i = s; i <= e; i++) pages.push(i);
            return pages;
        },

        async load() {
            this.loading = true;
            try {
                const params = new URLSearchParams();
                params.set('page', this.page);
                params.set('per_page', this.pageSize);
                if (this.keyword) params.set('keyword', this.keyword);
                if (this.status) params.set('status', this.status);
                if (this.sortField) params.set('sort_field', this.sortField);
                if (this.sortDirection) params.set('sort_direction', this.sortDirection);

                const data = await requestJson('/campaigns/data?' + params.toString(), { method: 'GET' });
                const pagination = data.pagination || {};
                this.totalItems = pagination.total || 0;
                this.totalPages = pagination.last_page || 1;
                this.page = pagination.current_page || this.page;
                this.rows = Array.isArray(data.data) ? data.data : [];
                this._updateSortIndicators();
            } catch (e) {
                showError('Lỗi', 'Không thể tải danh sách chiến dịch');
            } finally {
                this.loading = false;
            }
        },

        async loadMetrics() {
            try {
                const data = await requestJson('/campaigns/metrics', { method: 'GET' });
                renderStatsCards('campaigns-stats', {
                    'Tổng số chiến dịch': data.total_campaigns || 0,
                    'Chiến dịch đang chạy': data.running_campaigns || 0,
                    'Tổng KOC trong tất cả chiến dịch': data.total_kocs || 0,
                    'Tổng 3 chi phí': data.total_all_costs || 0,
                    'Tổng chi phí cast': data.total_cast_cost || 0,
                    'Tổng chi phí mẫu': data.total_sample_cost || 0,
                    'Tổng chi phí ship': data.total_shipping_cost || 0,
                });
            } catch (e) {
                console.error('Không thể tải metrics:', e);
            }
        },

        clearFilters() {
            this.keyword = '';
            this.status = '';
            this.page = 1;
            this.load();
        },

        openAddModal() {
            const form = document.getElementById('addCampaignForm');
            if (form) form.reset();
            modalOpen('addCampaignModal');
        },

        openEditModal(row) {
            this.editingId = row.id;
            const form = document.getElementById('editCampaignForm');
            if (!form) return;
            const fields = ['campaign_name', 'product_name', 'status', 'start_date', 'end_date', 'description', 'notes'];
            fields.forEach(f => { const el = form.querySelector('[name="' + f + '"]'); if (el) el.value = row[f] || ''; });
            const assignedToEl = form.querySelector('[name="assigned_to_id"]');
            if (assignedToEl) assignedToEl.value = row.assigned_to_id || '';
            const idField = form.querySelector('[name="campaign_id"]');
            if (idField) idField.value = row.id;
            modalOpen('editCampaignModal');
        },

        handleDelete(rowId) {
            this.deletingId = rowId;
            modalOpen('deleteCampaignConfirmModal');
        },

        async openBriefForCampaign(campaignId, isNew = true) {
            const modal = window._modalRegistry?.['campaignBriefModal'];
            if (modal) {
                await modal.openCampaignBriefModal(campaignId, isNew);
            } else {
                modalOpen('campaignBriefModal');
            }
        },

        openBriefForSelected() {
            if (!this.rows || this.rows.length === 0) {
                showWarning('Chú ý', 'Không có chiến dịch nào để tạo brief');
                return;
            }
            const available = this.rows.filter(c => !c.has_brief);
            if (available.length === 0) {
                showWarning('Chú ý', 'Tất cả chiến dịch đều đã có brief');
                return;
            }
            this.openBriefForCampaign(available[0].id, true);
        },

        submitAddCampaign: window.withSubmitGuard('campaigns_add', async function (e) {
            e.preventDefault();
            const form = document.getElementById('addCampaignForm');
            if (!form) return;
            const payload = Object.fromEntries(new FormData(form).entries());
            try {
                await requestJson('/campaigns', { method: 'POST', body: JSON.stringify(payload) });
                modalClose('addCampaignModal');
                form.reset();
                showSuccess('Thành công', 'Tạo chiến dịch thành công');
                this.page = 1;
                await this.load();
                await this.loadMetrics();
            } catch (err) {
                showError('Lỗi', err.message || 'Không thể tạo chiến dịch');
            }
        }),

        submitEditCampaign: window.withSubmitGuard('campaigns_edit', async function (e) {
            e.preventDefault();
            if (!this.editingId) return;
            const form = document.getElementById('editCampaignForm');
            if (!form) return;
            const payload = Object.fromEntries(new FormData(form).entries());
            try {
                await requestJson('/campaigns/' + this.editingId, { method: 'PUT', body: JSON.stringify(payload) });
                modalClose('editCampaignModal');
                showSuccess('Thành công', 'Cập nhật chiến dịch thành công');
                this.editingId = null;
                await this.load();
                await this.loadMetrics();
            } catch (err) {
                showError('Lỗi', err.message || 'Không thể cập nhật chiến dịch');
            }
        }),

        confirmDeleteCampaign: window.withSubmitGuard('campaigns_delete', async function () {
            if (!this.deletingId) return;
            try {
                await requestJson('/campaigns/' + this.deletingId, { method: 'DELETE' });
                showSuccess('Thành công', 'Xóa chiến dịch thành công');
                this.deletingId = null;
                await this.load();
                await this.loadMetrics();
            } catch (err) {
                showError('Lỗi', err.message || 'Không thể xóa chiến dịch');
            }
        }),

        goToPage(p) { this.page = Math.max(1, Math.min(p, this.totalPages)); this.load(); },
        prevPage() { if (this.page > 1) { this.page--; this.load(); } },
        nextPage() { if (this.page < this.totalPages) { this.page++; this.load(); } },
        pageSizeChange() { this.page = 1; this.load(); },

        setSort(field) {
            if (this.sortField !== field) { this.sortField = field; this.sortDirection = 'asc'; }
            else if (this.sortDirection === 'asc') { this.sortDirection = 'desc'; }
            else { this.sortField = null; this.sortDirection = 'asc'; }
            this.page = 1;
            this.load();
        },

        _updateSortIndicators() {
            document.querySelectorAll('#campaigns-table .sortable-header').forEach(el => {
                const field = el.dataset.sortField;
                el.classList.remove('sort-asc', 'sort-desc');
                if (field === this.sortField) {
                    el.classList.add(this.sortDirection === 'asc' ? 'sort-asc' : 'sort-desc');
                }
            });
        },

        statusLabel(s) {
            const found = (window.__enums?.campaignStatus || []).find(e => e.value === s);
            return found ? found.label : 'Chuẩn bị';
        },

        formatDate(v) { return formatDate(v); },
        formatNumber(v) { return formatNumber(v); },
        formatCurrency(v) {
            if (v === null || v === undefined || v === '') return '-';
            const num = Number(v);
            if (!Number.isFinite(num)) return '-';
            return Math.floor(num).toLocaleString('vi-VN');
        },

        briefButtonHtml(row) {
            if (row.has_brief) {
                const id = escapeHtml(String(row.id));
                return '<button type="button" class="btn-icon" title="Xem brief" onclick="Alpine.$data(document.getElementById(\'campaigns-page\')).openBriefForCampaign(\'' + id + '\', false)">&#x1F4C4;</button>';
            }
            return '<span class="text-gray-400">—</span>';
        },

        async exportCSV() {
            if (!this.canExport) {
                showError('Lỗi', 'Bạn không có quyền xuất file. Chỉ admin/owner mới được phép.');
                return;
            }
            if (!this.rows || this.rows.length === 0) {
                showWarning('Chú ý', 'Không có dữ liệu để xuất');
                return;
            }

            const headers = [
                'ID', 'Tên chiến dịch', 'Sản phẩm', 'Người phụ trách',
                'Ngày bắt đầu', 'Số KOC', 'Chi phí cast',
                'Chi phí mẫu', 'Chi phí ship',
                'Tổng 3 chi phí', 'Trạng thái'
            ];

            const rows = this.rows.map(r => {
                const totalCost = (r.cast_cost || 0) + (r.sample_cost || 0) + (r.shipping_cost || 0);
                return [
                    r.id,
                    r.campaign_name || '',
                    r.product_name || '',
                    r.assigned_to_name || '',
                    formatDate(r.start_date),
                    r.koc_count || 0,
                    r.cast_cost || 0,
                    r.sample_cost || 0,
                    r.shipping_cost || 0,
                    totalCost,
                    this.statusLabel(r.status)
                ];
            });

            const date = new Date().toISOString().slice(0, 10);
            try { await downloadXlsx(`chiến_dịch_${date}`, headers, rows); }
            catch (e) { showError('Lỗi', 'Không thể xuất file: ' + e.message); }
        },

        goToDetail(row) {
            const id = row?.id;
            if (id) {
                window.location.href = '/campaigns/' + id;
            }
        },

        campaignNameLinkHtml(row) {
            const name = escapeHtml(row.campaign_name || 'N/A');
            const id = escapeHtml(String(row.id));
            return '<a href="/campaigns/' + id + '" class="campaign-link cell-truncate" title="' + name + '">' + name + '</a>';
        },

        _bindAddForm() {
            const form = document.getElementById('addCampaignForm');
            if (form) {
                form.removeEventListener('submit', this._onAddSubmit);
                this._onAddSubmit = (e) => this.submitAddCampaign(e);
                form.addEventListener('submit', this._onAddSubmit);
            }
        },

        _bindEditForm() {
            const form = document.getElementById('editCampaignForm');
            if (form) {
                form.removeEventListener('submit', this._onEditSubmit);
                this._onEditSubmit = (e) => this.submitEditCampaign(e);
                form.addEventListener('submit', this._onEditSubmit);
            }
        },
    }));
}
