<template>
    <component :is="Default || 'div'">
        <div class="flex flex-col gap-5 md:gap-10">
            <div class="flex flex-col md:flex-row justify-between items-center gap-4">
                <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Carts') }}</h1>
                <div class="flex gap-3">
                    <UButton color="primary" @click="showCreateModal = true"
                        class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
                        <UIcon name="mdi:plus" class="mr-1" />
                        {{ t('New Cart') }}
                    </UButton>
                </div>
            </div>

            <div class="w-full">
                <div
                    class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
                    <h2
                        class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
                        {{ t('Your Carts') }}
                    </h2>
                    <div v-if="cartStore.carts?.length > 0"
                        class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
                        <div v-for="cart in cartStore.carts" :key="cart.cart_id"
                            @click="cartStore.setActiveCart(cart.cart_id)"
                            class="p-4 cursor-pointer flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
                                ? 'bg-blue-50 dark:bg-blue-900/20'
                                : 'hover:bg-gray-50 dark:hover:bg-gray-800 border-l-4 border-transparent'">
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2">
                                    <p class="text-red-600 font-medium truncate">{{ cart.cart_id }}</p>
                                    <p class="text-black dark:text-white font-medium truncate cursor-pointer"
                                        @click="openCart(cart)">{{
                                            cart.name }}</p>
                                </div>
                            </div>
                            <input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
                                @change="toggleCart(cart.cart_id)" />
                        </div>
                    </div>
                    <div v-else class="p-8 text-center">
                        <UIcon name="mdi:cart-outline" class="text-4xl text-gray-300 dark:text-gray-600 mb-2" />
                        <p class="text-gray-500 dark:text-gray-400">{{ t('No carts yet') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <UModal v-model:open="showCreateModal">
            <template #header>
                <h3 class="text-lg font-semibold text-black dark:text-white">{{ t('Create New Cart') }}</h3>
            </template>
            <template #body>
                <div class="flex flex-col gap-4">
                    <UInput v-model="newCartName" :placeholder="t('Cart name')"
                        class="w-full bg-white dark:bg-gray-800 text-black dark:text-white" />
                </div>
            </template>
            <template #footer>
                <div class="flex justify-end gap-2">
                    <UButton variant="outline" color="neutral" @click="showCreateModal = false">
                        {{ t('Cancel') }}
                    </UButton>
                    <UButton color="primary" @click="createCart" :disabled="!newCartName.trim()"
                        class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white">
                        {{ t('Create') }}
                    </UButton>
                </div>
            </template>
        </UModal>
    </component>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useCartStore } from '@/stores/customer/cart'
import { useI18n } from 'vue-i18n'
import Default from '@/layouts/default.vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const cartStore = useCartStore()
const { t } = useI18n()

const showCreateModal = ref(false)
const newCartName = ref('')

async function createCart() {
    await cartStore.addNewCart(newCartName.value)
    newCartName.value = ''
    showCreateModal.value = false
}


onMounted(() => {
    cartStore.fetchCarts()
})


function openCart(cart) {
    router.push({ name: 'customer-cart', params: { id: cart.cart_id } });
}

function toggleCart(cartId: number) {
    if (cartStore.activeCartId === cartId) {
        cartStore.setActiveCart(null)
    } else {
        cartStore.setActiveCart(cartId)
    }
}
</script>