<template>
    <div class="mx-auto mt-6 lg:mt-10 px-4 lg:px-8">

        <div class="flex items-center justify-between mb-6 lg:hidden">
            <h1 class="text-2xl font-semibold tracking-tight">Promotion History</h1>

            <Dialog v-model:open="isFormOpen">
                <DialogTrigger as-child>
                    <Button size="sm" class="gap-2">
                        <Plus class="size-4" />
                        Promote
                    </Button>
                </DialogTrigger>
                <DialogContent class="w-full h-full max-w-none m-0 rounded-none flex flex-col">
                    <DialogHeader class="flex-row items-center justify-between border-b pb-4">
                        <DialogTitle>New Promotion</DialogTitle>
                    </DialogHeader>

                    <div class="flex-1 overflow-y-auto pt-6">
                        <PromotionForm @submitted="handleMobileSubmit" />
                    </div>
                </DialogContent>
            </Dialog>
        </div>

        <div class="flex flex-col lg:flex-row lg:max-h-[70vh] gap-8">
            <div class="flex-1 lg:border-r lg:pr-8 w-full lg:min-w-2xl">
                <p class="hidden lg:block scroll-m-20 text-2xl font-semibold tracking-tight mb-3">
                    Promotion History
                </p>
                <div class="overflow-y-auto lg:max-h-full">
                    <PromotionList ref="listRef"></PromotionList>
                </div>
            </div>

            <div class="hidden lg:flex flex-1 pl-8">
                <div class="w-full max-w-3xl">
                    <p class="text-2xl font-semibold tracking-tight mb-3">New Promotion</p>
                    <PromotionForm @submitted="listRef?.refresh" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Plus } from 'lucide-vue-next'
import PromotionForm from '@/components/promotions/promotionForm.vue'
import PromotionList from '@/components/promotions/promotionList.vue'
import DialogContent from '@/components/ui/dialog/DialogContent.vue'
import Dialog from '@/components/ui/dialog/Dialog.vue'
import DialogTrigger from '@/components/ui/dialog/DialogTrigger.vue'
import DialogHeader from '@/components/ui/dialog/DialogHeader.vue'
import DialogTitle from '@/components/ui/dialog/DialogTitle.vue'
import Button from '@/components/ui/button/Button.vue'

const isFormOpen = ref(false)
const listRef = ref(null)

const handleMobileSubmit = () => {
    isFormOpen.value = false // Close the "Whole page" modal
    listRef.value?.refresh()  // Refresh the list behind it
}
</script>