import type { Ability, Alignment, Character, CharacterConfig, CompiledCharacter, Feature, FeatureID, FeatureItem, Level, MainStat, SpellElement, SpellType, TrainingLevel } from "~/types/character";
import { z } from "zod/v4";
import characterConfig from '#shared/character-config.json';
import { fakeA } from "#shared/proses";
import { button, input, loading, numberpicker, select } from "#shared/components.util";
import { div, dom, icon, mergeClasses, text, type Class } from "#shared/dom.util";
import { followermenu, popper } from "#shared/floating.util";
import { clamp } from "#shared/general.util";
import markdownUtil from "#shared/markdown.util";

const config = characterConfig as CharacterConfig;

export const MAIN_STATS = ["strength","dexterity","constitution","intelligence","curiosity","charisma","psyche"] as const;
export const ABILITIES = ["athletics","acrobatics","intimidation","sleightofhand","stealth","survival","investigation","history","religion","arcana","understanding","perception","performance","medecine","persuasion","animalhandling","deception"] as const;
export const LEVELS = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] as const;
export const TRAINING_LEVELS = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15] as const;
export const SPELL_TYPES = ["precision","knowledge","instinct","arts"] as const;
export const CATEGORIES = ["action","reaction","freeaction","misc"] as const;
export const SPELL_ELEMENTS = ["fire","ice","thunder","earth","arcana","air","nature","light","psyche"] as const;

export const defaultCharacter: Character = {
    id: -1,

    name: "",
    people: undefined,
    level: 1,
    health: 0,
    mana: 0,

    training: MAIN_STATS.reduce((p, v) => { p[v] = { 0: 0 }; return p; }, {} as Record<MainStat, Partial<Record<TrainingLevel, number>>>),
    leveling: { 1: 0 },
    abilities: {},
    spells: [],
    modifiers: {},
    choices: {},

    owner: -1,
    visibility: "private",
};
const defaultCompiledCharacter: (character: Character) => CompiledCharacter = (character: Character) => ({
    id: character.id,
    owner: character.owner,
    username: character.username,
    name: character.name,
    health: 0,
    mana: 0,
    race: character.people!,
    modifier: MAIN_STATS.reduce((p, v) => { p[v] = 0; return p; }, {} as Record<MainStat, number>),
    level: character.level,
    variables: {
        health: character.health,
        mana: character.mana,
        equipment: [],
        exhaustion: 0,
        sickness: [],
    },
    action: 0,
    reaction: 0,
    exhaust: 0,
    itempower: 0,
    features: {
        action: [],
        reaction: [],
        freeaction: [],
        passive: [],
    },
    abilities: {
        athletics: 0,
        acrobatics: 0,
        intimidation: 0,
        sleightofhand: 0,
        stealth: 0,
        survival: 0,
        investigation: 0,
        history: 0,
        religion: 0,
        arcana: 0,
        understanding: 0,
        perception: 0,
        performance: 0,
        medecine: 0,
        persuasion: 0,
        animalhandling: 0,
        deception: 0
    },
    spellslots: 0,
    artslots: 0,
    spellranks: {
        instinct: 0,
        knowledge: 0,
        precision: 0,
        arts: 0,
    },
    speed: false,
    defense: {
        hardcap: Infinity,
        static: 6,
        activeparry: 0,
        activedodge: 0,
        passiveparry: 0,
        passivedodge: 0,
    },
    mastery: {
        strength: 0,
        dexterity: 0,
        shield: 0,
        armor: 0,
        multiattack: 1,
        magicpower: 0,
        magicspeed: 0,
        magicelement: 0,
        magicinstinct: 0,
    },
    bonus: {},
    resistance: {},
    initiative: 0,
    capacity: 0,
    lists: {
        action: [],
        freeaction: [],
        reaction: [],
        passive: [],
        spells: character.spells,
    },
    aspect: "",
    notes: character.notes ?? "",
});

export const mainStatTexts: Record<MainStat, string> = {
    "strength": "Force",
    "dexterity": "Dextérité",
    "constitution": "Constitution",
    "intelligence": "Intelligence",
    "curiosity": "Curiosité",
    "charisma": "Charisme",
    "psyche": "Psyché",
};
export const mainStatShortTexts: Record<MainStat, string> = {
    "strength": "FOR",
    "dexterity": "DEX",
    "constitution": "CON",
    "intelligence": "INT",
    "curiosity": "CUR",
    "charisma": "CHA",
    "psyche": "PSY",
};

export const elementTexts: Record<SpellElement, { class: string, text: string }> = {
    fire: { class: 'text-light-red dark:text-dark-red border-light-red dark:border-dark-red bg-light-red dark:bg-dark-red', text: 'Feu' },
    ice: { class: 'text-light-blue dark:text-dark-blue border-light-blue dark:border-dark-blue bg-light-blue dark:bg-dark-blue', text: 'Glace' },
    thunder: { class: 'text-light-yellow dark:text-dark-yellow border-light-yellow dark:border-dark-yellow bg-light-yellow dark:bg-dark-yellow', text: 'Foudre' },
    earth: { class: 'text-light-orange dark:text-dark-orange border-light-orange dark:border-dark-orange bg-light-orange dark:bg-dark-orange', text: 'Terre' },
    arcana: { class: 'text-light-indigo dark:text-dark-indigo border-light-indigo dark:border-dark-indigo bg-light-indigo dark:bg-dark-indigo', text: 'Arcane' },
    air: { class: 'text-light-lime dark:text-dark-lime border-light-lime dark:border-dark-lime bg-light-lime dark:bg-dark-lime', text: 'Air' },
    nature: { class: 'text-light-green dark:text-dark-green border-light-green dark:border-dark-green bg-light-green dark:bg-dark-green', text: 'Nature' },
    light: { class: 'text-light-yellow dark:text-dark-yellow border-light-yellow dark:border-dark-yellow bg-light-yellow dark:bg-dark-yellow', text: 'Lumière' },
    psyche: { class: 'text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-purple bg-light-purple dark:bg-dark-purple', text: 'Psy' },
};

export function alignmentToString(alignment: Alignment): string
{
    switch(alignment.loyalty)
    {
        case 'chaotic':
            return alignment.kindness === 'evil' ? 'Chaotique mauvais' : alignment.kindness === 'neutral' ? 'Chaotique neutre' : 'Chaotique bon';
        case 'loyal':
            return alignment.kindness === 'evil' ? 'Loyal mauvais' : alignment.kindness === 'neutral' ? 'Loyal neutre' : 'Loyal bon';
        case 'neutral':
            return alignment.kindness === 'evil' ? 'Neutre mauvais' : alignment.kindness === 'neutral' ? 'Neutre' : 'Neutre bon';
    }
}
export const spellTypeTexts: Record<SpellType, string> = { "instinct": "Instinct", "knowledge": "Savoir", "precision": "Précision", "arts": "Oeuvres" };

