<script setup lang="ts">
// Page de conclusion — bookend de la couverture : « Merci ! » en grand au
// centre + rappel des contacts (site, mail, adresse tirés de la couverture).
import type { Background } from '~~/types'

const props = withDefaults(
  defineProps<{
    title?: string // texte central — défaut « Merci ! »
    background: Background
    bandColor?: string // filet couleur en bas
    siteUrl?: string
    contactEmail?: string
    address?: string
    renderMode?: 'preview' | 'print'
  }>(),
  { renderMode: 'preview' },
)

const strip = computed(() => props.bandColor || FL_INK)

// Même logique de fond que la couverture (blanc = gris charte, plein = filet).
const pageStyle = computed(() => {
  const base
    = props.background.mode === 'full'
      ? strip.value
      : props.background.mode === 'tint'
        ? TINT_COLOR
        : FL_BASE
  return { backgroundColor: base, color: inkOn(base) }
})

const heading = computed(() => props.title?.trim() || 'Merci !')
const siteHref = computed(() => props.siteUrl?.trim() || DEFAULT_SITE_URL)
const siteLabel = computed(() => siteHref.value.replace(/^https?:\/\//, '').replace(/\/$/, ''))
const email = computed(() => props.contactEmail?.trim() || DEFAULT_CONTACT_EMAIL)
// Adresse coupée aux virgules : une ligne par segment.
const addressLines = computed(() =>
  (props.address?.trim() || DEFAULT_ADDRESS).split(',').map(s => s.trim()).filter(Boolean),
)
</script>

<template>
  <div class="fl-page" :style="pageStyle">
    <div
      class="absolute inset-0 flex flex-col items-center justify-center"
      :style="{ padding: 'var(--fl-margin)', gap: '64px' }"
    >
      <p :style="{ fontFamily: 'Syne, sans-serif', fontSize: '150px', lineHeight: '1' }">{{ heading }}</p>

      <!-- Rappel des contacts (liens actifs PDF/viewer) -->
      <div
        class="flex flex-col items-center"
        :style="{ fontFamily: 'Syne, sans-serif', fontSize: '22px', lineHeight: '1.6' }"
      >
        <a :href="siteHref" target="_blank" rel="noopener" class="text-current no-underline">{{ siteLabel }}</a>
        <a :href="`mailto:${email}`" class="text-current no-underline">{{ email }}</a>
      </div>
    </div>

    <!-- Adresse postale dans l'angle bas-gauche (comme la couverture) -->
    <p
      v-if="addressLines.length"
      class="absolute left-0"
      :style="{
        bottom: background.mode === 'full' ? '0' : 'var(--fl-strip)',
        padding: 'var(--fl-margin)',
        fontFamily: 'Syne, sans-serif', fontSize: '19px', lineHeight: '1.5',
      }"
    ><span v-for="(line, i) in addressLines" :key="i" class="block">{{ line }}</span></p>

    <!-- Filet couleur pleine largeur en bas (masqué en fond plein) -->
    <div v-if="background.mode !== 'full'" class="absolute inset-x-0 bottom-0" :style="{ height: 'var(--fl-strip)', backgroundColor: strip }" />
  </div>
</template>
