<script setup>
import { ref, nextTick } from 'vue'
import { renderMarkdown } from '../../markdown.js'

const props = defineProps({
  change: { type: Object, required: true },
  busy: { type: Boolean, default: false },
})

const emit = defineEmits(['apply', 'dismiss', 'refine'])

const ACTION_LABELS = { entfernen: 'Entfernen:', anpassen: 'Anpassen:', hinzufuegen: 'Hinzufügen:' }

const editing = ref(false)
const instruction = ref('')
const inputEl = ref(null)

function toggleEdit() {
  editing.value = !editing.value
  if (editing.value) nextTick(() => inputEl.value?.focus())
}

function submit() {
  const text = instruction.value.trim()
  if (!text || props.busy) return
  emit('refine', text)
  instruction.value = ''
  editing.value = false
}
</script>

<template>
  <div class="style-sugg" :class="{ busy }">
    <div class="style-sugg-text"><strong>{{ ACTION_LABELS[change.action] }}</strong> {{ change.text }}</div>
    <div v-if="change.content" class="style-sugg-preview markdown" v-html="renderMarkdown(change.content)"></div>
    <div class="style-sugg-actions">
      <button class="sugg-ok" :disabled="busy" @click="emit('apply')">Bestätigen</button>
      <button class="sugg-no" :disabled="busy" @click="emit('dismiss')">Ablehnen</button>
      <button class="sugg-edit" :disabled="busy" title="Vorschlag per Anweisung anpassen" @click="toggleEdit">✏️</button>
    </div>
    <div v-if="editing" class="sugg-edit-row">
      <input
        ref="inputEl"
        v-model="instruction"
        placeholder="Anweisung zum Vorschlag…"
        @keyup.enter="submit"
      />
      <button :disabled="!instruction.trim() || busy" @click="submit">➤</button>
    </div>
  </div>
</template>

<style scoped>
.style-sugg {
  margin: 0.3rem 0 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px dashed var(--accent);
  border-radius: 8px;
  background: var(--panel-soft);
}

.style-sugg.busy {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  50% { opacity: 0.45; }
}

.style-sugg-text {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text);
}

.style-sugg-text strong {
  color: var(--accent);
}

.style-sugg-preview {
  margin-top: 0.35rem;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.style-sugg-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 0.45rem;
}

.sugg-ok,
.sugg-no {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
}

.sugg-ok {
  border: none;
  background: var(--accent);
  color: var(--on-accent);
}

.sugg-no {
  border: 1px solid var(--border-strong);
  background: none;
  color: var(--text-muted);
}

.sugg-no:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.sugg-edit {
  border: none;
  background: none;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  filter: grayscale(0.4);
}

.sugg-edit:hover {
  background: var(--border);
  filter: none;
}

.sugg-ok:disabled,
.sugg-no:disabled,
.sugg-edit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sugg-edit-row {
  display: flex;
  gap: 6px;
  margin-top: 0.45rem;
}

.sugg-edit-row input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 0.76rem;
  background: var(--panel);
  color: var(--text);
  outline: none;
}

.sugg-edit-row input:focus {
  border-color: var(--accent);
}

.sugg-edit-row button {
  width: 30px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8rem;
  cursor: pointer;
}

.sugg-edit-row button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Markdown: Basis global (assets/markdown.css); kompakte Vorschau-Code-Blöcke */
.markdown :deep(pre) {
  padding: 6px 8px;
  border-radius: 6px;
  margin: 0.3em 0;
}
</style>
