<template>
    <MkStickyContainer>
        <template #header><MkPageHeader /></template>
        <MkSpacer :content-max="800">
            <MagPagination
                ref="paginationComponent"
                :pagination="followRequestPagination"
            >
                <template #empty>
                    <div class="_fullinfo">
                        <img
                            src="/static-assets/badges/info.png"
                            aria-label="none"
                            class="_ghost"
                        />
                        <div>{{ i18n.ts.noFollowRequests }}</div>
                    </div>
                </template>
                <template #items="{ items: users }">
                    <MkInfo v-if="$i?.isLocked === false" warn class="info"
                        >{{ i18n.ts.silencedWarning }}
                    </MkInfo>
                    <div class="mk-follow-requests">
                        <div
                            v-for="user in users"
                            :key="user.id"
                            class="user _panel"
                        >
                            <div class="header">
                                <MagAvatar class="avatar" :user="user" />
                                <div class="name">
                                    <MkA
                                        v-user-preview="user.id"
                                        class="name"
                                        :to="userPage(user)"
                                        ><MkUserName :user="user"
                                    /></MkA>
                                    <p class="acct">@{{ acct(user) }}</p>
                                </div>
                                <div class="actions">
                                    <button
                                        class="_button"
                                        :aria-label="i18n.ts.accept"
                                        @click="accept(user)"
                                    >
                                        <i class="ph-check ph-bold ph-lg"></i>
                                    </button>
                                    <button
                                        class="_button"
                                        :aria-label="i18n.ts.reject"
                                        @click="reject(user)"
                                    >
                                        <i class="ph-x ph-bold ph-lg"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="moved" v-if="user.moved_to">
                                {{ i18n.ts.accountMoved }}
                                <MagMention
                                    class="link"
                                    :username="user.moved_to.username"
                                    :host="user.moved_to.host"
                                />
                            </div>
                            <div class="remote" v-if="user.host != null">
                                {{ i18n.ts.remoteUserCaution }}
                                <a
                                    class="link"
                                    :href="user.url!"
                                    rel="nofollow noopener"
                                    target="_blank"
                                    >{{ i18n.ts.showOnRemote }}</a
                                >
                            </div>
                            <div class="description">
                                <div v-if="user.description" class="mfm">
                                    <Mfm
                                        :mm="user.description_mm"
                                        :text="user.description"
                                        :author="user"
                                        :i="$i"
                                        :custom-emojis="user.emojis"
                                    />
                                </div>
                                <span v-else style="opacity: 0.7">{{
                                    i18n.ts.noAccountDescription
                                }}</span>
                            </div>
                            <div class="fields">
                                <dl class="field">
                                    <dt class="name">
                                        <i
                                            class="ph-calendar-blank ph-bold ph-lg ph-fw ph-lg"
                                        ></i>
                                        {{ i18n.ts.registeredDate }}
                                    </dt>
                                    <dd class="value">
                                        {{
                                            new Date(
                                                user.created_at,
                                            ).toLocaleString()
                                        }}
                                        (<MkTime :time="user.created_at" />)
                                    </dd>
                                </dl>
                            </div>
                            <div v-if="user.fields?.length > 0" class="fields">
                                <dl
                                    v-for="(field, i) in user.fields"
                                    :key="i"
                                    class="field"
                                >
                                    <dt class="name">
                                        <Mfm
                                            :text="field.name"
                                            :plain="true"
                                            :custom-emojis="user.emojis"
                                            :colored="false"
                                        />
                                    </dt>
                                    <dd class="value">
                                        <Mfm
                                            :mm="field.value_mm ?? undefined"
                                            :text="field.value"
                                            :author="user"
                                            :i="$i"
                                            :custom-emojis="user.emojis"
                                            :colored="false"
                                        />
                                    </dd>
                                </dl>
                            </div>
                            <div class="status">
                                <div>
                                    <p>{{ i18n.ts.notes }}</p>
                                    <MkNumber :value="user.note_count" />
                                </div>
                                <div>
                                    <p>{{ i18n.ts.following }}</p>
                                    <MkNumber :value="user.following_count" />
                                </div>
                                <div>
                                    <p>{{ i18n.ts.followers }}</p>
                                    <MkNumber :value="user.follower_count" />
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </MagPagination>
        </MkSpacer>
    </MkStickyContainer>
