<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->

<template>
	<div>
		<MkStickyContainer>
			<template #header>
				<XHeader :tabs="headerTabs" />
			</template>

			<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
				<FormSuspense :p="init">
					<div class="_gaps_m">
						<!-- Existing branding fields: icons, banners, etc. -->
						<MkInput v-model="iconUrl" type="url">
							<template #prefix><i class="ti ti-link"></i></template>
							<template #label>{{ i18n.ts._serverSettings.iconUrl }}</template>
						</MkInput>

						<MkInput v-model="app192IconUrl" type="url">
							<template #prefix><i class="ti ti-link"></i></template>
							<template #label>{{ i18n.ts._serverSettings.iconUrl }} (App/192px)</template>
							<template #caption>
								<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? host }) }}</div>
								<div>({{ i18n.ts._serverSettings.appIconUsageExample }})</div>
								<div>{{ i18n.ts._serverSettings.appIconStyleRecommendation }}</div>
								<div>
									<strong>
										{{
											i18n.tsx._serverSettings.appIconResolutionMustBe({ resolution: '192x192px' })
										}}
									</strong>
								</div>
							</template>
						</MkInput>

						<MkInput v-model="app512IconUrl" type="url">
							<template #prefix><i class="ti ti-link"></i></template>
							<template #label>{{ i18n.ts._serverSettings.iconUrl }} (App/512px)</template>
							<template #caption>
								<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? host }) }}</div>
								<div>({{ i18n.ts._serverSettings.appIconUsageExample }})</div>
								<div>{{ i18n.ts._serverSettings.appIconStyleRecommendation }}</div>
								<div>
									<strong>
										{{
											i18n.tsx._serverSettings.appIconResolutionMustBe({ resolution: '512x512px' })
										}}
									</strong>
								</div>
							</template>
						</MkInput>

						<MkInput v-model="sidebarLogoUrl" type="url">
							<template #prefix><i class="ti ti-link"></i></template>
							<template #label>{{ i18n.ts._serverSettings.sidebarLogoUrl }}</template>
							<template #caption>
								<div>{{ i18n.ts._serverSettings.sidebarLogoDescription }}</div>
								<div>({{ i18n.ts._serverSettings.sidebarLogoUsageExample }})</div>
							</template>
						</MkInput>

						<MkInput v-model="bannerUrl" type="url">
							<template #prefix><i class="ti ti-link"></i></template>
							<template #label>{{ i18n.ts.bannerUrl }}</template>
						</MkInput>

						<MkInput v-model="backgroundImageUrl" type="url">
							<template #prefix><i class="ti ti-link"></i></template>
							<template #label>{{ i18n.ts.backgroundImageUrl }}</template>
						</MkInput>

						<FromSlot>
							<template #label>{{ i18n.ts.defaultLike }}</template>
							<MkCustomEmoji
								v-if="defaultLike.startsWith(':')"
								style="max-height: 3em; font-size: 1.1em;"
								:useOriginalSize="false"
								:name="defaultLike"
								:normal="true"
								:noStyle="true"
							/>
							<MkEmoji
								v-else
								:emoji="defaultLike"
								style="max-height: 3em; font-size: 1.1em;"
								:normal="true"
								:noStyle="true"
							/>
							<MkButton rounded :small="true" @click="chooseNewLike"
							><i class="ph-smiley ph-bold ph-lg"></i> Change</MkButton
							>
						</FromSlot>

						<MkInput v-model="notFoundImageUrl" type="url">
							<template #prefix><i class="ti ti-link"></i></template>
							<template #label>{{ i18n.ts.notFoundDescription }}</template>
						</MkInput>

						<MkInput v-model="infoImageUrl" type="url">
							<template #prefix><i class="ti ti-link"></i></template>
							<template #label>{{ i18n.ts.nothing }}</template>
						</MkInput>

						<MkInput v-model="serverErrorImageUrl" type="url">
							<template #prefix><i class="ti ti-link"></i></template>
							<template #label>{{ i18n.ts.somethingHappened }}</template>
						</MkInput>

						<MkColorInput v-model="themeColor">
							<template #label>{{ i18n.ts.themeColor }}</template>
						</MkColorInput>

						<MkTextarea v-model="defaultLightTheme">
							<template #label>{{ i18n.ts.instanceDefaultLightTheme }}</template>
							<template #caption>{{ i18n.ts.instanceDefaultThemeDescription }}</template>
						</MkTextarea>

						<MkTextarea v-model="defaultDarkTheme">
							<template #label>{{ i18n.ts.instanceDefaultDarkTheme }}</template>
							<template #caption>{{ i18n.ts.instanceDefaultThemeDescription }}</template>
						</MkTextarea>

						<MkInput v-model="repositoryUrl" type="url">
							<template #prefix><i class="ti ti-link"></i></template>
							<template #label>{{ i18n.ts.repositoryUrl }}</template>
						</MkInput>

						<MkInput v-model="feedbackUrl" type="url">
							<template #prefix><i class="ti ti-link"></i></template>
							<template #label>{{ i18n.ts.feedbackUrl }}</template>
						</MkInput>

						<MkTextarea v-model="manifestJsonOverride">
							<template #label>{{ i18n.ts._serverSettings.manifestJsonOverride }}</template>
						</MkTextarea>

						<!--
							NEW SECTION: Up to 5 custom links (each with URL and Label).
							If you only want a single input, remove the "label" part.
						-->
						<hr />
						<h3>Landing Page Links (Up to 5)</h3>

						<!-- Link 1 -->
						<MkInput v-model="link1Url" type="url">
							<template #prefix><i class="ti ti-link"></i></template>
							<template #label>Link 1 URL</template>
						</MkInput>
						<MkInput v-model="link1Label" type="text">
							<template #prefix><i class="ti ti-typography"></i></template>
							<template #label>Link 1 Label</template>
						</MkInput>

						<!-- Link 2 -->
						<MkInput v-model="link2Url" type="url">
							<template #prefix><i class="ti ti-link"></i></template>
							<template #label>Link 2 URL</template>
						</MkInput>
						<MkInput v-model="link2Label" type="text">
							<template #prefix><i class="ti ti-typography"></i></template>
							<template #label>Link 2 Label</template>
						</MkInput>

						<!-- Link 3 -->
						<MkInput v-model="link3Url" type="url">
							<template #prefix><i class="ti ti-link"></i></template>
							<template #label>Link 3 URL</template>
						</MkInput>
						<MkInput v-model="link3Label" type="text">
							<template #prefix><i class="ti ti-typography"></i></template>
							<template #label>Link 3 Label</template>
						</MkInput>

						<!-- Link 4 -->
						<MkInput v-model="link4Url" type="url">
							<template #prefix><i class="ti ti-link"></i></template>
							<template #label>Link 4 URL</template>
						</MkInput>
						<MkInput v-model="link4Label" type="text">
							<template #prefix><i class="ti ti-typography"></i></template>
							<template #label>Link 4 Label</template>
						</MkInput>

						<!-- Link 5 -->
						<MkInput v-model="link5Url" type="url">
							<template #prefix><i class="ti ti-link"></i></template>
							<template #label>Link 5 URL</template>
						</MkInput>
						<MkInput v-model="link5Label" type="text">
							<template #prefix><i class="ti ti-typography"></i></template>
							<template #label>Link 5 Label</template>
						</MkInput>
					</div>
				</FormSuspense>
			</MkSpacer>

			<template #footer>
				<div :class="$style.footer">
					<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
						<MkButton primary rounded @click="save"
						><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton
						>
					</MkSpacer>
				</div>
			</template>
		</MkStickyContainer>
	</div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import JSON5 from 'json5';
