<template>
  <div v-if="isOpen"
    class="text-D pt-serif-regular-italic fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]">
    <div class="bg-white w-[1224px] h-[528px] rounded-md shadow-lg relative overflow-hidden">
      <div class="bg-yellow-500 h-8 w-full">
        <div class="bg-D h-6 w-full"></div>
      </div>

      <div class="p-6 text-sm flex flex-col h-full relative">
        <div class="relative flex items-center justify-between top-0 pb-1 mb-2">
          <div class="flex flex-col gap-2 -mt-5">
            <p class="flex items-center gap-2">
              <i class="fab fa-instagram text-pink-600 text-xl"></i> tokomas_Jakartacitayam
            </p>
            <p class="flex items-center gap-2">
              <i class="fab fa-tiktok text-black text-xl"></i> tokomas_Jakartacitayam
            </p>
            <p class="flex items-center gap-2">
              <i class="fab fa-whatsapp text-green-500 text-xl"></i> 08158851178
            </p>
            <p class="text-sm">TRSXXXXXXXXXXXX</p>
          </div>

          <div class="absolute inset-x-0 top-[-48px] flex flex-col items-center">
            <img :src="logo" alt="Logo" class="h-40" />
          </div>

          <div class="grid grid-cols-[130px_1fr] gap-y-0 text-xs items-center  -mt-5 relative z-10">
            <div class="text-right font-semibold pr-3">Tanggal :</div>
            <p class="mt-1 text-left pl-2">{{ getCurrentDate() }}</p>

            <div class="text-right font-semibold pr-3">Nama :</div>
            <inputField v-model="namaPembeli" class="h-7 text-sm rounded bg-blue-200 w-full" />

            <div class="text-right font-semibold pr-3">Alamat :</div>
            <inputField v-model="alamat" maxlength="50" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />

            <div class="text-right font-semibold pr-3">No.Hp :</div>
            <inputField v-model="nomorTelepon" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
          </div>
        </div>
        <div class="flex  mb-1 gap-179">
            <div class="flex gap-4">
                <img :src="logo_bca" alt="Logo_bca" class="h-5" />
                <img :src="logo_bri" alt="Logo_bri" class="h-5" />
                <img :src="logo_bni" alt="Logo_bni" class="h-5" />
            </div>
            <div class="flex gap-4">
                <img :src="logo_mastercard" alt="Logo_mastercard" class="h-5" />
                <img :src="logo_visa" alt="Logo_visa" class="h-5" />
                <img :src="logo_mandiri" alt="Logo_mandiri" class="h-5" />
            </div>
        </div>
        <table class="w-full border-D  text-sm table-fixed border-b">
          <thead>
            <tr class="border-b border-t border-D">
              <th class="w-[40px] border-r text-lg border-D">Jml</th>
              <th class="w-[425px] py-2 text-lg border-r border-D">Item</th>
              <th class="w-[70px] border-r text-lg border-D">Posisi</th>
              <th class="w-[40px] border-r text-lg border-D">Berat</th>
              <th class="w-[40px] border-r text-lg border-D">Kadar</th>
              <th class="w-[175px] text-lg">Harga</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="(item, index) in props.pesanan" :key="index"
                class="text-center"
                :style="getRowStyle()">
              <td class="border-r border-D">
                <span v-if="item.harga_deal">1</span>
              </td>
              <td class="flex items-center gap-2 p-2 border-r border-D" :style="getRowStyle()">
                <template v-if="item.produk?.foto?.[0]?.url">
                  <img :src="item.produk.foto[0].url"
                       :class="getImageClass()"
                       class="object-cover" />
                </template>
                <template v-else>
                  <div :class="getImageClass()"></div>
                </template>
                <span :class="getTextClass()">{{ item.produk?.nama || '' }}</span>
              </td>
              <td class="border-r border-D">{{ item.produk.nama ? (item.nampan?.nama || 'Brankas') : '' }}</td>
              <td class="border-r border-D">
                <span v-if="item.produk?.berat">{{ item.produk.berat }}g</span>
              </td>
              <td class="border-r border-D">
                <span v-if="item.produk?.kadar">{{ item.produk.kadar }}k</span>
              </td>
              <td>
                <span v-if="item.harga_deal">Rp{{ item.harga_deal.toLocaleString() }}</span>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="flex text-sm mt-2">
          <div class="w-[40%] p-2 text-left">
            <p class="font-semibold">PERHATIAN</p>
            <ol class="list-decimal ml-4 text-xs space-y-1">
              <li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
              <li>Barang yang dikembalikan menurut harga pasaran dan dipotong ongkos bikin, barang rusak
                lain harga.</li>
              <li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
              <li class="text-red-500">Surat ini harap dibawa pada saat menjual kembali.</li>
            </ol>
          </div>

          <div class="w-[20%] p-2 flex flex-col items-center justify-center">
            <p><strong>Hormat Kami</strong></p>
            <inputSelect v-model="selectedSales" :options="salesOptions" placeholder="Pilih Sales"
              class="mt-16 text-sm rounded bg-B cursor-pointer !w-[160px] text-center [option]:text-left" />
          </div>

          <div class="ml-auto w-[25%] p-2 flex flex-col justify-between">
            <div class="space-y-4">
              <div class="flex items-start justify-between ">
                <div class="flex flex-col ">
                  <p class="font-semibold">Ongkos bikin</p>
                  <p class="text-red-500 text-xs">diluar harga jual</p>
                </div>
                <div class="flex items-center w-40">
                  <p>Rp</p>
                  <input type="text" v-model="ongkosBikinFormatted" @input="formatInput"
                    class="h-7 px-2 text-sm rounded bg-blue-200 text-left w-full" />
                </div>
              </div>

              <div class="flex items-center justify-between -mt-4">
                <p class="font-semibold">Total Harga</p>
                <div class="flex items-center w-40">
                  <p>Rp</p>
                  <p class="px-3 pl-0 py-1 text-left text-sm w-full">
                    {{ grandTotal.toLocaleString() }},-
                  </p>
                </div>
              </div>
            </div>

            <div class="flex justify-end gap-2 mt-4">
              <button @click="$emit('close')" class="bg-gray-400 text-white px-6 py-2 rounded">
                Batal
              </button>
              <button @click="handleSimpan" :disabled="isSaving" class="bg-C text-white px-6 py-2 rounded disabled:opacity-50">
                {{ isSaving ? 'Menyimpan...' : 'Simpan' }}
              </button>
            </div>
          </div>
        </div>
      </div>
      <p class="absolute p-8 bottom-0 left-0 w-full text-left text-xs bg-D text-white py-1">
        Terima kasih sudah berbelanja dengan kami
      </p>
    </div>
  </div>

  <div v-if="showToast"
    class="fixed top-4 left-1/2 transform -translate-x-1/2 z-[10001]
           transition-all duration-300 ease-in-out"
    :class="toastClasses">
    <div class="flex items-center gap-2 px-4 py-3 rounded-lg shadow-lg max-w-sm">
      <div class="flex-shrink-0">
        <svg v-if="toastType === 'error'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
        </svg>
        <svg v-else-if="toastType === 'success'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
        </svg>
        <svg v-else class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
        </svg>
      </div>
      <p class="text-sm font-medium">{{ toastMessage }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import logo from '@/../images/logo.png'
import logo_bca from '@/../images/logo_bca.png'
import logo_bri from '@/../images/logo_bri.png'
import logo_bni from '@/../images/logo_bni.png'
import logo_mastercard from '@/../images/logo_mastercard.png'
import logo_visa from '@/../images/logo_visa.png'
import logo_mandiri from '@/../images/logo_mandiri.png'
import inputField from '@/components/InputField.vue'
import inputSelect from '@/components/InputSelect.vue'
import axios from 'axios'

const props = defineProps({
  isOpen: Boolean,
  pesanan: Array,
  total: Number
})

const emit = defineEmits(['close', 'confirm', 'transaksi-saved'])

const namaPembeli = ref('')
const nomorTelepon = ref('')
const alamat = ref('')
const ongkosBikin = ref(0)
const selectedSales = ref(null)
const salesOptions = ref([])
const ongkosBikinFormatted = ref("")
const isSaving = ref(false)

const showToast = ref(false)
const toastType = ref('error')
const toastMessage = ref('')

// 🧾 kode transaksi tetap
const transactionCode = ref('')

const toastClasses = computed(() => {
  const base = 'text-white'
  const type = {
    error: 'bg-red-500',
    success: 'bg-green-500',
    info: 'bg-blue-500'
  }
  return `${base} ${type[toastType.value]}`
})

const grandTotal = computed(() => props.total + (ongkosBikin.value || 0))

const getRowStyle = () => props.pesanan.length === 1 ? { height: '126px' } : { height: '63px' }
const getImageClass = () => props.pesanan.length === 1 ? 'w-25 h-25' : 'w-12 h-12'
const getTextClass = () => props.pesanan.length === 1 ? 'text-lg font-medium' : 'text-sm'

const getCurrentDate = () => {
  const days = ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu']
  const now = new Date()
  const day = String(now.getDate()).padStart(2, '0')
  const month = String(now.getMonth() + 1).padStart(2, '0')
  return `${days[now.getDay()]}, ${day}-${month}-${now.getFullYear()}`
}

const generateTransactionCode = () => {
  const now = new Date()
  const timestamp = now.getTime().toString().slice(-6)
  return `TRS-${timestamp}`
}

const showSimpleToast = (type, message, duration = 3000) => {
  toastType.value = type
  toastMessage.value = message
  showToast.value = true
  setTimeout(() => (showToast.value = false), duration)
}

const fetchSales = async () => {
  try {
    const res = await axios.get('/api/sales', {
      headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }
    })
    salesOptions.value = res.data.map(s => ({ value: s.id, label: s.nama }))
    selectedSales.value = ''
  } catch (e) {
    console.error('Error fetching sales:', e)
  }
}

