<script lang="ts">
import AE_Comp_Editor_TipTap from '$lib/elements/element_editor_tiptap.svelte';
import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
import { Code, Eye } from '@lucide/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="mx-auto h-full max-w-5xl space-y-8 overflow-y-auto p-8">
    <header class="border-surface-500/30 border-b 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 gap-8 lg:grid-cols-2">
        <!-- Visual Editor -->
        <section class="card variant-soft-primary space-y-4 p-4">
            <h2 class="h3 flex items-center gap-2">
                <Eye size="1em" class="text-primary-500" />
                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 variant-soft-tertiary space-y-4 p-4">
            <h2 class="h3 flex items-center gap-2">
                <Code size="1em" class="text-tertiary-500" />
                Source View (AE_Comp_Editor_CodeMirror)
            </h2>
            <div
                class="bg-surface-100 dark:bg-surface-800 h-[250px] rounded-lg">
                <AE_Comp_Editor_CodeMirror
                    bind:content={test_content}
                    language="html"
                    show_line_numbers={true} />
            </div>
        </section>
    </div>

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