<template>
    <div class="dataTable">
        <div class="dataTable__card">

            <DataTableHeader
                :search-term="searchTerm"
                @search="handleSearch"
            />

            <DataTableBody
                :columns="columns"
                :rows="currentData"
                :sort-config="sortConfig"
                @sort="handleSort"
                @view="handleView"
            />

            <DataTableFooter
                :start-index="startIndex"
                :end-index="endIndex"
                :total-count="filteredCount"
                :current-page="currentPage"
                :total-pages="totalPages"
                @change-page="handlePageChange"
            />
        </div>
    </div>
</template>

<script>

import DataTableHeader from "./elements/table/header.vue";
import DataTableBody from "./elements/table/body.vue";
import DataTableFooter from "./elements/table/footer.vue";

export default {
    name: 'DataTable',
    components: {DataTableFooter, DataTableBody, DataTableHeader},
    emits: ['view'],
    props: {
        data: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            columns: [
                { key: 'name', label: 'Chat Content' },
                { key: 'email', label: 'Date & Time' },
                { key: 'role', label: 'Action(s)' },
            ],
            sortConfig: { key: null, direction: 'asc' },
            searchTerm: '',
            currentPage: 1,
            itemsPerPage: 5
        };
    },
    computed: {
        filteredData() {
            if (!this.searchTerm) return this.data;
            const lowerTerm = this.searchTerm.toLowerCase();
            return this.data.filter(row =>
                Object.values(row).some(value =>
                    String(value).toLowerCase().includes(lowerTerm)
                )
            );
        },
        sortedData() {
            const items = [...this.filteredData];
            if (!this.sortConfig.key) return items;
            return items.sort((a, b) => {
                const key = this.sortConfig.key;
                if (a[key] < b[key]) return this.sortConfig.direction === 'asc' ? -1 : 1;
                if (a[key] > b[key]) return this.sortConfig.direction === 'asc' ? 1 : -1;
                return 0;
            });
        },
        currentData() {
            const start = (this.currentPage - 1) * this.itemsPerPage;
            const end = start + this.itemsPerPage;
            return this.sortedData.slice(start, end);
        },
        totalPages() {
            return Math.ceil(this.filteredData.length / this.itemsPerPage) || 0;
        },
        filteredCount() {
            return this.filteredData.length;
        },
        startIndex() {
            return (this.currentPage - 1) * this.itemsPerPage;
        },
        endIndex() {
            return this.startIndex + this.itemsPerPage;
        }
    },
    methods: {
        handleSort(key) {
            let direction = 'asc';
            if (this.sortConfig.key === key && this.sortConfig.direction === 'asc') {
                direction = 'desc';
            }
            this.sortConfig = { key, direction };
        },
        // Updated handleSearch with logging to verify it works
        handleSearch(val) {
            this.searchTerm = val;
            this.currentPage = 1;
        },
        handlePageChange(page) {
            this.currentPage = page;
        },
        handleView(row) {
            this.$emit('view', row);
        },
    },
};
</script>

<style lang="less" scoped>
@import "../../styles/admin/table.less";
</style>
