<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./index.js"
import ServerSettingLayout from "@/layouts/ServerSettingLayout.vue";
import PostForm from "@/components/form/PostForm.vue";
import ServerFeatureRequired from "@/components/server/ServerFeatureRequired.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import HTTPCCConfigBox from "@/components/server/HTTPCCConfigBox.vue";
import TTab from "@/components/ui/TTab.vue";
import TTabView from "@/components/ui/TTabView.vue";
import TTabs from "@/components/ui/TTabs.vue";
import CardView from "@/components/common/CardView.vue";
import CardRow from "@/components/common/CardRow.vue";
import TProgressBar from "@/components/ui/TProgressBar.vue";
import TMenu from "@/components/ui/TMenu.vue";
import TButton from "@/components/ui/TButton.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";
import TipIcon from "@/components/common/TipIcon.vue";
import TDivider from "@/components/ui/TDivider.vue";
import {ref} from "vue";

const ipMenuRef = ref()
const ipItemMenuRef = ref()
const ctx = ctxRef(new Context())

</script>

<template>
	<ServerSettingLayout :ctx="ctx">
		<TTabView v-model="ctx.tab" @change="ctx.changeTab">
			<TTabs>
				<TTab code="ipStat">IP即时统计</TTab>
				<TTab code="deniedIP">被拦截IP</TTab>
				<TTab code="events">检测事件
					<i class="pi pi-circle-fill text-red-400 dark:text-red-600" style="font-size: 0.1em" v-if="ctx.hasUnreadEvents"></i>
				</TTab>
			</TTabs>
		</TTabView>

		<div class="my-4">
			<!-- IP统计排行 -->
			<div v-show="ctx.tab == 'ipStat'">
				<CardView v-if="ctx.topIPStats && ctx.topIPStats.length > 0">
					<template #header>最近5分钟访问量IP排行<span class="text-sm gray">（访问量为估算）</span></template>
					<CardRow v-for="(ipStat, index) in ctx.topIPStats">
						<template #name>
							<div>
								<TProgressBar class="!h-1.5 lg:w-[14em]" :value="ipStat.percent" :show-value="false"></TProgressBar>
								<div class="mt-2 flex flex-col gap-3 text-surface">
									<div class="font-medium">
										IP：{{ ipStat.ip }}
										<a :href="'/servers/iplists?ip=' + ipStat.ip" target="_blank" v-if="ipStat.isDenied"><span class="red font-normal text-sm ml-2">已拦截</span></a>
										<a :href="'/servers/iplists?ip=' + ipStat.ip" target="_blank" v-if="ipStat.isAllowed"><span class="green font-normal text-sm ml-2">已放行</span></a>

										<TMenu ref="ipMenuRef" :items="ctx.createIPMenu(ipStat.ip)" :popup="true"></TMenu>
										<TButton v-if="!ipStat.isDenied && !ipStat.isAllowed" icon="pi pi-ellipsis-v" link size="small" @click.prevent="ipMenuRef[index].toggle($event)"/>
									</div>
									<div>平均访问量：{{ ctx.$utils.formatNumber(ipStat.avgRequests) }}/秒</div>
									<div>总访问量：{{ ctx.$utils.formatNumber(ipStat.countRequests) }}</div>
									<div>IP信息：{{ ipStat.summary }}</div>
								</div>
							</div>
						</template>
					</CardRow>
				</CardView>
				<NotFoundInfo v-else>暂时还没有需要被关注的IP。不展示访问量较小的IP。</NotFoundInfo>
			</div>

			<!-- IP拦截记录 -->
			<div v-show="ctx.tab == 'deniedIP'">
				<CardView v-if="ctx.deniedIPItems && ctx.deniedIPItems.length > 0">
					<template #header>最近被拦截的IP</template>
					<CardRow v-for="(ipItem, index) in ctx.deniedIPItems">
						<template #name>
							<div class="font-medium text-surface">
								IP：{{ ipItem.ip }}
								<a :href="'/servers/iplists?ip=' + ipItem.ip" target="_blank"><span class="red font-normal text-sm ml-2">已拦截</span></a>

								<TMenu ref="ipItemMenuRef" :items="ctx.createIPItemMenu(ipItem.id)" :popup="true"></TMenu>
								<TButton icon="pi pi-ellipsis-v" link size="small" @click.prevent="ipItemMenuRef[index].toggle($event)"/>
							</div>

							<div class="mt-2 flex flex-col gap-3 text-surface">
								<div>IP信息：{{ ipItem.summary }}</div>
								<div>有效期至：{{ ipItem.expiresTime }}</div>
								<div v-if="ipItem.reason && ipItem.reason.length > 0">拦截原因：{{ ipItem.reason }}</div>
								<div v-if="ipItem.sourceURL">URL：{{ ipItem.sourceURL }}
									<TipIcon content="被封禁时访问的URL，但并不代表该IP只访问了这一个URL。"></TipIcon>
								</div>
								<div v-if="ipItem.sourceUserAgent">客户端信息：{{ ipItem.sourceUserAgent }}
									<TipIcon content="被封禁时访问的UserAgent，但并不代表该IP只使用这一个UserAgent。"></TipIcon>
								</div>
							</div>
						</template>
					</CardRow>
				</CardView>
				<NotFoundInfo v-else>暂时还没有CC相关被拦截的IP。</NotFoundInfo>
			</div>

			<!-- 检测事件 -->
			<div v-show="ctx.tab == 'events'">
				<CardView v-if="ctx.events && ctx.events.length > 0">
					<template #header>检测到的CC事件</template>
					<CardRow v-for="event in ctx.events">
						<template #name>
							<div class="flex flex-col gap-3 text-surface">
								<div class="font-medium">5分钟内访问量：{{ ctx.$utils.formatNumber(event.params.requests) }}</div>
								<div>平均访问量：{{ ctx.$utils.formatNumber(event.params.avgRequests) }}/秒</div>
								<div>触发时间：{{ event.createdTime }}</div>
							</div>
						</template>
					</CardRow>
				</CardView>
				<NotFoundInfo v-else>暂时还没有检测到CC事件。</NotFoundInfo>
			</div>
		</div>

		<TDivider></TDivider>

		<!-- 设置 -->
		<div v-if="ctx.featureIsOn">
			<PostForm action="$" @success="ctx.success">
				<input type="hidden" name="webId" :value="ctx.webId"/>

				<HTTPCCConfigBox :v-cc-config="ctx.ccConfig" :default-thresholds="ctx.defaultThresholds"></HTTPCCConfigBox>

				<div class="submit-button">
					<SubmitButton class="mt-4"></SubmitButton>
				</div>
			</PostForm>
		</div>
		<div v-if="!ctx.featureIsOn">
			<ServerFeatureRequired></ServerFeatureRequired>
		</div>
	</ServerSettingLayout>
</template>

<style lang="postcss" scoped src="@/views/servers/style/server.pcss"></style>