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

<template>
	<div v-if="meta" class="rsqzvsbo">
		<!-- Background photos, etc. -->
		<MkFeaturedPhotos class="bg" />

		<!-- Shape1 bar at the top with instance name -->
		<div v-if="instanceName" class="shape1">
			<h1>{{ instanceName }}</h1>
		</div>

		<!-- Shape2 bar at the bottom with up to five dynamic links -->
		<div class="shape2">
			<!-- Link 1 -->
			<a
				v-if="link1Url"
				:href="link1Url"
				target="_blank"
				rel="noopener noreferrer"
			>
				{{ link1Label || 'Link 1' }}
			</a>

			<!-- Link 2 -->
			<a
				v-if="link2Url"
				:href="link2Url"
				target="_blank"
				rel="noopener noreferrer"
			>
				{{ link2Label || 'Link 2' }}
			</a>

			<!-- Link 3 -->
			<a
				v-if="link3Url"
				:href="link3Url"
				target="_blank"
				rel="noopener noreferrer"
			>
				{{ link3Label || 'Link 3' }}
			</a>

			<!-- Link 4 -->
			<a
				v-if="link4Url"
				:href="link4Url"
				target="_blank"
				rel="noopener noreferrer"
			>
				{{ link4Label || 'Link 4' }}
			</a>

			<!-- Link 5 -->
			<a
				v-if="link5Url"
				:href="link5Url"
				target="_blank"
				rel="noopener noreferrer"
			>
				{{ link5Label || 'Link 5' }}
			</a>
		</div>

		<!-- Logo / "Powered by" section -->
		<div class="logo-wrapper">
			<div class="powered-by">Powered by</div>
			<img :src="misskeysvg" class="misskey" />
		</div>

		<!-- Main content area: visitor dashboard, etc. -->
		<div class="contents">
			<MkVisitorDashboard />
		</div>


	</div>
</template>

<script lang="ts" setup>

import { instance } from '@/instance.js';
import { ref, onMounted } from 'vue';
import { instanceName } from '@@/js/config.js';
import * as Misskey from 'misskey-js';
import MarqueeText from '@/components/MkMarquee.vue';
import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
import MkVisitorDashboard from '@/components/MkVisitorDashboard.vue';
import misskeysvg from '/client-assets/sharkey.svg'; // Sharkey's default logo; adjust if needed
import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js';
import { getProxiedImageUrl } from '@/scripts/media-proxy.js';
import { instance as meta } from '@/instance.js';

// Up to 5 link URLs & labels
const link1Url = ref(instance.link1Url || '');
const link1Label = ref(instance.link1Label || 'Link 1');
const link2Url = ref(instance.link2Url || '');
const link2Label = ref(instance.link2Label || 'Link 2');
const link3Url = ref(instance.link3Url || '');
const link3Label = ref(instance.link3Label || 'Link 3');
const link4Url = ref(instance.link4Url || '');
const link4Label = ref(instance.link4Label || 'Link 4');
const link5Url = ref(instance.link5Url || '');
const link5Label = ref(instance.link5Label || 'Link 5');

</script>

<style lang="scss" scoped>
.rsqzvsbo {
	> .bg {
		position: fixed;
		top: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
	}

	> .shape1 {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100px;
		background: var(--MI_THEME-accent);
		opacity: 0.8;

		display: flex;
		align-items: center;
		justify-content: center;

		z-index: 100;
		color: var(--MI_THEME-fgOnAccent);

		@media (max-width: 768px) {
			display: none;
		}
	}

	> .shape1 h1 {
		margin: 0;
		text-shadow: 3px 2px 0 #000, 3px 2px 0 #555;
		font-size: 4.0rem;
	}

	> .shape2 {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 50px;
		background: var(--MI_THEME-accent);
		opacity: 0.8;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 150;

		@media (max-width: 768px) {
			display: none;
		}
	}

	> .shape2 a {
		z-index: 151;
		text-decoration: none;
		margin: auto 10px auto;
		font-size: 1.2rem;
		color: var(--MI_THEME-panel);
	}

	> .logo-wrapper {
		position: fixed;
		top: 20px;
		right: 300px; /* Default for larger screens */
		flex: auto;
		color: #fff;
		z-index: 100;
		user-select: none;
		pointer-events: none;

		@media (max-width: 450px) {
			right: 0;
			left: 0;
			margin: 0 auto; /* Center the element */
			width: fit-content;
		}

		> .powered-by {
			margin-bottom: 2px;
		}

		> .misskey {
			width: 140px;
			@media (max-width: 450px) {
				width: 130px;
			}
		}
	}

	> .contents {
		position: relative;
		width: min(430px, calc(100% - 32px));
		margin-top: 50px;
		margin-left: 128px;
		padding: 100px 0 100px 0;

		@media (max-width: 1200px) {
			margin: auto;
		}
	}

}
</style>