</template>

<script lang="ts" setup>
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import { acct, userPage } from "@/filters/user";
import * as os from "@/os";
import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata";
import { $i } from "@/account";
import { globalEvents } from "@/events";
import MagPagination, { Paging } from "@/components/MagPagination.vue";
import { endpoints, types } from "magnetar-common";
import MkInfo from "@/components/MkInfo.vue";
import MkNumber from "@/components/MkNumber.vue";
import MkTime from "@/components/global/MkTime.vue";
import Mfm from "@/components/mfm.vue";
import MagMention from "@/components/MagMention.vue";

const paginationComponent = ref<InstanceType<typeof MagPagination>>();

const followRequestPagination: Paging = {
    endpoint: endpoints.GetFollowRequestsSelf,
    limit: 20,
    pathParams: {},
    params: {},
};

onMounted(() => {
    globalEvents.on(
        "followeeProcessed",
        paginationComponent.value.reload,
        this,
    );
});

onBeforeUnmount(() => {
    globalEvents.off(
        "followeeProcessed",
        paginationComponent.value.reload,
        this,
    );
});

function accept(user: types.Id) {
    os.api("following/requests/accept", { userId: user.id }).then(() => {
        globalEvents.emit("followeeProcessed", user);
    });
}

function reject(user: types.Id) {
    os.api("following/requests/reject", { userId: user.id }).then(() => {
        globalEvents.emit("followeeProcessed", user);
    });
}

const headerActions = computed(() => []);

const headerTabs = computed(() => []);

definePageMetadata(
    computed(() => ({
        title: i18n.ts.followRequests,
        icon: "ph-hand-waving ph-bold ph-lg",
    })),
);
</script>

<style lang="scss" scoped>
.mk-follow-requests {
    > .user {
        display: flex;
        flex-direction: column;
        margin: 10px 0 auto;

        > .header {
            display: flex;
            padding: 16px;
            flex-direction: row;

            > .avatar {
                display: block;
                flex-shrink: 0;
                margin: 0 12px 0 0;
                width: 42px;
                height: 42px;
                border-radius: 8px;
            }

            > .name {
                flex-grow: 1;
                overflow: auto;

                > .name,
                > .acct {
                    display: block;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    margin: 0;
                }

                > .name {
                    font-size: 16px;
                    line-height: 24px;
                }

                > .acct {
                    font-size: 15px;
                    line-height: 16px;
                    opacity: 0.7;
                }
            }

            > .actions {
                flex-shrink: 0;

                > button {
                    padding: 12px;
                }
            }
        }

        > .moved,
        > .remote {
            padding: 16px;
            font-size: 0.8em;
            border-top: solid 0.5px var(--divider);
            color: var(--infoWarnFg);

            > .link {
                margin-left: 4px;
                text-decoration: underline;
                color: var(--accent);

                &:hover {
                    text-decoration: none;
                }
            }
        }

        > .description {
            padding: 16px;
            font-size: 0.8em;
            border-top: solid 0.5px var(--divider);

            > .mfm {
                display: -webkit-box;
                -webkit-line-clamp: 10;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }

        > .fields {
            border-top: solid 0.5px var(--divider);
            padding: 10px 16px;
            font-size: 0.9em;

            > .field {
                display: flex;
                gap: 8px;
                padding: 0;
                margin: 0;
                align-items: center;

                &:not(:last-child) {
                    margin-bottom: 8px;
                }

                > .name {
                    flex-basis: 33%;
                    flex-shrink: 0;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    font-weight: bold;
                    text-align: center;
                }

                > .value {
                    flex-grow: 1;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin: 0;
                    text-align: center;
                }
            }
        }

        > .status {
            padding: 10px 16px 16px;
            border-top: solid 0.5px var(--divider);

            > div {
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                width: 33%;

                > p {
                    margin: 0;
                    font-size: 0.7em;
                    color: var(--fg);
                }

                > span {
                    font-size: 1em;
                    color: var(--accent);
                }
            }
        }
    }
}
</style>
