<script setup>
import { ref, onMounted, h } from 'vue';
import axios from 'axios';
import usePageData from '../../../composables/usePageData.js';
import { useNavigate } from '../../../composables/Core/useNavigate.js';
import { useAuth } from '../../../composables/Core/useAuth.js';
import { useModal } from '../../../composables/Core/useModal.js';
import BalanceBox from '../../../Components/Core/Stats/BalanceBox.vue';
import ServiceButtonGrid from '../../../Components/Core/Services/ServiceButtonGrid.vue';
import SideTextButtonList from '../../../Components/Core/Services/SideTextButtonList.vue';
import HomeSkeleton from '../../../Components/Core/Skeleton/HomeSkeleton.vue';

const { user } = useAuth();
const { navigate } = useNavigate();
const modal = useModal();
const { data, loading, error, fetchPageData } = usePageData();

const stats = ref([
    { title: 'Transactions', number: 0, unit: 'Today', align: 'left', numberId: 'transactions_today_no' },
    { title: 'Cash Flow', number: '0.00', unit: 'PHP Today', align: 'left', numberId: 'cash_flow_today_php' },
    { title: 'My Stores', number: 0, unit: 'Assigned', align: 'right', numberId: 'my_stores_no' },
]);

const balanceFooterItems = ref([
    { title: 'Open POS', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/5b5ef88c0ad1.svg', action: 'openPos' },
    { title: 'My Stores', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/85605eacd4c8.bin', pagename: 'ManageStoresAdmin' },
]);

const services = [
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/5b5ef88c0ad1.svg', title: 'Open POS', action: 'openPos' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/ef1a9a079a2d.svg', title: 'Inventory', pagename: 'ManageProductsAdmin' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/f87407046b18.bin', title: 'POS History', action: 'openPosHistory' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/85605eacd4c8.bin', title: 'Manage Stores', pagename: 'ManageStoresAdmin' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/f0a0193d728e.bin', title: 'Add Product', pagename: 'CreateProductStoreOwner' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/5b5ef88c0ad1.svg', title: 'POS Keys', pagename: 'PosAccessKeys' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/516ed2aaaa4c.bin', title: 'Customers', action: 'viewCustomers' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/f87407046b18.bin', title: 'Reports', pagename: 'ListReports' },
];

const quickActions = [
    { text: 'Onboard New User', pagename: 'CreateUser', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/516ed2aaaa4c.bin' },
    { text: 'My Personal Profile', pagename: 'UserInfoEdit', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/ac7a1cebe580.bin' },
    { text: 'Add Transaction', pagename: 'AddTransaction', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/c9fd442fe676.bin' },
];

const showStoreSelectModal = (stores, onSelect) => {
    modal.open({
        title: 'Select a Store',
        body: h('div', { class: 'd-flex flex-column gap-2' },
            stores.map(store =>
                h('button', {
                    class: 'btn btn-outline-primary rounded-pill text-start',
                    onClick: () => {
                        modal.hideModal();
                        onSelect(store);
                    },
                }, [
                    h('i', { class: 'fas fa-store me-2' }),
                    store.name,
                    store.category ? h('small', { class: 'text-muted ms-2' }, `(${store.category})`) : null,
                ])
            )
        ),
    });
};

const openPos = async () => {
    try {
        const { data: stores } = await axios.post('/ListStores/MyStores/data', {});
        if (!stores || stores.length === 0) {
            modal.quickDismiss({ title: 'No Store Found', body: 'You have no active stores assigned to your account.' });
            return;
        }
        if (stores.length === 1) {
            navigate({ page: 'PosMain', props: { target: stores[0].hashkey } });
            return;
        }
        showStoreSelectModal(stores, (store) => navigate({ page: 'PosMain', props: { target: store.hashkey } }));
    } catch (e) {
        modal.quickDismiss({ title: 'Error', body: 'Could not load your stores. Please try again.' });
    }
};

const openPosHistory = async () => {
    try {
        const { data: stores } = await axios.post('/ListStores/MyStores/data', {});
        if (!stores || stores.length === 0) {
            modal.quickDismiss({ title: 'No Store Found', body: 'You have no active stores assigned to your account.' });
            return;
        }
        if (stores.length === 1) {
            navigate({ page: 'PosHistory', props: { target: stores[0].hashkey } });
            return;
        }
        showStoreSelectModal(stores, (store) => navigate({ page: 'PosHistory', props: { target: store.hashkey } }));
    } catch (e) {
        modal.quickDismiss({ title: 'Error', body: 'Could not load your stores. Please try again.' });
    }
};

const viewCustomers = () => {
    navigate({ page: 'ManageStoresAdmin' });
};

const applyStats = () => {
    if (!data.value?.stats) return;
    stats.value = stats.value.map((s) => {
        const v = data.value.stats[s.numberId];
        return v !== undefined ? { ...s, number: v } : s;
    });
};

const handleItemClick = async (item) => {
    if (item?.action === 'openPos') { await openPos(); return; }
    if (item?.action === 'openPosHistory') { await openPosHistory(); return; }
    if (item?.action === 'viewCustomers') { viewCustomers(); return; }
    if (item.pagename) { navigate({ page: item.pagename }); }
};

onMounted(async () => {
    await fetchPageData('/home-data', {});
    applyStats();
});
</script>

<template>
    <div class="home-fragment pb-5">
        <HomeSkeleton v-if="loading" />
        <template v-else>
            <BalanceBox :stats="stats" :footerItems="balanceFooterItems" @footer-click="handleItemClick" />
            <div class="tf-container mt-4">
                <h5 class="fw_7 mb-3">Store Manager Tools</h5>
                <ServiceButtonGrid :items="services" @item-click="handleItemClick" />
            </div>
            <div class="tf-container mt-4">
                <h5 class="fw_7 mb-3">Quick Actions</h5>
                <SideTextButtonList :items="quickActions" @item-click="handleItemClick" />
            </div>
        </template>
    </div>
</template>
