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

const props = defineProps<{
    sales: Array<{
        id: number;
        product: { name: string };
        quantity: number;
        total: number;
        date: string;
    }>;
}>();
</script>

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

        <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>Sales</span>
                    </div>
                    <h1 class="text-3xl font-black tracking-tight text-slate-900 dark:text-white">Sales Records</h1>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
                        View all sales transactions.
                    </p>
                </div>
                <Link
                    :href="admin.sales.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" />
                    Record Sale
                </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">Product</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-[10px] font-bold tracking-widest text-slate-400 uppercase">Total</th>
                            <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">Date</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                        <tr v-for="sale in sales" :key="sale.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">{{ sale.product.name }}</td>
                            <td class="px-6 py-5 text-slate-700 dark:text-slate-200">{{ sale.quantity }}</td>
                            <td class="px-6 py-5 text-slate-700 dark:text-slate-200">${{ sale.total }}</td>
                            <td class="px-6 py-5 text-slate-700 dark:text-slate-200">{{ sale.date }}</td>
                        </tr>
                    </tbody>
                </table>
                <div v-if="sales.length === 0" class="py-12 text-center text-slate-500">
                    No sales recorded yet. <Link :href="admin.sales.create.url()" class="text-brand-600 hover:text-brand-700">Record one now</Link>.
                </div>
            </div>
        </div>
    </AdminLayout>
</template>