'use client'
import {ChangeEvent, Dispatch, RefObject, SetStateAction, useCallback, useContext, useEffect, useRef, useState} from "react";
import {AlertContext} from "@/context/AlertContext";
import System from "@/lib/models/System";
import {SessionContext} from "@/context/SessionContext";
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {
    faBook,
    faBookOpen,
    faBookmark,
    faFileImport,
    faFileWord,
    faLayerGroup,
    faSpinner,
    faSquare,
    faSquareCheck,
    faX
} from "@fortawesome/free-solid-svg-icons";
import {SelectBoxProps} from "@/shared/interface";
import {bookTypes} from "@/lib/models/Book";
import {chapterVersions} from "@/lib/models/Chapter";
import {ParsedDocxResponse, ImportChapterSelection} from "@/lib/models/Import";
import {SyncedBook} from "@/lib/models/SyncedBook";
import InputField from "@/components/form/InputField";
import TextInput from "@/components/form/TextInput";
import TexteAreaInput from "@/components/form/TexteAreaInput";
import SelectBox from "@/components/form/SelectBox";
import CancelButton from "@/components/form/CancelButton";
import SubmitButtonWLoading from "@/components/form/SubmitButtonWLoading";
import {useTranslations} from "next-intl";
import {LangContext, LangContextProps} from "@/context/LangContext";
import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";

const DOCX_ACCEPT: string = '.docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document';

