<!-- src/pages/admin/promo/promo.vue -->
<template>
    <div class="flex">

        <div class=" w-full px-10 ">
            <div class="text-sm breadcrumbs  pb-10">
                <ul>
                    <li>
                        <router-link :to="{ name: 'home' }">
                            Home
                        </router-link>
                    </li>
                </ul>
            </div>

            <!-- Page Header with Stats -->
            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mt-4 mb-6">
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold flex items-center gap-3">
                        <div
                            class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center shadow-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                                stroke="currentColor" class="w-5 h-5 text-primary-content">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        Promotions
                    </h1>
                    <p class="text-base-content/60 mt-1 ml-13">Manage active discount codes and promotions</p>
                </div>

                <!-- Quick Stats -->
                <div class="flex flex-wrap gap-3 items-center">
                    <div class="stat-pill">
                        <span class="stat-pill-value">{{ promos.length }}</span>
                        <span class="stat-pill-label">Active Promos</span>
                    </div>
                    <router-link :to="{ name: 'promocreate' }" class="btn btn-primary btn-sm ml-2">
                        Create Promo
                    </router-link>
                </div>
            </div>

            <!-- Main Content Card -->
            <div class="modern-table-card">
                <!-- DESKTOP VIEW: Table -->
                <div class="overflow-x-auto hidden xl:block">
                    <table class="modern-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Discount</th>
                                <th>Description</th>
                                <th>Ticket Text</th>
                                <th class="text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="promo in promos" :key="promo.id" class="table-row-hover">
                                <td>{{ promo.id }}</td>
                                <td class="font-bold">
                                    <router-link :to="{ name: 'promoedit', params: { id: promo.id } }"
                                        class="link link-hover">
                                        {{ promo.name_of_promotion }}
                                    </router-link>
                                </td>
                                <td>
                                    <span class="badge badge-success badge-sm">${{ promo.money_off_delivery }}
                                        off/gal</span>
                                </td>
                                <td>{{ promo.description }}</td>
                                <td>{{ promo.text_on_ticket }}</td>
                                <td class="text-right">
                                    <div class="flex items-center justify-end gap-2">
                                        <router-link :to="{ name: 'promoedit', params: { id: promo.id } }"
                                            class="btn btn-sm btn-secondary">
                                            Edit
                                        </router-link>
                                        <button @click.prevent="deletePromo(promo.id)"
                                            class="btn btn-sm btn-error btn-outline">
                                            Delete
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- MOBILE VIEW: Cards -->
                <div class="xl:hidden space-y-4 px-4 pb-4 pt-4">
                    <div v-for="promo in promos" :key="promo.id" class="mobile-card">
                        <div class="p-3">
                            <div class="flex justify-between items-start">
                                <div>
                                    <h2 class="text-base font-bold">{{ promo.name_of_promotion }}</h2>
                                    <p class="text-xs text-base-content/60">ID: #{{ promo.id }}</p>
                                </div>
                                <div class="badge badge-success badge-sm">
                                    ${{ promo.money_off_delivery }} off/gal
                                </div>
                            </div>
                            <div class="text-sm mt-3 space-y-2">
                                <div>
                                    <p class="text-xs text-base-content/50">Description</p>
                                    <p>{{ promo.description }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-base-content/50">Ticket Text</p>
                                    <p class="font-mono text-xs bg-base-300 p-1 rounded inline-block">{{
                                        promo.text_on_ticket }}</p>
                                </div>
                            </div>
                            <div class="flex gap-2 pt-3 mt-3 border-t border-base-content/10 flex-wrap">
                                <router-link :to="{ name: 'promoedit', params: { id: promo.id } }"
                                    class="btn btn-sm btn-secondary flex-1">Edit</router-link>
                                <button @click.prevent="deletePromo(promo.id)"
                                    class="btn btn-sm btn-error btn-outline flex-1">Delete</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { notify } from "@kyvg/vue3-notification"
import { adminService } from '../../../services/adminService'

// Types
interface Promo {
    id: number
    name_of_promotion: string
    description: string
    money_off_delivery: string | number
    text_on_ticket: string
}

// State
const promos = ref<Promo[]>([])

// Methods
async function getPromos() {
    try {
        const response = await adminService.promos.getAll()
        if (response.data && (response.data as any).promos) {
            promos.value = (response.data as any).promos
        } else {
            promos.value = []
        }
    } catch (error) {
        console.error('Failed to fetch promos:', error)
        promos.value = []
    }
}

async function deletePromo(promoId: number) {
    try {
        const response = await adminService.promos.delete(promoId)
        if ((response.data as any).ok) {
            notify({
                title: "Success",
                text: "Deleted promo",
                type: "success",
            })
            getPromos()
        } else {
            notify({
                title: "Failure",
                text: "Error deleting promo",
                type: "error",
            })
        }
    } catch (error) {
        notify({
            title: "Failure",
            text: "Error deleting promo",
            type: "error",
        })
    }
}

// Lifecycle
onMounted(() => {
    getPromos()
})
</script>

<style scoped></style>