import XHeader from './_header_.vue';
import MkInput from '@/components/MkInput.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import FromSlot from '@/components/form/slot.vue';
import FormSuspense from '@/components/form/suspense.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { instance, fetchInstance } from '@/instance.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import MkButton from '@/components/MkButton.vue';
import MkColorInput from '@/components/MkColorInput.vue';
import { host } from '@@/js/config.js';

// Existing fields
const iconUrl = ref<string | null>(null);
const sidebarLogoUrl = ref<string | null>(null);
const app192IconUrl = ref<string | null>(null);
const app512IconUrl = ref<string | null>(null);
const bannerUrl = ref<string | null>(null);
const backgroundImageUrl = ref<string | null>(null);
const themeColor = ref<string | null>(null);
const defaultLightTheme = ref<string | null>(null);
const defaultDarkTheme = ref<string | null>(null);
const defaultLike = ref<string>('');
const serverErrorImageUrl = ref<string | null>(null);
const infoImageUrl = ref<string | null>(null);
const notFoundImageUrl = ref<string | null>(null);
const repositoryUrl = ref<string | null>(null);
const feedbackUrl = ref<string | null>(null);
const manifestJsonOverride = ref<string>('{}');

// NEW link fields, each storing { url, label }
const link1Url = ref<string | null>(null);
const link1Label = ref<string | null>(null);
const link2Url = ref<string | null>(null);
const link2Label = ref<string | null>(null);
const link3Url = ref<string | null>(null);
const link3Label = ref<string | null>(null);
const link4Url = ref<string | null>(null);
const link4Label = ref<string | null>(null);
const link5Url = ref<string | null>(null);
const link5Label = ref<string | null>(null);


