<template>
    <div class="x-container" ref="friendsListRef">
        <div>
            <div style="display: flex; align-items: center; justify-content: space-between">
                <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
                    <el-tooltip placement="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
                        <el-switch
                            v-model="friendsListSearchFilterVIP"
                            active-color="var(--el-color-success)"
                            @change="friendsListSearchChange"></el-switch>
                    </el-tooltip>
                    <el-select
                        v-model="friendsListSearchFilters"
                        multiple
                        clearable
                        collapse-tags
                        style="margin: 0 10px; width: 150px"
                        :placeholder="t('view.friend_list.filter_placeholder')"
                        @change="friendsListSearchChange">
                        <el-option
                            v-for="type in ['Display Name', 'User Name', 'Rank', 'Status', 'Bio', 'Note', 'Memo']"
                            :key="type"
                            :label="type"
                            :value="type"></el-option>
                    </el-select>
                    <el-input
                        v-model="friendsListSearch"
                        :placeholder="t('view.friend_list.search_placeholder')"
                        clearable
                        style="width: 250px"
                        @change="friendsListSearchChange"></el-input>
                </div>
                <div class="flex items-center">
                    <div v-if="friendsListBulkUnfriendMode" class="inline-block mr-10">
                        <el-button @click="showBulkUnfriendSelectionConfirm">
                            {{ t('view.friend_list.bulk_unfriend_selection') }}
                        </el-button>
                        <!-- el-button(size="small" @click="showBulkUnfriendAllConfirm" style="margin-right:5px") Bulk Unfriend All-->
                    </div>
                    <div class="flex items-center mr-3">
                        <span class="name mr-2 text-xs">{{ t('view.friend_list.bulk_unfriend') }}</span>
                        <el-switch
                            v-model="friendsListBulkUnfriendMode"
                            @change="toggleFriendsListBulkUnfriendMode"></el-switch>
                    </div>
                    <div class="flex items-center">
                        <el-button @click="openChartsTab">
                            {{ t('view.friend_list.load_mutual_friends') }}
                        </el-button>

                        <el-button @click="friendsListLoadUsers">{{ t('view.friend_list.load') }}</el-button>
                    </div>
                </div>
            </div>
            <DataTable
                v-bind="friendsListTable"
                style="margin-top: 10px; cursor: pointer"
                @row-click="selectFriendsListRow">
                <el-table-column v-if="friendsListBulkUnfriendMode" width="55">
                    <template #default="{ row }">
                        <el-button text size="small" @click.stop>
                            <el-checkbox
                                :model-value="selectedFriends.has(row.id)"
                                @change="toggleFriendSelection(row.id)"></el-checkbox>
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column width="20"></el-table-column>
                <el-table-column
                    :label="t('table.friendList.no')"
                    width="100"
                    prop="$friendNumber"
                    :sortable="true"
                    fixed="left">
                    <template #default="{ row }">
                        <span>{{ row.$friendNumber ? row.$friendNumber : '' }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="t('table.friendList.avatar')" width="90" prop="photo">
                    <template #default="{ row }">
                        <div class="flex items-center">
                            <img :src="userImage(row, true)" class="friends-list-avatar" loading="lazy" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    :label="t('table.friendList.displayName')"
                    min-width="200"
                    prop="displayName"
                    sortable
                    :sort-method="(a, b) => sortAlphabetically(a, b, 'displayName')"
                    fixed="left">
                    <template #default="{ row }">
                        <span :style="{ color: randomUserColours ? row.$userColour : undefined }" class="name">{{
                            row.displayName
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="t('table.friendList.rank')" width="140" prop="$trustSortNum" :sortable="true">
                    <template #default="{ row }">
                        <span
                            v-if="randomUserColours"
                            :class="row.$trustClass"
                            class="name"
                            v-text="row.$trustLevel"></span>
                        <span v-else class="name" :style="{ color: row.$userColour }" v-text="row.$trustLevel"></span>
                    </template>
                </el-table-column>
                <el-table-column
                    :label="t('table.friendList.status')"
                    min-width="200"
                    prop="status"
                    sortable
                    :sort-method="(a, b) => sortStatus(a.status, b.status)">
                    <template #default="{ row }">
                        <i
                            v-if="row.status !== 'offline'"
                            :class="statusClass(row.status)"
                            style="margin-right: 3px"
                            class="x-user-status"></i>
                        <span v-text="row.statusDescription"></span>
                    </template>
                </el-table-column>
                <el-table-column
                    :label="t('table.friendList.language')"
                    width="130"
                    prop="$languages"
                    sortable
                    :sort-method="(a, b) => sortLanguages(a, b)">
                    <template #default="{ row }">
                        <el-tooltip v-for="item in row.$languages" :key="item.key" placement="top">
                            <template #content>
                                <span>{{ item.value }} ({{ item.key }})</span>
                            </template>
                            <span
                                :class="languageClass(item.key)"
                                style="display: inline-block; margin-right: 5px"
                                class="flags"></span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column :label="t('table.friendList.bioLink')" width="130" prop="bioLinks">
                    <template #default="{ row }">
                        <div class="flex items-center">
                            <el-tooltip v-for="(link, index) in row.bioLinks.filter(Boolean)" :key="index">
                                <template #content>
                                    <span v-text="link"></span>
                                </template>

                                <img
                                    :src="getFaviconUrl(link)"
                                    style="
                                        width: 16px;
                                        height: 16px;
                                        vertical-align: middle;
                                        margin-right: 5px;
                                        cursor: pointer;
                                    "
                                    @click.stop="openExternalLink(link)"
                                    loading="lazy" />
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    :label="t('table.friendList.joinCount')"
                    width="120"
                    prop="$joinCount"
                    sortable
                    align="right"></el-table-column>
                <el-table-column
                    :label="t('table.friendList.timeTogether')"
                    width="140"
                    prop="$timeSpent"
                    sortable
                    align="right">
                    <template #default="{ row }">
                        <span v-if="row.$timeSpent">{{ timeToText(row.$timeSpent) }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    :label="t('table.friendList.lastSeen')"
                    width="170"
                    prop="$lastSeen"
                    sortable
                    :sort-method="(a, b) => sortAlphabetically(a, b, '$lastSeen')">
                    <template #default="{ row }">
                        <span>{{
                            formatDateFilter(row.$lastSeen, 'long') === '-'
                                ? ''
                                : formatDateFilter(row.$lastSeen, 'long')
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    :label="t('table.friendList.mutualFriends')"
                    width="120"
                    prop="$mutualCount"
                    sortable
                    align="right">
                    <template #default="{ row }">
                        <span v-if="row.$mutualCount">{{ row.$mutualCount }}</span>
                        <span v-else></span> </template
                ></el-table-column>
                <el-table-column
                    :label="t('table.friendList.lastActivity')"
                    width="200"
                    prop="last_activity"
                    sortable
                    :sort-method="(a, b) => sortAlphabetically(a, b, 'last_activity')">
                    <template #default="{ row }">
                        <span>{{ formatDateFilter(row.last_activity, 'long') }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    :label="t('table.friendList.lastLogin')"
                    width="200"
                    prop="last_login"
                    sortable
                    :sort-method="(a, b) => sortAlphabetically(a, b, 'last_login')">
                    <template #default="{ row }">
                        <span>{{ formatDateFilter(row.last_login, 'long') }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    :label="t('table.friendList.dateJoined')"
                    width="120"
                    prop="date_joined"
                    sortable
                    :sort-method="(a, b) => sortAlphabetically(a, b, 'date_joined')"></el-table-column>
                <el-table-column :label="t('table.friendList.unfriend')" width="100" align="center">
                    <template #default="{ row }">
                        <i
                            class="ri-user-unfollow-line"
                            style="color: #f56c6c"
                            @click.stop="confirmDeleteFriend(row.id)"></i>
                    </template>
                </el-table-column>
            </DataTable>
            <el-dialog
                v-model="friendsListLoadDialogVisible"
                :title="t('view.friend_list.load_dialog_title')"
                width="420px"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :show-close="false"
                align-center>
                <div style="margin-bottom: 10px" v-text="t('view.friend_list.load_dialog_message')"></div>
                <el-progress
                    :percentage="friendsListLoadingPercent"
                    :text-inside="true"
                    :stroke-width="16"></el-progress>
                <div style="margin-top: 10px; text-align: right">
                    <span>{{ friendsListLoadingCurrent }} / {{ friendsListLoadingTotal }}</span>
                </div>
                <template #footer>
                    <el-button @click="cancelFriendsListLoad">
                        {{ t('view.friend_list.load_cancel') }}
                    </el-button>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
    import { computed, nextTick, reactive, ref, watch } from 'vue';
    import { ElMessage, ElMessageBox } from 'element-plus';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';
    import { useRoute } from 'vue-router';

    import {
        formatDateFilter,
        getFaviconUrl,
        languageClass,
        localeIncludes,
        openExternalLink,
        sortStatus,
        statusClass,
        timeToText,
        userImage
    } from '../../shared/utils';
    import { useAppearanceSettingsStore, useFriendStore, useSearchStore, useUserStore } from '../../stores';
    import { friendRequest, userRequest } from '../../api';
    import removeConfusables, { removeWhitespace } from '../../service/confusables';
    import { router } from '../../plugin/router';
    import { useTableHeight } from '../../composables/useTableHeight';

    const { t } = useI18n();

    const emit = defineEmits(['lookup-user']);

    const { friends } = storeToRefs(useFriendStore());
    const { getAllUserStats, getAllUserMutualCount, confirmDeleteFriend, handleFriendDelete } = useFriendStore();
    const { randomUserColours } = storeToRefs(useAppearanceSettingsStore());
    const { showUserDialog } = useUserStore();
    const { stringComparer, friendsListSearch } = storeToRefs(useSearchStore());

    const friendsListSearchFilters = ref([]);
    const friendsListTable = reactive({
        data: [],
        tableProps: {
            stripe: true,
            size: 'small',
            defaultSort: { prop: '$friendNumber', order: 'descending' },
            scrollbarAlwaysOn: true
        },
        pageSize: 100,
        paginationProps: { layout: 'sizes,prev,pager,next,total', pageSizes: [50, 100, 250, 500] }
    });
    const friendsListBulkUnfriendMode = ref(false);
    const friendsListLoading = ref(false);
    const friendsListLoadingCurrent = ref(0);
    const friendsListLoadingTotal = ref(0);
    const friendsListLoadDialogVisible = ref(false);
    const friendsListSearchFilterVIP = ref(false);
    const selectedFriends = ref(new Set());

    const friendsListLoadingPercent = computed(() => {
        if (!friendsListLoadingTotal.value) return 0;
        return Math.min(100, Math.round((friendsListLoadingCurrent.value / friendsListLoadingTotal.value) * 100));
    });

    const { containerRef: friendsListRef } = useTableHeight(ref(friendsListTable));

    const route = useRoute();

    watch(
        () => route.path,
        () => {
            nextTick(() => friendsListSearchChange());
        },
        { immediate: true }
    );

    function friendsListSearchChange() {
        friendsListLoading.value = true;
        let query = '';
        let cleanedQuery = '';
        friendsListTable.data = [];
        let filters = friendsListSearchFilters.value.length
            ? [...friendsListSearchFilters.value]
            : ['Display Name', 'Rank', 'Status', 'Bio', 'Note', 'Memo'];
        const results = [];
        if (friendsListSearch.value) {
            query = friendsListSearch.value;
            cleanedQuery = removeWhitespace(query);
        }
        for (const ctx of friends.value.values()) {
            if (!ctx.ref) continue;
            if (friendsListSearchFilterVIP.value && !ctx.isVIP) continue;
            if (query) {
                let match = false;
                if (!match && filters.includes('Display Name') && ctx.ref.displayName) {
                    match =
                        localeIncludes(ctx.ref.displayName, cleanedQuery, stringComparer.value) ||
                        localeIncludes(removeConfusables(ctx.ref.displayName), cleanedQuery, stringComparer.value);
                }
                if (!match && filters.includes('Memo') && ctx.memo) {
                    match = localeIncludes(ctx.memo, query, stringComparer.value);
                }
                if (!match && filters.includes('Note') && ctx.ref.note) {
                    match = localeIncludes(ctx.ref.note, query, stringComparer.value);
                }
                if (!match && filters.includes('Bio') && ctx.ref.bio) {
                    match = localeIncludes(ctx.ref.bio, query, stringComparer.value);
                }
                if (!match && filters.includes('Status') && ctx.ref.statusDescription) {
                    match = localeIncludes(ctx.ref.statusDescription, query, stringComparer.value);
                }
                if (!match && filters.includes('Rank')) {
                    match = String(ctx.ref.$trustLevel).toUpperCase().includes(query.toUpperCase());
                }
                if (!match) continue;
            }
            results.push(ctx.ref);
        }
        getAllUserStats();
        getAllUserMutualCount();
        nextTick(() => {
            friendsListTable.data = results;
            friendsListLoading.value = false;
        });
    }

    function toggleFriendSelection(id) {
        if (selectedFriends.value.has(id)) {
            selectedFriends.value.delete(id);
        } else {
            selectedFriends.value.add(id);
        }
    }

    function toggleFriendsListBulkUnfriendMode() {
        if (!friendsListBulkUnfriendMode.value) {
            selectedFriends.value.clear();
        }
    }

    function showBulkUnfriendSelectionConfirm() {
        const pending = friendsListTable.data
            .filter((item) => selectedFriends.value.has(item.id))
            .map((item) => item.displayName);
        if (!pending.length) return;
        ElMessageBox.confirm(
            `Are you sure you want to delete ${pending.length} friends?
            This can negatively affect your trust rank,
            This action cannot be undone.`,
            `Delete ${pending.length} friends?`,
            {
                confirmButtonText: 'Confirm',
                cancelButtonText: 'Cancel',
                type: 'info',
                showInput: true,
                inputType: 'textarea',
                inputValue: pending.join('\r\n')
            }
        )
            .then(({ action }) => {
                if (action === 'confirm') {
                    bulkUnfriendSelection();
                }
            })
            .catch(() => {});
    }

    async function bulkUnfriendSelection() {
        if (!selectedFriends.value.size) return;
        for (const item of friendsListTable.data) {
            if (selectedFriends.value.has(item.id)) {
                console.log(`Unfriending ${item.displayName} (${item.id})`);
                await friendRequest.deleteFriend({ userId: item.id }).then((args) => handleFriendDelete(args));
                selectedFriends.value.delete(item.id);
            }
        }
        ElMessageBox.alert(`Unfriended ${selectedFriends.value.size} friends.`, 'Bulk Unfriend Complete', {
            confirmButtonText: 'OK',
            type: 'success'
        });
        selectedFriends.value.clear();
    }

    async function friendsListLoadUsers() {
        const toFetch = Array.from(friends.value.values())
            .filter((ctx) => ctx.ref && !ctx.ref.date_joined)
            .map((ctx) => ctx.id);
        const total = toFetch.length;
        friendsListLoadingTotal.value = total;
        friendsListLoadingCurrent.value = 0;
        if (!total) {
            ElMessage.success(t('view.friend_list.load_complete'));
            return;
        }
        friendsListLoading.value = true;
        friendsListLoadDialogVisible.value = true;
        let cancelled = false;
        for (const userId of toFetch) {
            if (!friendsListLoading.value) {
                cancelled = true;
                break;
            }
            friendsListLoadingCurrent.value += 1;
            try {
                await userRequest.getUser({ userId });
            } catch (err) {
                console.error(err);
            }
        }
        friendsListLoading.value = false;
        friendsListLoadDialogVisible.value = false;
        friendsListLoadingCurrent.value = 0;
        friendsListLoadingTotal.value = 0;
        if (!cancelled) {
            ElMessage.success(t('view.friend_list.load_complete'));
        }
    }

    function cancelFriendsListLoad() {
        friendsListLoading.value = false;
        friendsListLoadDialogVisible.value = false;
    }

    function selectFriendsListRow(val) {
        if (!val) return;
        if (!val.id) emit('lookup-user', val);
        else showUserDialog(val.id);
    }

    function sortAlphabetically(a, b, field) {
        if (!a[field] || !b[field]) return 0;
        return a[field].toLowerCase().localeCompare(b[field].toLowerCase());
    }

    function sortLanguages(a, b) {
        const as = a.$languages.map((i) => i.value).sort();
        const bs = b.$languages.map((i) => i.value).sort();
        return JSON.stringify(as).localeCompare(JSON.stringify(bs));
    }

    function openChartsTab() {
        router.push({ name: 'charts' });
    }
</script>

<style scoped>
    .friends-list-avatar {
        object-fit: cover;
        height: 22px;
        width: 22px;
    }
</style>
