<template>
    <mainLayout>
        <!-- Modal Buat Item -->
        <CreateItemModal
            :isOpen="creatingItem"
            :product="detail"
            @close="closeItemModal"
        />

        <!-- Modal Konfirmasi Hapus Produk -->
        <ConfirmDeleteModal
            :isOpen="deleting"
            @cancel="deleting = false"
            @confirm="deleteProduk"
            title="Hapus Produk"
            message="Apakah Anda yakin ingin menghapus produk ini?"
        />

        <div class="p-6">
            <!-- Judul -->
            <p class="font-serif italic text-[25px] text-D">PRODUK</p>

            <!-- Wrapper -->
            <div class="mt-3">
                <!-- Mobile Layout -->
                <div class="flex flex-col gap-3 sm:hidden">
                    <!-- Search -->
                    <div class="w-full">
                        <searchbar
                            v-model:search="searchQuery"
                            class="searchbar-mobile"
                        />
                    </div>

                    <!-- Filter + Tombol -->
                    <div class="flex flex-row justify-between items-center">
                        <!-- Filter Kategori -->
                        <div class="w-40 shrink-0">
                            <InputSelect
                                v-model="selectedCategory"
                                :options="kategori"
                                class="w-full"
                            />
                        </div>

                        <!-- Tombol Tambah Produk -->
                        <router-link
                            to="/produk/baru"
                            class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
                        >
                            Tambah Produk
                        </router-link>
                    </div>
                </div>

                <!-- Desktop Layout -->
                <div class="hidden sm:flex flex-row gap-3 items-start">
                    <!-- Filter -->
                    <div class="w-40 sm:w-48 shrink-0">
                        <InputSelect
                            v-model="selectedCategory"
                            :options="kategori"
                            class="w-full"
                        />
                    </div>

                    <!-- Search -->
                    <div class="flex-1 mt-[2px]">
                        <searchbar v-model:search="searchQuery" class="w-full" />
                    </div>
                </div>

                <!-- Tombol Tambah Produk (desktop) -->
                <div class="hidden sm:flex justify-end mt-3">
                    <router-link
                        to="/produk/baru"
                        class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
                    >
                        Tambah Produk
                    </router-link>
                </div>
            </div>

            <!-- Grid Produk -->
            <div
                class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4"
            >
                <ProductCard
                    v-for="item in filteredProducts"
                    :key="item.id"
                    :product="item"
                    @click="openOverlay(item.id)"
                />
            </div>
        </div>

        <!-- Overlay Detail Produk -->
        <div
            v-if="showOverlay"
            class="fixed inset-0 bg-black/30 flex justify-center items-center"
            @click.self="closeOverlay"
        >
            <div
                class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-B relative flex flex-col items-center"
            >
                <!-- Foto Produk -->
                <div
                    class="relative w-72 h-72 border border-B flex items-center justify-center mb-3 overflow-hidden rounded"
                >
                    <img
                        v-if="detail.foto && detail.foto.length > 0"
                        :src="detail.foto[currentFotoIndex].url"
                        :alt="detail.nama"
                        class="w-full h-full object-contain"
                    />
                    <span v-else class="text-gray-400 text-sm">[gambar]</span>

                    <!-- Stok (pcs) pojok kiri atas -->
                    <div
                        class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded"
                    >
                        {{ detail.items_count }} pcs
                    </div>

                    <!-- Tombol Prev -->
                    <button
                        v-if="detail.foto && detail.foto.length > 1"
                        @click.stop="prevFoto"
                        class="absolute left-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
                    >
                        ‹
                    </button>
                    <!-- Tombol Next -->
                    <button
                        v-if="detail.foto && detail.foto.length > 1"
                        @click.stop="nextFoto"
                        class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
                    >
                        ›
                    </button>
                </div>

                <!-- Nama Produk -->
                <p class="text-lg font-semibold text-center mb-4">
                    {{ detail.nama }}
                </p>

                <!-- Detail Harga & Info -->
                <div
                    class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6"
                >
                    <p class="col-span-1">Harga Jual :</p>
                    <p class="col-span-1 text-right">
                        Rp. {{ formatNumber(detail.harga_jual) }}
                    </p>

                    <p class="col-span-1">Kadar :</p>
                    <p class="col-span-1 text-right">{{ detail.kadar }} K</p>

                    <p class="col-span-1">Berat :</p>
                    <p class="col-span-1 text-right">{{ detail.berat }} gram</p>

                    <p class="col-span-1">Harga/gram :</p>
                    <p class="col-span-1 text-right">
                        Rp. {{ formatNumber(detail.harga_per_gram) }}
                    </p>
                </div>

                <!-- Tombol Aksi -->
                <div class="flex w-full gap-3">
                    <button
                        @click="$router.push(`/produk/${detail.id}/edit`)"
                        class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold"
                    >
                        Ubah
                    </button>

                    <button
                        @click="openItemModal"
                        class="bg-green-400 text-black px-4 py-2 rounded font-bold"
                    >
                        Tambah
                    </button>
                    <button
                        @click="deleting = true"
                        class="flex-1 bg-red-500 text-white py-2 rounded font-bold"
                    >
                        Hapus
                    </button>
                </div>
            </div>
        </div>
    </mainLayout>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import axios from "axios";
