<script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { Head, Link } from '@inertiajs/vue3'
import { MailIcon, ArrowLeftIcon, ClockIcon, UserIcon, AlertCircleIcon, FileTextIcon, CodeIcon } from 'lucide-vue-next'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card'
import { Button } from '@/Components/ui/button'
import { Badge } from '@/Components/ui/badge'
import { Separator } from '@/Components/ui/separator'

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

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

    <div class="space-y-6">
      <Card>
        <CardHeader>
          <div class="flex items-start justify-between">
            <div class="flex items-start gap-3">
              <div class="inline-flex items-center justify-center h-10 w-10 rounded-lg bg-primary/10 text-primary">
                <MailIcon class="h-5 w-5" />
              </div>
              <div>
                <CardTitle>Email Log #{{ props.log.id }}</CardTitle>
                <CardDescription>
                  Ustvarjeno: {{ new Date(props.log.created_at).toLocaleString() }}
                </CardDescription>
              </div>
            </div>
            <Button variant="outline" size="sm" as-child>
              <Link :href="route('admin.email-logs.index')">
                <ArrowLeftIcon class="h-4 w-4 mr-2" />
                Nazaj
              </Link>
            </Button>
          </div>
        </CardHeader>
      </Card>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle class="text-base">Podrobnosti</CardTitle>
          </CardHeader>
          <CardContent class="space-y-3">
            <div class="flex justify-between items-center">
              <span class="text-sm text-muted-foreground">Status:</span>
              <Badge
                :variant="
                  props.log.status === 'sent' ? 'default' :
                  props.log.status === 'queued' || props.log.status === 'sending' ? 'secondary' :
                  props.log.status === 'failed' ? 'destructive' : 'outline'
                "
              >
                {{ props.log.status }}
              </Badge>
            </div>
            <Separator />
            <div class="space-y-1">
              <div class="text-sm font-medium flex items-center gap-2">
                <UserIcon class="h-4 w-4" />
                Prejemnik
              </div>
              <div class="text-sm text-muted-foreground">
                <template v-if="props.log.to_email">
                  {{ props.log.to_email }} {{ props.log.to_name ? '(' + props.log.to_name + ')' : '' }}
                </template>
                <template v-else>
                  <span v-if="Array.isArray(props.log.to_recipients) && props.log.to_recipients.length">
                    {{ props.log.to_recipients.join(', ') }}
                  </span>
                  <span v-else>-</span>
                </template>
              </div>
            </div>
            <Separator />
            <div class="space-y-1">
              <div class="text-sm font-medium">Zadeva</div>
              <div class="text-sm text-muted-foreground">{{ props.log.subject }}</div>
            </div>
            <Separator />
            <div class="flex justify-between items-center">
              <span class="text-sm text-muted-foreground">Predloga:</span>
              <Badge variant="outline">{{ props.log.template?.name || '-' }}</Badge>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-muted-foreground">Poskusi:</span>
              <Badge variant="secondary">{{ props.log.attempt }}</Badge>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-muted-foreground flex items-center gap-1">
                <ClockIcon class="h-4 w-4" />
                Trajanje:
              </span>
              <span class="text-sm">{{ props.log.duration_ms ? props.log.duration_ms + ' ms' : '-' }}</span>
            </div>
            <div v-if="props.log.error_message" class="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
              <div class="flex items-start gap-2">
                <AlertCircleIcon class="h-4 w-4 text-destructive mt-0.5" />
                <div>
                  <div class="text-sm font-medium text-destructive">Napaka</div>
                  <div class="text-xs text-destructive/80 mt-1">{{ props.log.error_message }}</div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle class="text-base flex items-center gap-2">
              <FileTextIcon class="h-4 w-4" />
              Besedilo
            </CardTitle>
          </CardHeader>
          <CardContent>
            <pre class="text-xs whitespace-pre-wrap break-words bg-muted p-3 rounded-md">{{ props.log.body?.body_text || '' }}</pre>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle class="text-base flex items-center gap-2">
            <CodeIcon class="h-4 w-4" />
            HTML vsebina
          </CardTitle>
        </CardHeader>
        <CardContent>
          <iframe :srcdoc="props.log.body?.body_html || ''" class="w-full h-[480px] border rounded-md bg-white"></iframe>
        </CardContent>
      </Card>
    </div>
  </AdminLayout>
</template>
