<script lang="ts">
    import AE_Comp_Editor_TipTap from '$lib/elements/AE_Comp_Editor_TipTap.svelte';
    import AE_Comp_Editor_CodeMirror from '$lib/elements/AE_Comp_Editor_CodeMirror.svelte';

    let test_content = $state('<h2>Welcome to the Visual Editor Test</h2><p>This editor uses <strong>native browser rich text</strong> capabilities.</p><ul><li>No library conflicts</li><li>Uses existing <em>.tiptap</em> styles</li><li>Instant performance</li></ul>');
    let log_lvl = 1;
</script>

<div class="p-8 space-y-8 max-w-5xl mx-auto h-full overflow-y-auto">
    <header class="border-b border-surface-500/30 pb-4">
        <h1 class="h1">Rich Text Editor Test</h1>
        <p class="opacity-70">Testing the Zero-Dependency "TipTap" replacement.</p>
    </header>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Visual Editor -->
        <section class="card p-4 space-y-4 variant-soft-primary">
            <h2 class="h3 flex items-center gap-2">
                <span class="fas fa-eye text-primary-500"></span>
                Visual Editor (AE_Comp_Editor_TipTap)
            </h2>
            <div class="bg-surface-100 dark:bg-surface-800 rounded-lg">
                <AE_Comp_Editor_TipTap
                    bind:content={test_content}
                    placeholder="Try writing something pretty..."
                />
            </div>
        </section>

        <!-- Source Code View -->
        <section class="card p-4 space-y-4 variant-soft-tertiary">
            <h2 class="h3 flex items-center gap-2">
                <span class="fas fa-code text-tertiary-500"></span>
                Source View (AE_Comp_Editor_CodeMirror)
            </h2>
            <div class="bg-surface-100 dark:bg-surface-800 rounded-lg h-[250px]">
                <AE_Comp_Editor_CodeMirror
                    bind:content={test_content}
                    language="html"
                    show_line_numbers={true}
                />
            </div>
        </section>
    </div>

    <!-- HTML Preview -->
    <section class="card p-4 space-y-4 bg-surface-900 text-green-400 font-mono text-xs overflow-auto max-h-96 shadow-2xl border border-white/10">
        <h2 class="text-sm font-bold opacity-50 uppercase tracking-widest border-b border-white/10 pb-2">Raw Bound Content (Saved to DB)</h2>
        <pre class="whitespace-pre">{test_content}</pre>
    </section>
</div>