export const CharacterValidation = z.object({
    id: z.number(),
    name: z.string(),
    people: z.number().nullable(),
    level: z.number().min(1).max(20),
    aspect: z.number().nullable().optional(),
    notes: z.string().nullable().optional(),
    health: z.number().default(0),
    mana: z.number().default(0),
    training: z.record(z.enum(MAIN_STATS), z.record(z.enum(TRAINING_LEVELS.map(String)), z.number().optional())),
    leveling: z.record(z.enum(LEVELS.map(String)), z.number().optional()),
    abilities: z.record(z.enum(ABILITIES), z.number().optional()),
    spells: z.string().array(),
    modifiers: z.record(z.enum(MAIN_STATS), z.number().optional()),
    choices: z.record(z.string(), z.array(z.number())),
    owner: z.number(),
    username: z.string().optional(),
    visibility: z.enum(["public", "private"]),
    thumbnail: z.any(),
});

const stepTexts: Record<number, string> = {
    0: 'Choisissez un peuple afin de définir la progression de votre personnage au fil des niveaux.',
    1: 'Déterminez la progression de votre personnage en choisissant une option par niveau disponible.',
    2: 'Spécialisez votre personnage en attribuant vos points d\'entrainement parmi les 7 branches disponibles.\nChaque paliers de 3 points augmentent votre modifieur.',
    3: 'Diversifiez vos possibilités en affectant vos points dans les différentes compétences disponibles.',
    4: 'Déterminez l\'Aspect qui vous corresponds et benéficiez de puissants bonus.'
};

type Property = { value: number | string | false, id: string, operation: "set" | "add" };
type PropertySum = { list: Array<Property>, value: number, _dirty: boolean };
export class CharacterCompiler
{
    protected _character!: Character;
    protected _result!: CompiledCharacter;
    protected _buffer: Record<string, PropertySum> = {};

    constructor(character: Character)
    {
        this.character = character;
    }

    set character(value: Character)
    {
        this._character = value;
        this._result = defaultCompiledCharacter(value);
        this._buffer = {};
        
        if(value.people !== undefined)
        {
            Object.entries(value.leveling).forEach(e => this.add(config.peoples[value.people!]!.options[parseInt(e[0]) as Level][e[1]]!));

            MAIN_STATS.forEach(stat => {
                Object.entries(value.training[stat]).forEach(option => this.add(config.training[stat][parseInt(option[0]) as TrainingLevel][option[1]]))
            });

            Object.entries(value.abilities).forEach(e => this._result.abilities[e[0] as Ability] = e[1]);
        }
    }
    get character(): Character
    {
        return this._character;
    }
    get compiled(): CompiledCharacter
    {
        this.compile(Object.keys(this._buffer));

        return this._result;
    }
    get values(): Record<string, number>
    {
        const keys = Object.keys(this._buffer);
        this.compile(keys);

        return keys.reduce((p, v) => {
            p[v] = this._buffer[v]!.value;
            return p;
        }, {} as Record<string, number>);
    }
    
    protected add(feature?: string)
    {
        if(!feature)
            return;

        config.features[feature]?.effect.forEach(this.apply.bind(this));
    }
    protected remove(feature?: string)
    {
        if(!feature)
            return;

        config.features[feature]?.effect.forEach(this.undo.bind(this));
    }
    protected apply(feature?: FeatureItem)
    {
        if(!feature)
            return;

        switch(feature.category)
        {
            case "list":
                if(feature.action === 'add' && !this._result.lists[feature.list]!.includes(feature.item))
                    this._result.lists[feature.list]!.push(feature.item);
                else
                    this._result.lists[feature.list] = this._result.lists[feature.list]!.filter((e: string) => e !== feature.item);

                return;
            case "value":
                this._buffer[feature.property] ??= { list: [], value: 0, _dirty: true };

                this._buffer[feature.property]!.list.push({ operation: feature.operation, id: feature.id, value: feature.value });

                this._buffer[feature.property]!._dirty = true;

                return;
            case "choice":
                const choice = this._character.choices[feature.id];

                if(choice)
                    choice.forEach(e => this.apply(feature.options[e]!));

                return;
            default:
                return;
        }
    }
    protected undo(feature?: FeatureItem)
    {
        if(!feature)
            return;

        switch(feature.category)
        {
            case "list":
                if(feature.action === 'remove' && !this._result.lists[feature.list]!.includes(feature.item))
                    this._result.lists[feature.list]!.push(feature.item);
                else
                    this._result.lists[feature.list] = this._result.lists[feature.list]!.filter(e => e !== feature.item);

                return;
            case "value":
                this._buffer[feature.property] ??= { list: [], value: 0, _dirty: true };

                this._buffer[feature.property]!.list.splice(this._buffer[feature.property]!.list.findIndex(e => e.id === feature.id), 1);

                this._buffer[feature.property]!._dirty = true;

                return;
            case "choice":
                const choice = this._character.choices[feature.id];

                if(choice)
                    choice.forEach(e => this.undo(feature.options[e]!));

                return;
            default:
                return;
        }
    }
    protected compile(properties: string[])
    {
        const queue = properties;
        queue.forEach(property => {
            const buffer = this._buffer[property];

            if(property === "")
                return

            if(buffer && buffer._dirty === true)
            {
                let sum = 0;
                for(let i = 0; i < buffer.list.length; i++)
                {
                    if(typeof buffer.list[i]!.value === 'string') // Add or set a modifier
                    {
                        const modifier = this._buffer[buffer.list[i]!.value as string];
                        if(!modifier)
                        {
                            queue.push(property);
                            return;
                        }
                        else if(modifier._dirty)
                        {
                            //Put it back in queue since its dependencies haven't been resolved yet
                            queue.push(property);
                            return;
                        }
                        else
                        {
                            if(buffer.list[i]?.operation === 'add')
                                sum += modifier.value;
                            else if(buffer.list[i]?.operation === 'set')
                                sum = modifier.value;
                        }
                    }
                    else
                    {
                        if(buffer.list[i]?.operation === 'add')
                            sum += buffer.list[i]!.value as number;
                        else if(buffer.list[i]?.operation === 'set')
                            sum = buffer.list[i]!.value as number;
                    }
                }

                const path = property.split("/");
                const object = path.length === 1 ? this._result : path.slice(0, -1).reduce((p, v) => { p[v] ??= {}; return p[v]; }, this._result as any);

                if(object.hasOwnProperty(path.slice(-1)[0]!))
                    object[path.slice(-1)[0]!] = sum;

                this._buffer[property]!.value = sum;
                this._buffer[property]!._dirty = false;
            }
        });
    }
}
export class CharacterBuilder extends CharacterCompiler
{
    private _container: HTMLDivElement;
    private _content?: HTMLDivElement;
    private _stepsHeader: HTMLDivElement[] = [];
    private _stepsContent: Array<BuilderTab | (() => BuilderTab)> = [];
    private _helperText!: Text;
    private id?: string;

