<script setup lang="ts">
import ApplicationForm from '@/components/application/ApplicationForm.vue';
import Button from '@/components/ui/button/Button.vue';
import {
    Stepper,
    StepperDescription,
    StepperIndicator,
    StepperItem,
    StepperSeparator,
    StepperTitle,
    StepperTrigger,
} from '@/components/ui/stepper'
import { useUserStore } from '@/stores/user';
import { Check, Circle, Dot, Users, X } from 'lucide-vue-next'
import { computed, ref } from 'vue';
import Application from './Application.vue';
import { restartApplication } from '@/api/application';

function goToLogin() {
    const redirectUrl = encodeURIComponent(window.location.origin + '/join')
    window.location.href = `https://aj17thdevapi.nexuszone.net/login?redirect=${redirectUrl}`;
}

let userStore = useUserStore();

const steps = computed(() => {
    const isDenied = userStore.state === 'denied'

    return [
        {
            step: 1,
            title: 'Create account',
            description: 'Begin by setting up your account',
        },
        {
            step: 2,
            title: 'Submit application',
            description: 'Provide a few details about yourself',
        },
        {
            step: 3,
            title: 'Application review',
            description: 'Our team will review your submission',
        },
        {
            step: 4,
            title: isDenied ? 'Application denied' : 'Acceptance',
            description: isDenied
                ? 'Your application was not approved'
                : 'Get started with the 17th Rangers',
        },
    ]
})

const currentStep = computed<number>(() => {
    if (!userStore.isLoggedIn)
        return 1;
    switch (userStore.state) {
        case "guest":
            return 2;
            break;
        case "applicant":
            return 3;
            break;
        case "member":
            return 5;
            break;
        case "denied":
            return 5;
            break;
        case "retired":
            return 5;
            break;
    }
})

const finalPanel = ref<'app' | 'message'>('message');

const reloadKey = ref(0);

async function restartApp() {
    await restartApplication();
    await userStore.loadUser();
    reloadKey.value++;
}
</script>

