import { escapeHtml, requestJson, downloadXlsx } from '../helpers';
import { formatDateTime, enCaDate } from '../utils/date';
import MSG from '../messages';

export function registerReportsPage(Alpine) {
    Alpine.data('reportsPage', () => ({
        logs: [],
        users: [],
        currentUserRole: '',
        canDeleteLogsFlag: false,
        deletingLogId: null,
        loading: false,
        errorMessage: '',
        currentPage: 1,
        pageSize: 10,
        totalItems: 0,
        totalPages: 1,
        filters: {
            startDate: '',
            endDate: '',
            user: '',
            tab: '',
        },

        canExport: false,

        init() {
            const root = this.$el;
            this.currentUserRole = root?.dataset?.currentUserRole || '';
            this.canExport = root?.dataset?.canExport === '1';
            const canDeleteLogs = root?.dataset?.canDeleteLogs;

            if (canDeleteLogs === '1' || canDeleteLogs === 'true') {
                this.canDeleteLogsFlag = true;
            } else {
                this.canDeleteLogsFlag = false;
            }

            this.setDefaultDates();
            this.bindEvents();
            this.load();
        },

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

        get filteredLogs() {
            return this.logs.filter(log => {
                const act = String(log.action || '').toLowerCase();
                if (act.includes('login') || act.includes('đăng nhập') || act.includes('logout') || act.includes('đăng xuất')) return false;
                return true;
            });
        },

        get dashboardMetrics() {
            const logs = this.filteredLogs;
            const countByKey = (actionKey) => {
                const labelForKey = ACTION_LABEL_MAP[actionKey] || actionKey;
                return logs.filter(log => {
                    const act = String(log.action || '').trim();
                    return act === actionKey || act === labelForKey || act.startsWith(labelForKey);
                }).length;
            };
            const statusUpdatesCount = logs.filter(log => {
                const act = String(log.action || '').trim();
                const statusActionKeys = ['update_campaign_koc', 'update_booking', 'update_koc', 'update_campaign'];
                if (statusActionKeys.includes(act)) return true;
                const details = String(log.details || '');
                if (details && /trạng\s*thái/i.test(details)) return true;
                return false;
            }).length;

            return [
                { emoji: '📊', label: 'Tổng thao tác', value: logs.length.toLocaleString('vi-VN') },
                { emoji: '👥', label: 'Số KOC thêm mới', value: countByKey('create_koc').toLocaleString('vi-VN') },
                { emoji: '👥', label: 'Số KOC đã sửa', value: countByKey('update_koc').toLocaleString('vi-VN') },
                { emoji: '👥', label: 'Số KOC bị xóa', value: countByKey('delete_koc').toLocaleString('vi-VN') },
                { emoji: '📋', label: 'Số chiến dịch đã tạo', value: countByKey('create_campaign').toLocaleString('vi-VN') },
                { emoji: '📋', label: 'Số chiến dịch đã sửa', value: countByKey('update_campaign').toLocaleString('vi-VN') },
                { emoji: '📋', label: 'Số chiến dịch bị xóa', value: countByKey('delete_campaign').toLocaleString('vi-VN') },
                { emoji: '➕', label: 'Số KOC thêm vào chiến dịch', value: countByKey('add_koc_to_campaign').toLocaleString('vi-VN') },
                { emoji: '🔄', label: 'Số trạng thái đã cập nhật', value: statusUpdatesCount.toLocaleString('vi-VN') },
            ];
        },

        get currentRows() {
            return this.paginateData(this.filteredLogs);
        },

        setDefaultDates() {
            const today = enCaDate(new Date());
            this.filters.startDate = today;
            this.filters.endDate = today;
        },

        bindEvents() {
            const onFilterChange = (e) => {
                const key = e.target.id.replace('report-filter-', '');
                const map = { 'start-date': 'startDate', 'end-date': 'endDate', 'user': 'user', 'tab': 'tab' };
                this.filters[map[key] || key] = e.target.value;
                this.currentPage = 1;
                this.load();
            };
            ['report-filter-start-date', 'report-filter-end-date', 'report-filter-user', 'report-filter-tab']
                .forEach(id => document.getElementById(id)?.addEventListener('change', onFilterChange));
        },

        async load() {
            this.loading = true;
            this.errorMessage = '';
            try {
                const params = new URLSearchParams();
                params.set('per_page', '2000');
                if (this.filters.startDate) params.set('start_date', this.filters.startDate);
                if (this.filters.endDate) params.set('end_date', this.filters.endDate);
                if (this.filters.user) params.set('user', this.filters.user);
                if (this.filters.tab) params.set('tab', this.filters.tab);
                const data = await requestJson('/reports/data?' + params.toString(), { method: 'GET' });
                this.logs = Array.isArray(data.data) ? data.data : [];
                this.loadUsers();
            } catch (e) {
                this.errorMessage = 'Không tải được log thao tác. Vui lòng thử lại.';
                this.logs = [];
            } finally {
                this.loading = false;
            }
        },

        async loadUsers() {
            try {
                this.users = await requestJson('/reports/users', { method: 'GET' });
                this.renderUserOptions();
            } catch (e) {
                // silent
            }
        },

        renderUserOptions() {
            const select = document.getElementById('report-filter-user');
            if (!select) return;
            const current = select.value;
            select.innerHTML = '<option value="">Tất cả</option>';
            this.users.forEach(u => {
                const opt = document.createElement('option');
                opt.value = u;
                opt.textContent = u;
                select.appendChild(opt);
            });
            select.value = current;
        },

        paginateData(source) {
            const totalRows = source.length;
            const totalPages = Math.max(1, Math.ceil(totalRows / this.pageSize));
            if (this.currentPage > totalPages) this.currentPage = totalPages;
            const start = (this.currentPage - 1) * this.pageSize;
            const end = start + this.pageSize;
            this.totalItems = totalRows;
            this.totalPages = totalPages;
            return source.slice(start, end);
        },

        reportDetailsHtml(details) {
            if (!details) return '<span class="text-gray-400">—</span>';
            return '<pre class="report-details-cell">' + escapeHtml(String(details)) + '</pre>';
        },

        normalizeActionLabel(action) {
            const key = String(action || '').trim();
            return ACTION_LABEL_MAP[key] || key || 'Khác';
        },

        normalizeTab(tabName) {
            const lower = String(tabName || '').trim().toLowerCase();
            if (!lower) return 'Khác';
            const map = {
                'login': 'Đăng nhập',
                'admin': 'Quản lý nhân viên',
                'campaigns': 'Quản lý chiến dịch',
                'campaign-detail': 'Chi tiết chiến dịch',
                'booking': 'Quản lý booking',
                'koc': 'Quản lý KOC',
                'videos': 'Video',
            };
            return map[lower] || tabName || 'Khác';
        },

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

        handleDeleteLog(id) {
            if (!id) return;
            if (!this.canDeleteLogs()) {
                showError('Lỗi', 'Chỉ admin hoặc owner mới được xóa log.');
                return;
            }
            this.deletingLogId = id;
            window.modalOpen('deleteLogConfirmModal');
        },

        async executeDeleteLog() {
            if (!this.deletingLogId) return;
            const id = this.deletingLogId;
            this.deletingLogId = null;
            try {
                const resp = await requestJson(`/reports/logs/${id}`, { method: 'DELETE' });
                showSuccess('Thành công', resp.deleted ? 'Đã xóa bản ghi' : 'Đã xóa bản ghi');
                await this.load();
            } catch (err) {
                showError('Lỗi', err.message || 'Không thể xóa bản ghi');
            } finally {
                window.modalClose('deleteLogConfirmModal');
            }
        },

        handleDeleteAllLogs() {
            if (!this.canDeleteLogs()) {
                showError('Lỗi', 'Chỉ admin hoặc owner mới được xóa log.');
                return;
            }
            window.modalOpen('deleteAllLogsConfirmModal');
        },

        async executeDeleteAllLogs() {
            try {
                const resp = await requestJson('/reports/logs', { method: 'DELETE' });
                showSuccess('Thành công', resp.deleted ? `Đã xóa ${resp.deleted} bản ghi` : 'Đã xóa toàn bộ log');
                await this.load();
            } catch (err) {
                showError('Lỗi', err.message || 'Không thể xóa log');
            } finally {
                window.modalClose('deleteAllLogsConfirmModal');
            }
        },

        async handleExportCsv() {
            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; }
            const now = new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-');
            const headers = ['Thời gian', 'Người thao tác', 'Tab', 'Hành động', 'Đối tượng', 'Chi tiết'];
            const rows = (this.filteredLogs).map(log => [
                formatDateTime(log.created_at),
                log.username || '—',
                this.normalizeTab(log.tab_name),
                this.normalizeActionLabel(log.action),
                log.object_name || '—',
                log.details || '—',
            ]);
            try { await downloadXlsx(`bao-cao-thao-tac_${now}`, headers, rows); }
            catch (e) { showError('Lỗi', 'Không thể xuất file: ' + e.message); }
        },

        handleExportImage() {
            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; }
            const captureEl = document.getElementById('reports-capture');
            if (!captureEl) return;
            const text = captureEl.innerText || '';
            const canvas = document.createElement('canvas');
            const padding = 36;
            const lineHeight = 22;
            const maxWidth = 1200;
            const lines = text.split('\n').filter(l => l.trim());
            const maxLines = Math.min(lines.length, 80);
            canvas.width = maxWidth;
            canvas.height = padding * 2 + maxLines * lineHeight;
            const ctx = canvas.getContext('2d');
            if (!ctx) return;
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#0f172a';
            ctx.font = '600 18px "Be Vietnam Pro", sans-serif';
            ctx.fillText('Báo cáo hoạt động', padding, 28);
            ctx.font = '400 14px "Be Vietnam Pro", sans-serif';
            for (let i = 0; i < maxLines; i++) {
                const y = padding + 24 + i * lineHeight;
                ctx.fillText(lines[i].trim().slice(0, 145), padding, y);
            }
            const img = canvas.toDataURL('image/png');
            const a = document.createElement('a');
            a.href = img;
            a.download = `bao-cao-hoat-dong-${new Date().toISOString().slice(0, 10)}.png`;
            a.click();
        },

        canDeleteLogs() {
            return !!this.canDeleteLogsFlag;
        },


    }));
}

const ACTION_LABEL_MAP = {
    create_campaign: 'Tạo chiến dịch',
    update_campaign: 'Cập nhật chiến dịch',
    delete_campaign: 'Xóa chiến dịch',
    create_koc: 'Tạo KOC',
    update_koc: 'Cập nhật KOC',
    delete_koc: 'Xóa KOC',
    bulk_import_koc: 'Nhập hàng loạt KOC',
    import_csv_koc: 'Nhập CSV KOC',
    add_koc_to_campaign: 'Thêm KOC vào chiến dịch',
    remove_koc_from_campaign: 'Loại bỏ KOC khỏi chiến dịch',
    update_booking: 'Cập nhật booking koc',
    update_campaign_koc: 'Cập nhật trạng thái',
    upload_video: 'Tải lên video',
    update_video: 'Cập nhật video',
    export_data: 'Xuất file',
    login: 'Đăng nhập',
    logout: 'Đăng xuất',
};