    constructor(container: HTMLDivElement, id?: string)
    {
        super(Object.assign({}, defaultCharacter));
        this.id = id;
        this._container = container;

        if(id)
        {
            const load = div("flex justify-center items-center w-full h-full", [ loading('large') ]);
            container.replaceChildren(load);
            useRequestFetch()(`/api/character/${id}`).then(character => {
                if(character)
                {
                    this._character = character;

                    document.title = `d[any] - Edition de ${character.name ?? 'nouveau personnage'}`;
                    load.remove();

                    this.render();
                    this.display(0);
                }
            });
        }
        else
        {
            document.title = `d[any] - Edition de nouveau personnage`;

            this.render();
            this.display(0);
        }
    }
    private render()
    {
        this._stepsHeader = [
            dom("div", { class: "group flex items-center", }, [
                dom("div", { class: "px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent group-data-[state=active]:text-accent-blue cursor-pointer", listeners: { click: e => this.display(0) } }, [text("Peuples")]),
            ]),
            dom("div", { class: "group flex items-center", }, [
                icon("radix-icons:chevron-right", { class: "w-6 h-6 flex justify-center items-center group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" }),
                dom("div", { class: "px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent group-data-[state=active]:text-accent-blue cursor-pointer", listeners: { click: e => this.display(1) } }, [text("Niveaux")]),
            ]),
            dom("div", { class: "group flex items-center", }, [
                icon("radix-icons:chevron-right", { class: "w-6 h-6 flex justify-center items-center group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" }),
                dom("div", { class: "px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent group-data-[state=active]:text-accent-blue cursor-pointer", listeners: { click: e => this.display(2) } }, [text("Entrainement")]),
            ]),
            dom("div", { class: "group flex items-center", }, [
                icon("radix-icons:chevron-right", { class: "w-6 h-6 flex justify-center items-center group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" }),
                dom("div", { class: "px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent group-data-[state=active]:text-accent-blue cursor-pointer", listeners: { click: e => this.display(3) } }, [text("Compétences")]),
            ]),
            dom("div", { class: "group flex items-center", }, [
                icon("radix-icons:chevron-right", { class: "w-6 h-6 flex justify-center items-center group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" }),
                dom("div", { class: "px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent group-data-[state=active]:text-accent-blue cursor-pointer", listeners: { click: e => this.display(4) } }, [text("Aspect")])
            ]),
        ];
        this._stepsContent = [
            new PeoplePicker(this),
            () => new LevelPicker(this),
            () => new TrainingPicker(this),
            () => new AbilityPicker(this),
            () => new AspectPicker(this),
        ];
        this._helperText = text("Choisissez un peuple afin de définir la progression de votre personnage au fil des niveaux.")
        this._content = dom('div', { class: 'flex-1 outline-none max-w-full w-full overflow-y-auto', attributes: { id: 'characterEditorContainer' } });
        this._container.appendChild(div('flex flex-1 flex-col justify-start items-center px-8 w-full h-full overflow-y-hidden', [
            div("flex w-full flex-row gap-4 items-center justify-between px-4 bg-light-0 dark:bg-dark-0 z-20", [
                div(), div("flex w-full flex-row gap-4 items-center justify-center relative", this._stepsHeader), div(undefined, [ popper(icon("radix-icons:question-mark-circled", { height: 20, width: 20 }), { 
                    arrow: true,
                    offset: 8,
                    content: [ this._helperText ],
                    placement: "bottom-end",
                    class: "max-w-96 fixed hidden TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50"
                }) ]),
            ]),
            this._content,
        ]));
    }
    display(step: number)
    {
        if(step < 0 || step >= this._stepsHeader.length)
            return;

        if(step !== 0 && this._stepsContent.slice(0, step).some(e => !(e as BuilderTab).validate()))
            return;

        this._stepsContent.forEach((e, i, arr) => arr[i] = i <= step ? typeof e === 'function' ? e() : e : e);

        this._stepsHeader.forEach(e => e.setAttribute('data-state', 'inactive'));
        this._stepsHeader[step]!.setAttribute('data-state', 'active');

        (this._stepsContent[step]! as BuilderTab).update();
        this._content?.replaceChildren(...(this._stepsContent[step] as BuilderTab)!.dom);

        this._helperText.textContent = stepTexts[step]!;
    }
    async save(leave: boolean = true)
    {
        if(this.id === 'new')
        {
            //@ts-ignore
            this.id = this._character.id = this._result.id = await useRequestFetch()(`/api/character`, {
                method: 'post',
                body: this._character,
                onResponseError: (e) => {
                    //add({ title: 'Erreur d\'enregistrement', content: e.response.status === 401 ? "Vous n'êtes pas autorisé à effectué cette opération" : e.response.statusText, type: 'error', duration: 25000, timer: true });
                }
            });
            //add({ content: 'Personnage créé', type: 'success', duration: 25000, timer: true });
            useRouter().replace({ name: 'character-id-edit', params: { id: this.id } })
            if(leave) useRouter().push({ name: 'character-id', params: { id: this.id } });
        }
        else
        {
            //@ts-ignore
            await useRequestFetch()(`/api/character/${this._character.id}`, {
                method: 'post',
                body: this._character,
                onResponseError: (e) => {
                    //add({ title: 'Erreur d\'enregistrement', content: e.response.status === 401 ? "Vous n'êtes pas autorisé à effectué cette opération" : e.response.statusText, type: 'error', duration: 25000, timer: true });
                }
            });
            //add({ content: 'Personnage enregistré', type: 'success', duration: 25000, timer: true });
            if(leave) useRouter().push({ name: 'character-id', params: { id: this.id } });
        }
    }