import mainLayout from "../layouts/mainLayout.vue";
import ProductCard from "../components/ProductCard.vue";
import searchbar from "../components/searchbar.vue";
import CreateItemModal from "../components/CreateItemModal.vue";
import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
import InputSelect from "../components/InputSelect.vue";

const products = ref([]);
const searchQuery = ref("");
const selectedCategory = ref(0);
const creatingItem = ref(false);
const deleting = ref(false);

const detail = ref({});
const showOverlay = ref(false);
const currentFotoIndex = ref(0);

const kategori = ref([]);

const loadKategori = async () => {
    try {
        const response = await axios.get("/api/kategori", {
            headers: {
                Authorization: `Bearer ${localStorage.getItem("token")}`,
            },
        });
        if (response.data && Array.isArray(response.data)) {
            kategori.value = [
                { value: 0, label: "Semua" },
                ...response.data.map((cat) => ({
                    value: cat.id,
                    label: cat.nama,
                })),
            ];
        }
    } catch (error) {
        console.error("Error loading categories:", error);
    }
};

const loadProduk = async () => {
    try {
        const response = await axios.get(`/api/produk`, {
            headers: {
                Authorization: `Bearer ${localStorage.getItem("token")}`,
            },
        });
        
        if (response.data && Array.isArray(response.data)) {
            products.value = response.data;
        }
    } catch (error) {
        console.error("Error loading products:", error);
    }
};

// Buka modal item
const openItemModal = () => {
    creatingItem.value = true;
};
const closeItemModal = () => {
    creatingItem.value = false;
};

// Fetch data awal
onMounted(async () => {
    loadKategori();
    loadProduk();
});

// Filter produk (kategori + search)
const filteredProducts = computed(() => {
    let hasil = products.value;

    if (selectedCategory.value != 0) {
        hasil = hasil.filter((p) => p.id_kategori == selectedCategory.value);
    }

    if (searchQuery.value) {
        hasil = hasil.filter((p) =>
            p.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
        );
    }

    return hasil;
});

// Buka overlay detail
function openOverlay(id) {
    const produk = products.value.find((p) => p.id === id);
    if (produk) {
        detail.value = produk;
        currentFotoIndex.value = 0;
        showOverlay.value = true;
    }
}

// Tutup overlay detail
function closeOverlay() {
    showOverlay.value = false;
    currentFotoIndex.value = 0;
}

// Navigasi foto
function nextFoto() {
    if (detail.value.foto && detail.value.foto.length > 0) {
        currentFotoIndex.value =
            (currentFotoIndex.value + 1) % detail.value.foto.length;
    }
}
function prevFoto() {
    if (detail.value.foto && detail.value.foto.length > 0) {
        currentFotoIndex.value =
            (currentFotoIndex.value - 1 + detail.value.foto.length) %
            detail.value.foto.length;
    }
}

// Format angka
function formatNumber(num) {
    return new Intl.NumberFormat().format(num || 0);
}

// Hapus produk
async function deleteProduk() {
    try {
        await axios.delete(`/api/produk/${detail.value.id}`);
        products.value = products.value.filter((p) => p.id !== detail.value.id);
        deleting.value = false;
        showOverlay.value = false;
        alert("Produk berhasil dihapus!");
    } catch (err) {
        console.error("Gagal hapus produk:", err);
        alert("Gagal menghapus produk!");
    }
}
</script>

<style scoped>
/* 🔥 Tambahan agar searchbar mobile full */
.searchbar-mobile:deep(div) {
  width: 100% !important;
  justify-content: flex-start !important;
}

.searchbar-mobile:deep(input) {
  width: 100% !important;
}
</style>
