<script setup lang="ts">
import type { Client, HistoryEntry } from '~/types'

definePageMeta({ middleware: 'auth' })

const route = useRoute()
const clientId = Number(route.params.id)

const { fetchClient } = useClient()
const { entries, fetchEntries } = useHistory(clientId)

const client = ref<Client | null>(null)
client.value = await fetchClient(clientId)
await fetchEntries()

const labelMap: Record<string, string> = {
  phone_call: 'Telefonat',
  consultation: 'Beratungsgespräch',
  recommendation: 'Empfehlung',
  instruction: 'Anweisung',
  remark: 'Bemerkung',
  other: 'Sonstiges',
}

const formatDate = (iso: string) =>
  new Date(iso).toLocaleString('de-DE', { dateStyle: 'short', timeStyle: 'short' })

onMounted(() => {
  window.print()
})
</script>

<template>
  <div v-if="client" class="print-page p-8 max-w-3xl mx-auto font-sans text-sm text-gray-900">
    <h1 class="text-lg font-bold mb-1">Mandantenakte</h1>
    <p class="text-gray-500 mb-6 text-xs">Gedruckt: {{ new Date().toLocaleString('de-DE') }}</p>

    <table class="w-full mb-6 border-collapse text-sm">
      <tr class="border-b border-gray-200">
        <td class="py-1 text-gray-500 w-40">Mandantennummer</td>
        <td class="py-1 font-mono">{{ client.client_number }}</td>
      </tr>
      <tr class="border-b border-gray-200">
        <td class="py-1 text-gray-500">Name</td>
        <td class="py-1">{{ client.name }}</td>
      </tr>
      <template v-for="(val, key) in client.notes" :key="key">
        <tr class="border-b border-gray-200">
          <td class="py-1 text-gray-500">{{ key }}</td>
          <td class="py-1">{{ val }}</td>
        </tr>
      </template>
    </table>

    <h2 class="font-semibold mb-3">Verlauf</h2>
    <div v-for="entry in entries" :key="entry.id" class="mb-4 border-t border-gray-200 pt-3">
      <div class="flex gap-3 text-xs text-gray-500 mb-1">
        <span class="font-medium text-gray-700">{{ labelMap[entry.type] ?? entry.type }}</span>
        <span>{{ formatDate(entry.created_at) }}</span>
        <span>{{ entry.author_name }}</span>
      </div>
      <p class="whitespace-pre-wrap text-gray-800">{{ entry.body }}</p>
    </div>
    <p v-if="entries.length === 0" class="text-gray-400 italic">Keine Einträge.</p>
  </div>
</template>

<style>
@media print {
  .print-page { padding: 0; }
  @page { margin: 2cm; }
}
</style>
