<script setup lang="ts">
import {
	CoffeeIcon,
	GameIcon,
	GaugeIcon,
	AstralRinthLogo,
	DownloadIcon,
	SpinnerIcon,
	PaintbrushIcon,
	ReportIcon,
	SettingsIcon,
	ShieldIcon,
} from '@modrinth/assets'
import { TabbedModal } from '@modrinth/ui'
import { getVersion } from '@tauri-apps/api/app'
import { platform as getOsPlatform, version as getOsVersion } from '@tauri-apps/plugin-os'
import { defineMessage, useVIntl } from '@vintl/vintl'
import { computed, ref, watch } from 'vue'

import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
import DefaultInstanceSettings from '@/components/ui/settings/DefaultInstanceSettings.vue'
import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
import JavaSettings from '@/components/ui/settings/JavaSettings.vue'
import PrivacySettings from '@/components/ui/settings/PrivacySettings.vue'
import ResourceManagementSettings from '@/components/ui/settings/ResourceManagementSettings.vue'
import { get, set } from '@/helpers/settings.ts'
// [AR] Imports
import { installState, getRemote, updateState } from '@/helpers/update.js'

const updateModalView = ref(null)
const updateRequestFailView = ref(null)

const initUpdateModal = async () => {
  updateModalView.value.show()
}

const initDownload = async () => {
  updateModalView.value.hide()
  const result = await getRemote(true);
  if (!result) {
    updateRequestFailView.value.show()
  }
}
import { useTheming } from '@/store/state'

const themeStore = useTheming()

const { formatMessage } = useVIntl()

const devModeCounter = ref(0)

const developerModeEnabled = defineMessage({
	id: 'app.settings.developer-mode-enabled',
	defaultMessage: 'Developer mode enabled.',
})

const tabs = [
	{
		name: defineMessage({
			id: 'app.settings.tabs.appearance',
			defaultMessage: 'Appearance',
		}),
		icon: PaintbrushIcon,
		content: AppearanceSettings,
	},
	{
		name: defineMessage({
			id: 'app.settings.tabs.privacy',
			defaultMessage: 'Privacy',
		}),
		icon: ShieldIcon,
		content: PrivacySettings,
	},
	{
		name: defineMessage({
			id: 'app.settings.tabs.java-installations',
			defaultMessage: 'Java installations',
		}),
		icon: CoffeeIcon,
		content: JavaSettings,
	},
	{
		name: defineMessage({
			id: 'app.settings.tabs.default-instance-options',
			defaultMessage: 'Default instance options',
		}),
		icon: GameIcon,
		content: DefaultInstanceSettings,
	},
	{
		name: defineMessage({
			id: 'app.settings.tabs.resource-management',
			defaultMessage: 'Resource management',
		}),
		icon: GaugeIcon,
		content: ResourceManagementSettings,
	},
	{
		name: defineMessage({
			id: 'app.settings.tabs.feature-flags',
			defaultMessage: 'Feature flags',
		}),
		icon: ReportIcon,
		content: FeatureFlagSettings,
		developerOnly: true,
	},
]

const modal = ref()

function show() {
	modal.value.show()
}

const isOpen = computed(() => modal.value?.isOpen)

defineExpose({ show, isOpen })

const version = await getVersion()
const osPlatform = getOsPlatform()
const osVersion = getOsVersion()
const settings = ref(await get())

watch(
	settings,
	async () => {
		await set(settings.value)
	},
	{ deep: true },
)