    updateLevel(level: Level)
    {
        this._character.level = level;

        if(this._character.leveling) //Invalidate higher levels
        {
            for(let _level = 20; _level > this._character.level; _level--)
            {
                const level = _level as Level;
                if(this._character.leveling.hasOwnProperty(level))
                {
                    const option = this._character.leveling[level]!;
                    delete this._character.leveling[level];

                    this.remove(config.peoples[this._character.people!]!.options[level][option]);
                }
            }
        }
    }
    toggleLevelOption(level: Level, choice: number)
    {
        if(level > this._character.level) //Cannot add more level options than the current level
            return;

        if(this._character.leveling === undefined) //Add level 1 if missing
        {
            this._character.leveling = { 1: 0 };
            this.add(config.peoples[this._character.people!]!.options[1][0]!);
        }

        if(level == 1) //Cannot remove level 1
            return;

        for(let i = 1; i < level; i++) //Check previous levels as a requirement
        {
            if(!this._character.leveling.hasOwnProperty(i))
                return;
        }

        if(this._character.leveling.hasOwnProperty(level) && this._character.leveling[level] !== choice) //If the given level is already selected, switch to the new choice
        {
            this.remove(config.peoples[this._character.people!]!.options[level][this._character.leveling[level]!]);
            this.add(config.peoples[this._character.people!]!.options[level][choice]);

            this._character.leveling[level] = choice;
        }
        else if(!this._character.leveling.hasOwnProperty(level)) 
        {
            this._character.leveling[level] = choice;
            
            this.add(config.peoples[this._character.people!]!.options[level][choice]!);
        }
    }
    toggleTrainingOption(stat: MainStat, level: TrainingLevel, choice: number)
    {
        if(level == 0) //Cannot remove the initial level
            return;

        for(let i = 1; i < level; i++) //Check previous levels as a requirement
        {
            if(!this._character.training[stat].hasOwnProperty(i as TrainingLevel))
                return;
        }

        if(this._character.training[stat].hasOwnProperty(level))
        {
            if(this._character.training[stat][level] === choice)
            {
                for(let i = 15; i >= level; i --) //Invalidate higher levels
                {
                    if(this._character.training[stat].hasOwnProperty(i))
                    {
                        this.remove(config.training[stat][i as TrainingLevel][this._character.training[stat][i as TrainingLevel]!]);
                        delete this._character.training[stat][i as TrainingLevel];
                    }
                }
            }
            else
            {
                this.remove(config.training[stat][level][this._character.training[stat][level]!]);
                this._character.training[stat][level] = choice;
                this.add(config.training[stat][level][choice]);
            }
        }
        else
        {
            this._character.training[stat][level] = choice;
            this.add(config.training[stat][level][choice]);
        }
    }
    private choose(id: string, choices: number[])
    {
        const current = this._character.choices[id];
        const [ feature, effect ] = id.split('-');
        const option = config.features[feature!]!.effect.find(e => e.id === effect);

        if(option?.category === 'choice')
        {
            if(current !== undefined)
            {
                current.forEach(e => this.undo(option.options[e]));
            }
            if(choices.length > 0)
            {
                choices.forEach(e => this.apply(option.options[e]));
            }

            this._character.choices[id] = choices;
        }
    }
}

type PickableFeatureSettings = { state?: boolean, onToggle?: (state: boolean) => void, onChoice?: (options: number[]) => void, disabled?: boolean, class?: { selected?: Class, container?: Class, disabled?: Class }, choices?: Record<string, number[]>, };
export class PickableFeature
{
    private _content: HTMLElement;

    private _feature: Feature;
    
    private _characterChoices?: Record<string, number[]>;
    private _choiceDom?: HTMLElement;
    private _choices?: Extract<FeatureItem, { category: 'choice' }>[];

    private _settings?: PickableFeatureSettings;

    constructor(feature: FeatureID, settings?: PickableFeatureSettings)
    {
        this._feature = config.features[feature]!;
        this._settings = settings;

        if(settings?.choices)
        {
            this._characterChoices = settings.choices;
            this._choices = this._feature.effect.filter(e => e.category === 'choice');
            this._choiceDom = this._choices.length > 0 ? dom('div', { class: 'absolute -bottom-px -right-px border border-light-50 dark:border-dark-50 bg-light-10 dark:bg-dark-10 group-data-[active]:hover:border-light-70 dark:group-data-[active]:hover:border-dark-70 flex p-1 justify-center items-center', listeners: { click: (e) => e.stopImmediatePropagation() ?? this.choose() } }, [ icon('radix-icons:gear') ]) : undefined;
        }
        
        this._content = dom("div", { attributes: { 'data-active': settings?.state, 'data-disabled': settings?.disabled ?? false }, class: ["group border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-[400px] hover:border-light-70 dark:hover:border-dark-70 relative data-[active]:!border-accent-blue data-[active]:bg-accent-blue data-[active]:bg-opacity-20 data-[disabled]:hover:border-light-40 dark:data-[disabled]:hover:border-dark-40 data-[disabled]:opacity-30 data-[disabled]:cursor-default", settings?.class?.container, settings?.class?.selected ? mergeClasses(settings?.class?.selected).split(' ').map(e => `data-[state='active']:${e}`).join(' ') : undefined, settings?.class?.disabled ? mergeClasses(settings?.class?.disabled).split(' ').map(e => `data-[disabled]:${e}`).join(' ') : undefined], listeners: { click: e => this.toggle() }}, [ 
            markdownUtil(this._feature.description, undefined, { tags: { a: fakeA } }), 
            this._choiceDom,
        ]);
    }
    toggle(state?: boolean)
    {
        if(this._content.hasAttribute('data-disabled'))
            return this._content.hasAttribute('data-active');

        const s = this._content.toggleAttribute('data-active', state);

        this._settings?.onToggle && this._settings?.onToggle(s);

        return s;
    }
    choose()
    {
        if(!this._choices || this._choices.length === 0)
            return;

        const menu = followermenu(this._choiceDom!, [ div('px-24 py-6 flex flex-col items-center text-light-100 dark:text-dark-100', this._choices.map(e => div('flex flex-row items-center', [ text(e.text), div('flex flex-col', Array(e.settings?.amount ?? 1).fill(0).map((_, i) => ( 
            select(e.options.map((_e, _i) => ({ text: _e.text, value: _i })), { defaultValue: this._characterChoices![e.id] !== undefined ? this._characterChoices![e.id]![i] : undefined, change: (value) => { this._characterChoices![e.id] ??= []; this._characterChoices![e.id]![i] = value }, class: { container: 'w-32' } }) 
        ))) ]))) ], { arrow: true, offset: { mainAxis: 8 }, cover: 'width', placement: 'bottom', priority: false, viewport: document.getElementById('characterEditorContainer') ?? undefined, });
    }
    get dom()
    {
        return this._content;
    }
}
interface BuilderTab {
    dom: Array<Node | string>;
    update: () => void;
    validate: () => boolean;
};
class PeoplePicker implements BuilderTab
{
    private _builder: CharacterBuilder;
    private _content: Array<Node | string>;

