import type { ColumnDef } from '@tanstack/react-table';
import { format } from 'date-fns';
import { Eye } from 'lucide-react';
import { RowActions } from '@/components/row-actions';
import { Badge } from '@/components/ui/badge';
import { show } from '@/routes/student/letter-requests';
import type { LetterRequest, LetterStatus } from '@/types/letter-request';
import { LetterStatusLabels } from '@/types/letter-request';

export const letterRequestColumns: ColumnDef<LetterRequest>[] = [
    {
        accessorKey: 'letter_type',
        header: () => <span>Jenis Surat</span>,
        cell: ({ row }) => {
            const letterRequest = row.original;

            return (
                <div>
                    <p className="font-medium">{letterRequest.letter_type}</p>
                    {letterRequest.purpose && (
                        <p className="line-clamp-1 max-w-xs text-xs text-muted-foreground">
                            {letterRequest.purpose}
                        </p>
                    )}
                </div>
            );
        },
    },
    {
        accessorKey: 'status',
        header: () => <span className="block text-center">Status</span>,
        meta: {
            className: 'w-[130px] text-center',
            headerClassName: 'w-[130px] text-center',
        },
        cell: ({ row }) => {
            const status = row.original.status as LetterStatus | null;

            const variant =
                status === 'completed'
                    ? 'default'
                    : status === 'rejected'
                      ? 'destructive'
                      : status === 'in_process'
                        ? 'secondary'
                        : 'outline';

            return (
                <div className="flex justify-center">
                    {status ? (
                        <Badge variant={variant}>
                            {LetterStatusLabels[status]}
                        </Badge>
                    ) : (
                        <span className="text-muted-foreground">-</span>
                    )}
                </div>
            );
        },
    },
    {
        accessorKey: 'submitted_at',
        header: () => <span>Diajukan</span>,
        cell: ({ row }) => {
            const submittedAt = row.original.submitted_at;

            return submittedAt
                ? format(new Date(submittedAt), 'd MMM yyyy, HH:mm')
                : '-';
        },
    },
    {
        id: 'actions',
        header: () => <span className="block text-center">Aksi</span>,
        meta: {
            className: 'w-[80px] text-center',
            headerClassName: 'w-[80px] text-center',
        },
        cell: ({ row }) => (
            <RowActions
                actions={[
                    {
                        label: 'Lihat Detail',
                        icon: <Eye className="h-4 w-4" />,
                        href: show.url(row.original.id),
                    },
                ]}
            />
        ),
    },
];