<script setup>
import { ref, onMounted, h, computed } from 'vue';
import usePageData from '../../../composables/usePageData.js';
import { useNavigate } from '../../../composables/Core/useNavigate.js';
import { useUserNotes } from '../../../composables/useUserNotes.js';
import { useModal } from '../../../composables/Core/useModal.js';
import { useAuth } from '../../../composables/Core/useAuth.js';
import { useGlobalTransactions } from '../../../composables/useGlobalTransactions.js';
import { useActivity } from '../../../composables/useActivity.js';
import { usePrefetch } from '../../../composables/Core/usePrefetch.js';
import { useUIStore } from '../../../stores/ui.js';

// Core Components
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 SearchableList from '../../../Components/Core/Search/SearchableList.vue';
import CardSimple from '../../../Components/Core/CardSimple.vue';
import GlobalAnnouncement from '../../../Components/GlobalAnnouncement.vue';
import HomeSkeleton from '../../../Components/Core/Skeleton/HomeSkeleton.vue';
import CooperativeDetail from '@/Pages/CooperativeDetail.vue';
import DocumentRepository from '@/Pages/Fragments/DocumentRepository.vue';
import GovernanceResolutions from '@/Pages/Fragments/GovernanceResolutions.vue';

const { hasRole, UserTypes, user } = useAuth();
const { precache } = useGlobalTransactions();
const url = '/home-data';
const payload = {};

const { data, loading, error, stale, fetchPageData } = usePageData();
const { navigate } = useNavigate();
const { notes, fetchNotes, dismissNotes, hasNotes } = useUserNotes();
const { activities, fetchRecentActivities, loading: loadingActivities } = useActivity();
const { prefetchEverything } = usePrefetch();
const modal = useModal();
const uiStore = useUIStore();

const showStaleIndicator = ref(false);

// Stats data mapping to enhanced backend
const stats = ref([
    { title: "Pending", number: 0, unit: "Orders", align: "left", numberId: "pending_orders_no" },
    { title: "Stores", number: 0, unit: "Active", align: "left", numberId: "active_stores_no" },
    { title: "Users", number: 0, unit: "Total", align: "right", numberId: "total_users_no" },
    { title: "Balance", number: 0, unit: "PHP", align: "right", numberId: "total_balance_php" }
]);

const balanceFooterItems = ref([
    { title: "Add Transaction", icon: "https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/c9fd442fe676.bin", pagename: "AddTransaction" },
    { title: "View Reports", icon: "https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/f87407046b18.bin", pagename: "ListReports" }
]);

const activeOrgHash = computed(() => {
    const coops = user.value?.settings?.cooperatives;
    if (Array.isArray(coops) && coops.length > 0) {
        return coops[0];
    }
    return null;
});

const hubTab = ref('overview');

// Helper to filter items based on roles and module state
const filterByRole = (items) => {
    return items.filter(item => {
        if (item.module && !uiStore.isModuleEnabled(item.module)) return false;
        if (!item.roles || item.roles === 'all') return true;
        if (Array.isArray(item.roles)) {
            return item.roles.some(role => hasRole(role));
        }
        return hasRole(item.roles);
    });
};

// Primary Grid Services
const services = computed(() => filterByRole([
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/32248fe10b94.bin', title: 'Users', pagename: 'UserList', roles: [UserTypes.ULTIMATE, UserTypes.SUPER_OPERATOR] },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/85605eacd4c8.bin', title: 'Stores', pagename: 'ManageStoresAdmin', roles: [UserTypes.ULTIMATE, UserTypes.SUPER_OPERATOR, UserTypes.OPERATOR] },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/ef1a9a079a2d.svg', title: 'Products', pagename: 'ManageProductsAdmin', roles: [UserTypes.ULTIMATE, UserTypes.SUPER_OPERATOR] },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/c9fd442fe676.bin', title: 'Transactions', pagename: 'ManageGlobalTransactions', roles: [UserTypes.ULTIMATE, UserTypes.SUPER_OPERATOR] },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/f87407046b18.bin', title: 'Reports', pagename: 'ListReports', roles: [UserTypes.ULTIMATE, UserTypes.SUPER_OPERATOR] },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/fa711c34b4ef.svg', title: 'Accounting', pagename: 'AccountingDashboard', roles: [UserTypes.ULTIMATE, UserTypes.SUPER_OPERATOR, UserTypes.OPERATOR], module: 'accounting' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/5b5ef88c0ad1.svg', title: 'POS Keys', pagename: 'PosAccessKeys', roles: [UserTypes.ULTIMATE, UserTypes.SUPER_OPERATOR, UserTypes.OPERATOR] },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/04d0e432a298.bin', title: 'Market', pagename: 'ListProductsMarket', roles: 'all' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/4d9cb130fad1.bin', title: 'Shipments', pagename: 'ShipmentList', roles: 'all' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/5d0ad5d52b8c.bin', title: 'Farmers', pagename: 'FarmerProfileEdit', roles: 'all' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/3360da347e6b.svg', title: 'Verification', pagename: 'VerificationDashboard', roles: [UserTypes.ULTIMATE, UserTypes.SUPER_OPERATOR, UserTypes.OPERATOR] },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/d9b9b9179ce0.svg', title: 'Cooperatives', pagename: 'CooperativeList', roles: 'all' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/01f266928e54.svg', title: 'Console', pagename: 'UltimateConsole', roles: [UserTypes.ULTIMATE] },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/3d721f4acf47.svg', title: 'Announce', pagename: 'ManageAnnouncements', roles: [UserTypes.ULTIMATE] },
]));

