<script setup lang="ts">
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head } from '@inertiajs/vue3';
import { DollarSign, TrendingUp, TrendingDown, Calculator } from 'lucide-vue-next';

const props = defineProps<{
    accounts: {
        sales_profit: number;
        repair_income: number;
        tool_rent_income: number;
        second_hand_expense: number;
        total_income: number;
        total_expense: number;
        final_profit: number;
    };
}>();
</script>

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

        <div class="animate-fade-in space-y-8 pb-12">
            <div class="text-start">
                <div class="mb-2 flex items-center gap-2 text-[10px] font-bold tracking-widest text-slate-400 uppercase">
                    <span>Accounts (लेखा)</span>
                </div>
                <h1 class="text-3xl font-black tracking-tight text-slate-900 dark:text-white">Financial Summary</h1>
                <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
                    Overview of all income, expenses, and profit calculations.
                </p>
            </div>

            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                <!-- Sales Profit -->
                <div class="rounded-4xl border border-slate-200/60 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                    <div class="flex items-center gap-3">
                        <div class="rounded-xl bg-green-100 p-3 dark:bg-green-900/20">
                            <DollarSign :size="24" class="text-green-600 dark:text-green-400" />
                        </div>
                        <div>
                            <p class="text-sm font-bold text-slate-500 dark:text-slate-400">Sales Profit</p>
                            <p class="text-2xl font-black text-slate-900 dark:text-white">${{ accounts.sales_profit.toFixed(2) }}</p>
                        </div>
                    </div>
                </div>

                <!-- Repair Income -->
                <div class="rounded-4xl border border-slate-200/60 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                    <div class="flex items-center gap-3">
                        <div class="rounded-xl bg-blue-100 p-3 dark:bg-blue-900/20">
                            <Calculator :size="24" class="text-blue-600 dark:text-blue-400" />
                        </div>
                        <div>
                            <p class="text-sm font-bold text-slate-500 dark:text-slate-400">Repair Income</p>
                            <p class="text-2xl font-black text-slate-900 dark:text-white">${{ accounts.repair_income.toFixed(2) }}</p>
                        </div>
                    </div>
                </div>

                <!-- Tool Rent Income -->
                <div class="rounded-4xl border border-slate-200/60 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                    <div class="flex items-center gap-3">
                        <div class="rounded-xl bg-purple-100 p-3 dark:bg-purple-900/20">
                            <TrendingUp :size="24" class="text-purple-600 dark:text-purple-400" />
                        </div>
                        <div>
                            <p class="text-sm font-bold text-slate-500 dark:text-slate-400">Tool Rent Income</p>
                            <p class="text-2xl font-black text-slate-900 dark:text-white">${{ accounts.tool_rent_income.toFixed(2) }}</p>
                        </div>
                    </div>
                </div>

                <!-- Second Hand Expense -->
                <div class="rounded-4xl border border-slate-200/60 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                    <div class="flex items-center gap-3">
                        <div class="rounded-xl bg-red-100 p-3 dark:bg-red-900/20">
                            <TrendingDown :size="24" class="text-red-600 dark:text-red-400" />
                        </div>
                        <div>
                            <p class="text-sm font-bold text-slate-500 dark:text-slate-400">Second Hand Expense</p>
                            <p class="text-2xl font-black text-slate-900 dark:text-white">${{ accounts.second_hand_expense.toFixed(2) }}</p>
                        </div>
                    </div>
                </div>

                <!-- Total Income -->
                <div class="rounded-4xl border border-slate-200/60 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                    <div class="flex items-center gap-3">
                        <div class="rounded-xl bg-emerald-100 p-3 dark:bg-emerald-900/20">
                            <TrendingUp :size="24" class="text-emerald-600 dark:text-emerald-400" />
                        </div>
                        <div>
                            <p class="text-sm font-bold text-slate-500 dark:text-slate-400">Total Income</p>
                            <p class="text-2xl font-black text-slate-900 dark:text-white">${{ accounts.total_income.toFixed(2) }}</p>
                        </div>
                    </div>
                </div>

                <!-- Total Expense -->
                <div class="rounded-4xl border border-slate-200/60 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                    <div class="flex items-center gap-3">
                        <div class="rounded-xl bg-orange-100 p-3 dark:bg-orange-900/20">
                            <TrendingDown :size="24" class="text-orange-600 dark:text-orange-400" />
                        </div>
                        <div>
                            <p class="text-sm font-bold text-slate-500 dark:text-slate-400">Total Expense</p>
                            <p class="text-2xl font-black text-slate-900 dark:text-white">${{ accounts.total_expense.toFixed(2) }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Final Profit/Loss -->
            <div class="rounded-4xl border border-slate-200/60 bg-gradient-to-r from-slate-50 to-slate-100 p-8 shadow-sm dark:border-slate-700 dark:from-slate-800 dark:to-slate-700">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-xl font-black text-slate-900 dark:text-white">Final Profit / Loss (अन्तिम नाफा/नोक्सान)</h3>
                        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Total profit or loss after all calculations</p>
                    </div>
                    <div class="text-right">
                        <p :class="accounts.final_profit >= 0 ? 'text-green-600' : 'text-red-600'" class="text-4xl font-black">
                            ${{ accounts.final_profit.toFixed(2) }}
                        </p>
                        <p :class="accounts.final_profit >= 0 ? 'text-green-600' : 'text-red-600'" class="text-sm font-bold">
                            {{ accounts.final_profit >= 0 ? 'Profit' : 'Loss' }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>