<template>
    <div class="flex flex-row items-center justify-end mt-5 gap-3">
        <div class="relative w-32" ref="filterDropdownRef">
            <button @click="isFilterOpen = !isFilterOpen" type="button"
                class="flex items-center justify-between w-full px-3 py-2 text-sm text-left bg-C border rounded-md border-C hover:bg-C/80 focus:outline-none">
                <span>{{ selectedFilterLabel }}</span>
                <i class="fas fa-chevron-down"></i>
            </button>
            <div v-if="isFilterOpen" class="absolute z-10 w-full mt-1 bg-C border rounded-md shadow-lg border-C">
                <ul class="py-1">
                    <li v-for="option in filterOptions" :key="option.value" @click="selectFilter(option)"
                        class="px-3 py-2 text-sm cursor-pointer text-D hover:bg-B">
                        {{ option.label }}
                    </li>
                </ul>
            </div>
        </div>

        <div class="relative w-40" ref="exportDropdownRef">
            <button @click="isExportOpen = !isExportOpen" type="button"
                class="flex items-center justify-between w-full px-3 py-2 text-sm text-left bg-C border rounded-md border-C hover:bg-C/80 focus:outline-none">
                <span :class="{ 'text-D': !exportFormat }">{{ selectedExportLabel }}</span>
                <i class="fas fa-chevron-down"></i>
            </button>
            <div v-if="isExportOpen" class="absolute z-10 w-full mt-1 bg-C border rounded-md shadow-lg border-C">
                <ul class="py-1">
                    <li v-for="option in exportOptions" :key="option.value" @click="selectExport(option)"
                        class="px-3 py-2 text-sm cursor-pointer text-D hover:bg-B">
                        {{ option.label }}
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="mt-5 overflow-x-auto">
        <table class="w-full border-collapse border border-C rounded-md">
            <thead>
                <tr class="bg-C text-D rounded-t-md">
                    <th class="border-x border-C px-3 py-3">Tanggal</th>
                    <th class="border-x border-C px-3 py-3">Nama Sales</th>
                    <th class="border-x border-C px-3 py-3">Jumlah Item Terjual</th>
                    <th class="border-x border-C px-3 py-3">Total Berat Terjual</th>
                    <th class="border-x border-C px-3 py-3">Total Pendapatan</th>
                </tr>
            </thead>
            <tbody>
                <tr v-if="loading">
                    <td colspan="5" class="p-4">
                        <div class="flex items-center justify-center w-full h-30">
                            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-D"></div>
                            <span class="ml-2 text-gray-600">Memuat data...</span>
                        </div>
                    </td>
                </tr>
                <tr v-else-if="!ringkasanLaporan.length">
                    <td colspan="5" class="p-4 text-center">Tidak ada data untuk ditampilkan.</td>
                </tr>
                <template v-else v-for="item in ringkasanLaporan" :key="item.tanggal">
                    <template v-if="item.sales && item.sales.length > 0">
                        <tr class="text-center border-y border-C"
                            :class="item.sales[0].item_terjual == 0 ? 'bg-red-200 hover:bg-red-300' : 'hover:bg-A'">
                            <td class="px-3 py-2 border-x border-C bg-white" :rowspan="item.sales.length">{{
                                item.tanggal }}</td>
                            <td class="px-3 py-2 border-x border-C text-left">{{ item.sales[0].nama }}</td>
                            <td class="px-3 py-2 border-x border-C">{{ item.sales[0].item_terjual }}</td>
                            <td class="px-3 py-2 border-x border-C">{{ item.sales[0].berat_terjual }}</td>
                            <td class="flex justify-center">
                                <div :ref="el => { if (el) pendapatanElements.push(el) }" :style="pendapatanStyle" :class="item.sales[0].pendapatan == '-' ? 'text-center' : 'text-right'">
                                    {{ item.sales[0].pendapatan }}
                                </div>
                            </td>
                        </tr>
                        <tr v-for="sales in item.sales.slice(1)" :key="sales.nama"
                            class="text-center border-y border-C"
                            :class="sales.item_terjual == '-' ? 'bg-red-200 hover:bg-red-300' : 'hover:bg-A'">
                            <td class="px-3 py-2 text-left border-x border-C">{{ sales.nama }}</td>
                            <td class="px-3 py-2 border-x border-C">{{ sales.item_terjual }}</td>
                            <td class="px-3 py-2 border-x border-C">{{ sales.berat_terjual }}</td>
                            <td class="flex justify-center">
                                <div :ref="el => { if (el) pendapatanElements.push(el) }" :style="pendapatanStyle" :class="sales.pendapatan == '-' ? 'text-center' : 'text-right'">
                                    {{ sales.pendapatan }}
                                </div>
                            </td>
                        </tr>
                        <tr class="font-semibold text-center border-y border-C bg-B hover:bg-C/80">
                            <td class="px-3 py-2 border-x border-C" colspan="2">Total</td>
                            <td class="px-3 py-2 border-x border-C">{{ item.total_item_terjual }}</td>
                            <td class="px-3 py-2 border-x border-C">{{ item.total_berat }}</td>
                            <td class="flex justify-center">
                                <div :ref="el => { if (el) pendapatanElements.push(el) }" :style="pendapatanStyle" :class="item.sales[0].pendapatan == '-' ? 'text-center' : 'text-right'">
                                    {{ item.total_pendapatan }}
                                </div>
                            </td>
                        </tr>
                    </template>
                    <template v-else>
                        <tr class="text-center border-y border-C hover:bg-A">
                            <td class="px-3 py-2 border-x border-C">{{ item.tanggal }}</td>
                            <td colspan="4" class="px-3 py-2 italic text-gray-500 border-x border-C bg-yellow-50 hover:bg-yellow-100">Tidak ada transaksi
                                pada hari ini</td>
                        </tr>
                    </template>
                </template>
            </tbody>
        </table>
        <div v-if="pagination.total > 0 && pagination.last_page > 1" class="flex items-center justify-end gap-2 mt-4">
            <button @click="goToPage(pagination.current_page - 1)" :disabled="pagination.current_page === 1 || loading"
                class="px-2 py-1 text-sm font-medium border rounded-md bg-C border-C disabled:opacity-50 disabled:cursor-not-allowed hover:bg-C/80">
                Sebelumnya
            </button>
            <span class="text-sm text-D">
                Halaman {{ pagination.current_page }} dari {{ pagination.last_page }}
            </span>
            <button @click="goToPage(pagination.current_page + 1)"
                :disabled="(pagination.current_page === pagination.last_page) || loading"
                class="px-2 py-1 text-sm font-medium border rounded-md bg-C border-C disabled:opacity-50 disabled:cursor-not-allowed hover:bg-C/80">
                Berikutnya
            </button>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, computed, nextTick } from "vue";
