<template>
    <mainLayout>
        <div class="lg:p-2 pt-6">
            <div
                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3 sm:gap-2 mx-auto min-h-[75vh]"
            >
                <!-- Left Section - Form Kasir -->
                <div class="lg:col-span-3">
                    <div
                        class="bg-white rounded-xl shadow-lg border border-B overflow-hidden h-auto lg:h-full"
                    >
                        <div class="p-2 sm:p-3 md:p-4 h-auto lg:h-full">
                            <KasirForm />
                        </div>
                    </div>
                </div>

                <!-- Right Section - Transaction List -->
                <div class="lg:col-span-2">
                    <div
                        class="bg-white rounded-xl shadow-lg border border-B overflow-hidden lg:h-fit sticky top-4 max-h-[70vh] overflow-y-auto"
                    >
                        <div class="p-3 sm:p-4 md:p-6">
                            <!-- Loading -->
                            <div
                                v-if="loading"
                                class="flex items-center justify-center py-8"
                            >
                                <div
                                    class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"
                                ></div>
                                <span class="ml-3 text-D/70"
                                    >Memuat transaksi...</span
                                >
                            </div>

                            <!-- Empty -->
                            <div
                                v-else-if="!transaksi.length"
                                class="text-center py-8"
                            >
                                <svg
                                    class="w-16 h-16 mx-auto text-B mb-4"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="1"
                                        d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
                                    />
                                </svg>
                                <p class="text-[var(--color-D)]/60 text-sm">
                                    Belum ada transaksi
                                </p>
                            </div>

                            <!-- Transaction List -->
                            <KasirTransaksiList
                                v-else
                                :transaksi="transaksi"
                                @detail="lihatDetail"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </mainLayout>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";

import mainLayout from "../layouts/mainLayout.vue";
import KasirForm from "../components/KasirForm.vue";
import KasirTransaksiList from "../components/KasirTransaksiList.vue";

const transaksi = ref([]);
const loading = ref(true);

onMounted(async () => {
    try {
        loading.value = true;
        const res = await axios.get("/api/transaksi?limit=10", {
            headers: {
                Authorization: `Bearer ${localStorage.getItem("token")}`,
            },
        });

        transaksi.value = res.data;
    } catch (err) {
        console.error("Gagal fetch transaksi:", err);
    } finally {
        loading.value = false;
    }
});

const lihatDetail = (trx) => {
    alert(`Detail transaksi: ${trx.kode}`);
};
</script>