    private _nameInput: HTMLInputElement;
    private _visibilityInput: HTMLDivElement;
    private _options: HTMLDivElement[];

    private _activeOption?: HTMLDivElement;

    constructor(builder: CharacterBuilder)
    {
        this._builder = builder;

        this._nameInput = input('text', {
            input: (value) => {
                this._builder.character.name = value ?? '';
                document.title = `d[any] - Edition de ${this._builder.character.name || 'nouveau personnage'}`;
            }
        });
        this._visibilityInput = dom("div", { class: `group mx-3 w-12 h-6 select-none transition-all border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
        data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35  hover:border-light-50 dark:hover:border-dark-50  focus:shadow-raw focus:shadow-light-40 dark:focus:shadow-dark-40
        data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 relative py-[2px]`, attributes: { "data-state": "unckecked" }, listeners: {
            click: (e: Event) => {
                this._builder.character.visibility = this._builder.character.visibility === "private" ? "public" : "private";
                this._visibilityInput.setAttribute('data-state', this._builder.character.visibility === "private" ? "checked" : "unchecked");
            }
        }}, [ div('block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 group-data-[state=checked]:translate-x-[26px] group-data-[disabled]:bg-light-30 dark:group-data-[disabled]:bg-dark-30 group-data-[disabled]:border-light-30 dark:group-data-[disabled]:border-dark-30') ]);
        
        this._options = config.peoples.map(
            (people, i) => dom("div", { class: "flex flex-col flex-nowrap gap-2 p-2 border border-light-35 dark:border-dark-35 cursor-pointer hover:border-light-70 dark:hover:border-dark-70 w-[320px]", listeners: { click: () => { 
                    this._builder.character.people = i;
                    "border-accent-blue outline-2 outline outline-accent-blue".split(" ").forEach(e => this._activeOption?.classList.toggle(e, false));
                    this._activeOption = this._options[i]!;
                    "border-accent-blue outline-2 outline outline-accent-blue".split(" ").forEach(e => this._activeOption?.classList.toggle(e, true));
                }
            } }, [div("h-[320px]"), div("text-xl font-bold text-center", [text(people.name)]), div("w-full border-b border-light-50 dark:border-dark-50"), div("text-wrap word-break", [text(people.description)])]),
        );
        
        this._content = [ div("flex flex-1 gap-12 px-2 py-4 justify-center items-center", [
            dom("label", { class: "flex justify-center items-center my-2" }, [
                dom("span", { class: "pb-1 md:p-0", text: "Nom" }),
                this._nameInput,
            ]),
            dom("label", { class: "flex justify-center items-center my-2" }, [
                dom("span", { class: "md:text-base text-sm", text: "Privé ?" }),
                this._visibilityInput,
            ]),
            button(text('Suivant'), () => this._builder.display(1), 'h-[35px] px-[15px]'),
        ]), div('flex flex-1 gap-4 p-2 overflow-x-auto justify-center', this._options)];
    }
    update()
    {
        this._nameInput.value = this._builder.character.name;
        this._visibilityInput.setAttribute('data-state', this._builder.character.visibility === "private" ? "checked" : "unchecked");
        "border-accent-blue outline-2 outline outline-accent-blue".split(" ").forEach(e => this._activeOption?.classList.toggle(e, false));

        if(this._builder.character.people !== undefined)
        {
            this._activeOption = this._options[this._builder.character.people]!;
            "border-accent-blue outline-2 outline outline-accent-blue".split(" ").forEach(e => this._activeOption?.classList.toggle(e, true));
        }
    }
    validate(): boolean
    {
        return this._builder.character.people !== undefined;
    }
    get dom()
    {
        return this._content;
    }
}
class LevelPicker implements BuilderTab
{
    private _builder: CharacterBuilder;
    private _content: Array<Node | string>;

    private _levelInput: HTMLInputElement;
    private _pointsInput: HTMLInputElement;
    private _healthText: Text;
    private _manaText: Text;
    private _options: HTMLDivElement[][];

    constructor(builder: CharacterBuilder)
    {
        this._builder = builder;

        this._levelInput = numberpicker({ defaultValue: this._builder.character.level, min: 1, max: 20, input: (value) => {
            this._builder.character.level = value;
            this.updateLevel();
        } });
        this._pointsInput = dom("input", { class: `w-14 mx-4 text-light-70 dark:text-dark-70 tabular-nums bg-light-10 dark:bg-dark-10 appearance-none outline-none ps-3 pe-1 py-1 focus:shadow-raw transition-[box-shadow] border bg-light-20 bg-dark-20 border-light-20 dark:border-dark-20`, attributes: { type: "number", disabled: true }});
        this._healthText = text("0"), this._manaText = text("0");
        
        this._options = Object.entries(config.peoples[this._builder.character.people!]!.options).map(
            (level) => [ div("w-full flex h-px", [div("border-t border-dashed border-light-50 dark:border-dark-50 w-full"), dom('span', { class: "relative left-4" }, [ text(level[0]) ])]),
            div("flex flex-row gap-4 justify-center", level[1].map((option, j) => new PickableFeature(option, { disabled: parseInt(level[0], 10) > this._builder.character.level, state: this._builder.character.leveling[parseInt(level[0], 10) as Level] === j, choices: this._builder.character.choices }).dom))
        ]);
        
        this._content = [ div("flex flex-1 gap-12 px-2 py-4 justify-center items-center", [
            dom("label", { class: "flex justify-center items-center my-2" }, [
                dom("span", { class: "pb-1 md:p-0", text: "Niveau" }),
                this._levelInput,
            ]),
            dom("label", { class: "flex justify-center items-center my-2" }, [
                dom("span", { class: "md:text-base text-sm", text: "Points restantes" }),
                this._pointsInput,
            ]),
            div("flex justify-center items-center gap-2 my-2 md:text-base text-sm", [
                dom("span", { text: "Vie" }),
                this._healthText,
            ]),
            div("flex justify-center items-center gap-2 my-2 md:text-base text-sm", [
                dom("span", { text: "Mana" }),
                this._manaText,
            ]),
            button(text('Suivant'), () => this._builder.display(2), 'h-[35px] px-[15px]'),
        ]), div('flex flex-col flex-1 gap-4 mx-8 my-4', this._options.flatMap(e => [...e]))];
    }
    update()
    {
        const values = this._builder.values;

        this._levelInput.value = this._builder.character.level.toString();
        this._pointsInput.value = (this._builder.character.level - Object.keys(this._builder.character.leveling).length).toString();
        this._healthText.textContent = values.health?.toString() ?? '0';
        this._manaText.textContent = values.mana?.toString() ?? '0';

        this.updateLevel();
    }
    private updateLevel()
    {
        this._builder.updateLevel(this._builder.character.level as Level);

        this._pointsInput.value = (this._builder.character.level - Object.keys(this._builder.character.leveling).length).toString();
        /* this._options.forEach((e, i) => {
            e[0]?.classList.toggle("opacity-30", ((i + 1) as Level) > this._builder.character.level);
            e[1]?.classList.toggle("opacity-30", ((i + 1) as Level) > this._builder.character.level);
            e[1]?.childNodes.forEach((option, j) => {
                'hover:border-light-70 dark:hover:border-dark-70 cursor-pointer'.split(" ").forEach(_e => (option as HTMLDivElement).classList.toggle(_e, ((i + 1) as Level) <= this._builder.character.level));
                '!border-accent-blue bg-accent-blue bg-opacity-20'.split(" ").forEach(_e => (option as HTMLDivElement).classList.toggle(_e, this._builder.character.leveling[((i + 1) as Level)] === j));
            });
        }); */
    }
    validate(): boolean
    {
        return this._builder.character.level - Object.keys(this._builder.character.leveling).length >= 0;
    }
    get dom()
    {
        return this._content;
    }
}
class TrainingPicker implements BuilderTab
{
    private _builder: CharacterBuilder;
    private _content: Array<Node | string>;