import axios from "axios";

// --- State ---
const isFilterOpen = ref(false);
const isExportOpen = ref(false);
const filterDropdownRef = ref(null);
const exportDropdownRef = ref(null);

const filterOptions = ref([
    { value: 'bulan', label: 'Bulanan' },
    { value: 'hari', label: 'Harian' }
]);
const exportOptions = ref([
    { value: 'pdf', label: 'Pdf' },
    { value: 'xls', label: 'Excel' },
    { value: 'csv', label: 'Csv' }
]);

const filterRingkasan = ref("bulan");
const exportFormat = ref(null);
const ringkasanLaporan = ref([]);
const loading = ref(false);
const pagination = ref({
    current_page: 1,
    last_page: 1,
    total: 0,
});

const pendapatanWidth = ref(0);
const pendapatanElements = ref([]);

// --- Computed ---
const selectedFilterLabel = computed(() => {
    return filterOptions.value.find(opt => opt.value === filterRingkasan.value)?.label;
});

const selectedExportLabel = computed(() => {
    return exportOptions.value.find(opt => opt.value === exportFormat.value)?.label || 'Export Laporan';
});

const pendapatanStyle = computed(() => ({
    minWidth: `${pendapatanWidth.value}px`,
    padding: '0.5rem 0.75rem'
}));

// --- Watchers ---
watch(ringkasanLaporan, async (newValue) => {
    if (newValue && newValue.length > 0) {
        await nextTick();
        let maxWidth = 0;
        pendapatanElements.value.forEach(el => {
            if (el && el.scrollWidth > maxWidth) {
                maxWidth = el.scrollWidth;
            }
        });
        pendapatanWidth.value = maxWidth;
    }
}, { deep: true });

// --- Methods ---
const fetchRingkasan = async (page = 1) => {
    loading.value = true;
    pendapatanElements.value = [];
    try {
        const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`, {
            headers: {
                Authorization: `Bearer ${localStorage.getItem("token")}`,
            },
        });;
        ringkasanLaporan.value = response.data.data;
        pagination.value = {
            current_page: response.data.current_page,
            last_page: response.data.last_page,
            total: response.data.total,
        };
    } catch (error) {
        console.error("Error fetching laporan:", error);
        ringkasanLaporan.value = [];
    } finally {
        loading.value = false;
    }
};

const goToPage = (page) => {
    if (page >= 1 && page <= pagination.value.last_page) {
        fetchRingkasan(page);
    }
};

const selectFilter = (option) => {
    filterRingkasan.value = option.value;
    isFilterOpen.value = false;
    goToPage(1);
};

const selectExport = (option) => {
    exportFormat.value = option.value;
    isExportOpen.value = false;
    alert(`Fitur Belum dikerjakan. Laporan akan diekspor dalam format ${option.label}`);
};

const closeDropdownsOnClickOutside = (event) => {
    if (filterDropdownRef.value && !filterDropdownRef.value.contains(event.target)) {
        isFilterOpen.value = false;
    }
    if (exportDropdownRef.value && !exportDropdownRef.value.contains(event.target)) {
        isExportOpen.value = false;
    }
};

// --- Lifecycle Hooks ---
onMounted(() => {
    fetchRingkasan(pagination.value.current_page);
    document.addEventListener('click', closeDropdownsOnClickOutside);
});

onUnmounted(() => {
    document.removeEventListener('click', closeDropdownsOnClickOutside);
});
</script>