<script setup lang="ts">
import characterConfig from '#shared/character-config.json';
import { Icon } from '@iconify/vue/dist/iconify.js';
import PreviewA from '~/components/prose/PreviewA.vue';
import { clamp, unifySlug } from '#shared/general.util';
import type { CompiledCharacter, SpellConfig } from '~/types/character';
import type { CharacterConfig } from '~/types/character';
import { abilityTexts, CharacterCompiler, CharacterSheet, defaultCharacter, elementTexts, spellTypeTexts } from '#shared/character.util';
import { getText } from '#shared/i18n';
import { preview } from '#shared/proses';
import { div, dom, icon, text } from '#shared/dom.util';
import markdown from '#shared/markdown.util';
import { button, foldable } from '#shared/components.util';
import { fullblocker, tooltip } from '~/shared/floating.util';
/*
text-light-red dark:text-dark-red border-light-red dark:border-dark-red bg-light-red dark:bg-dark-red
text-light-blue dark:text-dark-blue border-light-blue dark:border-dark-blue bg-light-blue dark:bg-dark-blue
text-light-yellow dark:text-dark-yellow border-light-yellow dark:border-dark-yellow bg-light-yellow dark:bg-dark-yellow
text-light-orange dark:text-dark-orange border-light-orange dark:border-dark-orange bg-light-orange dark:bg-dark-orange
text-light-indigo dark:text-dark-indigo border-light-indigo dark:border-dark-indigo bg-light-indigo dark:bg-dark-indigo
text-light-lime dark:text-dark-lime border-light-lime dark:border-dark-lime bg-light-lime dark:bg-dark-lime
text-light-green dark:text-dark-green border-light-green dark:border-dark-green bg-light-green dark:bg-dark-green
text-light-yellow dark:text-dark-yellow border-light-yellow dark:border-dark-yellow bg-light-yellow dark:bg-dark-yellow
text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-purple bg-light-purple dark:bg-dark-purple
*/

const config = characterConfig as CharacterConfig;

const id = useRouter().currentRoute.value.params.id ? unifySlug(useRouter().currentRoute.value.params.id!) : undefined;
const { user } = useUserSession();
const container = useTemplateRef('container');

onMounted(() => {
    queueMicrotask(() => {
        if(container.value && id)
        {
            const character = new CharacterSheet(id, user);
            container.value.appendChild(character.container);
        }
    });
});
</script>

