<script setup lang="ts">
import ShopLayout from '@/Layouts/ShopLayout.vue';
import { Head, Link } from '@inertiajs/vue3';
import { Plus, Clock, CheckCircle, AlertCircle } from 'lucide-vue-next';

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

const getStatusIcon = (status: string) => {
    switch (status) {
        case 'pending':
            return AlertCircle;
        case 'in_progress':
            return Clock;
        case 'done':
            return CheckCircle;
        default:
            return AlertCircle;
    }
};

const getStatusColor = (status: string) => {
    switch (status) {
        case 'pending':
            return 'bg-yellow-500/10 text-yellow-400';
        case 'in_progress':
            return 'bg-blue-500/10 text-blue-400';
        case 'done':
            return 'bg-green-500/10 text-green-400';
        default:
            return 'bg-slate-500/10 text-slate-400';
    }
};
</script>

<template>
    <ShopLayout>
        <Head title="My Orders" />

        <div class="space-y-8">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-2xl font-black text-white">My Orders</h2>
                    <p class="text-slate-400">Track all your unlock orders</p>
                </div>
                <Link href="route('shop.orders.create')" class="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-blue-600 to-blue-700 px-4 py-2 font-bold text-white">
                    <Plus :size="16" />
                    New Order
                </Link>
            </div>

            <div v-if="props.orders.length === 0" class="rounded-2xl border border-slate-700 bg-slate-800/50 p-12 text-center backdrop-blur">
                <p class="text-slate-400">No orders yet. <Link href="route('shop.orders.create')" class="text-blue-400 hover:text-blue-300 font-bold">Create your first order</Link></p>
            </div>

            <div v-else class="space-y-4">
                <div v-for="order in props.orders" :key="order.id" class="rounded-xl border border-slate-700 bg-slate-800/50 p-6 backdrop-blur hover:border-slate-600 transition-colors">
                    <div class="flex items-start justify-between mb-4">
                        <div>
                            <h3 class="text-lg font-bold text-white">{{ order.customer_name }}</h3>
                            <p class="text-sm text-slate-400">{{ order.device_model }} • {{ order.imei_number }}</p>
                        </div>
                        <div :class="getStatusColor(order.status)" class="flex items-center gap-2 rounded-lg px-3 py-2">
                            <component :is="getStatusIcon(order.status)" :size="16" />
                            <span class="text-sm font-bold capitalize">{{ order.status.replace('_', ' ') }}</span>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4 md:grid-cols-4 text-sm">
                        <div>
                            <p class="text-slate-400">Service</p>
                            <p class="font-bold text-white capitalize">{{ order.service_type }}</p>
                        </div>
                        <div>
                            <p class="text-slate-400">Price</p>
                            <p class="font-bold text-white">${{ order.service_price.toFixed(2) }}</p>
                        </div>
                        <div>
                            <p class="text-slate-400">Phone</p>
                            <p class="font-bold text-white">{{ order.phone_number }}</p>
                        </div>
                        <div>
                            <p class="text-slate-400">Date</p>
                            <p class="font-bold text-white">{{ order.date }}</p>
                        </div>
                    </div>

                    <div v-if="order.note" class="mt-4 pt-4 border-t border-slate-700">
                        <p class="text-xs text-slate-500 font-bold">ADMIN NOTE</p>
                        <p class="text-slate-300">{{ order.note }}</p>
                    </div>
                </div>
            </div>
        </div>
    </ShopLayout>
</template>
