decision/frontend/app/components/documents/DocumentPreview.vue

<script setup lang="ts">
/**
 * DocumentPreview — clean "PDF-like" viewer for a reference document.
 *
 * Two modes:
 *  - current:   shows current_text for every item (document en vigueur)
 *  - projected: applies latest "vote" or "proposed" version per item,
 *               highlighting changed clauses (document tel qu'il serait si les
 *               votes en cours passaient)
 */
import type { Document, DocumentItem, ItemVersion } from '~/stores/documents'

const props = defineProps<{
  document: Document
  items: DocumentItem[]
  mode: 'current' | 'projected'
  versionMap: Record<string, ItemVersion | null>
}>()

const sortedItems = computed(() =>
  [...props.items].sort((a, b) => a.sort_order - b.sort_order),
)

const changedCount = computed(() =>
  props.mode === 'projected'
    ? Object.values(props.versionMap).filter(Boolean).length
    : 0,
)

function getDisplayText(item: DocumentItem): string {
  if (props.mode === 'projected' && props.versionMap[item.id]) {
    return props.versionMap[item.id]!.proposed_text
  }
  return item.current_text
}

function isChanged(item: DocumentItem): boolean {
  return props.mode === 'projected' && !!props.versionMap[item.id]
}

function itemTypeLabel(type: string): string {
  switch (type) {
    case 'clause': return 'Engagement'
    case 'rule': return 'Variable'
    case 'verification': return 'Application'
    case 'preamble': return 'Préambule'
    default: return ''
  }
}

const today = new Date().toLocaleDateString('fr-FR', {
  day: 'numeric',
  month: 'long',
  year: 'numeric',
})
</script>

<template>
  <div class="doc-preview">
    <!-- ══ Document header ══ -->
    <div class="doc-preview__header">
      <div class="doc-preview__watermark" aria-hidden="true">
        {{ mode === 'projected' ? 'PROJECTION' : 'EN VIGUEUR' }}
      </div>
      <h1 class="doc-preview__title">{{ document.title }}</h1>
      <div class="doc-preview__meta">
        <span>Version {{ document.version }}</span>
        <span class="doc-preview__sep">·</span>
        <span>{{ document.items_count }} items</span>
        <span v-if="mode === 'projected'" class="doc-preview__proj-badge">
          <UIcon name="i-lucide-flask-conical" class="text-xs" />
          {{ changedCount }} modification{{ changedCount > 1 ? 's' : '' }} projetée{{ changedCount > 1 ? 's' : '' }}
        </span>
        <span v-else class="doc-preview__current-badge">
          <UIcon name="i-lucide-circle-check" class="text-xs" />
          Texte officiel
        </span>
      </div>
    </div>

    <!-- ══ Items ══ -->
    <div class="doc-preview__body">
      <template v-for="item in sortedItems" :key="item.id">
        <!-- Section heading -->
        <div v-if="item.item_type === 'section'" class="doc-preview__section">
          <h2 class="doc-preview__section-title">
            <UIcon name="i-lucide-bookmark" class="text-sm" style="color: var(--mood-accent)" />
            {{ item.title || item.current_text }}
          </h2>
        </div>

        <!-- Preamble -->
        <div v-else-if="item.item_type === 'preamble'" class="doc-preview__preamble">
          <MarkdownRenderer :content="getDisplayText(item)" />
        </div>

        <!-- Regular clause / rule / verification -->
        <div
          v-else
          class="doc-preview__item"
          :class="{ 'doc-preview__item--changed': isChanged(item) }"
        >
          <div class="doc-preview__item-head">
            <span class="doc-preview__item-pos">{{ item.position }}</span>
            <span v-if="item.title" class="doc-preview__item-title">{{ item.title }}</span>
            <span v-if="itemTypeLabel(item.item_type)" class="doc-preview__item-type">
              {{ itemTypeLabel(item.item_type) }}
            </span>
            <span v-if="isChanged(item)" class="doc-preview__change-chip">
              <UIcon name="i-lucide-git-branch" class="text-xs" />
              Vote en cours
            </span>
          </div>
          <div class="doc-preview__item-text">
            <MarkdownRenderer :content="getDisplayText(item)" />
          </div>
        </div>
      </template>
    </div>

    <!-- ══ Footer ══ -->
    <div class="doc-preview__footer">
      <div class="doc-preview__footer-main">
        <span>libreDecision · {{ document.title }} · v{{ document.version }}</span>
      </div>
      <div v-if="mode === 'projected'" class="doc-preview__footer-note">
        Projection non officielle — texte simulé selon {{ changedCount }} vote{{ changedCount > 1 ? 's' : '' }} en cours au {{ today }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.doc-preview {
  position: relative;
  background: var(--mood-surface);
  border-radius: 16px;
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 4px 32px var(--mood-shadow);
  line-height: 1.75;
  overflow: hidden;
}

/* ── Watermark ── */
.doc-preview__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-35deg);
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 900;
  letter-spacing: 0.15em;
  color: var(--mood-accent);
  opacity: 0.03;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* ── Header ── */
