<template>
	<MkStickyContainer>
		<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
		<MkSpacer :content-max="680" :margin-min="20">
			<div class="yumeFortune">
				<section v-if="result" class="result _panel">
					<div class="symbol">{{ result.symbol }}</div>
					<div class="label">{{ i18n.ts.yumeFortuneToday }}</div>
					<h1>{{ result.title }}</h1>
					<p>{{ result.text }}</p>
					<div class="hint">{{ result.hint }}</div>
				</section>
				<section v-else class="result waiting _panel">
					<div class="symbol">?</div>
					<div class="label">{{ i18n.ts.yumeFortuneToday }}</div>
					<h1>{{ i18n.ts.yumeFortuneBeforeTitle }}</h1>
					<p>{{ i18n.ts.yumeFortuneBeforeText }}</p>
				</section>

				<div class="actions">
					<MkButton primary @click="draw">
						<i class="ph-cards ph-bold ph-lg"></i>
						{{ result ? i18n.ts.yumeFortuneShuffle : i18n.ts.yumeFortuneDraw }}
					</MkButton>
					<MkButton v-if="result" @click="share">
						<i class="ph-pencil-line ph-bold ph-lg"></i>
						{{ i18n.ts.share }}
					</MkButton>
				</div>
			</div>
		</MkSpacer>
	</MkStickyContainer>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import MkButton from "@/components/MkButton.vue";
import * as os from "@/os";
import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata";

const selectedIndex = ref<number | null>(null);

const fortunes = computed(() => [
	{
		symbol: "✦",
		title: i18n.ts.yumeFortuneResultBright,
		text: i18n.ts.yumeFortuneResultBrightText,
		hint: i18n.ts.yumeFortuneResultBrightHint,
	},
	{
		symbol: "◇",
		title: i18n.ts.yumeFortuneResultCalm,
		text: i18n.ts.yumeFortuneResultCalmText,
		hint: i18n.ts.yumeFortuneResultCalmHint,
	},
	{
		symbol: "☾",
		title: i18n.ts.yumeFortuneResultDeep,
		text: i18n.ts.yumeFortuneResultDeepText,
		hint: i18n.ts.yumeFortuneResultDeepHint,
	},
	{
		symbol: "＊",
		title: i18n.ts.yumeFortuneResultPlay,
		text: i18n.ts.yumeFortuneResultPlayText,
		hint: i18n.ts.yumeFortuneResultPlayHint,
	},
	{
		symbol: "○",
		title: i18n.ts.yumeFortuneResultFresh,
		text: i18n.ts.yumeFortuneResultFreshText,
		hint: i18n.ts.yumeFortuneResultFreshHint,
	},
]);

const result = computed(() => selectedIndex.value == null ? null : fortunes.value[selectedIndex.value]);

function draw() {
	selectedIndex.value = Math.floor(Math.random() * fortunes.value.length);
}

function share() {
	if (!result.value) return;
	os.post({
		initialText: `${i18n.ts.yumeFortune}: ${result.value.title}\n${result.value.text}\n#YumeFortune`,
		instant: true,
	});
}

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

definePageMetadata({
	title: i18n.ts.yumeFortune,
	icon: "ph-cards ph-bold ph-lg",
});
</script>

<style lang="scss" scoped>
.yumeFortune {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.result {
	position: relative;
	overflow: hidden;
	padding: 28px;
	text-align: center;
	border-radius: var(--radius);
	background:
		radial-gradient(circle at top left, var(--accentedBg), transparent 38%),
		var(--panel);

	> .symbol {
		width: 72px;
		height: 72px;
		margin: 0 auto 14px;
		display: grid;
		place-items: center;
		color: var(--fgOnAccent);
		background: var(--accent);
		border-radius: 50%;
		font-size: 34px;
		line-height: 1;
	}

	&.waiting > .symbol {
		color: var(--accent);
		background: var(--buttonBg);
	}

	> .label {
		color: var(--fgTransparentWeak);
		font-size: 0.92em;
	}

	> h1 {
		margin: 8px 0 12px;
		font-size: 1.6em;
		line-height: 1.35;
	}

	> p {
		margin: 0;
		line-height: 1.8;
	}

	> .hint {
		margin-top: 18px;
		padding: 12px 14px;
		color: var(--fg);
		background: var(--buttonBg);
		border-radius: var(--radius);
		line-height: 1.6;
	}
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
</style>