function devModeCount() {
	devModeCounter.value++
	if (devModeCounter.value > 5) {
		themeStore.devMode = !themeStore.devMode
		settings.value.developer_mode = !!themeStore.devMode
		devModeCounter.value = 0

		if (!themeStore.devMode && tabs[modal.value.selectedTab].developerOnly) {
			modal.value.setTab(0)
		}
	}
}
</script>
<template>
	<ModalWrapper ref="modal">
		<template #title>
			<span class="flex items-center gap-2 text-lg font-extrabold text-contrast">
				<SettingsIcon /> Settings
			</span>
		</template>

		<TabbedModal :tabs="tabs.filter((t) => !t.developerOnly || themeStore.devMode)">
			<template #footer>
				<div class="mt-auto text-secondary text-sm">
					<p v-if="themeStore.devMode" class="text-brand font-semibold m-0 mb-2">
						{{ formatMessage(developerModeEnabled) }}
					</p>
					<div class="flex items-center gap-3">
						<button
							class="p-0 m-0 bg-transparent border-none cursor-pointer button-animation"
							:class="{
								'text-brand': themeStore.devMode,
								'text-secondary': !themeStore.devMode,
							}"
							@click="devModeCount"
						>
							<AstralRinthLogo class="w-6 h-6" />
						</button>
						<div>
							<p class="m-0">Modrinth App {{ version }}</p>
							<p class="m-0">
								<span v-if="osPlatform === 'macos'">MacOS</span>
								<span v-else class="capitalize">{{ osPlatform }}</span>
								{{ osVersion }}
							</p>
						</div>
						<div v-if="updateState" class="w-8 h-8 cursor-pointer hover:brightness-75 neon-icon pulse">
            			  <template v-if="installState">
            			    <SpinnerIcon class="size-6 animate-spin" v-tooltip.bottom="'Installing in process...'" />
            			  </template>
            			  <template v-else>
            			    <DownloadIcon class="size-6" v-tooltip.bottom="'View update info'" @click="!installState && (initUpdateModal(), getRemote(false))" />
            			  </template>
            			</div>
					</div>
				</div>
			</template>
		</TabbedModal>
		<!-- [AR] Feature -->
    	<ModalWrapper ref="updateModalView" :has-to-type="false" header="Request to update the AstralRinth launcher">
    	  <div class="space-y-4">
    	    <div class="space-y-2">
    	      <p>The new version of the AstralRinth launcher is available.</p>
    	      <p>Your version is outdated. We recommend that you update to the latest version.</p>
    	      <p><strong>⚠️ Warning ⚠️</strong></p>
    	      <p>
    	        Before updating, make sure that you have saved all running instances and made a backup copy of the instances
    	        that are valuable to you. Remember that the authors of the product are not responsible for the breakdown of
    	        your files, so you should always make copies of them and keep them in a safe place.
    	      </p>
    	    </div>
    	    <div class="text-sm text-secondary space-y-1">
    	      <a class="neon-text" href="https://me.astralium.su/get/ar" target="_blank"
    	        rel="noopener noreferrer"><strong>Source:</strong> Git Astralium</a>
    	      <p>
    	        <strong>Version on remote server:</strong>
    	        <span id="releaseData" class="neon-text"></span>
    	      </p>
    	      <p>
    	        <strong>Version on local device:</strong>
    	        <span class="neon-text">v{{ version }}</span>
    	      </p>
    	    </div>

    	    <div class="absolute bottom-4 right-4 flex items-center gap-4 neon-button neon">
    	      <Button class="bordered" @click="updateModalView.hide()">Cancel</Button>
    	      <Button class="bordered" @click="initDownload()">Download file</Button>
    	    </div>
    	  </div>
    	</ModalWrapper>
    	<ModalWrapper ref="updateRequestFailView" :has-to-type="false" header="Failed to request a file from the server :(">
    	  <div class="space-y-4">
    	    <div class="space-y-2">
    	      <p><strong>Error occurred</strong></p>
    	      <p>Unfortunately, the program was unable to download the file from our servers.</p>
    	      <p>
    	        Please try downloading it yourself from
    	        <a class="neon-text" href="https://me.astralium.su/get/ar" target="_blank" rel="noopener noreferrer">Git
    	          Astralium</a>
    	        if there are any updates available.
    	      </p>
    	    </div>

    	    <div class="text-sm text-secondary">
    	      <p>
    	        <strong>Local AstralRinth:</strong>
    	        <span class="neon-text">v{{ version }}</span>
    	      </p>
    	    </div>

    	    <div class="absolute bottom-4 right-4 flex items-center gap-4 neon-button neon">
    	      <Button class="bordered" @click="updateRequestFailView.hide()">Close</Button>
    	    </div>
    	  </div>
    	</ModalWrapper>
	</ModalWrapper>
</template>

<style lang="scss" scoped>
@import '../../../../../../packages/assets/styles/neon-icon.scss';
@import '../../../../../../packages/assets/styles/neon-button.scss';
@import '../../../../../../packages/assets/styles/neon-text.scss';
</style>