// Secondary List Actions
const quickActionsItems = computed(() => filterByRole([
    { text: 'Onboard New User', pagename: 'CreateUser', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/516ed2aaaa4c.bin', roles: [UserTypes.ULTIMATE, UserTypes.SUPER_OPERATOR] },
    { text: 'Register New Store', pagename: 'CreateStore', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/85605eacd4c8.bin', roles: [UserTypes.ULTIMATE, UserTypes.SUPER_OPERATOR, UserTypes.OPERATOR] },
    { text: 'Create New Product', pagename: 'CreateProductUltimate', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/f0a0193d728e.bin', roles: [UserTypes.ULTIMATE, UserTypes.SUPER_OPERATOR] },
    { text: 'Create New Cooperative', pagename: 'CreateCooperative', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/d9b9b9179ce0.svg', roles: [UserTypes.ULTIMATE, UserTypes.SUPER_OPERATOR] },
    { text: 'Add Organization', pagename: 'CreateOrganization', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/f0cc8da0402c.svg', roles: [UserTypes.ULTIMATE, UserTypes.SUPER_OPERATOR, UserTypes.OPERATOR] },
    { text: 'My Personal Profile', pagename: 'UserInfoEdit', pagestring: user.hashkey, icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/ac7a1cebe580.bin', roles: 'all' },
    { text: 'Referrals & Leads', pagename: 'ListReferrals', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/7d45d4bdbc74.bin', roles: 'all', module: 'properties' },
    { text: 'Property Listings', pagename: 'ListProperties', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/53c45417d1d1.bin', roles: 'all', module: 'properties' },
    { text: 'Send Credit Transfer', pagename: 'TransferMyCredit', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/074af7aca12b.bin', roles: 'all' },
    { text: 'Global System Settings', pagename: 'SystemSettings', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/b1e4fd15d8bd.bin', roles: [UserTypes.ULTIMATE] },
    { text: 'Landing Page Editor', pagename: 'LandingPageEditor', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/3d721f4acf47.svg', roles: [UserTypes.ULTIMATE, UserTypes.SUPER_OPERATOR, UserTypes.COORDINATOR] },
]));

// Remove internal reactive recentItems as we use useActivity now

const showNotesModal = () => {
    modal.continueCancelModal({
        title: 'Notes',
        body: h('div', {
            style: 'white-space: pre-wrap; font-size: 16px; line-height: 1.5; color: #333;'
        }, notes.value),
        continueText: 'Dismiss Note',
        cancelText: 'Close',
        continueClass: 'btn btn-danger w-50 py-2 rounded-3 shadow-sm fw-bold',
        cancelClass: 'btn btn-light w-50 py-2 rounded-3 border fw-bold text-muted',
        onContinue: async () => {
            const success = await dismissNotes();
            if (success) {
                await fetchNotes();
            }
        }
    });
};

onMounted(async () => {
    precache(); // Precache transactions for smoother experience
    fetchRecentActivities(10); // Fetch real activities
    const result = await fetchPageData(url, payload);

    if (result && result.stale) {
        showStaleIndicator.value = true;
    }

    // Update stats if data provides them
    if (data.value?.stats) {
        stats.value = stats.value.map(s => {
            if (data.value.stats[s.numberId] !== undefined) {
                return { ...s, number: data.value.stats[s.numberId] };
            }
            return s;
        });
    }

    // Fetch notes and auto-show if they exist
    await fetchNotes();
    if (hasNotes()) {
        showNotesModal();
    }

    // --- Start background universal prefetch ---
    // User wants "everything" preloaded once they land on home.
    // Staggered trigger to ensure smooth initial experience.
    setTimeout(() => {
        prefetchEverything();
    }, 1000); // 1-second delay to give priority to dashboard data
});

const handleItemClick = (item) => {
    if (item.pagename) {
        navigate({ page: item.pagename, props: { data: item.pagestring || '' } });
    }
};
</script>

<template>
    <div class="home-ultimate-fragment pb-5">
        <!-- Global loading skeleton -->
        <HomeSkeleton v-if="loading && !data" />

        <!-- Stale data notification -->
        <div v-if="showStaleIndicator" class="stale-notice">
            ⚠️ Displaying cached command center data.
        </div>

        <!-- Main Content -->
        <div v-if="data">
            <!-- Balance / Stats Box -->
            <BalanceBox :stats="stats" :footer-items="balanceFooterItems" @footer-click="handleItemClick" />

            <!-- Primary Services Grid -->
            <div class="mt-2">
                <ServiceButtonGrid :items="services" @item-click="handleItemClick" />
            </div>

            <!-- Global Announcements -->
            <div class="mt-3">
                <GlobalAnnouncement />
            </div>

            <!-- Primary Cooperative Hub -->
            <div v-if="activeOrgHash" class="mt-4 px-3">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <h5 class="fw_7 mb-0 d-flex align-items-center gap-2" style="color: var(--text-primary) !important;">
                        <i class="fas fa-landmark text-primary opacity-50"></i>
                        Cooperative Hub
                    </h5>
                    <div class="d-flex gap-1 bg-soft-primary p-1 rounded-pill">
                        <button 
                            @click="hubTab = 'overview'" 
                            :class="['btn btn-xs rounded-pill px-3 transition-all', hubTab === 'overview' ? 'btn-primary shadow-sm' : 'btn-transparent text-primary small']"
                        >
                            Overview
                        </button>
                        <button 
                            @click="hubTab = 'docs'" 
                            :class="['btn btn-xs rounded-pill px-3 transition-all', hubTab === 'docs' ? 'btn-primary shadow-sm' : 'btn-transparent text-primary small']"
                        >
                            Docs
                        </button>
                        <button 
                            @click="hubTab = 'votes'" 
                            :class="['btn btn-xs rounded-pill px-3 transition-all', hubTab === 'votes' ? 'btn-primary shadow-sm' : 'btn-transparent text-primary small']"
                        >
                            Resolutions
                        </button>
                    </div>
                </div>
                
                <div class="card border-0 shadow-sm rounded-20 bg-white overflow-hidden p-0">
                    <div v-if="hubTab === 'overview'">
                        <CooperativeDetail :target="activeOrgHash" />
                    </div>
                    <div v-else-if="hubTab === 'docs'" class="p-3">
                        <DocumentRepository :org-hash="activeOrgHash" />
                    </div>
                    <div v-else-if="hubTab === 'votes'" class="p-3">
                        <GovernanceResolutions :org-hash="activeOrgHash" />
                    </div>
                </div>
            </div>

            <!-- Detailed Quick Actions -->
            <div class="tf-container mt-4">
                <h5 class="fw_7 mb-3" style="color: var(--text-primary) !important;">Management & Tools</h5>
                <SideTextButtonList :items="quickActionsItems" @item-click="handleItemClick" />
            </div>

            <!-- Recent Activity List -->
            <div class="mt-4 px-3">
                <div class="activity-section card border-0 shadow-sm rounded-4 bg-white overflow-hidden">
                    <div class="card-header bg-white border-0 py-3 px-4 d-flex align-items-center justify-content-between">
                        <h5 class="fw-bold mb-0 d-flex align-items-center gap-2">
                            <i class="fas fa-history text-primary"></i>
                            Recent System Activity
                        </h5>
                        <a
                            href="javascript:void(0);"
                            class="btn btn-sm btn-outline-primary rounded-pill px-3 fw-semibold"
                            @click="navigate({ page: 'ManageGlobalTransactions' })"
                        >
                            View All
                        </a>
                    </div>
                    <div class="card-body p-0">
                        <SearchableList
                            title=""
                            :items="activities"
                            :loading="loadingActivities"
                            empty-text="No recent activity recorded"
                            @item-click="handleItemClick"
                        />
                    </div>
                </div>
            </div>
        </div>

        <!-- Error display -->
        <div v-if="error && !data">
            <div class="tf-container mt-5 text-center">
                <p style="color: var(--text-muted);">Command center disconnected. Please retry.</p>
                <button class="btn btn-primary mt-2 rounded-pill px-4" @click="fetchPageData(url, payload)">Reconnect</button>
            </div>
        </div>
    </div>
</template>

<style scoped>
.spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 5px solid var(--bg-tertiary);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.stale-notice {
    background-color: #fff3cd;
    color: #856404;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    text-align: center;
}

.announcement-img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
}

.announcement-text {
    line-height: 1.6;
    font-size: 0.95rem;
}

.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 50rem;
}

.bg-soft-primary {
    background-color: rgba(var(--primary-rgb), 0.1);
}

.transition-all {
    transition: all 0.2s ease;
}
</style>