<template>
    <div ref="container"></div>
    <!-- <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 lg:flex-row flex-col gap-6 items-center justify-center">
                <div class="flex gap-6 items-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>{{ config.peoples[character.race]?.name ?? 'Peuple inconnu' }}</span>
                    </div>
                </div>
                <div class="flex flex-row lg:border-l border-light-30 dark:border-dark-30 py-4 ps-4 gap-8">
                    <span class="flex flex-row items-center gap-2 text-3xl font-light">PV: <span class="font-bold px-2 border-transparent border cursor-pointer hover:border-light-35 dark:hover:border-dark-35">{{ character.health - character.variables.health }}</span>/ {{ character.health }}</span>
                    <span class="flex flex-row items-center gap-2 text-3xl font-light">Mana: <span class="font-bold px-2 border-transparent border cursor-pointer hover:border-light-35 dark:hover:border-dark-35">{{ character.mana - character.variables.mana }}</span>/ {{ character.mana }}</span>
                </div>
            </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 border-b border-light-30 dark:border-dark-30 me-4 pe-4 divide-x divide-light-30 dark:divide-dark-30">
                <div class="flex relative justify-between ps-4 gap-2">
                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.strength }}</span><span class="text-sm 2xl:text-base">Force</span></div>
                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.dexterity }}</span><span class="text-sm 2xl:text-base">Dextérité</span></div>
                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.constitution }}</span><span class="text-sm 2xl:text-base">Constitution</span></div>
                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.intelligence }}</span><span class="text-sm 2xl:text-base">Intelligence</span></div>
                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.curiosity }}</span><span class="text-sm 2xl:text-base">Curiosité</span></div>
                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.charisma }}</span><span class="text-sm 2xl:text-base">Charisme</span></div>
                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.psyche }}</span><span class="text-sm 2xl:text-base">Psyché</span></div>
                </div>
                <div class="flex flex-1 relative ps-4 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="flex flex-1 relative ps-4 flex-row items-center justify-between">
                    <Icon icon="ph:shield-checkered" class="w-8 h-8" />
                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">{{ clamp(character.defense.static + character.defense.passivedodge + character.defense.passiveparry, 0, character.defense.hardcap) }}</span><span class="text-sm 2xl:text-base">Passive</span></div>
                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">{{ clamp(character.defense.static + character.defense.passivedodge + character.defense.activeparry, 0, character.defense.hardcap) }}</span><span class="text-sm 2xl:text-base">Blocage</span></div>
                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">{{ clamp(character.defense.static + character.defense.activedodge + character.defense.passiveparry, 0, character.defense.hardcap) }}</span><span class="text-sm 2xl:text-base">Esquive</span></div>
                </div>
            </div>
            <div class="flex flex-1 px-8">
                <div class="flex flex-col pe-8 gap-4 py-2 w-80 border-r border-light-30 dark:border-dark-30">
                    <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 text-sm text-light-70 dark:text-dark-70" v-for="(value, ability) of character.abilities"><span class="font-bold text-base text-light-100 dark:text-dark-100">+{{ value }}</span><span>{{ abilityTexts[ability] }}</span></div>
                        </div>
                    </div>
                    <div class="flex flex-col gap-2">
                        <span class="text-lg font-semibold border-b border-light-30 dark:border-dark-30">Maitrises</span>
                        <div class="grid grid-cols-2 gap-x-3 gap-y-1 text-sm">
                            <PreviewA v-if="character.mastery.strength + character.mastery.dexterity > 0" href="regles/annexes/equipement#Les armes légères" label="Arme légère" />
                            <PreviewA v-if="character.mastery.strength + character.mastery.dexterity > 0" href="regles/annexes/equipement#Les armes de jet" label="Arme de jet" />
                            <PreviewA v-if="character.mastery.strength + character.mastery.dexterity > 0" href="regles/annexes/equipement#Les armes naturelles" label="Arme naturelle" />
                            <PreviewA v-if="character.mastery.strength > 1" href="regles/annexes/equipement#Les armes" label="Arme standard" />
                            <PreviewA v-if="character.mastery.strength > 1" href="regles/annexes/equipement#Les armes improvisées" label="Arme improvisée" />
                            <PreviewA v-if="character.mastery.strength > 2" href="regles/annexes/equipement#Les armes lourdes" label="Arme lourde" />
                            <PreviewA v-if="character.mastery.strength > 3" href="regles/annexes/equipement#Les armes à deux mains" label="Arme à deux mains" />
                            <PreviewA v-if="character.mastery.dexterity > 0 && character.mastery.strength > 1" href="regles/annexes/equipement#Les armes maniables" label="Arme maniable" />
                            <PreviewA v-if="character.mastery.dexterity > 1 && character.mastery.strength > 1" href="regles/annexes/equipement#Les armes à projectiles" label="Arme à projectiles" />
                            <PreviewA v-if="character.mastery.dexterity > 1 && character.mastery.strength > 2" href="regles/annexes/equipement#Les armes longues" label="Arme longue" />
                            <PreviewA v-if="character.mastery.shield > 0" href="regles/annexes/equipement#Les boucliers" label="Bouclier" />
                            <PreviewA v-if="character.mastery.shield > 0 && character.mastery.strength > 3" href="regles/annexes/equipement#Les boucliers à deux mains" label="Bouclier à deux mains" />
                        </div>
                        <div v-if="character.mastery.armor > 0" class="grid grid-cols-2 gap-x-3 gap-y-1 text-sm">
                            <PreviewA v-if="character.mastery.armor > 0" href="regles/annexes/equipement#Les armures légères" label="Armure légère" />
                            <PreviewA v-if="character.mastery.armor > 1" href="regles/annexes/equipement#Les armures" label="Armure standard" />
                            <PreviewA v-if="character.mastery.armor > 2" href="regles/annexes/equipement#Les armures lourdes" label="Armure lourde" />
                        </div>
                        <div class="grid grid-cols-2 gap-x-3 gap-y-1 text-sm">
                            <span>Précision: <span class="font-bold">{{ character.spellranks.precision }}</span></span>
                            <span>Savoir: <span class="font-bold">{{ character.spellranks.knowledge }}</span></span>
                            <span>Instinct: <span class="font-bold">{{ character.spellranks.instinct }}</span></span>
                            <span>Oeuvres: <span class="font-bold">{{ character.spellranks.arts }}</span></span>
                        </div>
                    </div>
                </div>
                <TabsRoot default-value="features" class="w-[60rem] max-h-full">
                    <TabsList class="flex flex-row relative px-4 gap-4">
                        <TabsIndicator class="absolute left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator>
                        <TabsTrigger value="features" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Aptitudes</TabsTrigger>
                        <TabsTrigger value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue" v-if="character.spellslots > 0">Sorts</TabsTrigger>
                        <TabsTrigger value="inventory" class="px-2 py-1 border-b border-transparent hover:border-accent-blue" v-if="character.capacity !== false">Inventaire</TabsTrigger>
                        <TabsTrigger value="notes" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Notes</TabsTrigger>
                    </TabsList>
                    <TabsContent value="features" class="overflow-y-auto max-h-full">
                        <div class="flex flex-1 flex-col ps-8 gap-4 py-4">
                            <div class="grid grid-cols-3 gap-4">
                                <div class="flex flex-col col-span-2">
                                    <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.lists.action?.map(e => getText(e))?.join('\n')" :properties="{ tags: { a: preview } }" />
                                </div>
                                <div class="flex flex-col gap-2">
                                    <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.lists.reaction?.map(e => getText(e))?.join('\n')" :properties="{ tags: { a: preview } }" />
                                    </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.lists.freeaction?.map(e => getText(e))?.join('\n')" :properties="{ tags: { a: preview } }" />
                                    </div>
                                </div>
                            </div>
                            <div class="flex flex-col">
                                <span class="text-lg font-semibold">Aptitudes</span>
                                <MarkdownRenderer :content="character.lists.passive?.map(e => getText(e))?.map(e => `> ${e}`).join('\n\n')" :properties="{ tags: { a: preview } }" />
                            </div>
                        </div>
                    </TabsContent>
                    <TabsContent v-if="character.spellslots > 0" value="spells" class="overflow-y-auto max-h-full">
                        <div class="flex flex-1 flex-col ps-8 gap-4 py-2">
                            <div class="flex flex-1 justify-between items-baseline px-2"><div></div><div class="flex gap-4 items-baseline"><span class="italic text-light-70 dark:text-dark-70 text-sm">{{ character.variables.spells.length }} / {{ character.spellslots }} sorts maitrisés</span><Button class="!font-normal" @click="openSpellPanel">Modifier</Button></div></div>
                            <div class="flex flex-col" v-if="[...(character.lists.spells ?? []), ...character.variables.spells].length > 0">
                                <div class="pb-4 px-2 mt-4 border-b last:border-none border-light-30 dark:border-dark-30 flex flex-col" v-for="spell of [...(character.lists.spells ?? []), ...character.variables.spells].map(e => config.spells.find((f: SpellConfig) => f.id === e)).filter(e => !!e)">
                                    <div class="flex flex-row justify-between">
                                        <span class="text-lg font-bold">{{ spell.name }}</span>
                                        <div class="flex flex-row items-center gap-6">
                                            <div class="flex flex-row text-sm gap-2">
                                                <span v-for="element of spell.elements" :class="elementTexts[element].class" class="border !border-opacity-50 rounded-full !bg-opacity-20 px-2 py-px">{{ elementTexts[element].text }}</span>
                                            </div>
                                            <div class="flex flex-row text-sm gap-1">
                                                <span class="" v-if="spell.rank !== 4">Rang {{ spell.rank }}</span><span v-if="spell.rank !== 4">/</span>
                                                <span class="" v-if="spell.rank !== 4">{{ spellTypeTexts[spell.type] }}</span><span v-if="spell.rank !== 4">/</span>
                                                <span class="">{{ spell.cost }} mana</span><span>/</span>
                                                <span class="capitalize">{{ typeof spell.speed === 'string' ? spell.speed : `${spell.speed} minutes` }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <MarkdownRenderer :content="spell.effect" />
                                </div>
                            </div>
                        </div>
                    </TabsContent>
                    <TabsContent value="inventory" v-if="character.capacity !== false" class="overflow-y-auto max-h-full">
                        
                    </TabsContent>
                    <TabsContent value="notes" class="overflow-y-auto max-h-full">
                        <div class="flex flex-1 flex-col ps-8 gap-4 py-8">
                            <MarkdownRenderer :content="character.notes" />
                        </div>
                    </TabsContent>
                </TabsRoot>
            </div>
        </div>
    </div>
    <div v-else>
        <Head>
            <Title>d[any] - Erreur</Title>
        </Head>
        <div>Erreur de chargement</div>
    </div> -->
</template>