<script setup>
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue';
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';

import { useChapters } from '../../../composables/useChapters.js';

const { user } = useAuth();
const { navigate } = useNavigate();
const modal = useModal();

const { data, loading, error, fetchPageData } = usePageData();
const { fetchHierarchy, fetchMapData } = useChapters();

const stats = ref([
    { title: 'Cooperatives', number: 0, unit: 'Total', numberId: 'cooperative_total_no' },
    { title: 'Members', number: 0, unit: 'Enrolled', numberId: 'cooperative_members_no' },
    { title: 'New (7d)', number: 0, unit: 'Members', numberId: 'pending_members_no' },
]);

const footerItems = ref([
    { title: 'Cooperatives', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/04d0e432a298.bin', pagename: 'CooperativeList' },
    { title: 'My Profile', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/ac7a1cebe580.bin', pagename: 'UserInfoEdit' },
]);

const services = ref([
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/04d0e432a298.bin', title: 'Cooperatives', pagename: 'CooperativeList' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/04d0e432a298.bin', title: 'Register Member', pagename: 'CooperativeMemberRegister' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/85605eacd4c8.bin', title: 'My Cooperative', action: 'viewMyCoop' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/f87407046b18.bin', title: 'Reports', pagename: 'ListReports' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/c9fd442fe676.bin', title: 'Documents', pagename: 'CooperativeList' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/c9fd442fe676.bin', title: 'Members', pagename: 'CooperativeList' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/04d0e432a298.bin', title: 'Create Coop', pagename: 'CreateCooperative' },
    { icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/c9fd442fe676.bin', title: 'Chapter Map', action: 'toggleMap' },
]);

const quickActions = ref([
    { text: 'Create Cooperative', pagename: 'CreateCooperative', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/04d0e432a298.bin' },
    { text: 'Member Ledger', pagename: 'AccountingDashboard', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/c9fd442fe676.bin' },
    { text: 'Add Transaction', pagename: 'AddTransaction', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/c9fd442fe676.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' },
]);

const activeOrgHash = computed(() => user.value?.settings?.cooperatives?.[0] ?? null);

const showMap = ref(false);

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 viewMyCoop = () => {
    if (activeOrgHash.value) {
        navigate({ page: 'CooperativeDetail', props: { target: activeOrgHash.value } });
    } else {
        modal.quickDismiss({ title: 'No Cooperative', body: 'You have not joined a cooperative yet.' });
    }
};

const handleItemClick = (item) => {
    if (item?.action === 'viewMyCoop') {
        viewMyCoop();
        return;
    }
    if (item?.action === 'toggleMap') {
        showMap.value = !showMap.value;
        return;
    }
    if (item?.pagename) {
        navigate({ page: item.pagename });
    }
};

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

// ---- Chapter Map (Leaflet) ----
const mapContainer = ref(null);
const currentChapter = ref(null);
const breadcrumb = ref([]);
const chapterList = ref([]);
const mapDots = ref([]);

let leafletMap = null;
let markerLayer = null;

const LEVEL_LABELS = {
    national: 'Philippines',
    region: 'Region',
    province: 'Province',
    city: 'City / Municipality',
    barangay: 'Barangay',
};

const NEXT_LEVEL = {
    national: 'region',
    region: 'province',
    province: 'city',
    city: 'barangay',
};

const currentLevel = () => currentChapter.value?.level ?? 'national';
const nextLevel = () => NEXT_LEVEL[currentLevel()] ?? 'barangay';

const PH_CENTER = [12.0, 122.5];
const PH_ZOOM = 6;

async function initMap() {
    if (!mapContainer.value) return;

    const L = (await import('leaflet')).default;
    await import('leaflet/dist/leaflet.css');

    leafletMap = L.map(mapContainer.value, {
        center: PH_CENTER,
        zoom: PH_ZOOM,
        zoomControl: true,
        scrollWheelZoom: true,
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
        maxZoom: 18,
    }).addTo(leafletMap);

    markerLayer = L.layerGroup().addTo(leafletMap);

    renderMarkers(L);
}

async function renderMarkers(L) {
    if (!markerLayer || !L) return;
    markerLayer.clearLayers();

    const dots = mapDots.value.filter(d => d.lat && d.lng);
    if (!dots.length) return;

    dots.forEach(dot => {
        const radius = Math.max(8, Math.min(40, Math.sqrt(dot.count + 1) * 5));
        const circle = L.circleMarker([dot.lat, dot.lng], {
            radius,
            fillColor: '#198754',
            color: '#fff',
            weight: 2,
            opacity: 0.9,
            fillOpacity: 0.75,
        }).addTo(markerLayer);

        circle.bindTooltip(`<b>${dot.name}</b><br>${dot.count} member${dot.count !== 1 ? 's' : ''}`, {
            permanent: false,
            direction: 'top',
        });

        circle.on('click', () => drillDown(dot.id));
    });
}

async function loadLevel(chapterId = null) {
    const hierarchyData = await fetchHierarchy({ chapterId });

    currentChapter.value = hierarchyData.current ?? null;
    breadcrumb.value = hierarchyData.breadcrumb ?? [];
    chapterList.value = hierarchyData.chapters ?? [];

    const mapData = await fetchMapData({ level: nextLevel(), parentId: chapterId });
    mapDots.value = mapData.chapters ?? [];

    if (leafletMap) {
        const L = (await import('leaflet')).default;
        if (chapterId && hierarchyData.current?.lat && hierarchyData.current?.lng) {
            leafletMap.flyTo([hierarchyData.current.lat, hierarchyData.current.lng], 9, { duration: 1 });
        } else {
            leafletMap.flyTo(PH_CENTER, PH_ZOOM, { duration: 1 });
        }
        await renderMarkers(L);
    }
}

async function drillDown(chapterId) {
    await loadLevel(chapterId);
}

async function navigateBreadcrumb(crumb) {
    await loadLevel(crumb?.id ?? null);
}

async function resetToNational() {
    await loadLevel(null);
}

watch(showMap, async (val) => {
    if (val && !leafletMap) {
        await nextTick();
        await loadLevel(null);
        await nextTick();
        await initMap();
    }
});

onUnmounted(() => {
    if (leafletMap) {
        leafletMap.remove();
        leafletMap = null;
    }
});
</script>

<template>
    <div class="home-cooperative-fragment pb-5">
        <HomeSkeleton v-if="loading" />

        <template v-else>
            <BalanceBox
                :stats="stats"
                :footer-items="footerItems"
                @footer-click="handleItemClick"
            />

            <div class="tf-container mt-4">
                <h5 class="fw_7 mb-3">Cooperative Services</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>

            <div class="tf-container mt-4">
                <button class="btn btn-outline-secondary w-100 mb-3" @click="showMap = !showMap">
                    {{ showMap ? 'Hide' : 'Show' }} Chapter Map
                </button>

                <div v-show="showMap">
                    <div class="mb-2">
                        <h5 class="fw_7 mb-1">Organizational Map</h5>
                        <p class="text-muted small mb-0">
                            {{ currentChapter ? currentChapter.name : 'Philippines — National View' }}
                        </p>
                    </div>

                    <div v-if="breadcrumb.length || currentChapter" class="mb-2">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0 small">
                                <li class="breadcrumb-item">
                                    <a href="#" @click.prevent="resetToNational()" class="text-success">Philippines</a>
                                </li>
                                <li
                                    v-for="crumb in breadcrumb"
                                    :key="crumb.id"
                                    class="breadcrumb-item"
                                >
                                    <a href="#" @click.prevent="navigateBreadcrumb(crumb)" class="text-success">{{ crumb.name }}</a>
                                </li>
                                <li v-if="currentChapter" class="breadcrumb-item active">
                                    {{ currentChapter.name }}
                                </li>
                            </ol>
                        </nav>
                    </div>

                    <div class="mb-1 px-0">
                        <div
                            ref="mapContainer"
                            class="chapter-map rounded-3 overflow-hidden"
                            style="height: 320px; width: 100%;"
                        />
                    </div>

                    <div class="mb-3">
                        <div class="d-flex align-items-center gap-2 small text-muted">
                            <span
                                class="d-inline-block rounded-circle bg-success"
                                style="width:12px;height:12px;opacity:.75;"
                            ></span>
                            <span>Each dot = member cluster. Larger dot = more members.</span>
                        </div>
                    </div>

                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <h6 class="fw_6 mb-0">
                            {{ LEVEL_LABELS[nextLevel()] }}s
                            <span v-if="currentChapter" class="text-muted fw_4">
                                in {{ currentChapter.name }}
                            </span>
                        </h6>
                        <span class="badge bg-success-subtle text-success rounded-pill">
                            {{ chapterList.length }}
                        </span>
                    </div>

                    <div v-if="!chapterList.length" class="text-center py-4 text-muted small">
                        No {{ LEVEL_LABELS[nextLevel()]?.toLowerCase() }}s found yet.
                        <br>Members will appear once addresses are synced.
                    </div>

                    <div
                        v-for="chapter in chapterList"
                        :key="chapter.id"
                        class="chapter-row d-flex align-items-center gap-3 p-3 mb-2 rounded-3 border"
                        :class="{ 'chapter-row--clickable': chapter.has_children }"
                        @click="chapter.has_children ? drillDown(chapter.id) : null"
                        role="button"
                    >
                        <div class="chapter-count d-flex flex-column align-items-center justify-content-center rounded-circle bg-success text-white fw_7"
                            style="min-width:48px;height:48px;font-size:0.9rem;">
                            {{ chapter.member_count }}
                        </div>

                        <div class="flex-grow-1 overflow-hidden">
                            <div class="fw_6 text-truncate">{{ chapter.name }}</div>
                            <div class="small text-muted">
                                {{ chapter.member_count }} member{{ chapter.member_count !== 1 ? 's' : '' }}
                            </div>

                            <div v-if="chapter.leaders?.length" class="mt-1 d-flex flex-wrap gap-1">
                                <span
                                    v-for="leader in chapter.leaders.slice(0, 3)"
                                    :key="leader.hashkey"
                                    class="badge border small"
                                    style="background: var(--bg-card); color: var(--text-primary);"
                                >
                                    <span v-if="leader.photo" class="me-1">
                                        <img :src="leader.photo" class="rounded-circle" width="14" height="14" style="object-fit:cover;">
                                    </span>
                                    {{ leader.name }}
                                    <span v-if="leader.position" class="text-muted"> · {{ leader.position }}</span>
                                </span>
                                <span v-if="chapter.leaders.length > 3" class="badge border small text-muted"
                                    style="background: var(--bg-card);">
                                    +{{ chapter.leaders.length - 3 }} more
                                </span>
                            </div>
                            <div v-else class="small text-muted fst-italic mt-1">No leaders assigned</div>
                        </div>

                        <div v-if="chapter.has_children" class="text-muted">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<style scoped>
.chapter-row {
    background: var(--bg-card);
    color: var(--text-primary);
}
.chapter-row--clickable {
    cursor: pointer;
    transition: background 0.15s;
}
.chapter-map {
    border: 1px solid #dee2e6;
    background: #e8f5e9;
}
:global(.dark-mode) .chapter-row {
    background: var(--bg-card) !important;
}
</style>
