<script setup lang="ts">
// <!-- ld-v2 --> Sheet actions + proof card: « Imprimer » (A4 PV — the print
// stylesheet lives in moods.css), « Graver » → truncated copyable sha256 mono
// fingerprint + « empreinte locale — démo ».
import type { Decision } from '~/types/domain'
import { PROOF_LOCAL } from '~/lexicon'
import { useDecisionsStore } from '~/stores/decisions'
import { dateFr } from './decisionUi'

const props = defineProps<{ decision: Decision }>()

const store = useDecisionsStore()

const engraving = computed(() => props.decision.engraving)
const shortHash = computed(() =>
  engraving.value ? `${engraving.value.sha256.slice(0, 20)}…` : '')

const busy = ref(false)
async function engraveNow() {
  busy.value = true
  try { await store.engrave(props.decision.id) }
  finally { busy.value = false }
}

const copied = ref(false)
async function copyHash() {
  if (!engraving.value) return
  await navigator.clipboard.writeText(engraving.value.sha256)
  copied.value = true
  setTimeout(() => { copied.value = false }, 1500)
}

function printSheet() { window.print() }
</script>

<template>
  <!-- ld-v2 -->
  <div class="proof">
    <div class="proof__actions no-print">
      <button type="button" class="ld-btn ld-btn--ghost" @click="printSheet()">
        <UIcon name="i-lucide-printer" />
        <span>Imprimer</span>
      </button>
      <button
        v-if="!engraving"
        type="button"
        class="ld-btn ld-btn--ghost"
        :disabled="busy"
        @click="engraveNow()"
      >
        <span>井 Graver</span>
      </button>
    </div>

    <div v-if="engraving" class="ld-card proof__card">
      <p class="proof__title">Fiche de preuve</p>
      <button
        type="button"
        class="proof__hash no-print"
        title="Copier l'empreinte complète"
        @click="copyHash()"
      >
        <code>{{ shortHash }}</code>
        <UIcon :name="copied ? 'i-lucide-check' : 'i-lucide-copy'" />
      </button>
      <code class="print-only proof__hash-full">{{ engraving.sha256 }}</code>
      <p class="proof__meta">
        {{ PROOF_LOCAL }} — gravée le {{ dateFr(engraving.engravedAt) }}
      </p>
    </div>
  </div>
</template>

<style scoped>
.proof { display: flex; flex-direction: column; gap: 1rem; }
.proof__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.proof__card {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.proof__title { margin: 0; font-weight: 800; font-size: 0.9375rem; }
.proof__hash {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-input);
  background: var(--mood-accent-soft);
  cursor: pointer;
  color: var(--mood-text);
}
.proof__hash code,
.proof__hash-full {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 0.8125rem;
}
.proof__meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
}
</style>