// 🟢 Generate kode hanya saat menyimpan transaksi
const handleSimpan = () => {
  if (!namaPembeli.value.trim()) return showSimpleToast('error', 'Nama pembeli harus diisi!')
  if (!nomorTelepon.value.trim()) return showSimpleToast('error', 'Nomor telepon harus diisi!')
  if (!alamat.value.trim()) return showSimpleToast('error', 'Alamat harus diisi!')
  if (!selectedSales.value) return showSimpleToast('error', 'Sales harus dipilih!')

  // Kode transaksi dibuat hanya saat simpan
  transactionCode.value = generateTransactionCode()

  simpanTransaksi({
    kode_transaksi: transactionCode.value,
    id_sales: selectedSales.value,
    nama_pembeli: namaPembeli.value,
    no_hp: nomorTelepon.value,
    alamat: alamat.value,
    ongkos_bikin: ongkosBikin.value || 0,
    total_harga: grandTotal.value,
    items: props.pesanan
  })
}

const simpanTransaksi = async (dataTransaksi) => {
  if (isSaving.value) return
  isSaving.value = true

  try {
    const res = await axios.post('/api/transaksi', dataTransaksi, {
      headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
    })
    showSimpleToast('success', 'Transaksi berhasil disimpan!', 2000)
    setTimeout(() => {
      emit('transaksi-saved', res.data)
      emit('close')
    }, 2200)
  } catch (err) {
    const msg = err.response?.data?.message || err.message || 'Terjadi kesalahan saat menyimpan transaksi'
    showSimpleToast('error', `Error: ${msg}`, 4000)
  } finally {
    isSaving.value = false
  }
}

onMounted(() => {
  if (props.isOpen) fetchSales()
})

function formatInput(e) {
  let val = e.target.value.replace(/\D/g, "")
  ongkosBikin.value = val ? parseInt(val, 10) : null
  ongkosBikinFormatted.value = val ? new Intl.NumberFormat("id-ID").format(val) : ""
}
</script>


<style scoped>
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

.pt-serif-regular-italic {
  font-family: "PT Serif", serif;
  font-weight: 400;
}
</style>
