<script setup lang="ts">
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head, Link } from '@inertiajs/vue3';
import { Eye, Filter } from 'lucide-vue-next';

const props = defineProps<{
    orders: Array<{
        id: number;
        shop_user: {
            shop_name: string;
        };
        customer_name: string;
        phone_number: string;
        device_model: string;
        imei_number: string;
        service_type: string;
        status: 'pending' | 'in_progress' | 'done';
        service_price: number;
        date: string;
    }>;
}>();

const getStatusBadgeColor = (status: string) => {
    switch (status) {
        case 'pending':
            return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400';
        case 'in_progress':
            return 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400';
        case 'done':
            return 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400';
        default:
            return 'bg-slate-100 text-slate-800 dark:bg-slate-900/20 dark:text-slate-400';
    }
};
</script>

<template>
    <AdminLayout>
        <Head title="Unlock Orders" />

        <div class="animate-fade-in space-y-8 pb-12">
            <div class="flex flex-col justify-between gap-6 md:flex-row md:items-end">
                <div>
                    <h1 class="text-3xl font-black text-slate-900 dark:text-white">All Unlock Orders</h1>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Manage shop unlock service orders</p>
                </div>
            </div>

            <div class="rounded-4xl border border-slate-200/60 bg-white p-8 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                <div class="overflow-x-auto">
                    <table class="w-full text-start">
                        <thead>
                            <tr class="bg-slate-50/50 dark:bg-slate-900/50">
                                <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">Shop</th>
                                <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">Customer</th>
                                <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">Device</th>
                                <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">Service</th>
                                <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">Price</th>
                                <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">Status</th>
                                <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">Date</th>
                                <th class="px-6 py-4 text-right text-[10px] font-bold tracking-widest text-slate-400 uppercase">Action</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                            <tr v-for="order in props.orders" :key="order.id" class="group transition-colors hover:bg-slate-50 dark:hover:bg-slate-900/50">
                                <td class="px-6 py-5 font-bold text-slate-900 dark:text-white">{{ order.shop_user.shop_name }}</td>
                                <td class="px-6 py-5 text-slate-700 dark:text-slate-200">{{ order.customer_name }}</td>
                                <td class="px-6 py-5 text-sm text-slate-700 dark:text-slate-200">
                                    <div>{{ order.device_model }}</div>
                                    <div class="text-xs text-slate-500">{{ order.imei_number }}</div>
                                </td>
                                <td class="px-6 py-5 text-slate-700 dark:text-slate-200 capitalize">{{ order.service_type }}</td>
                                <td class="px-6 py-5 font-bold text-slate-900 dark:text-white">${{ order.service_price.toFixed(2) }}</td>
                                <td class="px-6 py-5">
                                    <span :class="getStatusBadgeColor(order.status)" class="inline-block rounded px-2 py-1 text-xs font-bold capitalize">
                                        {{ order.status.replace('_', ' ') }}
                                    </span>
                                </td>
                                <td class="px-6 py-5 text-slate-700 dark:text-slate-200">{{ order.date }}</td>
                                <td class="px-6 py-5 text-right">
                                    <Link
                                        :href="route('admin.unlock.orders.show', { order: order.id })"
                                        class="inline-flex items-center gap-2 rounded-lg bg-blue-100 px-3 py-2 text-sm font-bold text-blue-700 transition-colors hover:bg-blue-200 dark:bg-blue-900/20 dark:text-blue-400 dark:hover:bg-blue-900/30"
                                    >
                                        <Eye :size="16" />
                                        View
                                    </Link>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div v-if="props.orders.length === 0" class="py-12 text-center text-slate-500">
                        No orders found.
                    </div>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
