<script setup lang="ts">
import { getWelcomeMessage } from '@/api/docs';
import { Button } from '@/components/ui/button'
import { useUserStore } from '@/stores/user'
import { MemberState } from '@shared/types/member';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'

const router = useRouter()

const user = useUserStore();

function goToApplication() {
    router.push('/join') // change to your form route
}

onMounted(async () => {
    if (user.state == MemberState.Member) {
        let policy = await getWelcomeMessage() as any;
        welcomeRef.value.innerHTML = policy;
    }
})

const welcomeRef = ref<HTMLElement>(null);
</script>

<template>
    <div>
        <div v-if="user.state == MemberState.Member" class="mt-10">
            <div ref="welcomeRef" class="bookstack-container">
                <!-- bookstack -->
            </div>
        </div>
        <div v-else class="text-foreground px-6 py-12 selection:bg-primary/10">
            <div class="max-w-5xl mx-auto space-y-8">

                <header class="space-y-4">
                    <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
                        <div>
                            <h1 class="text-4xl font-semibold tracking-tight">17th Ranger Battalion</h1>
                        </div>
                    </div>
                    <div class="h-px bg-border w-full"></div>
                </header>

                <div class="grid grid-cols-1 lg:grid-cols-12 gap-12">

                    <div class="lg:col-span-7 space-y-6">
                        <div class="space-y-2">
                            <h2 class="text-sm font-medium uppercase tracking-wider text-primary">Unit Philosophy</h2>
                            <p class="text-lg leading-relaxed font-normal">
                                The 17th RBN emphasizes high-skill gameplay through real-world tactics, stripped of
                                traditional military formalities. We prioritize effective coordination over enforced
                                etiquette.
                            </p>
                        </div>

                        <p class="text-muted-foreground leading-relaxed">
                            Our "Real Life First" mindset ensures participation remains a hobby, not a second job. With
                            a consistent roster of 40–50 members for Saturday operations, we focus on effective
                            coordination and mission success without the requirement of "Yes sir, no sir" protocols.
                        </p>

                        <div class="flex flex-wrap items-center gap-6 pt-4">
                            <Button size="lg" @click="goToApplication" class="font-medium">
                                Begin Application
                            </Button>
                            <div class="flex flex-col">
                                <span class="text-xs uppercase tracking-tighter text-muted-foreground">Age
                                    Requirement</span>
                                <span class="text-sm font-medium">18+</span>
                            </div>
                        </div>
                    </div>

                    <div class="lg:col-span-5 space-y-8">
                        <section class="space-y-3">
                            <h3 class="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
                                Operational Schedule</h3>
                            <div class="rounded-lg border bg-card p-4 shadow-sm">
                                <div class="flex justify-between items-center">
                                    <span class="text-sm font-medium">Main Operation</span>
                                    <span class="text-sm font-mono text-primary">Sat 19:00 CST</span>
                                </div>
                            </div>
                        </section>

                        <section class="space-y-4">
                            <h3 class="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                                Force Structure
                            </h3>
                            <ul class="space-y-3">
                                <li class="flex items-start gap-4">
                                    <span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span>
                                    <div class="space-y-1">
                                        <p class="text-sm font-medium leading-none">Alpha Company</p>
                                        <p class="text-[13px] text-muted-foreground leading-relaxed">
                                            Rifleman, Medic, CLS, Anti-Tank, RTO, Leadership
                                        </p>
                                    </div>
                                </li>

                                <li class="flex items-start gap-4">
                                    <span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span>
                                    <div class="space-y-1">
                                        <p class="text-sm font-medium leading-none">Echo Company</p>
                                        <p class="text-[13px] text-muted-foreground leading-relaxed">
                                            Logistics, CAS Pilot, Armor, Artillery, JTAC, Forward Observer
                                        </p>
                                    </div>
                                </li>
                            </ul>

                            <p class="text-[12px] text-muted-foreground/70 border-t pt-2 border-border">
                                Roles are fluid; specialization or weekly rotation is supported.
                            </p>
                        </section>
                    </div>
                </div>

                <section class="space-y-4">
                    <div class="relative rounded-xl border bg-card shadow-sm overflow-hidden">
                        <div class="aspect-video">
                            <iframe class="w-full h-full"
                                src="https://www.youtube.com/embed/61L397HwmrU?si=oY9qf6vFv6hXo6Fk&controls=1&mute=1&start=102&end=152"
                                title="YouTube video player" frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                allowfullscreen>
                            </iframe>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</template>
