OSIT-AE-App-Svelte/src/routes/journals/ae_comp__modal_journal_export.svelte

<script lang="ts">
    /**
     * @file ae_comp__modal_journal_export.svelte
     * @description Modal component for bulk exporting journal entries.
     * Allows exporting entries using various templates (Markdown, HTML, JSON).
     * @author One Sky IT
     */

    import { Modal } from 'flowbite-svelte';
    import { Download, Copy, FileJson, FileType, Code, Settings2 } from 'lucide-svelte';
    import { ae_util } from '$lib/ae_utils/ae_utils';
    import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
    import { EXPORT_TEMPLATES, type ExportTemplate } from '$lib/ae_journals/ae_journals_export_templates';

    interface Props {
        open: boolean;
        entries: ae_JournalEntry[];
        journal?: ae_Journal;
        on_close: () => void;
    }

    let { open = $bindable(false), entries = [], journal, on_close }: Props = $props();

    // State
    let selected_template_id: string = $state('standard_markdown');
    let export_preview: string = $state('');
    let export_count: number = $derived(entries.length);

    const templates = Object.values(EXPORT_TEMPLATES);
    const selected_template = $derived(EXPORT_TEMPLATES[selected_template_id as keyof typeof EXPORT_TEMPLATES] || EXPORT_TEMPLATES.standard_markdown);

    // Auto-select template based on journal type when modal opens
    $effect(() => {
        if (open && journal?.type_code) {
            if (journal.type_code === 'personal_log' && EXPORT_TEMPLATES.personal_log) {
                selected_template_id = 'personal_log';
            } else if (journal.type_code === 'amazon_vine' && EXPORT_TEMPLATES.amazon_vine) {
                selected_template_id = 'amazon_vine';
            }
        }
    });

    // Re-generate preview when entries or template changes
    $effect(() => {
        if (open && entries.length > 0) {
            generate_preview();
        }
    });

    function generate_preview() {
        if (!selected_template) return;
        export_preview = selected_template.formatter(entries);
    }

    /**
     * Downloads the generated content as a file.
     */
    function handle_download() {
        const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
        const filename = `journal_export_${timestamp}.${selected_template.extension}`;
        const blob = new Blob([export_preview], { type: 'text/plain;charset=utf-8' });
        
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
    }

    /**
     * Copies the generated content to the clipboard.
     */
    async function handle_copy() {
        try {
            await navigator.clipboard.writeText(export_preview);
            alert('Content copied to clipboard!');
        } catch (err) {
            console.error('Failed to copy:', err);
            alert('Failed to copy to clipboard.');
        }
    }
</script>

<Modal
    title="Export Journal Entries"
    bind:open={open}
    autoclose={false}
    size="xl"
    class="w-full"
>
    <div class="space-y-4">
        <div class="flex items-center justify-between p-4 bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200 rounded-lg">
            <div>
                <strong>Ready to Export:</strong> {export_count} entries.
            </div>
            {#if journal}
                <div class="text-xs opacity-70">
                    Journal Type: <span class="font-mono">{journal.type_code || 'standard'}</span>
                </div>
            {/if}
        </div>

        <!-- Template Selection -->
        <div class="space-y-2">
            <label class="label flex items-center gap-2">
                <Settings2 size="1em" />
                <span class="label-text font-bold">Select Export Template</span>
            </label>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2">
                {#each templates as template}
                    <button type="button" 
                        
                        class="btn variant-ringed-surface flex flex-col gap-1 p-2 h-24 items-center justify-center border-2 text-center {selected_template_id === template.id ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20' : 'opacity-60'}"
                        onclick={() => { selected_template_id = template.id; generate_preview(); }}
                    >
                        {#if template.extension === 'json'}
                            <FileJson size="1.5em" />
                        {:else if template.extension === 'html'}
                            <Code size="1.5em" />
                        {:else}
                            <FileType size="1.5em" />
                        {/if}
                        <span class="text-xs font-bold leading-tight">{template.name}</span>
                        <span class="text-[10px] opacity-70">.{template.extension}</span>
                    </button>
                {/each}
            </div>
        </div>

        <!-- Preview Area -->
        <div class="form-control">
            <div class="label flex justify-between items-center">
                <span class="label-text">Preview</span>
                <span class="text-[10px] opacity-50 uppercase tracking-widest">{selected_template.name}</span>
            </div>
            <textarea 
                class="textarea h-64 font-mono text-xs bg-gray-50 dark:bg-gray-900"
                readonly 
                value={export_preview.substring(0, 5000) + (export_preview.length > 5000 ? '\n... (truncated for preview)' : '')}
            ></textarea>
        </div>

        <!-- Actions -->
        <div class="modal-action flex justify-between items-center">
            <button type="button" class="btn preset-tonal-secondary" onclick={on_close}>Close</button>
            
            <div class="flex gap-2">
                <button type="button" class="btn variant-soft-primary" onclick={handle_copy}>
                    <Copy class="mr-2" size="1.2em" /> Copy to Clipboard
                </button>
                <button type="button" class="btn preset-filled-primary" onclick={handle_download}>
                    <Download class="mr-2" size="1.2em" /> Download File
                </button>
            </div>
        </div>
    </div>
</Modal>