// -------------------------
// INIT: Load existing meta
// -------------------------
async function init() {
	const metaData = await misskeyApi('admin/meta');

	// Existing fields
	iconUrl.value = metaData.iconUrl;
	sidebarLogoUrl.value = metaData.sidebarLogoUrl;
	app192IconUrl.value = metaData.app192IconUrl;
	app512IconUrl.value = metaData.app512IconUrl;
	bannerUrl.value = metaData.bannerUrl;
	backgroundImageUrl.value = metaData.backgroundImageUrl;
	themeColor.value = metaData.themeColor;
	defaultLightTheme.value = metaData.defaultLightTheme;
	defaultDarkTheme.value = metaData.defaultDarkTheme;
	defaultLike.value = metaData.defaultLike;
	serverErrorImageUrl.value = metaData.serverErrorImageUrl;
	infoImageUrl.value = metaData.infoImageUrl;
	notFoundImageUrl.value = metaData.notFoundImageUrl;
	repositoryUrl.value = metaData.repositoryUrl;
	feedbackUrl.value = metaData.feedbackUrl;
		// NEW: Link fields
link1Url.value = metaData.link1Url ?? '';
link1Label.value = metaData.link1Label ?? '';
link2Url.value = metaData.link2Url ?? '';
link2Label.value = metaData.link2Label ?? '';
link3Url.value = metaData.link3Url ?? '';
link3Label.value = metaData.link3Label ?? '';
link4Url.value = metaData.link4Url ?? '';
link4Label.value = metaData.link4Label ?? '';
link5Url.value = metaData.link5Url ?? '';
link5Label.value = metaData.link5Label ?? '';

	// Manifest override, ensuring valid JSON
	manifestJsonOverride.value =
		metaData.manifestJsonOverride === ''
			? '{}'
			: JSON.stringify(JSON.parse(metaData.manifestJsonOverride), null, '\t');
}

// -------------------------
// SAVE: Push new meta to backend
// -------------------------
function save() {
	os.apiWithDialog('admin/update-meta', {
		// Existing fields
		iconUrl: iconUrl.value,
		sidebarLogoUrl: sidebarLogoUrl.value,
		app192IconUrl: app192IconUrl.value,
		app512IconUrl: app512IconUrl.value,
		bannerUrl: bannerUrl.value,
		backgroundImageUrl: backgroundImageUrl.value,
		link1Url: link1Url.value,
    link1Label: link1Label.value,
    link2Url: link2Url.value,
    link2Label: link2Label.value,
    link3Url: link3Url.value,
    link3Label: link3Label.value,
    link4Url: link4Url.value,
    link4Label: link4Label.value,
    link5Url: link5Url.value,
    link5Label: link5Label.value,
		themeColor: themeColor.value === '' ? null : themeColor.value,
		defaultLightTheme:
			defaultLightTheme.value === '' ? null : defaultLightTheme.value,
		defaultDarkTheme:
			defaultDarkTheme.value === '' ? null : defaultDarkTheme.value,
		infoImageUrl: infoImageUrl.value === '' ? null : infoImageUrl.value,
		notFoundImageUrl:
			notFoundImageUrl.value === '' ? null : notFoundImageUrl.value,
		serverErrorImageUrl:
			serverErrorImageUrl.value === '' ? null : serverErrorImageUrl.value,
		repositoryUrl: repositoryUrl.value === '' ? null : repositoryUrl.value,
		feedbackUrl: feedbackUrl.value === '' ? null : feedbackUrl.value,
		manifestJsonOverride:
			manifestJsonOverride.value === ''
				? '{}'
				: JSON.stringify(JSON5.parse(manifestJsonOverride.value)),
	}).then(() => {
		// Refresh instance data
		fetchInstance(true);
	});
}

// -------------------------
// MISC: Choose new default like
// -------------------------
function chooseNewLike(ev: MouseEvent) {
	os.pickEmoji(ev.currentTarget ?? ev.target, {
		showPinned: false,
	}).then(emoji => {
		os.apiWithDialog('admin/update-meta', {
			defaultLike: emoji,
		}).then(() => {
			fetchInstance();
			defaultLike.value = emoji as string;
		});
	});
}

// -------------------------
// PAGE SETUP
// -------------------------
const headerTabs = computed(() => []);

definePageMetadata(() => ({
	title: i18n.ts.branding,
	icon: 'ti ti-paint',
}));
</script>

<style lang="scss" module>
.footer {
	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
	backdrop-filter: var(--MI-blur, blur(15px));
}
</style>
