<script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { Head, Link } from '@inertiajs/vue3'

const props = defineProps({
  log: Object,
})
</script>

<template>
  <AdminLayout title="Email Log">
    <Head title="Email Log" />

    <div class="mb-3 flex items-center justify-between">
      <div class="flex items-center gap-2">
        <Link :href="route('admin.email-logs.index')" class="text-sm text-gray-600 hover:text-gray-800">Back</Link>
        <h1 class="text-xl font-semibold text-gray-800">Email Log #{{ props.log.id }}</h1>
      </div>
      <div class="text-xs text-gray-600">Created: {{ new Date(props.log.created_at).toLocaleString() }}</div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="rounded-xl border bg-white/60 backdrop-blur-sm shadow-sm p-4 space-y-2">
        <div class="text-sm"><span class="font-semibold">Status:</span> {{ props.log.status }}</div>
        <div class="text-sm"><span class="font-semibold">To:</span> {{ props.log.to_email }} {{ props.log.to_name ? '(' + props.log.to_name + ')' : '' }}</div>
        <div class="text-sm"><span class="font-semibold">Subject:</span> {{ props.log.subject }}</div>
        <div class="text-sm"><span class="font-semibold">Template:</span> {{ props.log.template?.name || '-' }}</div>
        <div class="text-sm"><span class="font-semibold">Message ID:</span> {{ props.log.message_id || '-' }}</div>
        <div class="text-sm"><span class="font-semibold">Attempts:</span> {{ props.log.attempt }}</div>
        <div class="text-sm"><span class="font-semibold">Duration:</span> {{ props.log.duration_ms ? props.log.duration_ms + ' ms' : '-' }}</div>
        <div v-if="props.log.error_message" class="text-sm text-red-700"><span class="font-semibold">Error:</span> {{ props.log.error_message }}</div>
      </div>

      <div class="rounded-xl border bg-white/60 backdrop-blur-sm shadow-sm p-4">
        <div class="label">Text</div>
        <pre class="text-xs whitespace-pre-wrap break-words">{{ props.log.body?.body_text || '' }}</pre>
      </div>

      <div class="md:col-span-2 rounded-xl border bg-white/60 backdrop-blur-sm shadow-sm p-4">
        <div class="label">HTML</div>
        <iframe :srcdoc="props.log.body?.body_html || ''" class="w-full h-[480px] border rounded bg-white"></iframe>
      </div>
    </div>
  </AdminLayout>
</template>

<style scoped>
.label { display:block; font-size: 0.7rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:#6b7280; margin-bottom:0.25rem; }
</style>
