<template>
	<MkStickyContainer>
		<template #header>
			<MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true" />
		</template>
		<MkSpacer :content-max="900">
			<div class="adService">
				<div class="_panel section">
					<h2>広告投稿</h2>
					<MkPagination v-slot="{ items }" ref="paging" :pagination="pagination">
						<div v-for="item in items" :key="item.id" class="adItem _panel">
							<MkNote :note="item.note" />
							<div class="meta">
								<div>
									<span>残クレジット</span>
									<b>{{ item.remainingCredits }}</b>
								</div>
								<div>
									<span>総クレジット</span>
									<b>{{ item.totalCredits }}</b>
								</div>
								<div>
									<span>失効クレジット</span>
									<b>{{ item.expiredCredits }}</b>
								</div>
								<div>
									<span>期限</span>
									<b>{{ item.expiresAt ? new Date(item.expiresAt).toLocaleString() : "-" }}</b>
								</div>
							</div>
							<div class="controls">
								<MkInput v-model="adForm(item.id).credits" type="number" min="1">
									<template #label>追加クレジット</template>
								</MkInput>
								<MkInput v-model="adForm(item.id).days" type="number" min="1">
									<template #label>有効日数</template>
								</MkInput>
								<MkButton primary @click="issue(item.id)">
									<i class="ph-coins ph-bold ph-lg"></i>
									発行
								</MkButton>
							</div>
						</div>
					</MkPagination>
				</div>
			</div>
		</MkSpacer>
	</MkStickyContainer>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import MkButton from "@/components/MkButton.vue";
import MkInput from "@/components/form/input.vue";
import MkNote from "@/components/MkNote.vue";
import MkPagination from "@/components/MkPagination.vue";
import * as os from "@/os";
import { definePageMetadata } from "@/scripts/page-metadata";

const paging = ref<InstanceType<typeof MkPagination>>();
const form = reactive<Record<string, { credits: number; days: number }>>({});

const pagination = {
	endpoint: "admin/promo/list" as const,
	limit: 10,
};

async function issue(noteId: string) {
	const values = form[noteId] ?? { credits: 1, days: 30 };
	await os.apiWithDialog("admin/promo/create", {
		noteId,
		credits: Number(values.credits || 1),
		expiresAt: Date.now() + 86400000 * Number(values.days || 30),
	});
	paging.value?.reload();
}

function adForm(noteId: string) {
	if (!form[noteId]) form[noteId] = { credits: 1, days: 30 };
	return form[noteId];
}

const headerActions = [];
const headerTabs = [];

definePageMetadata({
	title: "広告",
	icon: "ph-megaphone-simple ph-bold ph-lg",
});
</script>

<style lang="scss" scoped>
.section {
	padding: 24px;

	> h2 {
		margin: 0 0 16px;
		font-size: 1.1em;
	}
}

.adItem {
	padding: 16px;
	margin: 0 0 16px;
}

.meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin: 12px 0;

	> div {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	span {
		color: var(--fgTransparentWeak);
		font-size: 0.85em;
	}
}

.controls {
	display: grid;
	grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) auto;
	align-items: end;
	gap: 12px;
}

@media (max-width: 600px) {
	.controls {
		grid-template-columns: 1fr;
	}
}
</style>
