import CollapsableArea from "@/components/CollapsableArea";
import InputField from "@/components/form/InputField";
import TexteAreaInput from "@/components/form/TexteAreaInput";
import TextInput from "@/components/form/TextInput";
import SelectBox from "@/components/form/SelectBox";
import {AlertContext} from "@/context/AlertContext";
import {SessionContext} from "@/context/SessionContext";
import {
    Attribute,
    CharacterAttribute,
    characterCategories,
    CharacterElement,
    basicCharacterElements,
    advancedCharacterElements,
    CharacterProps,
    characterStatus
} from "@/lib/models/Character";
import System from "@/lib/models/System";
import {
    faArrowLeft,
    faBook,
    faPlus,
    faSave,
    faScroll,
    faUser,
    faSliders,
    faGlobe,
    faCommentDots,
    faStickyNote
} from "@fortawesome/free-solid-svg-icons";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {Dispatch, SetStateAction, useContext, useEffect, useState} from "react";
import CharacterSectionElement from "@/components/book/settings/characters/CharacterSectionElement";
import DeleteButton from "@/components/form/DeleteButton";
import {useTranslations} from "next-intl";
import {LangContext} from "@/context/LangContext";
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
import {BookContext} from "@/context/BookContext";

type AttributeResponse = { type: string; values: Attribute[] }[];

interface CharacterDetailProps {
    selectedCharacter: CharacterProps | null;
    setSelectedCharacter: Dispatch<SetStateAction<CharacterProps | null>>;
    handleCharacterChange: (key: keyof CharacterProps, value: string) => void;
    handleAddElement: (section: keyof CharacterProps, element: any) => void;
    handleRemoveElement: (
        section: keyof CharacterProps,
        index: number,
        attrId: string,
    ) => void;
    handleSaveCharacter: () => void;
    handleDeleteCharacter: (characterId: string) => Promise<void>;
}

