bilhej/frontend/src/pages/EditOrderPage.vue

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute, RouterLink } from 'vue-router'
import { fetchOrder, updateOrder, type Order } from '@/api/orders'
import { type LetterTemplate } from '@/data/templates'
import TemplatePicker from '@/components/TemplatePicker.vue'

const router = useRouter()
const route = useRoute()

const order = ref<Order | null>(null)
const letterText = ref('')
const loading = ref(true)
const loadError = ref('')
const submitting = ref(false)
const errorMessage = ref('')
const showPicker = ref(false)

const orderId = computed(() => route.params.orderId as string)
const plate = computed(() => order.value?.plate ?? '')
const canEdit = computed(() => order.value?.status === 'pending_payment')

const charCount = computed(() => letterText.value.length)
const maxChars = 1000
const canSubmit = computed(
  () =>
    canEdit.value && letterText.value.trim().length > 0 && !submitting.value,
)

const GDPR_FOOTER =
  'Detta brev skickades via Bilhej. Din adress hämtades från Transportstyrelsens fordonsregister och har raderats efter utskick. För frågor: kontakt@bilhej.se'

function handleTemplateSelect(template: LetterTemplate) {
  letterText.value = template.body
}

async function loadOrder() {
  loading.value = true
  loadError.value = ''

  try {
    const fetched = await fetchOrder(orderId.value)
    order.value = fetched
    if (fetched.status === 'pending_payment') {
      letterText.value = fetched.letterText
    }
  } catch {
    loadError.value = 'Kunde inte hämta beställningen. Försök igen senare.'
  } finally {
    loading.value = false
  }
}

async function handleSubmit() {
  if (!canSubmit.value || !order.value) return

  submitting.value = true
  errorMessage.value = ''

  try {
    await updateOrder(order.value.id, letterText.value)
    await router.push({
      name: 'payment',
      params: { orderId: order.value.id },
      query: { plate: order.value.plate },
    })
  } catch {
    errorMessage.value = 'Kunde inte spara ändringarna. Försök igen senare.'
  } finally {
    submitting.value = false
  }
}

onMounted(loadOrder)
</script>

<template>
  <div class="compose">
    <p
      v-if="loading"
      class="text-muted text-center compose__loading"
      role="status"
    >
      Laddar beställning...
    </p>

    <div v-else-if="loadError" class="message message--error compose__error">
      {{ loadError }}
      <RouterLink to="/orders">Tillbaka till beställningar</RouterLink>
    </div>

    <div
      v-else-if="order && !canEdit"
      class="message message--error compose__error"
    >
      Den här beställningen kan inte redigeras.
      <RouterLink to="/orders">Tillbaka till beställningar</RouterLink>
    </div>

    <div v-else-if="order && canEdit" class="compose__layout">
      <div class="compose__editor">
        <h1 class="compose__title">Redigera brev</h1>
        <p class="compose__plate-badge">
          <span class="compose__plate-label">Regnr</span>
          <span class="compose__plate-value">{{ plate }}</span>
        </p>

        <form class="compose__form" @submit.prevent="handleSubmit">
          <div class="field">
            <div class="compose__label-row">
              <label for="letter" class="field__label">Ditt meddelande</label>
              <button
                type="button"
                class="compose__templates-btn"
                @click="showPicker = true"
              >
                Visa mallar
              </button>
            </div>
            <textarea
              id="letter"
              v-model="letterText"
              class="field__input compose__textarea"
              :maxlength="maxChars"
              rows="12"
              placeholder="Skriv ditt meddelande här..."
            ></textarea>
            <p
              class="field__hint compose__counter"
              :class="{ 'compose__counter--warn': charCount > 900 }"
            >
              {{ charCount }} / {{ maxChars }} tecken
            </p>
          </div>

          <div v-if="errorMessage" class="message message--error">
            {{ errorMessage }}
          </div>

          <button
            type="submit"
            class="btn btn--primary btn--lg compose__submit"
            :disabled="!canSubmit"
          >
            {{ submitting ? 'Sparar...' : 'Spara och fortsätt till betalning' }}
          </button>
        </form>
      </div>

      <div class="compose__preview">
        <h2 class="compose__preview-title">Förhandsvisning</h2>
        <div class="compose__preview-page">
          <p class="compose__preview-plate-label">
            Registreringsnummer: {{ plate }}
          </p>
          <p class="compose__preview-body">
            {{ letterText }}
          </p>
          <hr class="compose__preview-divider" />
          <p class="compose__preview-footer-text">{{ GDPR_FOOTER }}</p>
        </div>
      </div>
    </div>

    <TemplatePicker
      v-if="showPicker"
      @select="handleTemplateSelect"
      @close="showPicker = false"
    />
  </div>
</template>

<style scoped>
.compose__loading {
  margin: var(--space-2xl) auto;
}

.compose__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
  max-width: 56rem;
  margin: var(--space-2xl) auto 0;
  padding: 0 var(--space-lg);
}

.compose__title {
  margin: 0 0 var(--space-lg) 0;
  font-size: 1.5rem;
  color: var(--color-ink);
}

.compose__plate-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-primary-soft);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  margin: 0 0 var(--space-lg) 0;
}

.compose__plate-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-muted);
}

.compose__plate-value {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
}

.compose__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.compose__label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.compose__templates-btn {
  background: var(--color-primary-soft);
  border: 1px solid #ddd6fe;
  color: var(--color-primary-dark);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.compose__templates-btn:hover {
  background: #e9d5ff;
  border-color: #c4b5fd;
}

.compose__textarea {
  resize: vertical;
  min-height: 10rem;
  font-family: inherit;
}

.compose__counter {
  text-align: right;
}

.compose__counter--warn {
  color: var(--color-danger) !important;
}

.compose__submit {
  width: 100%;
}

.compose__error {
  max-width: 28rem;
  margin: var(--space-2xl) auto;
}

.compose__preview-body {
  white-space: pre-wrap;
}

.compose__preview {
  position: sticky;
  top: 5rem;
}

.compose__preview-title {
  margin: 0 0 var(--space-md) 0;
  font-size: 1rem;
  color: var(--color-muted);
}

.compose__preview-page {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-ink);
  min-height: 20rem;
}

.compose__preview-plate-label {
  margin: 0 0 var(--space-lg) 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.compose__preview-body {
  margin: 0 0 var(--space-lg) 0;
}

.compose__preview-divider {
  margin: var(--space-lg) 0;
  border: none;
  border-top: 1px solid var(--color-border);
}

.compose__preview-footer-text {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-soft);
  font-family: var(--font-sans);
  line-height: 1.5;
}

.message a {
  color: var(--color-primary);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .compose__layout {
    grid-template-columns: 1fr;
  }

  .compose__preview {
    position: static;
  }
}
</style>