export default function ImportBookForm({setCloseForm}: { setCloseForm: Dispatch<SetStateAction<boolean>> }) {
    const t = useTranslations();
    const {lang} = useContext<LangContextProps>(LangContext);
    const {session} = useContext(SessionContext);
    const {errorMessage, successMessage} = useContext(AlertContext);
    const {setServerOnlyBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
    const modalRef: RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);

    const token: string = session?.accessToken ?? '';

    const [isParsing, setIsParsing] = useState<boolean>(false);
    const [isImporting, setIsImporting] = useState<boolean>(false);
    const [importId, setImportId] = useState<string>('');
    const [chapters, setChapters] = useState<ImportChapterSelection[]>([]);
    const [title, setTitle] = useState<string>('');
    const [subTitle, setSubTitle] = useState<string>('');
    const [summary, setSummary] = useState<string>('');
    const [selectedBookType, setSelectedBookType] = useState<string>('short');
    const [selectedVersion, setSelectedVersion] = useState<string>('2');

    const hasParsedFile: boolean = importId.length > 0 && chapters.length > 0;
    const selectedCount: number = chapters.filter((chapter: ImportChapterSelection): boolean => chapter.selected).length;
    const canImport: boolean = !isImporting && hasParsedFile && selectedCount > 0 && title.trim().length > 0;

    useEffect((): () => void => {
        document.body.style.overflow = 'hidden';
        return (): void => {
            document.body.style.overflow = 'auto';
        };
    }, []);

    const handleFileChange = useCallback(async (e: ChangeEvent<HTMLInputElement>): Promise<void> => {
        const file: File | undefined = e.target.files?.[0];
        if (!file) return;

        if (!file.name.endsWith('.docx')) {
            errorMessage(t('importBook.error.invalidFormat'));
            return;
        }

        setIsParsing(true);
        setImportId('');
        setChapters([]);

        try {
            const response: ParsedDocxResponse = await System.authUploadFileToServer<ParsedDocxResponse>(
                'book/import/parse',
                file,
                token,
                lang,
            );

            setImportId(response.importId);
            setChapters(
                response.chapters.map((chapter: { index: number; title: string; wordCount: number }): ImportChapterSelection => ({
                    index: chapter.index,
                    title: chapter.title,
                    wordCount: chapter.wordCount,
                    selected: true,
                })),
            );
        } catch (parseError: unknown) {
            if (parseError instanceof Error) {
                errorMessage(parseError.message);
            } else {
                errorMessage(t('importBook.error.parseFailed'));
            }
        } finally {
            setIsParsing(false);
        }
    }, [token, lang, errorMessage, t]);

    const toggleChapter = useCallback((chapterIndex: number): void => {
        setChapters((previousChapters: ImportChapterSelection[]): ImportChapterSelection[] =>
            previousChapters.map((chapter: ImportChapterSelection): ImportChapterSelection =>
                chapter.index === chapterIndex ? {...chapter, selected: !chapter.selected} : chapter,
            ),
        );
    }, []);

    const toggleAllChapters = useCallback((selectAll: boolean): void => {
        setChapters((previousChapters: ImportChapterSelection[]): ImportChapterSelection[] =>
            previousChapters.map((chapter: ImportChapterSelection): ImportChapterSelection => ({
                ...chapter,
                selected: selectAll,
            })),
        );
    }, []);

    const handleImport = useCallback(async (): Promise<void> => {
        if (!title.trim()) {
            errorMessage(t('importBook.error.titleRequired'));
            return;
        }
        if (!selectedBookType) {
            errorMessage(t('importBook.error.typeRequired'));
            return;
        }
        if (selectedCount === 0) {
            errorMessage(t('importBook.error.noChaptersSelected'));
            return;
        }

        setIsImporting(true);
        try {
            const selectedChapterIndexes: number[] = chapters
                .filter((chapter: ImportChapterSelection): boolean => chapter.selected)
                .map((chapter: ImportChapterSelection): number => chapter.index);

            await System.authPostToServer<{ bookId: string }>(
                'book/import',
                {
                    importId,
                    title: title.trim(),
                    subTitle: subTitle.trim(),
                    summary: summary.trim(),
                    type: selectedBookType,
                    version: parseInt(selectedVersion, 10),
                    selectedChapterIndexes,
                },
                token,
                lang,
            );

            setServerOnlyBooks((prevBooks: SyncedBook[]): SyncedBook[] => [...prevBooks, {
                id: importId,
                type: selectedBookType,
                title: title.trim(),
                subTitle: subTitle.trim(),
                lastUpdate: new Date().getTime() / 1000,
                chapters: [],
                characters: [],
                locations: [],
                worlds: [],
                incidents: [],
                plotPoints: [],
                issues: [],
                actSummaries: [],
                guideLine: null,
                aiGuideLine: null,
                bookTools: null,
                seriesId: null,
                spells: [],
                spellTags: []
            }]);

            successMessage(t('importBook.success'));
            setCloseForm(false);
        } catch (importError: unknown) {
            if (importError instanceof Error) {
                errorMessage(importError.message);
            } else {
                errorMessage(t('importBook.error.importFailed'));
            }
        } finally {
            setIsImporting(false);
        }
    }, [title, subTitle, summary, selectedBookType, selectedVersion, importId, chapters, selectedCount, token, lang, errorMessage, successMessage, t, setCloseForm, setServerOnlyBooks]);

    return (
        <div className="fixed inset-0 flex items-center justify-center bg-black/60 z-50 backdrop-blur-md animate-fadeIn">
            <div ref={modalRef}
                 className="bg-tertiary/95 backdrop-blur-sm text-text-primary rounded-2xl border border-secondary/50 shadow-2xl md:w-3/4 xl:w-1/4 lg:w-2/4 sm:w-11/12 max-h-[85vh] flex flex-col">
                <div className="flex justify-between items-center bg-primary px-6 py-4 rounded-t-2xl shadow-lg">
                    <h2 className="flex items-center gap-3 font-['ADLaM_Display'] text-2xl text-text-primary">
                        <FontAwesomeIcon icon={faFileImport} className="w-6 h-6"/>
                        {t("importBook.header.title")}
                    </h2>
                    <button
                        className="text-background hover:text-background w-10 h-10 rounded-xl hover:bg-white/20 transition-all duration-200 flex items-center justify-center hover:scale-110"
                        onClick={(): void => setCloseForm(false)}
                    >
                        <FontAwesomeIcon icon={faX} className={'w-5 h-5'}/>
                    </button>
                </div>

                <div className="p-5 overflow-y-auto flex-grow custom-scrollbar">
                    <div className="space-y-6">
                        <label
                            className={`flex items-center justify-center gap-3 py-4 border-2 border-dashed border-primary rounded-xl cursor-pointer
                                bg-secondary/20 hover:bg-secondary/40 transition-all duration-200
                                ${isParsing ? 'opacity-70 pointer-events-none' : ''}`}
                        >
                            {isParsing ? (
                                <FontAwesomeIcon icon={faSpinner} className="w-5 h-5 text-primary animate-spin"/>
                            ) : (
                                <FontAwesomeIcon icon={faFileWord} className="w-5 h-5 text-primary"/>
                            )}
                            <span className="font-['ADLaM_Display'] text-primary">
                                {isParsing ? t('importBook.parsing') : t('importBook.pickFile')}
                            </span>
                            <input
                                type="file"
                                accept={DOCX_ACCEPT}
                                onChange={handleFileChange}
                                className="hidden"
                                disabled={isParsing}
                            />
                        </label>

                        {hasParsedFile && (
                            <>
                                <InputField icon={faBookOpen} fieldName={t("importBook.fields.type.label")} input={
                                    <SelectBox
                                        onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => setSelectedBookType(e.target.value)}
                                        data={bookTypes.map((types: SelectBoxProps): SelectBoxProps => ({
                                            value: types.value,
                                            label: t(types.label)
                                        }))}
                                        defaultValue={selectedBookType}
                                    />
                                }/>

                                <InputField icon={faBook} fieldName={t("importBook.fields.title.label")} input={
                                    <TextInput
                                        value={title}
                                        setValue={(e: ChangeEvent<HTMLInputElement>): void => setTitle(e.target.value)}
                                        placeholder={t("importBook.fields.title.placeholder")}
                                    />
                                }/>

                                <InputField icon={faBookmark} fieldName={t("importBook.fields.subTitle.label")} input={
                                    <TextInput
                                        value={subTitle}
                                        setValue={(e: ChangeEvent<HTMLInputElement>): void => setSubTitle(e.target.value)}
                                        placeholder={t("importBook.fields.subTitle.placeholder")}
                                    />
                                }/>

                                <InputField icon={faBook} fieldName={t("importBook.fields.summary.label")} input={
                                    <TexteAreaInput
                                        value={summary}
                                        setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setSummary(e.target.value)}
                                        placeholder={t("importBook.fields.summary.placeholder")}
                                    />
                                }/>

                                <InputField icon={faLayerGroup} fieldName={t("importBook.fields.version.label")} input={
                                    <SelectBox
                                        onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => setSelectedVersion(e.target.value)}
                                        data={chapterVersions.map((version: SelectBoxProps): SelectBoxProps => ({
                                            value: version.value,
                                            label: t(version.label)
                                        }))}
                                        defaultValue={selectedVersion}
                                    />
                                }/>

                                <div className="mt-4">
                                    <div className="flex justify-between items-center mb-3">
                                        <h3 className="font-['ADLaM_Display'] text-lg text-text-primary">
                                            {t('importBook.chapters.title')}
                                        </h3>
                                        <span className="text-sm text-muted">
                                            {t('importBook.chaptersDetected', {count: chapters.length})}
                                        </span>
                                    </div>

                                    <button
                                        onClick={(): void => toggleAllChapters(selectedCount < chapters.length)}
                                        className="text-sm text-primary hover:text-primary/80 mb-3 transition-colors"
                                    >
                                        {selectedCount === chapters.length
                                            ? t('importBook.chapters.deselectAll')
                                            : t('importBook.chapters.selectAll')}
                                    </button>

                                    <div className="space-y-1">
                                        {chapters.map((chapter: ImportChapterSelection) => (
                                            <button
                                                key={chapter.index}
                                                onClick={(): void => toggleChapter(chapter.index)}
                                                className="flex items-center gap-3 w-full py-2 px-3 rounded-lg hover:bg-secondary/30 transition-colors text-left"
                                            >
                                                <FontAwesomeIcon
                                                    icon={chapter.selected ? faSquareCheck : faSquare}
                                                    className={`w-4 h-4 ${chapter.selected ? 'text-primary' : 'text-muted'}`}
                                                />
                                                <div className="flex-1 min-w-0">
                                                    <p className={`text-sm truncate ${chapter.selected ? 'text-text-primary' : 'text-muted'}`}>
                                                        {chapter.title}
                                                    </p>
                                                    <p className="text-xs text-muted">
                                                        {t('importBook.chapters.words', {count: chapter.wordCount})}
                                                    </p>
                                                </div>
                                            </button>
                                        ))}
                                    </div>
                                </div>
                            </>
                        )}
                    </div>
                </div>

                {hasParsedFile && (
                    <div className="flex justify-between items-center p-5 border-t border-secondary/50 bg-secondary/20 rounded-b-2xl">
                        <div></div>
                        <div className="flex gap-3">
                            <CancelButton callBackFunction={() => setCloseForm(false)}/>
                            <SubmitButtonWLoading
                                callBackAction={handleImport}
                                isLoading={isImporting}
                                text={t("importBook.submit")}
                                loadingText={t("importBook.importing")}
                                icon={faFileImport}
                            />
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}