import type { ColumnDef } from '@tanstack/vue-table';
import { h } from 'vue';
import { DataTableColumnHeader } from '@/components/data-table';
import DataTableActions from '@/components/admin/hr/employees/data-table-actions.vue';
import EmployeeStatusToggle from '@/components/admin/hr/employees/employee-status-toggle.vue';
import { Badge } from '@/components/ui/badge';
import type { EmployeeListItem } from '@/types/employee';

export const columns: ColumnDef<EmployeeListItem>[] = [
    {
        accessorKey: 'profile.full_name',
        enableSorting: true,
        header: () => h(DataTableColumnHeader, { title: 'Nama', column: 'full_name' }),
        cell: ({ row }) => row.original.profile?.full_name ?? '-',
    },
    {
        id: 'account',
        accessorKey: 'email',
        enableSorting: true,
        header: () => h(DataTableColumnHeader, { title: 'Akun', column: 'email' }),
        cell: ({ row }) => h('div', { class: 'space-y-0.5' }, [
            h('div', { class: 'font-medium' }, row.original.email ?? '-'),
            h('div', { class: 'text-muted-foreground text-xs' }, row.original.username ?? '-'),
        ]),
    },
    {
        accessorKey: 'role_label',
        enableSorting: false,
        header: () => h(DataTableColumnHeader, { title: 'Role', column: 'role' }),
        cell: ({ row }) => row.original.role_label
            ? h(Badge, { variant: 'outline' }, () => row.original.role_label)
            : '-',
    },
    {
        accessorKey: 'profile.phone_number',
        enableSorting: false,
        header: () => h(DataTableColumnHeader, { title: 'Telepon', column: 'phone_number' }),
        cell: ({ row }) => row.original.profile?.phone_number ?? '-',
    },
    {
        accessorKey: 'profile.gender_label',
        enableSorting: false,
        header: () => h(DataTableColumnHeader, { title: 'Jenis Kelamin', column: 'gender' }),
        cell: ({ row }) => row.original.profile?.gender_label ?? '-',
    },
    {
        accessorKey: 'profile.birth_date_formatted',
        enableSorting: false,
        header: () => h(DataTableColumnHeader, { title: 'Tanggal Lahir', column: 'birth_date' }),
        cell: ({ row }) => row.original.profile?.birth_date_formatted ?? '-',
    },
    {
        accessorKey: 'profile.address',
        enableSorting: false,
        header: () => h(DataTableColumnHeader, { title: 'Alamat', column: 'address' }),
        cell: ({ row }) => h(
            'span',
            { class: 'block max-w-[200px] truncate', title: row.original.profile?.address ?? undefined },
            row.original.profile?.address ?? '-',
        ),
    },
    {
        id: 'employment_dates',
        accessorKey: 'employee.join_date_formatted',
        enableSorting: true,
        header: () => h(DataTableColumnHeader, { title: 'Masa Kepegawaian', column: 'join_date' }),
        cell: ({ row }) => h('div', { class: 'space-y-0.5 text-sm' }, [
            h('div', {}, [
                h('span', { class: 'text-muted-foreground' }, 'Bergabung: '),
                row.original.employee?.join_date_formatted ?? '-',
            ]),
            h('div', {}, [
                h('span', { class: 'text-muted-foreground' }, 'Resign: '),
                row.original.employee?.resign_date_formatted ?? '-',
            ]),
        ]),
    },
    {
        accessorKey: 'employee.employment_status_label',
        enableSorting: true,
        header: () => h(DataTableColumnHeader, { title: 'Status Kepegawaian', column: 'employment_status' }),
        cell: ({ row }) => row.original.employee?.employment_status_label ?? '-',
    },
    {
        accessorKey: 'employee.base_salary_formatted',
        enableSorting: true,
        header: () => h(DataTableColumnHeader, {
            title: 'Gaji Pokok',
            column: 'base_salary',
        }),
        cell: ({ row }) => row.original.employee?.base_salary_formatted ?? '-',
    },
    {
        id: 'status_toggle',
        enableSorting: false,
        header: () => h(DataTableColumnHeader, { title: 'Status', column: 'is_active' }),
        cell: ({ row }) => h(EmployeeStatusToggle, { employee: row.original }),
    },
    {
        id: 'actions',
        enableSorting: false,
        enableHiding: false,
        cell: ({ row }) => h(DataTableActions, { employee: row.original }),
    },
];