    private _pointsInput: HTMLInputElement;
    private _healthText: Text;
    private _manaText: Text;
    private _options: Record<MainStat, HTMLDivElement[][]>;

    private _tab: number = 0;
    private _statIndicator: HTMLSpanElement;
    private _statContainer: HTMLDivElement;

    constructor(builder: CharacterBuilder)
    {
        const statRenderBlock = (stat: MainStat) => {
            return Object.entries(config.training[stat]).map(
                (level) => [ div("w-full flex h-px", [div("border-t border-dashed border-light-50 dark:border-dark-50 w-full"), dom('span', { class: "relative" }, [ text(level[0]) ])]),
                div("flex flex-row gap-4 justify-center", level[1].map((option, j) => new PickableFeature(option, { state: level[0] == '0' || this._builder.character.training[stat as MainStat][level[0] as any as TrainingLevel] === j, choices: this._builder.character.choices }).dom))
            ])
        }
        this._builder = builder;

        this._pointsInput = dom("input", { class: `w-14 mx-4 text-light-70 dark:text-dark-70 tabular-nums bg-light-10 dark:bg-dark-10 appearance-none outline-none ps-3 pe-1 py-1 focus:shadow-raw transition-[box-shadow] border bg-light-20 bg-dark-20 border-light-20 dark:border-dark-20`, attributes: { type: "number", disabled: true }});
        this._healthText = text("0"), this._manaText = text("0");
        
        this._options = MAIN_STATS.reduce((p, v) => { p[v] = statRenderBlock(v); return p; }, {} as Record<MainStat, HTMLDivElement[][]>);
        
        this._statIndicator = dom('span', { class: 'rounded-full w-3 h-3 bg-accent-blue absolute transition-[left] after:content-[attr(data-text)] after:absolute after:-translate-x-1/2 after:top-4 after:p-px after:bg-light-0 dark:after:bg-dark-0 after:text-center' });
        this._statContainer = div('relative  select-none transition-[left] flex flex-1 flex-row max-w-full', Object.values(this._options).map(e => div('flex flex-shrink-0 flex-col gap-4 relative w-full overflow-y-auto px-8', e.flatMap(_e => [..._e]))));
        this._content = [ div("flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10 min-h-20", [
            div('flex flex-shrink gap-3 items-center relative w-48 ms-12', [
                ...MAIN_STATS.map((e, i) => dom('span', { listeners: { click: () => this.switchTab(i) },  class: 'block w-2.5 h-2.5 m-px outline outline-1 outline-transparent hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer' })),
                this._statIndicator,
            ]),
            div('flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10', [
                dom("label", { class: "flex justify-center items-center my-2" }, [
                    dom("span", { class: "md:text-base text-sm", text: "Points restantes" }),
                    this._pointsInput,
                ]),
                div("flex justify-center items-center gap-2 my-2 md:text-base text-sm", [
                    dom("span", { text: "Vie" }),
                    this._healthText,
                ]),
                div("flex justify-center items-center gap-2 my-2 md:text-base text-sm", [
                    dom("span", { text: "Mana" }),
                    this._manaText,
                ]),
                button(text('Suivant'), () => this._builder.display(3), 'h-[35px] px-[15px]'),
            ]), dom('span')
        ]), div('flex flex-1 px-6 overflow-hidden max-w-full', [ this._statContainer ])];

        this.switchTab(0);
    }
    switchTab(tab: number)
    {
        this._tab = tab;
        
        this._statIndicator.setAttribute('data-text', mainStatTexts[MAIN_STATS[tab] as MainStat]);
        this._statIndicator.style.left = `${tab * 1.5}em`;

        this._statContainer.style.left = `-${tab * 100}%`;
    }
    update()
    {
        const values = this._builder.values;
        const training = Object.values(this._builder.character.training).reduce((p, v) => p + Object.values(v).filter(e => e !== undefined).length, 0);

        this._pointsInput.value = ((values.training ?? 0) - training).toString();
        this._healthText.textContent = values.health?.toString() ?? '0';
        this._manaText.textContent = values.mana?.toString() ?? '0';
    }
    validate(): boolean
    {
        const values = this._builder.values;
        const training = Object.values(this._builder.character.training).reduce((p, v) => p + Object.values(v).filter(e => e !== undefined).length, 0);

        return (values.training ?? 0) - training >= 0;
    }
    get dom()
    {
        return this._content;
    }
}
class AbilityPicker implements BuilderTab
{
    private _builder: CharacterBuilder;
    private _content: Array<Node | string>;

    private _pointsInput: HTMLInputElement;
    private _options: HTMLDivElement[];

    private _tooltips: Text[] = [];
    private _maxs: HTMLElement[] = [];

