<template>
	<div class="mx-auto max-w-2xl rounded-lg border-0 px-2 sm:border sm:p-8">
		<div class="prose prose-sm max-w-none">
			<h1 class="text-2xl font-semibold">{{ $t('Welcome to Jingrow') }}</h1>
			<p>
				{{ $t('Jingrow is a one-stop universal digital platform that helps you quickly build comprehensive digital solutions from personal work to team collaboration through innovative concepts like &quot;Everything is a Page&quot;. Through modules such as AI Agent, visual workflow orchestration, zero-code visual data modeling, automated tasks, team collaboration, role and permission management, file library, knowledge base, notes, meetings, to-do items, notifications, and intelligent reports, leading the new trend of digital collaboration.') }}
			</p>
		</div>
		<p class="mt-6 text-base text-gray-800">
			{{ $t('Start here to make everything digital, systematic, intelligent, and automated.') }}
		</p>
		<div class="mt-6 space-y-6">
			<!-- 步骤 1 - 账户已创建 -->
			<div class="rounded-md">
				<div>
					<div class="flex items-center justify-between space-x-2">
						<div class="flex items-center space-x-2">
							<TextInsideCircle>1</TextInsideCircle>
							<span class="text-base font-medium">{{ $t('Account Created') }}</span>
						</div>
						<div
							class="grid h-4 w-4 place-items-center rounded-full bg-green-500/90"
						>
							<i-lucide-check class="h-3 w-3 text-white" />
						</div>
					</div>
				</div>
			</div>
			
			<!-- 步骤 2 - 添加支付方式 -->
			<div class="rounded-md">
				<div v-if="!$team.pg.payment_mode">
					<div class="flex items-center space-x-2">
						<TextInsideCircle>2</TextInsideCircle>
						<span class="text-base font-medium">{{ $t('Account Recharge') }}</span>
					</div>

					<div class="mt-4 pl-7">
						<div class="mt-2 w-full">
							<div class="mt-10">
								<BuyPrepaidCreditsForm
									:isOnboarding="true"
									@success="onBuyCreditsSuccess"
								/>
							</div>
						</div>
					</div>
				</div>
				<!-- 支付方式已添加 -->
				<div v-else>
					<div class="flex items-center justify-between space-x-2">
						<div class="flex items-center space-x-2">
							<TextInsideCircle>2</TextInsideCircle>
							<span
								class="text-base font-medium"
								v-if="$team.pg.payment_mode === 'Card'"
							>
								{{ $t('Automated Billing Setup Completed') }}
							</span>
							<span
								class="text-base font-medium"
								v-if="$team.pg.payment_mode === 'Prepaid Credits'"
							>
								{{ $t('Prepaid Credits Payment Enabled') }}
							</span>
						</div>
						<div
							class="grid h-4 w-4 place-items-center rounded-full bg-green-500/90"
						>
							<i-lucide-check class="h-3 w-3 text-white" />
						</div>
					</div>
					<div
						class="mt-1.5 pl-7 text-p-base text-gray-800"
						v-if="$team.pg.payment_mode === 'Prepaid Credits'"
					>
						{{ $t('Account Balance') }}: {{ $format.userCurrency($team.pg.balance) }}
					</div>
				</div>
			</div>
			
			<!-- 步骤 3 - 创建站点 -->
			<div v-if="pendingSiteRequest" class="rounded-md">
				<div class="flex items-center justify-between space-x-2">
					<div class="flex items-center space-x-2">
						<TextInsideCircle>3</TextInsideCircle>
						<span
							class="text-base font-medium"
							v-if="pendingSiteRequest.status == 'Error'"
						>
							{{ $t('Error creating your {title} trial site', { title: pendingSiteRequest.title }) }}
						</span>
						<span class="text-base font-medium" v-else>
							{{ $t('Create your {title} trial site', { title: pendingSiteRequest.title }) }}
						</span>
					</div>
				</div>
				<div class="mt-2 pl-7" v-if="pendingSiteRequest.status == 'Error'">
					<p class="mt-2 text-p-base text-gray-800">
						{{ $t('Please click the button below to contact Jingrow support team.') }}
					</p>
					<Button class="mt-2" link="/support">{{ $t('Contact Support') }}</Button>
				</div>
				<div class="mt-2 pl-7" v-else>
					<p class="mt-2 text-p-base text-gray-800">
						{{ $t('You can click the button below to try the {title} application for free.', { title: pendingSiteRequest.title }) }}
					</p>
					<Button
						class="mt-2"
						:route="{
							name: 'SignupSetup',
							params: { productId: pendingSiteRequest.product_trial },
							query: {
								account_request: pendingSiteRequest.account_request,
							},
						}"
					>
						{{ $t('Continue') }}
					</Button>
				</div>
			</div>
			<div v-else-if="trialSite" class="rounded-md">
				<div class="flex items-center justify-between space-x-2">
					<div class="flex items-center space-x-2">
						<TextInsideCircle>3</TextInsideCircle>
						<span class="text-base font-medium">
							{{ $t('Your trial site is ready') }}
						</span>
					</div>
					<div
						class="grid h-4 w-4 place-items-center rounded-full bg-green-500/90"
					>
						<i-lucide-check class="h-3 w-3 text-white" />
					</div>
				</div>
				<div class="pl-7">
					<div class="mt-2">
						<a
							class="flex items-center text-base font-medium underline"
							:href="`https://${trialSite.host_name || trialSite.name}`"
							target="_blank"
						>
							https://{{ trialSite.host_name || trialSite.name }}
							<i-lucide-external-link class="ml-1 h-3.5 w-3.5 text-gray-800" />
						</a>
					</div>
					<p class="mt-2 text-p-base text-gray-800">
						{{ $t('Your trial will expire on') }}
						<span class="font-medium">
							{{ $format.date(trialSite.trial_end_date, 'LL') }} </span
						>. {{ $t('Set up billing now to ensure your site access is not affected.') }}
					</p>
				</div>
			</div>
			<div v-else class="rounded-md">
				<div class="flex items-center space-x-2">
					<TextInsideCircle>3</TextInsideCircle>
					<div class="text-base font-medium">{{ $t('Create your first digital platform') }}</div>
				</div>

				<Button class="ml-7 mt-4" :route="'/sites/new'">
					{{ $t('Create') }}
				</Button>
			</div>
		</div>
	</div>
</template>
<script>
import { defineAsyncComponent } from 'vue';
import TextInsideCircle from './TextInsideCircle.vue';

export default {
	name: 'Onboarding',
	emits: ['payment-mode-added'],
	components: {
		BuyPrepaidCreditsForm: defineAsyncComponent(
			() => import('./BuyPrepaidCreditsForm.vue'),
		),
		TextInsideCircle,
	},
	methods: {
		onBuyCreditsSuccess() {
			this.$team.reload();
			this.$emit('payment-mode-added');
		},
	},
	computed: {
		pendingSiteRequest() {
			return this.$team.pg.pending_site_request;
		},
		trialSite() {
			return this.$team.pg.trial_sites?.[0];
		},
	},
};
</script>