<script setup lang="ts">
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head } from '@inertiajs/vue3';

const props = defineProps<{
    profits: Array<{
        id: number;
        product: { name: string };
        quantity: number;
        total: number;
        profit: number;
        date: string;
    }>;
    totalProfit: number;
}>();

const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
    }).format(amount);
};
</script>

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

        <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>Profit (नाफा)</span>
                    </div>
                    <h1 class="text-3xl font-black tracking-tight text-slate-900 dark:text-white">Profit Report</h1>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
                        View profit from all sales.
                    </p>
                </div>
                <div class="rounded-xl bg-green-50 px-4 py-2 text-green-700 dark:bg-green-900/20 dark:text-green-400">
                    <span class="text-sm font-bold">Total Profit: {{ formatCurrency(totalProfit) }}</span>
                </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">
                <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">Sale Total</th>
                            <th class="px-6 py-4 text-[10px] font-bold tracking-widest text-slate-400 uppercase">Profit</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="profit in profits" :key="profit.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">{{ profit.product.name }}</td>
                            <td class="px-6 py-5 text-slate-700 dark:text-slate-200">{{ profit.quantity }}</td>
                            <td class="px-6 py-5 text-slate-700 dark:text-slate-200">{{ formatCurrency(profit.total) }}</td>
                            <td class="px-6 py-5 text-green-600 dark:text-green-400 font-bold">{{ formatCurrency(profit.profit) }}</td>
                            <td class="px-6 py-5 text-slate-700 dark:text-slate-200">{{ profit.date }}</td>
                        </tr>
                    </tbody>
                </table>
                <div v-if="profits.length === 0" class="py-12 text-center text-slate-500">
                    No sales recorded yet.
                </div>
            </div>
        </div>
    </AdminLayout>
</template>