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/course-registrations';
import { formatAcademicTermLabel } from '@/types/academic-term';
import type { RegistrationStatus } from '@/types/course-registration';
import { RegistrationStatusLabels } from '@/types/course-registration';

export type SubmissionSummary = {
    id: number;
    status: RegistrationStatus;
    signed_at: string;
    academic_term: { id: number; name: string; semester: string } | null;
    course_registrations_count: number;
};

export const submissionColumns: ColumnDef<SubmissionSummary>[] = [
    {
        id: 'academic_term',
        header: () => <span>Periode Akademik</span>,
        cell: ({ row }) => {
            const term = row.original.academic_term;

            return term ? formatAcademicTermLabel(term) : '-';
        },
    },
    {
        id: 'count',
        header: () => <span className="block text-center">Jumlah</span>,
        meta: {
            className: 'w-[100px] text-center',
            headerClassName: 'w-[100px] text-center',
        },
        cell: ({ row }) => row.original.course_registrations_count,
    },
    {
        accessorKey: 'status',
        header: () => <span className="block text-center">Status</span>,
        meta: {
            className: 'w-[140px] text-center',
            headerClassName: 'w-[140px] text-center',
        },
        cell: ({ row }) => {
            const status = row.original.status;

            return (
                <div className="flex justify-center">
                    <Badge
                        variant={
                            status === 'approved'
                                ? 'default'
                                : status === 'rejected'
                                  ? 'destructive'
                                  : 'outline'
                        }
                    >
                        {RegistrationStatusLabels[status]}
                    </Badge>
                </div>
            );
        },
    },
    {
        id: 'signed_at',
        header: () => <span>Tanggal</span>,
        cell: ({ row }) =>
            format(new Date(row.original.signed_at), '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),
                    },
                ]}
            />
        ),
    },
];