<template>
  <div class="md-editor">
    <div class="md-tabs">
      <button
        class="md-tab"
        :class="{ 'md-tab--active': tab === 'edit' }"
        @click="tab = 'edit'"
      >
        Édition
      </button>
      <button
        class="md-tab"
        :class="{ 'md-tab--active': tab === 'preview' }"
        @click="tab = 'preview'"
      >
        Aperçu
      </button>
    </div>

    <textarea
      v-if="tab === 'edit'"
      :value="modelValue"
      class="md-textarea"
      :rows="rows"
      @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
    />
    <div
      v-else
      class="md-preview prose"
      v-html="renderedHtml"
    />
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  modelValue: string
  rows?: number
}>()

defineEmits<{
  'update:modelValue': [value: string]
}>()

const tab = ref<'edit' | 'preview'>('edit')

const renderedHtml = computed(() => {
  // Simple markdown rendering for preview
  return props.modelValue
    .replace(/^### (.+)$/gm, '<h3>$1</h3>')
    .replace(/^## (.+)$/gm, '<h2>$1</h2>')
    .replace(/^# (.+)$/gm, '<h1>$1</h1>')
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.+?)\*/g, '<em>$1</em>')
    .replace(/\n\n/g, '</p><p>')
    .replace(/^(?!<[hp])(.+)/gm, '<p>$1</p>')
})
</script>

<style scoped>
.md-editor {
  border: 1px solid hsl(20 8% 18%);
  border-radius: 0.5rem;
  overflow: hidden;
}

.md-tabs {
  display: flex;
  background: hsl(20 8% 6%);
  border-bottom: 1px solid hsl(20 8% 14%);
}

.md-tab {
  padding: 0.5rem 1rem;
  border: none;
  background: none;
  color: hsl(20 8% 50%);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.md-tab--active {
  color: white;
  background: hsl(20 8% 10%);
}

.md-textarea {
  width: 100%;
  padding: 1rem;
  border: none;
  background: hsl(20 8% 4%);
  color: white;
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  line-height: 1.7;
  resize: vertical;
  min-height: 20rem;
}

.md-textarea:focus {
  outline: none;
}

.md-preview {
  padding: 1rem;
  min-height: 20rem;
  background: hsl(20 8% 4%);
}
</style>
