<script setup lang="ts">
import config from '#shared/character-config.json';
import { Icon } from '@iconify/vue/dist/iconify.js';
import PreviewA from '~/components/prose/PreviewA.vue';

const id = useRouter().currentRoute.value.params.id;
const { user } = useUserSession();
const { data: character, status, error } = await useAsyncData(() => useRequestFetch()(`/api/character/${id}/compiled`));
</script>

<template>
    <div v-if="status === 'pending'">
        <Head>
            <Title>d[any] - Chargement ...</Title>
        </Head>
    </div>
    <div v-else-if="status === 'success' && character && !error">
        <Head>
            <Title>d[any] - {{ character.name }}</Title>
        </Head>
        <div class="flex flex-row gap-4 justify-between">
            <div></div>
            <div class="flex flex-row gap-6 items-center justify-center">
                <Avatar src="" icon="radix-icons:person" size="large" />
                <div class="flex flex-col">
                    <span class="text-xl font-bold">{{ character.name }}</span>
                    <span class="text-sm">De {{ character.username }}</span>
                </div>
                <div class="flex flex-col">
                    <span class="font-bold">Niveau {{ character.level }}</span>
                    <span>{{ character.race === -1 ? "Race inconnue" : config.peoples[character.race].name }}</span>
                </div>
                <span class="h-full border-l border-light-30 dark:border-dark-30"></span>
                <span>PV: {{ character.health }}</span>
                <span>Mana: {{ character.mana }}</span>
            </div>
            <div  class="self-center">
                <Tooltip side="right" message="Modifier" v-if="user && user.id === character.owner"><NuxtLink :to="{ name: 'character-id-edit', params: { id: character.id } }"><Button icon><Icon icon="radix-icons:pencil-2" /></Button></NuxtLink></Tooltip>
            </div>
        </div>
        <div class="flex flex-1 flex-col justify-center gap-4 *:py-2">
            <div class="flex flex-row gap-4 items-center justify-center border-b border-light-30 dark:border-dark-30">
                <div class="flex relative ps-4">
                    <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">+{{ character.modifier.strength }}</span><span>Force</span></div>
                    <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">+{{ character.modifier.dexterity }}</span><span>Dextérité</span></div>
                    <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">+{{ character.modifier.constitution }}</span><span>Constitution</span></div>
                    <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">+{{ character.modifier.intelligence }}</span><span>Intelligence</span></div>
                    <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">+{{ character.modifier.curiosity }}</span><span>Curiosité</span></div>
                    <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">+{{ character.modifier.charisma }}</span><span>Charisme</span></div>
                    <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">+{{ character.modifier.psyche }}</span><span>Psyché</span></div>
                </div>
                <div class="flex relative border-l border-light-30 dark:border-dark-30 ps-4">
                    <div class="flex flex-1 flex-row items-center justify-between">
                        <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">+{{ character.initiative }}</span><span>Initiative</span></div>
                        <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">{{ character.speed === false ? "Aucun déplacement" : `${character.speed} cases` }}</span><span>Course</span></div>
                    </div>
                    <!-- <div class="absolute top-0 left-0 bottom-0 right-0 bg-light-0 dark:bg-dark-0 bg-opacity-50 dark:bg-opacity-50 text-xl font-bold flex items-center justify-center">Les données secondaires arrivent bientôt.</div> -->
                </div>
                <div class="flex relative border-l border-light-30 dark:border-dark-30 ps-4">
                        <div class="flex flex-col px-2">
                            <span class="text-xl">Défense passive: <span class="text-2xl font-bold">{{ character.defense.static }}</span>/+<span class="text-2xl font-bold">{{ character.defense.passivedodge }}</span>/+<span class="text-2xl font-bold">{{ character.defense.passiveparry }}</span></span>
                            <span class="text-xl">Défense active: <span class="float-right">+<span class="text-2xl font-bold">{{ character.defense.activedodge }}</span>/+<span class="text-2xl font-bold">{{ character.defense.activeparry }}</span></span></span>
                        </div>
                    </div>
            </div>
            <div class="flex flex-1 px-8">
                <div class="flex flex-col pe-8 gap-8 py-8 w-80">
                    <div class="flex flex-col">
                        <span class="text-lg font-semibold border-b border-light-30 dark:border-dark-30">Maitrise d'arme</span>
                        <div class="grid grid-cols-2 gap-x-3 gap-y-1">
                            <PreviewA v-if="character.mastery.strength + character.mastery.dexterity > 0" href="1. Règles/99. Annexes/4. Équipement#Les armes légères">Arme légère</PreviewA>
                            <PreviewA v-if="character.mastery.strength + character.mastery.dexterity > 0" href="1. Règles/99. Annexes/4. Équipement#Les armes de jet">Arme de jet</PreviewA>
                            <PreviewA v-if="character.mastery.strength + character.mastery.dexterity > 0" href="1. Règles/99. Annexes/4. Équipement#Les armes naturelles">Arme naturelle</PreviewA>
                            <PreviewA v-if="character.mastery.strength > 1" href="1. Règles/99. Annexes/4. Équipement#Les armes">Arme standard</PreviewA>
                            <PreviewA v-if="character.mastery.strength > 1" href="1. Règles/99. Annexes/4. Équipement#Les armes improvisées">Arme improvisée</PreviewA>
                            <PreviewA v-if="character.mastery.strength > 2" href="1. Règles/99. Annexes/4. Équipement#Les armes lourdes">Arme lourde</PreviewA>
                            <PreviewA v-if="character.mastery.strength > 3" href="1. Règles/99. Annexes/4. Équipement#Les armes à deux mains">Arme à deux mains</PreviewA>
                            <PreviewA v-if="character.mastery.dexterity > 0 && character.mastery.strength > 1" href="1. Règles/99. Annexes/4. Équipement#Les armes maniables">Arme maniable</PreviewA>
                            <PreviewA v-if="character.mastery.dexterity > 1 && character.mastery.strength > 1" href="1. Règles/99. Annexes/4. Équipement#Les armes à projectiles">Arme à projectiles</PreviewA>
                            <PreviewA v-if="character.mastery.dexterity > 1 && character.mastery.strength > 2" href="1. Règles/99. Annexes/4. Équipement#Les armes longues">Arme longue</PreviewA>
                            <PreviewA v-if="character.mastery.shield > 0" href="1. Règles/99. Annexes/4. Équipement#Les boucliers">Bouclier</PreviewA>
                            <PreviewA v-if="character.mastery.shield > 0 && character.mastery.strength > 3" href="1. Règles/99. Annexes/4. Équipement#Les boucliers à deux mains">Bouclier à deux mains</PreviewA>
                        </div>
                    </div>
                    <div v-if="character.mastery.armor > 0" class="flex flex-col">
                        <span class="text-lg font-semibold border-b border-light-30 dark:border-dark-30">Maitrise d'armure</span>
                        <div class="grid grid-cols-2 gap-x-3 gap-y-1">
                            <PreviewA v-if="character.mastery.armor > 0" href="1. Règles/99. Annexes/4. Équipement#Les armures légères">Armure légère</PreviewA>
                            <PreviewA v-if="character.mastery.armor > 1" href="1. Règles/99. Annexes/4. Équipement#Les armures">Armure standard</PreviewA>
                            <PreviewA v-if="character.mastery.armor > 2" href="1. Règles/99. Annexes/4. Équipement#Les armures lourdes">Armure lourde</PreviewA>
                        </div>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-lg font-semibold border-b border-light-30 dark:border-dark-30">Maitrise de sorts</span>
                        <span>Sorts de précision: <span class="font-bold">{{ character.spellranks.precision }}</span></span>
                        <span>Sorts de savoir: <span class="font-bold">{{ character.spellranks.knowledge }}</span></span>
                        <span>Sorts d'instinct: <span class="font-bold">{{ character.spellranks.instinct }}</span></span>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-lg font-semibold border-b border-light-30 dark:border-dark-30 mb-2">Compétences</span>
                        <div class="grid grid-cols-3 gap-1">
                            <div class="flex flex-col px-2 items-center" v-for="(value, ability) of character.abilities"><span class="font-bold">+{{ value }}</span><span>{{ config.ability[ability].name }}</span></div>
                        </div>
                    </div>
                </div>
                <div class="flex flex-1 flex-col border-l border-light-30 dark:border-dark-30 ps-8 gap-4 py-8 max-w-[80rem]">
                    <div class="grid grid-cols-3 gap-2">
                        <div class="flex flex-col">
                            <span class="text-lg font-semibold">Actions</span>
                            <span class="text-sm text-light-70 dark:text-dark-70">Attaquer - Saisir - Faire chuter - Déplacer - Courir - Pas de coté - Lancer un sort - S'interposer - Se transformer - Utiliser un objet - Anticiper une action - Improviser</span>
                            <MarkdownRenderer :content="character.features.action.join('\n')" />
                        </div>
                        <div class="flex flex-col">
                            <span class="text-lg font-semibold">Réactions</span>
                            <span class="text-sm text-light-70 dark:text-dark-70">Parade - Esquive - Saisir une opportunité - Prendre en tenaille - Intercepter - Désarmer</span>
                            <MarkdownRenderer :content="character.features.reaction.join('\n')" />
                        </div>
                        <div class="flex flex-col">
                            <span class="text-lg font-semibold">Actions libre</span>
                            <span class="text-sm text-light-70 dark:text-dark-70">Analyser une situation - Communiquer</span>
                            <MarkdownRenderer :content="character.features.freeaction.join('\n')" />
                        </div>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-lg font-semibold">Aptitudes</span>
                        <MarkdownRenderer :content="character.features.misc.map(e => `> ${e}`).join('\n\n')" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-else>
        <Head>
            <Title>d[any] - Erreur</Title>
        </Head>
        <div>Erreur de chargement</div>
    </div>
</template>