    constructor(builder: CharacterBuilder)
    {
        const numberInput = (value?: number, update?: (value: number) => number | undefined) => {
            const input = dom("input", { class: `w-14 mx-4 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 border border-light-35 dark:border-dark-35 hover:border-light-50 dark:hover:border-dark-50 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20`, listeners: {
                input: (e: Event) => {
                    input.value = (update && update(parseInt(input.value))?.toString()) ?? input.value;
                },
                keydown: (e: KeyboardEvent) => {
                    let value = isNaN(parseInt(input.value)) ? '0' : input.value;
                    switch(e.key)
                    {
                        case "ArrowUp":
                            value = clamp(parseInt(value) + 1, 0, 99).toString();
                            break;
                        case "ArrowDown":
                            value = clamp(parseInt(value) - 1, 0, 99).toString();
                            break;
                        default:
                            break;
                    }

                    if(input.value !== value)
                    {
                        input.value = (update && update(parseInt(value))?.toString()) ?? value;
                    }
                }
            }});

            input.value = value?.toString() ?? "0";
            return input;
        };
        function pushAndReturn<T extends any>(arr: Array<T>, value: T): T
        {
            arr.push(value);
            return value;
        }
        this._builder = builder;

        this._pointsInput = dom("input", { class: `w-14 mx-4 text-light-70 dark:text-dark-70 tabular-nums bg-light-10 dark:bg-dark-10 appearance-none outline-none ps-3 pe-1 py-1 focus:shadow-raw transition-[box-shadow] border bg-light-20 bg-dark-20 border-light-20 dark:border-dark-20`, attributes: { type: "number", disabled: true }});
        
        this._options = ABILITIES.map((e, i) => div('flex flex-col border border-light-50 dark:border-dark-50 p-4 gap-2 w-[200px] relative', [
            div('flex justify-between', [ numberInput(this._builder.character.abilities[e], (value) => {
                const values = this._builder.values;
                const max = (values[`abilities/${e}/max`] ?? 0) + (values[`modifier/${config.abilities[e].max[0]}`] ?? 0) + (values[`modifier/${config.abilities[e].max[1]}`] ?? 0);
                
                this._builder.character.abilities[e] = clamp(value, 0, max);
                Object.assign((this._options[i]?.lastElementChild as HTMLSpanElement | undefined)?.style ?? {}, { width: `${(max === 0 ? 0 : (this._builder.character.abilities[e] ?? 0) / max) * 100}%` });
                this._tooltips[i]!.textContent = `${mainStatTexts[config.abilities[e].max[0]]} (${values[`modifier/${config.abilities[e].max[0]}`] ?? 0}) + ${mainStatTexts[config.abilities[e].max[1]]} (${values[`modifier/${config.abilities[e].max[1]}`] ?? 0}) + ${values[`abilities/${e}/max`] ?? 0}`;
                this._maxs[i]!.textContent = `/ ${max ?? 0}`;

                const abilities = Object.values(this._builder.character.abilities).reduce((p, v) => p + v, 0);
                this._pointsInput.value = ((values.ability ?? 0) - abilities).toString();

                return this._builder.character.abilities[e];
            }), popper(pushAndReturn(this._maxs, dom('span', { class: 'text-lg text-end cursor-pointer', text: '' })), { 
                arrow: true, 
                offset: 6,
                placement: 'bottom-end',
                class: 'max-w-96 fixed hidden TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50',
                content: [ pushAndReturn(this._tooltips, text('')) ]
            })]),
            dom('span', { class: "text-xl text-center font-bold", text: config.abilities[e].name }),
            dom('span', { class: "absolute -bottom-px -left-px h-[3px] bg-accent-blue" }),
        ]));
        
        this._content = [ div("flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10", [
            dom("label", { class: "flex justify-center items-center my-2" }, [
                dom("span", { class: "md:text-base text-sm", text: "Points restantes" }),
                this._pointsInput,
            ]),
            button(text('Suivant'), () => this._builder.display(4), 'h-[35px] px-[15px]'),
        ]), div('flex flex-row flex-wrap justify-center items-center flex-1 gap-12 mx-8 my-4 px-48', this._options)];
    }
    update()
    {
        const values = this._builder.values;
        const abilities = Object.values(this._builder.character.abilities).reduce((p, v) => p + v, 0);

        this._pointsInput.value = ((values.ability ?? 0) - abilities).toString();

        ABILITIES.forEach((e, i) => {
            const max = (values[`abilities/${e}/max`] ?? 0) + (values[`modifier/${config.abilities[e].max[0]}`] ?? 0) + (values[`modifier/${config.abilities[e].max[1]}`] ?? 0);
            
            Object.assign((this._options[i]?.lastElementChild as HTMLSpanElement | undefined)?.style ?? {}, { width: `${(max === 0 ? 0 : (this._builder.character.abilities[e] ?? 0) / max) * 100}%` });
            this._tooltips[i]!.textContent = `${mainStatTexts[config.abilities[e].max[0]]} (${values[`modifier/${config.abilities[e].max[0]}`] ?? 0}) + ${mainStatTexts[config.abilities[e].max[1]]} (${values[`modifier/${config.abilities[e].max[1]}`] ?? 0}) + ${values[`abilities/${e}/max`] ?? 0}`;
            this._maxs[i]!.textContent = `/ ${max ?? 0}`;

            return this._builder.character.abilities[e];
        })
    }
    validate(): boolean
    {
        const values = this._builder.values;
        const abilities = Object.values(this._builder.character.abilities).reduce((p, v) => p + v, 0);

        return (values.ability ?? 0) - abilities >= 0;
    }
    get dom()
    {
        return this._content;
    }
}
class AspectPicker implements BuilderTab
{
    private _builder: CharacterBuilder;
    private _content: Array<Node | string>;

    private _physicInput: HTMLInputElement;
    private _mentalInput: HTMLInputElement;
    private _personalityInput: HTMLInputElement;

    private _filter: boolean = true;

    private _options: HTMLDivElement[];

