import { Button, Group } from '@mantine/core';
import { IconCheck, IconUserCheck, IconX } from '@tabler/icons-react';
import type { TFunction } from 'i18next';
import type { AdvancedColumn } from '@ema-platform/ui';
import type { PickupAppointment } from '@ema-platform/api';
import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';

export function pickupDeskActionsColumn(
  t: TFunction,
  handlers: {
    onCheckIn: (appointment: PickupAppointment) => void;
    onIssue: (appointment: PickupAppointment) => void;
    onNoShow: (appointment: PickupAppointment) => void;
  },
  loadingId: string | null,
): AdvancedColumn<PickupAppointment> {
  return {
    header: '',
    size: 260,
    align: 'right',
    cell: ({ row }) => {
      const appointment = row.original;
      const loading = loadingId === appointment.id;
      return (
        <Group gap="xs" justify="flex-end" wrap="nowrap">
          {appointment.status === 'SCHEDULED' && (
            <RequirePermission anyOf={[LICENSE_PERMISSIONS.MANAGE_PICKUP_DESK]} hideOnly>
              <Button
                size="xs"
                variant="light"
                loading={loading}
                leftSection={<IconUserCheck size={14} />}
                onClick={() => handlers.onCheckIn(appointment)}
              >
                {t('pickupDesk.checkIn', 'Check in')}
              </Button>
            </RequirePermission>
          )}
          {(appointment.status === 'SCHEDULED' || appointment.status === 'CHECKED_IN') && (
            <>
              <RequirePermission anyOf={[LICENSE_PERMISSIONS.ISSUE_CERTIFICATE]} hideOnly>
                <Button
                  size="xs"
                  variant="filled"
                  color="teal"
                  loading={loading}
                  leftSection={<IconCheck size={14} />}
                  onClick={() => handlers.onIssue(appointment)}
                >
                  {t('pickupDesk.issue', 'Issue')}
                </Button>
              </RequirePermission>
              <RequirePermission anyOf={[LICENSE_PERMISSIONS.MANAGE_PICKUP_DESK]} hideOnly>
                <Button
                  size="xs"
                  variant="subtle"
                  color="red"
                  loading={loading}
                  leftSection={<IconX size={14} />}
                  onClick={() => handlers.onNoShow(appointment)}
                >
                  {t('pickupDesk.noShow', 'No-show')}
                </Button>
              </RequirePermission>
            </>
          )}
        </Group>
      );
    },
  };
}