export default function CharacterDetail(
    {
        setSelectedCharacter,
        selectedCharacter,
        handleCharacterChange,
        handleRemoveElement,
        handleAddElement,
        handleSaveCharacter,
        handleDeleteCharacter,
    }: CharacterDetailProps
) {
    const t = useTranslations();
    const {lang} = useContext(LangContext);
    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
    const {book} = useContext(BookContext);
    const {session} = useContext(SessionContext);
    const {errorMessage} = useContext(AlertContext);
    const [showAdvanced, setShowAdvanced] = useState<boolean>(false);

    useEffect((): void => {
        if (selectedCharacter?.id !== null) {
            getAttributes().then();
        }
    }, []);
    
    async function getAttributes(): Promise<void> {
        try {
            let response: AttributeResponse;
            if (isCurrentlyOffline()) {
                response = await window.electron.invoke<AttributeResponse>('db:character:attributes', {
                    characterId: selectedCharacter?.id,
                });
            } else {
                if (book?.localBook) {
                    response = await window.electron.invoke<AttributeResponse>('db:character:attributes', {
                        characterId: selectedCharacter?.id,
                    });
                } else {
                    response = await System.authGetQueryToServer<AttributeResponse>(`character/attribute`, session.accessToken, lang, {
                        characterId: selectedCharacter?.id,
                    });
                }
            }
            if (response) {
                const attributes: CharacterAttribute = {};
                response.forEach((item: {
                    type: string
                    values: Attribute[]
                }):void => {
                    attributes[item.type] = item.values;
                });

                setSelectedCharacter({
                    id: selectedCharacter?.id ?? '',
                    name: selectedCharacter?.name ?? '',
                    lastName: selectedCharacter?.lastName ?? '',
                    nickname: selectedCharacter?.nickname ?? '',
                    age: selectedCharacter?.age ?? '',
                    gender: selectedCharacter?.gender ?? '',
                    species: selectedCharacter?.species ?? '',
                    nationality: selectedCharacter?.nationality ?? '',
                    status: selectedCharacter?.status ?? 'alive',
                    category: selectedCharacter?.category ?? 'none',
                    title: selectedCharacter?.title ?? '',
                    image: selectedCharacter?.image ?? '',
                    role: selectedCharacter?.role ?? '',
                    biography: selectedCharacter?.biography,
                    history: selectedCharacter?.history,
                    speechPattern: selectedCharacter?.speechPattern,
                    catchphrase: selectedCharacter?.catchphrase,
                    residence: selectedCharacter?.residence,
                    notes: selectedCharacter?.notes,
                    color: selectedCharacter?.color,
                    physical: attributes.physical ?? [],
                    psychological: attributes.psychological ?? [],
                    relations: attributes.relations ?? [],
                    skills: attributes.skills ?? [],
                    weaknesses: attributes.weaknesses ?? [],
                    strengths: attributes.strengths ?? [],
                    goals: attributes.goals ?? [],
                    motivations: attributes.motivations ?? [],
                    arc: attributes.arc ?? [],
                    secrets: attributes.secrets ?? [],
                    fears: attributes.fears ?? [],
                    flaws: attributes.flaws ?? [],
                    beliefs: attributes.beliefs ?? [],
                    conflicts: attributes.conflicts ?? [],
                    quotes: attributes.quotes ?? [],
                    distinguishingMarks: attributes.distinguishingMarks ?? [],
                    items: attributes.items ?? [],
                    affiliations: attributes.affiliations ?? [],
                });
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t("characterDetail.fetchAttributesError"));
            }
        }
    }
    
    return (
        <div className="space-y-4">
            <div
                className="flex justify-between items-center p-4 border-b border-secondary/50 bg-tertiary/50 backdrop-blur-sm">
                <button onClick={() => setSelectedCharacter(null)}
                        className="flex items-center gap-2 bg-secondary/50 py-2 px-4 rounded-xl border border-secondary/50 hover:bg-secondary hover:border-secondary hover:shadow-md hover:scale-105 transition-all duration-200">
                    <FontAwesomeIcon icon={faArrowLeft} className="text-primary w-4 h-4"/>
                    <span className="text-text-primary font-medium">{t("characterDetail.back")}</span>
                </button>
                <span className="text-text-primary font-semibold text-lg">
                  {selectedCharacter?.name || t("characterDetail.newCharacter")}
                </span>
                <div className="flex items-center gap-2">
                    {selectedCharacter?.id && (
                        <DeleteButton
                            onDelete={(): Promise<void> => handleDeleteCharacter(selectedCharacter.id as string)}
                            confirmTitle={t("characterDetail.deleteTitle")}
                            confirmMessage={t("characterDetail.deleteMessage", {name: selectedCharacter.name})}
                            confirmButtonText={t("common.delete")}
                            cancelButtonText={t("common.cancel")}
                        />
                    )}
                    <button onClick={handleSaveCharacter}
                            className="flex items-center justify-center bg-primary w-10 h-10 rounded-xl border border-primary-dark shadow-md hover:shadow-lg hover:scale-110 transition-all duration-200">
                        <FontAwesomeIcon icon={selectedCharacter?.id ? faSave : faPlus}
                                         className="text-text-primary w-5 h-5"/>
                    </button>
                </div>
            </div>
            
            <div className="overflow-y-auto max-h-[calc(100vh-350px)] space-y-4 px-2 pb-4">
                <CollapsableArea title={t("characterDetail.basicInfo")} icon={faUser}>
                    <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                        <InputField
                            fieldName={t("characterDetail.name")}
                            input={
                                <TextInput
                                    value={selectedCharacter?.name || ''}
                                    setValue={(e) => handleCharacterChange('name', e.target.value)}
                                    placeholder={t("characterDetail.namePlaceholder")}
                                />
                            }
                        />

                        <InputField
                            fieldName={t("characterDetail.lastName")}
                            input={
                                <TextInput
                                    value={selectedCharacter?.lastName || ''}
                                    setValue={(e) => handleCharacterChange('lastName', e.target.value)}
                                    placeholder={t("characterDetail.lastNamePlaceholder")}
                                />
                            }
                        />

                        <InputField
                            fieldName={t("characterDetail.nickname")}
                            input={
                                <TextInput
                                    value={selectedCharacter?.nickname || ''}
                                    setValue={(e) => handleCharacterChange('nickname', e.target.value)}
                                    placeholder={t("characterDetail.nicknamePlaceholder")}
                                />
                            }
                        />

                        <InputField
                            fieldName={t("characterDetail.role")}
                            input={
                                <SelectBox
                                    defaultValue={selectedCharacter?.category || 'none'}
                                    onChangeCallBack={(e) => setSelectedCharacter(prev =>
                                        prev ? {...prev, category: e.target.value as CharacterProps['category']} : prev
                                    )}
                                    data={characterCategories}
                                />
                            }
                        />

                        <InputField
                            fieldName={t("characterDetail.title")}
                            input={
                                <TextInput
                                    value={selectedCharacter?.title || ''}
                                    setValue={(e) => handleCharacterChange('title', e.target.value)}
                                    placeholder={t("characterDetail.titlePlaceholder")}
                                />
                            }
                        />

                        <InputField
                            fieldName={t("characterDetail.gender")}
                            input={
                                <TextInput
                                    value={selectedCharacter?.gender || ''}
                                    setValue={(e) => handleCharacterChange('gender', e.target.value)}
                                    placeholder={t("characterDetail.genderPlaceholder")}
                                />
                            }
                        />

                        <InputField
                            fieldName={t("characterDetail.age")}
                            input={
                                <TextInput
                                    value={selectedCharacter?.age || ''}
                                    setValue={(e) => handleCharacterChange('age', e.target.value)}
                                    placeholder={t("characterDetail.agePlaceholder")}
                                />
                            }
                        />
                    </div>
                </CollapsableArea>

                <CollapsableArea title={t("characterDetail.historySection")} icon={faUser}>
                    <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                        <InputField
                            fieldName={t("characterDetail.biography")}
                            input={
                                <TexteAreaInput
                                    value={selectedCharacter?.biography || ''}
                                    setValue={(e) => handleCharacterChange('biography', e.target.value)}
                                    placeholder={t("characterDetail.biographyPlaceholder")}
                                />
                            }
                            icon={faBook}
                        />

                        <InputField
                            fieldName={t("characterDetail.history")}
                            input={
                                <TexteAreaInput
                                    value={selectedCharacter?.history || ''}
                                    setValue={(e) => handleCharacterChange('history', e.target.value)}
                                    placeholder={t("characterDetail.historyPlaceholder")}
                                />
                            }
                            icon={faScroll}
                        />

                        <InputField
                            fieldName={t("characterDetail.roleFull")}
                            input={
                                <TexteAreaInput
                                    value={selectedCharacter?.role || ''}
                                    setValue={(e) => handleCharacterChange('role', e.target.value)}
                                    placeholder={t("characterDetail.roleFullPlaceholder")}
                                />
                            }
                            icon={faScroll}
                        />
                    </div>
                </CollapsableArea>

                {/* Attributs de base - toujours visibles */}
                {basicCharacterElements.map((item: CharacterElement, index: number) => (
                    <CharacterSectionElement
                        key={`basic-${index}`}
                        title={item.title}
                        section={item.section}
                        placeholder={item.placeholder}
                        icon={item.icon}
                        selectedCharacter={selectedCharacter as CharacterProps}
                        setSelectedCharacter={setSelectedCharacter}
                        handleAddElement={handleAddElement}
                        handleRemoveElement={handleRemoveElement}
                    />
                ))}

                {/* Toggle Mode Avancé */}
                <div className="flex items-center justify-between p-4 bg-secondary/30 rounded-xl border border-secondary/50">
                    <div className="flex items-center gap-3">
                        <FontAwesomeIcon icon={faSliders} className="text-primary w-5 h-5"/>
                        <span className="text-text-primary font-medium">{t("characterDetail.advancedMode")}</span>
                    </div>
                    <button
                        onClick={() => setShowAdvanced(!showAdvanced)}
                        className={`px-4 py-2 rounded-lg transition-all duration-200 ${
                            showAdvanced
                                ? 'bg-primary text-white'
                                : 'bg-secondary/50 text-text-primary hover:bg-secondary'
                        }`}
                    >
                        {showAdvanced ? t("characterDetail.hideAdvanced") : t("characterDetail.showAdvanced")}
                    </button>
                </div>

                {/* Sections avancées - visibles uniquement si showAdvanced est true */}
                {showAdvanced && (
                    <>
                        {/* Identité étendue */}
                        <CollapsableArea title={t("characterDetail.identitySection")} icon={faGlobe}>
                            <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                                <InputField
                                    fieldName={t("characterDetail.species")}
                                    input={
                                        <TextInput
                                            value={selectedCharacter?.species || ''}
                                            setValue={(e) => handleCharacterChange('species', e.target.value)}
                                            placeholder={t("characterDetail.speciesPlaceholder")}
                                        />
                                    }
                                />

                                <InputField
                                    fieldName={t("characterDetail.nationality")}
                                    input={
                                        <TextInput
                                            value={selectedCharacter?.nationality || ''}
                                            setValue={(e) => handleCharacterChange('nationality', e.target.value)}
                                            placeholder={t("characterDetail.nationalityPlaceholder")}
                                        />
                                    }
                                />

                                <InputField
                                    fieldName={t("characterDetail.status")}
                                    input={
                                        <SelectBox
                                            defaultValue={selectedCharacter?.status || 'alive'}
                                            onChangeCallBack={(e) => setSelectedCharacter(prev =>
                                                prev ? {...prev, status: e.target.value as CharacterProps['status']} : prev
                                            )}
                                            data={characterStatus}
                                        />
                                    }
                                />

                                <InputField
                                    fieldName={t("characterDetail.residence")}
                                    input={
                                        <TextInput
                                            value={selectedCharacter?.residence || ''}
                                            setValue={(e) => handleCharacterChange('residence', e.target.value)}
                                            placeholder={t("characterDetail.residencePlaceholder")}
                                        />
                                    }
                                />
                            </div>
                        </CollapsableArea>

                        {/* Voix du personnage */}
                        <CollapsableArea title={t("characterDetail.voiceSection")} icon={faCommentDots}>
                            <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                                <InputField
                                    fieldName={t("characterDetail.speechPattern")}
                                    input={
                                        <TexteAreaInput
                                            value={selectedCharacter?.speechPattern || ''}
                                            setValue={(e) => handleCharacterChange('speechPattern', e.target.value)}
                                            placeholder={t("characterDetail.speechPatternPlaceholder")}
                                        />
                                    }
                                />

                                <InputField
                                    fieldName={t("characterDetail.catchphrase")}
                                    input={
                                        <TextInput
                                            value={selectedCharacter?.catchphrase || ''}
                                            setValue={(e) => handleCharacterChange('catchphrase', e.target.value)}
                                            placeholder={t("characterDetail.catchphrasePlaceholder")}
                                        />
                                    }
                                />
                            </div>
                        </CollapsableArea>

                        {/* Notes de l'auteur */}
                        <CollapsableArea title={t("characterDetail.authorSection")} icon={faStickyNote}>
                            <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                                <InputField
                                    fieldName={t("characterDetail.notes")}
                                    input={
                                        <TexteAreaInput
                                            value={selectedCharacter?.notes || ''}
                                            setValue={(e) => handleCharacterChange('notes', e.target.value)}
                                            placeholder={t("characterDetail.notesPlaceholder")}
                                        />
                                    }
                                />

                                <InputField
                                    fieldName={t("characterDetail.colorLabel")}
                                    input={
                                        <TextInput
                                            value={selectedCharacter?.color || ''}
                                            setValue={(e) => handleCharacterChange('color', e.target.value)}
                                            placeholder={t("characterDetail.colorPlaceholder")}
                                        />
                                    }
                                />
                            </div>
                        </CollapsableArea>

                        {/* Attributs avancés */}
                        {advancedCharacterElements.map((item: CharacterElement, index: number) => (
                            <CharacterSectionElement
                                key={`advanced-${index}`}
                                title={item.title}
                                section={item.section}
                                placeholder={item.placeholder}
                                icon={item.icon}
                                selectedCharacter={selectedCharacter as CharacterProps}
                                setSelectedCharacter={setSelectedCharacter}
                                handleAddElement={handleAddElement}
                                handleRemoveElement={handleRemoveElement}
                            />
                        ))}
                    </>
                )}
            </div>
        </div>
    );
}