.doc-preview__header {
  text-align: center;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid color-mix(in srgb, var(--mood-accent) 20%, transparent);
}

.doc-preview__title {
  font-size: clamp(1.25rem, 3vw, 1.875rem);
  font-weight: 900;
  color: var(--mood-text);
  letter-spacing: -0.03em;
  margin-bottom: 0.625rem;
}

.doc-preview__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--mood-text-muted);
  flex-wrap: wrap;
}

.doc-preview__sep { opacity: 0.3; }

.doc-preview__proj-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.625rem;
  background: color-mix(in srgb, var(--mood-warning, #f59e0b) 15%, transparent);
  color: var(--mood-warning, #d97706);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.doc-preview__current-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.625rem;
  background: color-mix(in srgb, var(--mood-success, #16a34a) 12%, transparent);
  color: var(--mood-success, #16a34a);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ── Body ── */
.doc-preview__body {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* Section heading */
.doc-preview__section {
  padding-top: 1.25rem;
  padding-bottom: 0.25rem;
}

.doc-preview__section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--mood-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid color-mix(in srgb, var(--mood-accent) 15%, transparent);
  padding-bottom: 0.375rem;
}

/* Preamble */
.doc-preview__preamble {
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--mood-accent) 5%, transparent);
  border-radius: 12px;
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--mood-text-muted);
}

/* Item */
.doc-preview__item {
  padding: 0.875rem 1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mood-bg) 35%, transparent);
  transition: background 0.15s;
}

.doc-preview__item--changed {
  background: color-mix(in srgb, var(--mood-warning, #f59e0b) 8%, var(--mood-surface));
  border-left: 3px solid var(--mood-warning, #f59e0b);
}

.doc-preview__item-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  flex-wrap: wrap;
}

.doc-preview__item-pos {
  font-size: 0.6875rem;
  font-weight: 800;
  font-family: monospace;
  color: var(--mood-accent);
  background: color-mix(in srgb, var(--mood-accent) 12%, transparent);
  padding: 1px 6px;
  border-radius: 6px;
  min-width: 2rem;
  text-align: center;
}

.doc-preview__item-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--mood-text);
}

.doc-preview__item-type {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--mood-text-muted);
  opacity: 0.65;
}

.doc-preview__change-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 1px 0.5rem;
  background: color-mix(in srgb, var(--mood-warning, #f59e0b) 18%, transparent);
  color: var(--mood-warning, #d97706);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  margin-left: auto;
}

.doc-preview__item-text {
  font-size: 0.9rem;
  color: var(--mood-text);
}

/* ── Footer ── */
.doc-preview__footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--mood-accent) 12%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

.doc-preview__footer-main {
  font-size: 0.75rem;
  color: var(--mood-text-muted);
  font-weight: 600;
}

.doc-preview__footer-note {
  font-size: 0.6875rem;
  color: var(--mood-text-muted);
  font-style: italic;
  opacity: 0.7;
}

/* ── Print ── */
@media print {
  .doc-preview {
    box-shadow: none;
    padding: 2rem;
    background: white;
    color: black;
  }
  .doc-preview__watermark { opacity: 0.05; }
}
</style>