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

const props = defineProps<{
    repairs: Array<{
        id: number;
        customer_name: string;
        phone_number: string;
        device_model: string;
        problem: string;
        charge_amount: number;
        status: string;
        date: string;
    }>;
}>();
</script>

<template>
    <AdminLayout>
        <Head title="Repairs" />

        <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 class="text-start">
                    <div class="mb-2 flex items-center gap-2 text-[10px] font-bold tracking-widest text-slate-400 uppercase">
                        <span>Repair / Unlock (मर्मत)</span>
                    </div>
                    <h1 class="text-3xl font-black tracking-tight text-slate-900 dark:text-white">Manage Repairs</h1>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
                        Add, edit, and track repair and unlock services.
                    </p>
                </div>
                <Link
                    :href="admin.repairs.create.url()"
                    class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition-colors hover:bg-brand-700"
                >
                    <Plus :size="16" />
                    Add Repair
                </Link>
            </div>

            <div class="rounded-4xl border border-slate-200/60 bg-white p-8 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                <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">Customer</th>
                            <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">Phone</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">Problem</th>
                            <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">Charge</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">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                        <tr v-for="repair in repairs" :key="repair.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">{{ repair.customer_name }}</td>
                            <td class="px-6 py-5 text-slate-700 dark:text-slate-200">{{ repair.phone_number }}</td>
                            <td class="px-6 py-5 text-slate-700 dark:text-slate-200">{{ repair.device_model }}</td>
                            <td class="px-6 py-5 text-slate-700 dark:text-slate-200">{{ repair.problem }}</td>
                            <td class="px-6 py-5 text-slate-700 dark:text-slate-200">${{ repair.charge_amount }}</td>
                            <td class="px-6 py-5">
                                <span :class="repair.status === 'done' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'" class="px-2 py-1 rounded text-xs font-bold">
                                    {{ repair.status }}
                                </span>
                            </td>
                            <td class="px-6 py-5 text-slate-700 dark:text-slate-200">{{ repair.date }}</td>
                            <td class="px-6 py-5 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <Link
                                        :href="admin.repairs.edit.url({ repair: repair.id })"
                                        class="rounded-lg p-2 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-slate-700 dark:hover:text-slate-300"
                                    >
                                        <Edit :size="16" />
                                    </Link>
                                    <form :action="admin.repairs.destroy.url({ repair: repair.id })" method="POST" class="inline">
                                        <input type="hidden" name="_method" value="DELETE" />
                                        <button
                                            type="submit"
                                            class="rounded-lg p-2 text-slate-400 transition-colors hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
                                            onclick="return confirm('Are you sure?')"
                                        >
                                            <Trash2 :size="16" />
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div v-if="repairs.length === 0" class="py-12 text-center text-slate-500">
                    No repairs found. <Link :href="admin.repairs.create.url()" class="text-brand-600 hover:text-brand-700">Add one now</Link>.
                </div>
            </div>
        </div>
    </AdminLayout>
</template>