'use client'
import {faMapMarkerAlt, faPlus, faTrash} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
import {SessionContext} from "@/context/SessionContext";
import {AlertContext} from "@/context/AlertContext";
import {BookContext} from "@/context/BookContext";
import System from '@/lib/models/System';
import InputField from "@/components/form/InputField";
import TextInput from '@/components/form/TextInput';
import TexteAreaInput from "@/components/form/TexteAreaInput";
import {useTranslations} from "next-intl";
import {LangContext, LangContextProps} from "@/context/LangContext";
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";

interface SubElement {
    id: string;
    name: string;
    description: string;
}

interface Element {
    id: string;
    name: string;
    description: string;
    subElements: SubElement[];
}

interface LocationProps {
    id: string;
    name: string;
    elements: Element[];
}

export function LocationComponent(props: any, ref: any) {
    const t = useTranslations();
    const {lang} = useContext<LangContextProps>(LangContext);
    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
    const {session} = useContext(SessionContext);
    const {successMessage, errorMessage} = useContext(AlertContext);
    const {book} = useContext(BookContext);
    
    const bookId: string | undefined = book?.bookId;
    const token: string = session.accessToken;
    
    const [sections, setSections] = useState<LocationProps[]>([]);
    const [newSectionName, setNewSectionName] = useState<string>('');
    const [newElementNames, setNewElementNames] = useState<{ [key: string]: string }>({});
    const [newSubElementNames, setNewSubElementNames] = useState<{ [key: string]: string }>({});
    
    useImperativeHandle(ref, function () {
        return {
            handleSave: handleSave,
        };
    });
    
    useEffect((): void => {
        getAllLocations().then();
    }, []);
    
    async function getAllLocations(): Promise<void> {
        try {
            let response: LocationProps[];
            if (isCurrentlyOffline()) {
                response = await window.electron.invoke<LocationProps[]>('db:location:all', {bookid: bookId});
            } else {
                if (book?.localBook) {
                    response = await window.electron.invoke<LocationProps[]>('db:location:all', {bookid: bookId});
                } else {
                    response = await System.authGetQueryToServer<LocationProps[]>(`location/all`, token, lang, {
                        bookid: bookId,
                    });
                }
            }
            if (response && response.length > 0) {
                setSections(response);
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('locationComponent.errorUnknownFetchLocations'));
            }
        }
    }
    
    async function handleAddSection(): Promise<void> {
        if (!newSectionName.trim()) {
            errorMessage(t('locationComponent.errorSectionNameEmpty'))
            return
        }
        try {
            let sectionId: string;
            if (isCurrentlyOffline()) {
                sectionId = await window.electron.invoke<string>('db:location:section:add', {
                    bookId: bookId,
                    locationName: newSectionName,
                });
            } else {
                if (book?.localBook) {
                    sectionId = await window.electron.invoke<string>('db:location:section:add', {
                        bookId: bookId,
                        locationName: newSectionName,
                    });
                } else {
                    sectionId = await System.authPostToServer<string>(`location/section/add`, {
                        bookId: bookId,
                        locationName: newSectionName,
                    }, token, lang);
                }
            }
            if (!sectionId) {
                errorMessage(t('locationComponent.errorUnknownAddSection'));
                return;
            }
            const newLocation: LocationProps = {
                id: sectionId,
                name: newSectionName,
                elements: [],
            };
            setSections([...sections, newLocation]);
            setNewSectionName('');
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('locationComponent.errorUnknownAddSection'));
            }
        }
    }
    
    async function handleAddElement(sectionId: string): Promise<void> {
        if (!newElementNames[sectionId]?.trim()) {
            errorMessage(t('locationComponent.errorElementNameEmpty'))
            return
        }
        try {
            let elementId: string;
            if (isCurrentlyOffline()) {
                elementId = await window.electron.invoke<string>('db:location:element:add', {
                    bookId: bookId,
                    locationId: sectionId,
                    elementName: newElementNames[sectionId],
                });
            } else {
                if (book?.localBook) {
                    elementId = await window.electron.invoke<string>('db:location:element:add', {
                        bookId: bookId,
                        locationId: sectionId,
                        elementName: newElementNames[sectionId],
                    });
                } else {
                    elementId = await System.authPostToServer<string>(`location/element/add`, {
                            bookId: bookId,
                            locationId: sectionId,
                            elementName: newElementNames[sectionId],
                        },
                        token, lang);
                }
            }
            if (!elementId) {
                errorMessage(t('locationComponent.errorUnknownAddElement'));
                return;
            }
            const updatedSections: LocationProps[] = [...sections];
            const sectionIndex: number = updatedSections.findIndex(
                (section: LocationProps): boolean => section.id === sectionId,
            );
            updatedSections[sectionIndex].elements.push({
                id: elementId,
                name: newElementNames[sectionId],
                description: '',
                subElements: [],
            });
            setSections(updatedSections);
            setNewElementNames({...newElementNames, [sectionId]: ''});
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('locationComponent.errorUnknownAddElement'));
            }
        }
    }
    
    function handleElementChange(
        sectionId: string,
        elementIndex: number,
        field: keyof Element,
        value: string,
    ): void {
        const updatedSections: LocationProps[] = [...sections];
        const sectionIndex: number = updatedSections.findIndex(
            (section: LocationProps): boolean => section.id === sectionId,
        );
        // @ts-ignore
        updatedSections[sectionIndex].elements[elementIndex][field] = value;
        setSections(updatedSections);
    }
    
    async function handleAddSubElement(
        sectionId: string,
        elementIndex: number,
    ): Promise<void> {
        if (!newSubElementNames[elementIndex]?.trim()) {
            errorMessage(t('locationComponent.errorSubElementNameEmpty'))
            return
        }
        const sectionIndex: number = sections.findIndex(
            (section: LocationProps): boolean => section.id === sectionId,
        );
        try {
            let subElementId: string;
            if (isCurrentlyOffline()) {
                subElementId = await window.electron.invoke<string>('db:location:subelement:add', {
                    elementId: sections[sectionIndex].elements[elementIndex].id,
                    subElementName: newSubElementNames[elementIndex],
                });
            } else {
                if (book?.localBook) {
                    subElementId = await window.electron.invoke<string>('db:location:subelement:add', {
                        elementId: sections[sectionIndex].elements[elementIndex].id,
                        subElementName: newSubElementNames[elementIndex],
                    });
                } else {
                    subElementId = await System.authPostToServer<string>(`location/sub-element/add`, {
                        elementId: sections[sectionIndex].elements[elementIndex].id,
                        subElementName: newSubElementNames[elementIndex],
                    }, token, lang);
                }
            }
            if (!subElementId) {
                errorMessage(t('locationComponent.errorUnknownAddSubElement'));
                return;
            }
            const updatedSections: LocationProps[] = [...sections];
            updatedSections[sectionIndex].elements[elementIndex].subElements.push({
                id: subElementId,
                name: newSubElementNames[elementIndex],
                description: '',
            });
            setSections(updatedSections);
            setNewSubElementNames({...newSubElementNames, [elementIndex]: ''});
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('locationComponent.errorUnknownAddSubElement'));
            }
        }
    }

    function handleSubElementChange(
        sectionId: string,
        elementIndex: number,
        subElementIndex: number,
        field: keyof SubElement,
        value: string,
    ): void {
        const updatedSections: LocationProps[] = [...sections];
        const sectionIndex: number = updatedSections.findIndex(
            (section: LocationProps): boolean => section.id === sectionId,
        );
        updatedSections[sectionIndex].elements[elementIndex].subElements[
            subElementIndex
            ][field] = value;
        setSections(updatedSections);
    }
    
    async function handleRemoveElement(
        sectionId: string,
        elementIndex: number,
    ): Promise<void> {
        try {
            let response: boolean;
            const elementId = sections.find((section: LocationProps): boolean => section.id === sectionId)
                ?.elements[elementIndex].id;
            if (isCurrentlyOffline()) {
                response = await window.electron.invoke<boolean>('db:location:element:delete', {
                    elementId: elementId,
                });
            } else {
                if (book?.localBook) {
                    response = await window.electron.invoke<boolean>('db:location:element:delete', {
                        elementId: elementId,
                    });
                } else {
                    response = await System.authDeleteToServer<boolean>(`location/element/delete`, {
                        elementId: elementId,
                    }, token, lang);
                }
            }
            if (!response) {
                errorMessage(t('locationComponent.errorUnknownDeleteElement'));
                return;
            }
            const updatedSections: LocationProps[] = [...sections];
            const sectionIndex: number = updatedSections.findIndex((section: LocationProps): boolean => section.id === sectionId,);
            updatedSections[sectionIndex].elements.splice(elementIndex, 1);
            setSections(updatedSections);
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('locationComponent.errorUnknownDeleteElement'));
            }
        }
    }

    async function handleRemoveSubElement(
        sectionId: string,
        elementIndex: number,
        subElementIndex: number,
    ): Promise<void> {
        try {
            let response: boolean;
            const subElementId = sections.find((section: LocationProps): boolean => section.id === sectionId)?.elements[elementIndex].subElements[subElementIndex].id;
            if (isCurrentlyOffline()) {
                response = await window.electron.invoke<boolean>('db:location:subelement:delete', {
                    subElementId: subElementId,
                });
            } else {
                if (book?.localBook) {
                    response = await window.electron.invoke<boolean>('db:location:subelement:delete', {
                        subElementId: subElementId,
                    });
                } else {
                    response = await System.authDeleteToServer<boolean>(`location/sub-element/delete`, {
                        subElementId: subElementId,
                    }, token, lang);
                }
            }
            if (!response) {
                errorMessage(t('locationComponent.errorUnknownDeleteSubElement'));
                return;
            }
            const updatedSections: LocationProps[] = [...sections];
            const sectionIndex: number = updatedSections.findIndex((section: LocationProps): boolean => section.id === sectionId,);
            updatedSections[sectionIndex].elements[elementIndex].subElements.splice(subElementIndex, 1,);
            setSections(updatedSections);
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('locationComponent.errorUnknownDeleteSubElement'));
            }
        }
    }

    async function handleRemoveSection(sectionId: string): Promise<void> {
        try {
            let response: boolean;
            if (isCurrentlyOffline()) {
                response = await window.electron.invoke<boolean>('db:location:delete', {
                    locationId: sectionId,
                });
            } else {
                if (book?.localBook) {
                    response = await window.electron.invoke<boolean>('db:location:delete', {
                        locationId: sectionId,
                    });
                } else {
                    response = await System.authDeleteToServer<boolean>(`location/delete`, {
                        locationId: sectionId,
                    }, token, lang);
                }
            }
            if (!response) {
                errorMessage(t('locationComponent.errorUnknownDeleteSection'));
                return;
            }
            const updatedSections: LocationProps[] = sections.filter((section: LocationProps): boolean => section.id !== sectionId,);
            setSections(updatedSections);
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('locationComponent.errorUnknownDeleteSection'));
            }
        }
    }

    async function handleSave(): Promise<void> {
        try {
            let response: boolean;
            if (isCurrentlyOffline()) {
                response = await window.electron.invoke<boolean>('db:location:update', {
                    locations: sections,
                });
            } else {
                if (book?.localBook) {
                    response = await window.electron.invoke<boolean>('db:location:update', {
                        locations: sections,
                    });
                } else {
                    response = await System.authPostToServer<boolean>(`location/update`, {
                        locations: sections,
                    }, token, lang);
                }
            }
            if (!response) {
                errorMessage(t('locationComponent.errorUnknownSave'));
                return;
            }
            successMessage(t('locationComponent.successSave'));
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('locationComponent.errorUnknownSave'));
            }
        }
    }

    return (
        <div className="space-y-6">
            <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
                <div className="grid grid-cols-1 gap-4 mb-4">
                    <InputField
                        input={
                            <TextInput
                                value={newSectionName}
                                setValue={(e: ChangeEvent<HTMLInputElement>) => setNewSectionName(e.target.value)}
                                placeholder={t("locationComponent.newSectionPlaceholder")}
                            />
                        }
                        actionIcon={faPlus}
                        actionLabel={t("locationComponent.addSectionLabel")}
                        addButtonCallBack={handleAddSection}
                    />
                </div>
            </div>
            
            {sections.length > 0 ? (
                sections.map((section: LocationProps) => (
                    <div key={section.id}
                         className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
                        <h3 className="text-lg font-semibold text-text-primary mb-4 flex items-center">
                            <FontAwesomeIcon icon={faMapMarkerAlt} className="mr-2 w-5 h-5"/>
                            {section.name}
                            <span
                                className="ml-2 text-sm bg-dark-background text-text-secondary py-0.5 px-2 rounded-full">
                                {section.elements.length || 0}
                            </span>
                            <button onClick={(): Promise<void> => handleRemoveSection(section.id)}
                                    className="ml-auto bg-dark-background text-text-primary rounded-full p-1.5 hover:bg-secondary transition-colors shadow-md">
                                <FontAwesomeIcon icon={faTrash} className={'w-5 h-5'}/>
                            </button>
                        </h3>
                        <div className="space-y-4">
                            {section.elements.length > 0 ? (
                                section.elements.map((element, elementIndex) => (
                                    <div key={element.id}
                                         className="bg-dark-background rounded-lg p-3 border-l-4 border-primary">
                                        <div className="mb-2">
                                            <InputField
                                                input={
                                                    <TextInput
                                                        value={element.name}
                                                        setValue={(e: ChangeEvent<HTMLInputElement>) =>
                                                            handleElementChange(section.id, elementIndex, 'name', e.target.value)
                                                        }
                                                        placeholder={t("locationComponent.elementNamePlaceholder")}
                                                    />
                                                }
                                                removeButtonCallBack={(): Promise<void> => handleRemoveElement(section.id, elementIndex)}
                                            />
                                        </div>
                                        <TexteAreaInput
                                            value={element.description}
                                            setValue={(e: React.ChangeEvent<HTMLTextAreaElement>): void => handleElementChange(section.id, elementIndex, 'description', e.target.value)}
                                            placeholder={t("locationComponent.elementDescriptionPlaceholder")}
                                        />
                                        
                                        <div className="mt-4 pt-4 border-t border-secondary/50">
                                            {element.subElements.length > 0 && (
                                                <h4 className="text-sm italic text-text-secondary mb-3">{t("locationComponent.subElementsHeading")}</h4>
                                            )}
                                            
                                            {element.subElements.map((subElement: SubElement, subElementIndex: number) => (
                                                <div key={subElement.id}
                                                     className="bg-darkest-background rounded-lg p-3 mb-3">
                                                    <div className="mb-2">
                                                        <InputField
                                                            input={
                                                                <TextInput
                                                                    value={subElement.name}
                                                                    setValue={(e: ChangeEvent<HTMLInputElement>): void =>
                                                                        handleSubElementChange(section.id, elementIndex, subElementIndex, 'name', e.target.value)
                                                                    }
                                                                    placeholder={t("locationComponent.subElementNamePlaceholder")}
                                                                />
                                                            }
                                                            removeButtonCallBack={(): Promise<void> => handleRemoveSubElement(section.id, elementIndex, subElementIndex)}
                                                        />
                                                    </div>
                                                    <TexteAreaInput
                                                        value={subElement.description}
                                                        setValue={(e) =>
                                                            handleSubElementChange(section.id, elementIndex, subElementIndex, 'description', e.target.value)
                                                        }
                                                        placeholder={t("locationComponent.subElementDescriptionPlaceholder")}
                                                    />
                                                </div>
                                            ))}
                                            
                                            <InputField
                                                input={
                                                    <TextInput
                                                        value={newSubElementNames[elementIndex] || ''}
                                                        setValue={(e: ChangeEvent<HTMLInputElement>) =>
                                                            setNewSubElementNames({
                                                                ...newSubElementNames,
                                                                [elementIndex]: e.target.value
                                                            })
                                                        }
                                                        placeholder={t("locationComponent.newSubElementPlaceholder")}
                                                    />
                                                }
                                                addButtonCallBack={(): Promise<void> => handleAddSubElement(section.id, elementIndex)}
                                            />
                                        </div>
                                    </div>
                                ))
                            ) : (
                                <div className="text-center py-4 text-text-secondary italic">
                                    {t("locationComponent.noElementAvailable")}
                                </div>
                            )}
                            
                            <InputField
                                input={
                                    <TextInput
                                        value={newElementNames[section.id] || ''}
                                        setValue={(e: ChangeEvent<HTMLInputElement>) =>
                                            setNewElementNames({...newElementNames, [section.id]: e.target.value})
                                        }
                                        placeholder={t("locationComponent.newElementPlaceholder")}
                                    />
                                }
                                addButtonCallBack={(): Promise<void> => handleAddElement(section.id)}
                            />
                        </div>
                    </div>
                ))
            ) : (
                <div
                    className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-8 border border-secondary/50 text-center">
                    <p className="text-text-secondary mb-4">{t("locationComponent.noSectionAvailable")}</p>
                </div>
            )}
        </div>
    );
}

export default forwardRef(LocationComponent);