    constructor(builder: CharacterBuilder)
    {
        this._builder = builder;

        this._physicInput = dom("input", { class: `w-14 mx-4 text-light-70 dark:text-dark-70 tabular-nums bg-light-10 dark:bg-dark-10 appearance-none outline-none ps-3 pe-1 py-1 focus:shadow-raw transition-[box-shadow] border bg-light-20 bg-dark-20 border-light-20 dark:border-dark-20`, attributes: { type: "number", disabled: true }});
        this._mentalInput = dom("input", { class: `w-14 mx-4 text-light-70 dark:text-dark-70 tabular-nums bg-light-10 dark:bg-dark-10 appearance-none outline-none ps-3 pe-1 py-1 focus:shadow-raw transition-[box-shadow] border bg-light-20 bg-dark-20 border-light-20 dark:border-dark-20`, attributes: { type: "number", disabled: true }});
        this._personalityInput = dom("input", { class: `w-14 mx-4 text-light-70 dark:text-dark-70 tabular-nums bg-light-10 dark:bg-dark-10 appearance-none outline-none ps-3 pe-1 py-1 focus:shadow-raw transition-[box-shadow] border bg-light-20 bg-dark-20 border-light-20 dark:border-dark-20`, attributes: { type: "number", disabled: true }});
        
        this._options = config.aspects.map((e, i) => dom('div', { attributes: { "data-aspect": i.toString() }, listeners: { click: () => {
            this._builder.character.aspect = i;
            this._options.forEach(_e => _e.setAttribute('data-state', 'inactive'));
            this._options[i]?.setAttribute('data-state', 'active');
        }}, class: 'group flex flex-col w-[360px] border border-light-35 dark:border-dark-35 hover:border-light-50 dark:hover:border-dark-50 cursor-pointer' }, [
            div('bg-light-10 dark:bg-dark-10 border-b border-light-35 dark:border-dark-35 p-2 flex flex-col gap-2  group-data-[state=active]:bg-accent-blue group-data-[state=active]:bg-opacity-10', [
                div('flex flex-row gap-8 ps-4 items-center', [
                    div("flex flex-1 flex-col gap-2 justify-center", [ div('text-lg font-bold', [ text(e.name) ]), dom('span', { class: 'border-b w-full border-light-50 dark:border-dark-50 group-data-[state=active]:border-b-[4px] group-data-[state=active]:border-accent-blue' }) ]),
                    div('rounded-full w-[96px] h-[96px] border border-light-50 dark:border-dark-50 bg-light-100 dark:bg-dark-100 !bg-opacity-10')
                ])
            ]),
            div('flex justify-stretch items-stretch py-2 px-4 gap-4', [
                div('flex flex-col flex-1 items-stretch gap-4', [
                    div('flex flex-1 justify-between', [ text('Difficulté'), div('text-sm font-bold', [ text(e.difficulty.toString()) ]) ]),
                    div('flex flex-1 justify-between', [ text('Bonus'), div('text-sm font-bold', [ text(e.stat === 'special' ? 'Special' : mainStatTexts[e.stat]) ]) ])
                ]),
                div('w-px h-full bg-light-50 dark:bg-dark-50'),
                div('flex flex-col items-center justify-between py-2', [
                    div('text-sm italic', [ text(alignmentToString(e.alignment)) ]),
                    div(['text-sm font-bold', { "text-light-purple dark:text-dark-purple italic": e.magic, "text-light-orange dark:text-dark-orange": !e.magic }], [ text(e.magic ? 'Magie autorisée' : 'Magie interdite') ]),
                ]),
            ])
        ]));

        const filterSwitch = dom("div", { class: `group mx-3 w-12 h-6 select-none transition-all border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35 hover:border-light-50 dark:hover:border-dark-50 focus:shadow-raw focus:shadow-light-40 dark:focus:shadow-dark-40 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 relative py-[2px]`, attributes: { "data-state": this._filter ? "checked" : "unchecked" }, listeners: {
            click: (e: Event) => {
                this._filter = !this._filter;
                filterSwitch.setAttribute('data-state', this._filter ? "checked" : "unchecked");
                this.update();
            }
        }}, [ div('block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 group-data-[state=checked]:translate-x-[26px] group-data-[disabled]:bg-light-30 dark:group-data-[disabled]:bg-dark-30 group-data-[disabled]:border-light-30 dark:group-data-[disabled]:border-dark-30') ]);
        
        this._content = [ div("flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10", [
            dom("label", { class: "flex justify-center items-center my-2" }, [
                dom("span", { class: "md:text-base text-sm", text: "Physique" }),
                this._physicInput,
            ]),
            dom("label", { class: "flex justify-center items-center my-2" }, [
                dom("span", { class: "md:text-base text-sm", text: "Mental" }),
                this._mentalInput,
            ]),
            dom("label", { class: "flex justify-center items-center my-2" }, [
                dom("span", { class: "md:text-base text-sm", text: "Caractère" }),
                this._personalityInput,
            ]),
            dom("label", { class: "flex justify-center items-center my-2" }, [
                dom("span", { class: "md:text-base text-sm", text: "Filtrer ?" }),
                filterSwitch,
            ]),
            button(text('Enregistrer'), () => this._builder.save(), 'h-[35px] px-[15px]'),
        ]), div('flex flex-row flex-wrap justify-center items-center flex-1 gap-8 mx-8 my-4 px-8', this._options)];
    }
    update()
    {
        const physic = Object.values(this._builder.character.training['strength']).length + Object.values(this._builder.character.training['dexterity']).length + Object.values(this._builder.character.training['constitution']).length;
        const mental = Object.values(this._builder.character.training['intelligence']).length + Object.values(this._builder.character.training['curiosity']).length;
        const personality = Object.values(this._builder.character.training['charisma']).length + Object.values(this._builder.character.training['psyche']).length;

        this._physicInput.value = physic.toString();
        this._mentalInput.value = mental.toString();
        this._personalityInput.value = personality.toString();

        (this._content[1] as HTMLElement).replaceChildren(...this._options.filter(e => {
            const index = parseInt(e.getAttribute('data-aspect')!);
            const aspect = config.aspects[index]!;

            e.setAttribute('data-state', this._builder.character.aspect === index ? 'active' : 'inactive');

            if(!this._filter)
                return true;

            if(physic > aspect.physic.max || physic < aspect.physic.min)
                return false;
            if(mental > aspect.mental.max || mental < aspect.mental.min)
                return false;
            if(personality > aspect.personality.max || personality < aspect.personality.min)
                return false;

            return true;
        }));
    }
    validate(): boolean
    {
        const physic = Object.values(this._builder.character.training['strength']).length + Object.values(this._builder.character.training['dexterity']).length + Object.values(this._builder.character.training['constitution']).length;
        const mental = Object.values(this._builder.character.training['intelligence']).length + Object.values(this._builder.character.training['curiosity']).length;
        const personality = Object.values(this._builder.character.training['charisma']).length + Object.values(this._builder.character.training['psyche']).length;

        if(this._builder.character.aspect === undefined)
            return false;

        const aspect = config.aspects[this._builder.character.aspect]!

        if(physic > aspect.physic.max || physic < aspect.physic.min)
            return false;
        if(mental > aspect.mental.max || mental < aspect.mental.min)
            return false;
        if(personality > aspect.personality.max || personality < aspect.personality.min)
            return false;

        return true;
    }
    get dom()
    {
        return this._content;
    }
}