<script setup lang="ts">
import type { ThemeInput } from "@enesis/editor"
import { Editor } from "@enesis/editor"
import { computed, ref } from "vue"

const content = ref(`* TODO Build the Editor shell
  * Phase 1: Block parser
  * Phase 2: Test edge cases
* DOING Theme system
  * Define EditorTheme type
  * Create kanagawa preset
  * Wire CSS vars to shell
 * LATER Add more presets
 * DONE Task state support
  * Implement task cycling
  * Add completion states`)

const currentTheme = ref<string>("default")
const customPrimary = ref("#ff6b6b")

const themeInput = computed<ThemeInput>(() => {
  if (currentTheme.value === "custom") {
    return { colors: { primary: customPrimary.value } }
  }
  return currentTheme.value
})

const isKanagawa = computed(() => currentTheme.value === "kanagawa")
const isCustom = computed(() => currentTheme.value === "custom")
</script>

<template>
  <UPage>
    <UPageHeader
      title="Themes"
      description="Test the CSS-variable theme system with built-in presets and custom overrides."
    />

    <UPageBody>
      <div class="space-y-8">
        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Theme Switcher</h2>
          <p class="text-sm text-muted leading-relaxed">
            Select a preset or use a custom primary color. The editor's
            <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">theme</code>
            prop maps colors to
            <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">--ui-*</code>
            CSS variables scoped to the shell element.
          </p>

          <div class="flex items-center gap-2">
            <UButton
              :variant="currentTheme === 'default' ? 'solid' : 'ghost'"
              size="sm"
              label="Default"
              @click="currentTheme = 'default'"
            />
            <UButton
              :variant="isKanagawa ? 'solid' : 'ghost'"
              size="sm"
              label="Kanagawa"
              @click="currentTheme = 'kanagawa'"
            />
            <UButton
              :variant="isCustom ? 'solid' : 'ghost'"
              size="sm"
              label="Custom"
              @click="currentTheme = 'custom'"
            />
            <div
              v-if="isCustom"
              class="ml-2 w-4 h-4 rounded"
              :style="{ backgroundColor: customPrimary }"
            />
          </div>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Editor Preview</h2>

          <div class="rounded-lg border border-default dark:bg-neutral-950/50 p-4 sm:p-8 rounded-t-md overflow-hidden">
            <div class="p-4">
              <Editor
                v-model:content="content"
                :focused="true"
                marker-mode="always-visible"
                :theme="themeInput"
              />
            </div>
          </div>
        </section>
      </div>
    </UPageBody>
  </UPage>
</template>