<template>
    <div class="flex flex-col items-center mt-10 w-full" :key="reloadKey">

        <!-- Stepper Container -->
        <div class="w-full flex justify-center">
            <div class="w-full max-w-7xl">
                <Stepper class="flex w-full items-start gap-2" v-model="currentStep">
                    <StepperItem v-for="step in steps" :key="step.step" v-slot="{ state }"
                        class="relative flex w-full flex-col items-center" :step="step.step">
                        <StepperSeparator v-if="step.step !== steps[steps.length - 1]?.step"
                            class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 rounded-full bg-muted group-data-[state=completed]:bg-primary" />

                        <StepperTrigger as-child>
                            <Button :variant="state === 'completed' || state === 'active' ? 'default' : 'outline'"
                                size="icon" class="z-10 rounded-full shrink-0"
                                :class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']">
                                <template v-if="state === 'completed'">
                                    <X v-if="step.step === 4 && userStore.state === 'denied'" class="size-5" />
                                    <Check v-else class="size-5" />
                                </template>
                                <Circle v-if="state === 'active'" />
                                <Dot v-if="state === 'inactive'" />
                            </Button>
                        </StepperTrigger>

                        <div class="mt-2 flex flex-col items-center text-center">
                            <StepperTitle class="text-sm font-semibold transition lg:text-base"
                                :class="[state === 'active' && 'text-primary']">
                                {{ step.title }}
                            </StepperTitle>

                            <StepperDescription
                                class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm"
                                :class="[state === 'active' && 'text-primary']">
                                {{ step.description }}
                            </StepperDescription>
                        </div>
                    </StepperItem>
                </Stepper>
            </div>
        </div>

        <!-- Content -->
        <div class="mt-12 mb-20 flex w-full max-w-6xl justify-center">
            <div v-if="currentStep === 1" class="w-full max-w-2xl p-8">
                <h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left">
                    Create your account
                </h1>

                <p class="text-left text-muted-foreground mb-6">
                    You'll be redirected to our secure sign-in system to set up your account
                    and begin your application.
                </p>

                <Button class="px-6 py-3" @click="goToLogin">
                    Continue to account creation
                </Button>
            </div>
            <Application v-else-if="currentStep === 2" @submit="userStore.loadUser()" :mode="'create'"></Application>
            <Application v-else-if="currentStep === 3" :mode="'view-self'"></Application>
            <div v-if="currentStep === 5" class="w-full p-8 pt-0">
                <div class="mb-5">
                    <div class="flex w-min *:px-10 pt-2 border-b *:w-full *:text-center *:pb-1 *:cursor-pointer">
                        <label :class="finalPanel === 'message' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
                            @click="finalPanel = 'message'">Message
                        </label>
                        <label :class="finalPanel === 'app' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
                            @click="finalPanel = 'app'">Application
                        </label>
                    </div>
                </div>
                <div v-if="finalPanel === 'message'">
                    <!-- Accepted message -->
                    <div v-if="userStore.state === 'member'">
                        <h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left">
                            Welcome to the 17th Ranger Battalion
                        </h1>
                        <div class="space-y-4 text-muted-foreground text-left leading-relaxed">
                            <p>
                                Your application to the 17th Ranger Battalion has been <strong>accepted</strong>!
                                We’re excited to welcome you to the community.
                            </p>
                            <p>
                                There are just a couple of steps to complete before joining us on the battlefield:
                            </p>
                            <!-- MODPACK SECTION -->
                            <h2 class="text-xl font-semibold text-foreground mt-6">1. Download the Modpack</h2>
                            <p>
                                You’ll need to download our private server modpack. This can take some time, so we
                                recommend
                                starting as soon as possible. The link below leads to our
                                <strong>Shadow Mod</strong>, which automatically pulls all required dependencies.
                            </p>
                            <ul class="list-disc pl-6 space-y-1">
                                <li>Subscribe to the Shadow Mod.</li>
                                <li>When prompted, choose <em>“Yes”</em> to download all associated mods.</li>
                            </ul>
                            <p>
                                <a href="https://docs.iceberg-gaming.com/books/member-guides/page/new-member-setup-onboarding"
                                    class="text-primary underline" target="_blank">
                                    Click here for the full installation guide (Requires Sign-in)
                                </a>
                            </p>
                            <!-- CONTACT SECTION -->
                            <h2 class="text-xl font-semibold text-foreground mt-6">2. Contact a Corporal or Higher</h2>
                            <p>
                                Once you have the modpack installed, connect on TeamSpeak or post in Discord. Anyone
                                with
                                the
                                rank of <strong>Corporal or above</strong> can help get you set up.
                            </p>
                            <ul class="list-none pl-0 space-y-1">
                                <li><strong>TeamSpeak:</strong><a href="ts3server://ts.iceberg-gaming.com"
                                        class="text-primary underline"
                                        target="_blank">ts3server://ts.iceberg-gaming.com</a>
                                </li>
                                <li>
                                    <strong>Discord:</strong>
                                    <a href="https://discord.gg/7hDQCEb" class="text-primary underline"
                                        target="_blank">https://discord.gg/7hDQCEb</a>
                                </li>
                            </ul>
                            <p>
                                They will assist you with your initial assessments and training. Basic trainings run on
                                a
                                rotating schedule or can be requested through our Battalion Forms. Don’t hesitate to hop
                                in
                                during weeknights or Saturday operations to start playing with us!
                            </p>
                            <!-- FINAL NOTES -->
                            <h2 class="text-xl font-semibold text-foreground mt-6">3. Get Familiar with the Unit</h2>
                            <p>
                                Please take a moment to read through our <strong>Code of Conduct</strong>,
                                <strong>Ranks</strong>, and <strong>Structure</strong> pages. We also encourage you to
                                browse
                                our forums and introduce yourself.
                            </p>
                            <p>
                                If you have any questions, feel free to reach out on TeamSpeak or Discord
                                someone
                                will always be around to help.
                            </p>
                        </div>
                    </div>
                    <!-- Denied message -->
                    <div v-else-if="userStore.state === 'denied'">
                        <div class="w-full max-w-2xl flex flex-col gap-8">
                            <h1 class="text-3xl sm:text-4xl font-bold text-left">
                                Application Not Approved
                            </h1>
                            <div class="space-y-4 text-muted-foreground text-left leading-relaxed">
                                <p>
                                    Thank you for your interest in joining the <strong>17th Ranger Battalion</strong>.
                                    After reviewing your application, we regret to inform you that we are not able to
                                    approve it at this time.
                                </p>
                                <p>
                                    If you would like more information, you are encouraged to
                                    <strong>reach out and inquire</strong> about the reason your application was not
                                    approved.
                                    We are always happy to provide clarification where possible.
                                </p>
                                <p>
                                    You are welcome to <strong>resubmit your application in the future</strong> should
                                    your
                                    circumstances change or when we may be better able to incorporate you into the unit.
                                </p>
                                <p>
                                    All the best,<br />
                                    <span class="text-foreground font-medium">The 17th Ranger Battalion Recruitment
                                        Team</span>
                                </p>
                            </div>
                            <Button class="w-min" @click="restartApp">New Application</Button>
                        </div>
                    </div>
                    <div v-else-if="userStore.state === 'retired'">
                        <div class="w-full max-w-2xl flex flex-col gap-8">
                            <h1 class="text-3xl sm:text-4xl font-bold text-left">
                                You have retired from the 17th Ranger Battalion
                            </h1>
                            <div class="space-y-4 text-muted-foreground text-left leading-relaxed">
                                <p>
                                    Thank you for your service and participation in the <strong>17th Ranger
                                        Battalion</strong>.
                                    Your time with us has been sincerely appreciated.
                                </p>
                                <p>
                                    Should you ever wish to return, you are welcome to <strong>reach out to our
                                        leadership
                                        team</strong>
                                    for guidance on the reinstatement process or to stay connected with the community.
                                </p>
                                <p>
                                    We recognize that circumstances change, and you will always have a place to
                                    reconnect with
                                    us
                                    should the opportunity arise in the future.
                                </p>
                                <p>
                                    All the best,<br />
                                    <span class="text-foreground font-medium">The 17th Ranger Battalion Leadership
                                        Team</span>
                                </p>
                            </div>
                            <Button class="w-min" @click="restartApp">New Application</Button>
                        </div>
                    </div>
                </div>
                <div v-if="finalPanel === 'app'">
                    <Application :mode="'view-self'"></Application>
                </div>
            </div>
        </div>
    </div>
</template>
