<script setup>
const reminderNotes = useReminderNotes()
const reminderNotesParam = useReminderNotesParam()

const close = () => {
  reminderNotes.value = false
}

// Notes are now structured rows ({ name, description }) coming from the
// CUST_InvoiceCreationNotes table. A plain string is still accepted (legacy
// data / other callers) and parsed into description-only items.
const items = computed(() => {
  const raw = reminderNotesParam.value?.notes
  if (Array.isArray(raw)) {
    return raw
      .map(n => ({ name: (n?.name || '').toString().trim(), description: (n?.description || '').toString().trim() }))
      .filter(n => n.name || n.description)
  }
  const text = (raw || '').toString().trim()
  if (!text) return []
  let list
  if (text.includes('<li')) {
    const matches = [...text.matchAll(/<li[^>]*>([\s\S]*?)<\/li>/gi)]
    list = matches.map(m => m[1].trim()).filter(Boolean)
  } else {
    list = text.split(/\r?\n+/).map(s => s.trim()).filter(Boolean)
  }
  return list.map(d => ({ name: '', description: d }))
})

const onBackdropKey = (e) => {
  if (e.key === 'Escape' && reminderNotes.value) close()
}

onMounted(() => {
  window.addEventListener('keydown', onBackdropKey)
})
onUnmounted(() => {
  window.removeEventListener('keydown', onBackdropKey)
})
</script>

<template>
  <div v-if="reminderNotes" class="reminder-notes-overlay" @click.self="close">
    <div class="reminder-notes-container" @click.stop>
      <div class="reminder-notes-header">
        <div class="reminder-notes-header__title">
          <span class="reminder-notes-header__icon"><i class="ti ti-bell-ringing"></i></span>
          <div>
            <h3>Erinnerungen für diesen Auftrag</h3>
            <p v-if="reminderNotesParam.partnerName" class="reminder-notes-header__sub">
              {{ reminderNotesParam.partnerName }}<span v-if="reminderNotesParam.documentNo"> · {{ reminderNotesParam.documentNo }}</span>
            </p>
          </div>
        </div>
        <button type="button" class="reminder-notes-close" @click="close" title="Schließen">
          <i class="ti ti-x"></i>
        </button>
      </div>
      <div class="reminder-notes-body">
        <p class="reminder-notes-intro">
          Beim Erstellen der Rechnung für diesen Kunden bitte folgende Punkte beachten:
        </p>
        <ul v-if="items.length" class="reminder-notes-list">
          <li v-for="(item, i) in items" :key="i">
            <span v-if="item.name" class="reminder-notes-list__subject">{{ item.name }}</span>
            <span v-if="item.description" class="reminder-notes-list__text">{{ item.description }}</span>
          </li>
        </ul>
        <p v-else class="reminder-notes-empty">Keine Erinnerungen hinterlegt.</p>
      </div>
      <div class="reminder-notes-footer">
        <button type="button" class="button is-primary" @click="close">
          <i class="ti ti-check me-1"></i> Verstanden
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.reminder-notes-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 33, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.reminder-notes-container {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: rnPop 140ms ease-out;
}
@keyframes rnPop {
  from { transform: translateY(10px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.reminder-notes-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, #fff5e6 0%, #ffe6c2 100%);
  border-bottom: 1px solid #f1d6a4;
}
.reminder-notes-header__title {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.reminder-notes-header__title h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #6b3a00;
}
.reminder-notes-header__sub {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: #8a5400;
}
.reminder-notes-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #fff;
  color: #d97800;
  font-size: 1.2rem;
  box-shadow: 0 2px 6px rgba(217, 120, 0, 0.25);
}
.reminder-notes-close {
  background: transparent;
  border: none;
  color: #6b3a00;
  cursor: pointer;
  padding: 4px;
  font-size: 1.1rem;
}
.reminder-notes-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
}
.reminder-notes-intro {
  margin: 0 0 0.85rem;
  color: #444;
  font-size: 0.95rem;
}
.reminder-notes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.reminder-notes-list li {
  position: relative;
  padding: 0.7rem 0.9rem 0.7rem 2.2rem;
  background: #fffaf2;
  border: 1px solid #f1d6a4;
  border-left: 4px solid #f5a623;
  border-radius: 0.4rem;
  color: #2d2a25;
  line-height: 1.4;
}
.reminder-notes-list li::before {
  content: '\eaf6'; /* ti-point-filled */
  font-family: 'tabler-icons', sans-serif;
  position: absolute;
  left: 0.75rem;
  top: 0.7rem;
  color: #f5a623;
  font-size: 1rem;
}
.reminder-notes-list__subject {
  display: block;
  font-weight: 700;
  color: #6b3a00;
  margin-bottom: 0.15rem;
}
.reminder-notes-list__text {
  display: block;
  white-space: pre-wrap;
}
.reminder-notes-empty {
  padding: 1rem;
  background: #f7f9fc;
  border-radius: 0.4rem;
  color: #6b7280;
  text-align: center;
}
.reminder-notes-footer {
  padding: 0.9rem 1.25rem;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
}
</style>
