<script setup lang="ts">
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Download, FileText } from 'lucide-vue-next';

defineOptions({ layout: AdminLayout });

const props = defineProps<{
    payroll: {
        id: number;
        month: string;
        total_amount: string;
        status: 'pending' | 'approved' | 'rejected';
        generated_by: { name: string };
        approved_by: { name: string } | null;
        approved_at: string | null;
        items: Array<{
            id: number;
            gross_salary: string;
            total_earnings: string;
            total_deductions: string;
            tax_deduction: string;
            loan_deduction: string;
            addition_adjustment: string;
            deduction_adjustment: string;
            net_salary: string;
            salary_breakdown: { earnings: any[]; deductions: any[] };
            employee: {
                id: number;
                name: string;
                employee_profile: { job_title: string | null; department_rel: { name: string } | null } | null;
            };
        }>;
    };
}>();

const statusClass: Record<string, string> = {
    pending: 'bg-amber-50 text-amber-700',
    approved: 'bg-emerald-50 text-emerald-700',
    rejected: 'bg-red-50 text-red-700',
};
</script>

<template>
    <div class="space-y-6">
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div>
                <h1 class="text-xl font-extrabold text-slate-800 dark:text-white">
                    Payroll — {{ new Date(payroll.month).toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) }}
                </h1>
                <div class="mt-1 flex items-center gap-2">
                    <span :class="statusClass[payroll.status]" class="rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize">
                        {{ payroll.status }}
                    </span>
                    <span class="text-sm text-slate-500">Generated by {{ payroll.generated_by?.name }}</span>
                    <span v-if="payroll.approved_by" class="text-sm text-slate-500">· Approved by {{ payroll.approved_by.name }}</span>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <a
                    :href="`/admin/payroll/${payroll.id}/export?format=csv`"
                    class="flex items-center gap-1.5 rounded-lg bg-slate-100 px-3 py-1.5 text-xs font-bold text-slate-700 transition-colors hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-300"
                >
                    <Download class="h-3.5 w-3.5" /> CSV
                </a>
                <a
                    :href="`/admin/payroll/${payroll.id}/export?format=pdf`"
                    class="flex items-center gap-1.5 rounded-lg bg-slate-100 px-3 py-1.5 text-xs font-bold text-slate-700 transition-colors hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-300"
                >
                    <FileText class="h-3.5 w-3.5" /> PDF
                </a>
            </div>
        </div>

        <!-- Items Table -->
        <div class="overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-slate-200 dark:border-slate-700">
                        <th class="px-5 py-3 text-left text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Employee</th>
                        <th class="px-5 py-3 text-right text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Gross</th>
                        <th class="px-5 py-3 text-right text-[10px] font-semibold tracking-widest text-slate-400 uppercase">Earnings</th>
                        <th class="px-5 py-3 text-right text-[10px] font-semibold tracking-widest text-amber-500 uppercase">Income Tax</th>
                        <th class="px-5 py-3 text-right text-[10px] font-semibold tracking-widest text-rose-400 uppercase">Loan</th>
                        <th class="px-5 py-3 text-center text-[10px] font-semibold tracking-widest text-emerald-500 uppercase">Addition</th>
                        <th class="px-5 py-3 text-center text-[10px] font-semibold tracking-widest text-rose-500 uppercase">Deduction</th>
                        <th class="px-5 py-3 text-right text-[10px] font-semibold tracking-widest text-indigo-500 uppercase">Net</th>
                        <th class="px-5 py-3" />
                    </tr>
                </thead>
                <tbody>
                    <tr
                        v-for="item in payroll.items"
                        :key="item.id"
                        class="border-b border-slate-100 transition-colors hover:bg-slate-50 dark:border-slate-800 dark:hover:bg-slate-800/40"
                    >
                        <td class="px-5 py-3">
                            <p class="font-semibold text-slate-800 dark:text-white">{{ item.employee.name }}</p>
                            <p v-if="item.employee.employee_profile?.job_title" class="text-xs text-slate-500">
                                {{ item.employee.employee_profile.job_title }}
                            </p>
                            <p v-if="item.employee.employee_profile?.department_rel?.name" class="text-xs text-indigo-400">
                                {{ item.employee.employee_profile.department_rel.name }}
                            </p>
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-sm text-slate-600 dark:text-slate-400">
                            {{ parseFloat(item.gross_salary).toLocaleString() }}
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-sm text-emerald-600">
                            {{ parseFloat(item.total_earnings).toLocaleString() }}
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-sm text-amber-600">
                            <span v-if="parseFloat(item.tax_deduction) > 0">−{{ parseFloat(item.tax_deduction).toLocaleString() }}</span>
                            <span v-else class="text-slate-300">—</span>
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-sm text-rose-500">
                            <span v-if="parseFloat(item.loan_deduction) > 0">−{{ parseFloat(item.loan_deduction).toLocaleString() }}</span>
                            <span v-else class="text-slate-300">—</span>
                        </td>
                        <td class="px-5 py-3 text-center font-mono text-sm text-emerald-600">
                            <span v-if="parseFloat(item.addition_adjustment) > 0" class="font-semibold"
                                >+{{ parseFloat(item.addition_adjustment).toLocaleString() }}</span
                            >
                            <span v-else class="text-slate-300">—</span>
                        </td>
                        <td class="px-5 py-3 text-center font-mono text-sm text-rose-600">
                            <span v-if="parseFloat(item.deduction_adjustment) > 0" class="font-semibold"
                                >−{{ parseFloat(item.deduction_adjustment).toLocaleString() }}</span
                            >
                            <span v-else class="text-slate-300">—</span>
                        </td>
                        <td class="px-5 py-3 text-right font-mono font-bold text-indigo-600">{{ parseFloat(item.net_salary).toLocaleString() }}</td>
                        <td class="px-5 py-3 text-right">
                            <a
                                :href="`/admin/payroll/${payroll.id}/items/${item.id}/payslip/download`"
                                class="flex items-center gap-1 rounded-lg bg-slate-100 px-2.5 py-1 text-xs font-bold text-slate-600 transition-colors hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-300"
                            >
                                <Download class="h-3 w-3" /> Payslip
                            </a>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr class="border-t-2 border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-800">
                        <td colspan="8" class="px-5 py-3 text-sm font-bold text-slate-600 dark:text-slate-400">
                            {{ payroll.items.length }} employees
                        </td>
                        <td class="px-5 py-3 text-right font-mono text-base font-black text-indigo-700 dark:text-indigo-400">
                            {{ parseFloat(payroll.total_amount).toLocaleString() }}
                        </td>
                        <td />
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</template>
