<script setup lang="ts">
import { ref, onMounted } from "vue"
import { Card, CardContent } from "~/components/pub/ui/card"
import { Separator } from "~/components/pub/ui/separator"

// Simulasi data dari API
const route = useRoute()
const sepData = ref<any>(null)

onMounted(async () => {
  // contoh fetch data API (ganti dengan endpoint kamu)
  const id = route.params.id
  const res = await fetch(`/api/sep/${id}`)
  sepData.value = await res.json()
})
</script>

<template>
  <div class="max-w-4xl mx-auto p-6 space-y-4">
    <div class="flex items-center justify-between">
      <h1 class="text-lg font-semibold">Preview SEP</h1>
      <p class="text-sm text-muted-foreground">
      </p>
    </div>

    <Card class="p-6">
      <CardContent class="space-y-4">
        <!-- Header -->
        <div class="flex items-start justify-between">
          <div class="flex items-center gap-3">
            <img
              src="/bpjs-logo.png"
              alt="BPJS"
              class="h-10 w-auto"
            />
            <div>
              <p class="font-semibold">SURAT ELIGIBILITAS PESERTA</p>
              <p>RSUD dr. Saiful Anwar</p>
            </div>
          </div>
          <p class="text-sm text-right">
            Peserta: {{ sepData?.peserta?.jenisPeserta || "-" }}
          </p>
        </div>

        <Separator />

        <!-- Content -->
        <div class="grid grid-cols-2 gap-8 text-sm">
          <!-- Left -->
          <div class="space-y-1">
            <p>No. SEP : {{ sepData?.noSEP }}</p>
            <p>Tgl. SEP : {{ sepData?.tglSEP }}</p>
            <p>No. Kartu : {{ sepData?.noKartu }}</p>
            <p>Nama Peserta : {{ sepData?.nama }}</p>
            <p>Tgl. Lahir : {{ sepData?.tglLahir }} Kelamin: {{ sepData?.kelamin }}</p>
            <p>No. Telepon : {{ sepData?.telepon }}</p>
            <p>Sub/Spesialis : {{ sepData?.spesialis }}</p>
            <p>Dokter : {{ sepData?.dokter }}</p>
            <p>Faskes Perujuk : {{ sepData?.faskes }}</p>
            <p>Diagnosa Awal : {{ sepData?.diagnosa }}</p>
            <p>Catatan : {{ sepData?.catatan }}</p>
          </div>

          <!-- Right -->
          <div class="space-y-1">
            <p>Jns. Rawat : {{ sepData?.jenisRawat }}</p>
            <p>Jns. Kunjungan : {{ sepData?.jenisKunjungan }}</p>
            <p>Poli Perujuk : {{ sepData?.poliPerujuk }}</p>
            <p>Kls. Hak : {{ sepData?.kelasHak }}</p>
            <p>Kls. Rawat : {{ sepData?.kelasRawat }}</p>
            <p>Penjamin : {{ sepData?.penjamin }}</p>

            <div class="mt-6 text-center">
              <p class="font-semibold">Persetujuan</p>
              <p>Pasien/Keluarga Pasien</p>
              <img
                :src="sepData?.qrCodeUrl"
                alt="QR Code"
                class="h-24 mx-auto mt-2"
              />
              <p class="font-semibold mt-2">{{ sepData?.nama }}</p>
            </div>
          </div>
        </div>

        <Separator />

        <!-- Footer -->
        <div class="text-xs text-muted-foreground leading-snug space-y-1">
          <p>*Saya menyetujui BPJS Kesehatan untuk:</p>
          <ul class="list-disc pl-5">
            <li>membuka dan atau menggunakan informasi medis Pasien untuk keperluan administrasi dan pembiayaan</li>
            <li>memberikan akses informasi kepada tenaga medis di RSUD Dr. Saiful Anwar</li>
            <li>Penjaminan lainnya sesuai ketentuan yang berlaku</li>
          </ul>
          <p class="pt-2">
            Cetakan ke {{ sepData?.cetakanKe || 1 }} |
            {{ sepData?.tglCetak }}
          </p>
        </div>
      </CardContent>
    </Card>
  </div>
</template>
