<template>
    <Page>
        <NotFound v-if="!$isGranted('users') && !$isGranted('community')" />
        <div v-else>
            <p>
                <nuxt-link to="/admin">
                    <Icon v="user-cog" />
                    <T>admin.header</T>
                </nuxt-link>
            </p>
            <h2>
                <Icon v="siren-on" />
                Abuse reports
                ({{ abuseReportsActiveCount }})
            </h2>

            <form class="row mt-3">
                <div class="col">
                    <select v-model="filterAutomatic" class="form-select">
                        <option :value="undefined">
                            All report types
                        </option>
                        <option :value="true">
                            Only automatic keywords
                        </option>
                        <option :value="false">
                            Only user reports
                        </option>
                    </select>
                </div>
                <div class="col">
                    <select v-model="filterKeyword" class="form-select">
                        <option :value="undefined">
                            All automatic keywords
                        </option>
                        <option v-for="keyword in keywords" :value="keyword">
                            {{ keyword }}
                        </option>
                    </select>
                </div>
                <div class="col">
                    <select v-model="filterLocale" class="form-select">
                        <option :value="undefined">
                            All language versions
                        </option>
                        <option v-for="locale in $locales" :value="locale.code">
                            {{ locale.name }}
                        </option>
                    </select>
                </div>
                <div class="col">
                    <select v-model="filterIsHandled" class="form-select">
                        <option :value="undefined">
                            All report statuses
                        </option>
                        <option :value="true">
                            Only handled reports
                        </option>
                        <option :value="false">
                            Only open reports
                        </option>
                    </select>
                </div>
            </form>

            <section>
                <ModerationRules type="rulesUsers" emphasise />
                <ModerationRules type="susRegexes" label="Keywords for automated triggers" />
                <Loading :value="filteredAbuseReports">
                    <AbuseReports :abuse-reports="filteredAbuseReports" allow-resolving allow-queue />
                </Loading>
            </section>
        </div>
    </Page>
</template>

<script>
import { head } from '../src/helpers.ts';

export default {
    async asyncData({ app }) {
        const abuseReports = await app.$axios.$get('/admin/reports');
        let keywords = new Set();

        for (const report of abuseReports) {
            if (!report.isAutomatic || report.comment.indexOf(' (') < 0) {
                continue;
            }
            for (const keyword of report.comment.split(', ')) {
                keywords.add(keyword.substring(0, keyword.indexOf(' (')));
            }
        }

        keywords = [...keywords].sort();

        return {
            abuseReports,
            keywords,
        };
    },
    data() {
        return {
            filterAutomatic: undefined,
            filterKeyword: undefined,
            filterIsHandled: false,
            filterLocale: this.$config.locale,
        };
    },
    head() {
        return head({
            title: `${this.$t('admin.header')} • Abuse reports`,
        }, this.$translator);
    },
    computed: {
        abuseReportsActiveCount() {
            return this.abuseReports ? this.abuseReports.filter((r) => !r.isHandled).length : '–';
        },
        filteredAbuseReports() {
            if (this.abuseReports === undefined) {
                return undefined;
            }

            return this.abuseReports.filter((r) => {
                if (this.filterAutomatic === true && r.isAutomatic !== 1) {
                    return false;
                }
                if (this.filterAutomatic === false && r.isAutomatic !== 0) {
                    return false;
                }

                if (this.filterKeyword && r.comment) {
                    let found = false;
                    for (const keyword of r.comment.split(', ')) {
                        if (keyword.startsWith(`${this.filterKeyword} (`)) {
                            found = true;
                        }
                    }
                    if (!found) {
                        return false;
                    }
                }

                if (this.filterIsHandled === true && r.isHandled !== 1) {
                    return false;
                }
                if (this.filterIsHandled === false && r.isHandled !== 0) {
                    return false;
                }

                if (this.filterLocale && r.profiles && !r.profiles.split(',').includes(this.filterLocale)) {
                    return false;
                }

                return true;
            });
        },
    },
};
</script>
