ERitors-Scribe-Desktop/components/book/settings/ExportSetting.tsx

'use client'
import * as tauri from '@/lib/tauri';
import React, {useCallback, useContext, useEffect, useState} from 'react';
import {useTranslations} from 'next-intl';
import {BookContext} from '@/context/BookContext';
import {AlertContext} from '@/context/AlertContext';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faDownload, faSpinner} from '@fortawesome/free-solid-svg-icons';
import {
    ChapterExportInfo,
    ChapterExportSelection,
    chapterVersions,
    ExportFormat
} from '@/lib/models/Chapter';

const exportFormats: {value: ExportFormat; label: string}[] = [
    {value: 'epub', label: 'EPUB'},
    {value: 'pdf', label: 'PDF'},
    {value: 'docx', label: 'DOCX'},
];

export default function ExportSetting(): React.JSX.Element {
    const t = useTranslations();
    const {book} = useContext(BookContext);
    const {errorMessage, successMessage} = useContext(AlertContext);

    const [format, setFormat] = useState<ExportFormat>('epub');
    const [chapters, setChapters] = useState<ChapterExportInfo[]>([]);
    const [selections, setSelections] = useState<ChapterExportSelection[]>([]);
    const [isLoading, setIsLoading] = useState<boolean>(true);
    const [isExporting, setIsExporting] = useState<boolean>(false);

    const loadChapters = useCallback(async (): Promise<void> => {
        if (!book) return;
        setIsLoading(true);
        try {
            const chaptersInfo: ChapterExportInfo[] = await tauri.getBookExportInfo(book.bookId) as ChapterExportInfo[];
            setChapters(chaptersInfo);
            const initialSelections: ChapterExportSelection[] = chaptersInfo.map(
                (ch: ChapterExportInfo): ChapterExportSelection => ({
                    chapterId: ch.chapterId,
                    version: ch.availableVersions[ch.availableVersions.length - 1],
                    selected: true
                })
            );
            setSelections(initialSelections);
        } catch {
            errorMessage(t('exportOption.error'));
        } finally {
            setIsLoading(false);
        }
    }, [book]);

    useEffect((): void => {
        loadChapters();
    }, [loadChapters]);

    function toggleChapter(chapterId: string): void {
        setSelections((prev: ChapterExportSelection[]): ChapterExportSelection[] =>
            prev.map((s: ChapterExportSelection): ChapterExportSelection =>
                s.chapterId === chapterId ? {...s, selected: !s.selected} : s
            )
        );
    }

    function toggleAll(selectAll: boolean): void {
        setSelections((prev: ChapterExportSelection[]): ChapterExportSelection[] =>
            prev.map((s: ChapterExportSelection): ChapterExportSelection => ({...s, selected: selectAll}))
        );
    }

    function updateVersion(chapterId: string, version: number): void {
        setSelections((prev: ChapterExportSelection[]): ChapterExportSelection[] =>
            prev.map((s: ChapterExportSelection): ChapterExportSelection =>
                s.chapterId === chapterId ? {...s, version} : s
            )
        );
    }

    function getVersionLabel(version: number): string {
        const found = chapterVersions.find((v) => v.value === String(version));
        return found ? t(found.label) : `v${version}`;
    }

    async function handleExport(): Promise<void> {
        if (!book) return;
        setIsExporting(true);
        try {
            const selectedChapters = selections
                .filter((s: ChapterExportSelection): boolean => s.selected)
                .map((s: ChapterExportSelection) => ({chapterId: s.chapterId, version: s.version}));

            const result: boolean = await tauri.exportBook({
                bookId: book.bookId,
                format,
                selections: selectedChapters.length === chapters.length ? null : selectedChapters
            });

            if (result) {
                successMessage(t('exportOption.success'));
            }
        } catch {
            errorMessage(t('exportOption.error'));
        } finally {
            setIsExporting(false);
        }
    }

    const allSelected: boolean = selections.every((s: ChapterExportSelection): boolean => s.selected);
    const hasSelection: boolean = selections.some((s: ChapterExportSelection): boolean => s.selected);

    return (
        <div className="space-y-6 p-4">
            <div>
                <h3 className="text-text-primary font-semibold mb-2">{t('exportOption.format')}</h3>
                <div className="flex gap-3">
                    {exportFormats.map(({value, label}) => (
                        <button
                            key={value}
                            type="button"
                            onClick={(): void => setFormat(value)}
                            className={`px-4 py-2 rounded-lg font-medium transition-all duration-200 ${
                                format === value
                                    ? 'bg-primary text-white shadow-md'
                                    : 'bg-secondary/30 text-text-secondary hover:bg-secondary/50'
                            }`}
                        >
                            {label}
                        </button>
                    ))}
                </div>
            </div>

            <div>
                <div className="flex items-center justify-between mb-3">
                    <h3 className="text-text-primary font-semibold">{t('exportOption.chapters')}</h3>
                    {chapters.length > 0 && (
                        <button
                            type="button"
                            onClick={(): void => toggleAll(!allSelected)}
                            className="text-sm text-primary hover:text-primary/80 transition-colors"
                        >
                            {allSelected ? t('exportOption.deselectAll') : t('exportOption.selectAll')}
                        </button>
                    )}
                </div>

                {isLoading ? (
                    <div className="flex items-center justify-center py-8">
                        <FontAwesomeIcon icon={faSpinner} className="w-6 h-6 text-primary animate-spin mr-2"/>
                        <span className="text-text-secondary">{t('exportOption.loadingChapters')}</span>
                    </div>
                ) : chapters.length === 0 ? (
                    <p className="text-text-secondary text-center py-8">{t('exportOption.noChapters')}</p>
                ) : (
                    <div className="space-y-2 max-h-96 overflow-y-auto pr-1">
                        {chapters.map((chapter: ChapterExportInfo) => {
                            const selection: ChapterExportSelection | undefined = selections.find(
                                (s: ChapterExportSelection): boolean => s.chapterId === chapter.chapterId
                            );
                            if (!selection) return null;

                            return (
                                <div
                                    key={chapter.chapterId}
                                    className={`flex items-center justify-between p-3 rounded-lg transition-all duration-200 ${
                                        selection.selected
                                            ? 'bg-primary/10 border border-primary/30'
                                            : 'bg-secondary/20 border border-transparent'
                                    }`}
                                >
                                    <label className="flex items-center gap-3 cursor-pointer flex-1">
                                        <input
                                            type="checkbox"
                                            checked={selection.selected}
                                            onChange={(): void => toggleChapter(chapter.chapterId)}
                                            className="w-4 h-4 rounded accent-primary cursor-pointer"
                                        />
                                        <span className={`text-sm ${
                                            selection.selected ? 'text-text-primary' : 'text-text-secondary'
                                        }`}>
                                            {chapter.title}
                                        </span>
                                    </label>

                                    {chapter.availableVersions.length > 1 && selection.selected && (
                                        <select
                                            value={selection.version}
                                            onChange={(e: React.ChangeEvent<HTMLSelectElement>): void =>
                                                updateVersion(chapter.chapterId, parseInt(e.target.value, 10))
                                            }
                                            className="text-xs bg-secondary/50 text-text-primary rounded-md px-2 py-1 border border-secondary/30 focus:outline-none focus:border-primary"
                                        >
                                            {chapter.availableVersions.map((v: number) => (
                                                <option key={v} value={v}>
                                                    {getVersionLabel(v)}
                                                </option>
                                            ))}
                                        </select>
                                    )}
                                </div>
                            );
                        })}
                    </div>
                )}
            </div>

            <button
                type="button"
                onClick={handleExport}
                disabled={isExporting || !hasSelection || isLoading}
                className="w-full flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 disabled:bg-primary/50 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 shadow-md hover:shadow-lg disabled:cursor-not-allowed"
            >
                {isExporting ? (
                    <>
                        <FontAwesomeIcon icon={faSpinner} className="w-4 h-4 animate-spin"/>
                        {t('exportOption.exporting')}
                    </>
                ) : (
                    <>
                        <FontAwesomeIcon icon={faDownload} className="w-4 h-4"/>
                        {t('exportOption.export')}
                    </>
                )}
            </button>
        </div>
    );
}