<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<{
    products: Array<{
        id: number;
        name: string;
        cost_price: number;
        selling_price: number;
        quantity: number;
    }>;
}>();
</script>

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

        <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>Products (Stock)</span>
                    </div>
                    <h1 class="text-3xl font-black tracking-tight text-slate-900 dark:text-white">Manage Products</h1>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
                        Add, edit, and delete products in your inventory.
                    </p>
                </div>
                <Link
                    :href="admin.products.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 Product
                </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">Name</th>
                            <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">Cost Price</th>
                            <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">Selling Price</th>
                            <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">Quantity</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="product in products" :key="product.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">{{ product.name }}</td>
                            <td class="px-6 py-5 text-slate-700 dark:text-slate-200">${{ product.cost_price }}</td>
                            <td class="px-6 py-5 text-slate-700 dark:text-slate-200">${{ product.selling_price }}</td>
                            <td class="px-6 py-5 text-slate-700 dark:text-slate-200">{{ product.quantity }}</td>
                            <td class="px-6 py-5 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <Link
                                        :href="admin.products.edit.url({ product: product.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.products.destroy.url({ product: product.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="products.length === 0" class="py-12 text-center text-slate-500">
                    No products found. <Link :href="admin.products.create.url()" class="text-brand-600 hover:text-brand-700">Add one now</Link>.
                </div>
            </div>
        </div>
    </AdminLayout>
</template>