import { Badge, Button, Group, Progress, Text } from '@mantine/core';
import { IconArrowRight } from '@tabler/icons-react';
import type { TFunction } from 'i18next';
import type { AdvancedColumn } from '@ema-platform/ui';
import {
  STATUS_COLORS,
  STATUS_LABELS,
  STATUS_PROGRESS,
  type LicenseApplication,
} from '@ema-platform/api';

/** Columns for the applicant's in-flight vessel registration applications. */
export function inFlightColumns(
  t: TFunction,
  deps: {
    onOpen: (app: LicenseApplication) => void;
    onPay: (app: LicenseApplication) => void;
    onBypass: (app: LicenseApplication) => void;
    isPaying: boolean;
    bypassing: boolean;
  },
): AdvancedColumn<LicenseApplication>[] {
  return [
    {
      header: t('applications.table.applicationNumber'),
      cell: ({ row }) => (
        <Group gap="xs" wrap="nowrap">
          <Text fw={600} fz="sm">{row.original.applicationNumber}</Text>
          {row.original.kind === 'RENEWAL' && (
            <Badge size="sm" variant="light">
              {t('vesselRegistration.inFlight.renewalBadge')}
            </Badge>
          )}
        </Group>
      ),
    },
    {
      header: t('common.status'),
      cell: ({ row }) => (
        <Badge color={STATUS_COLORS[row.original.status]} variant="light">
          {STATUS_LABELS[row.original.status]}
        </Badge>
      ),
    },
    {
      header: t('applications.table.progress'),
      size: 300,
      cell: ({ row }) => {
        const app = row.original;
        return (
          <Group gap="xs" wrap="nowrap">
            <Progress
              value={STATUS_PROGRESS[app.status]}
              color={STATUS_COLORS[app.status]}
              size="sm"
              radius="xl"
              style={{ flex: 1, minWidth: 60 }}
            />
            {/* The fee stops the registration dead, so the payment action sits
                on the bar rather than being hidden behind View. */}
            {app.status === 'PAYMENT_PENDING' && (
              <>
                <Button
                  size="compact-sm"
                  color="yellow"
                  loading={deps.isPaying}
                  onClick={() => deps.onPay(app)}
                >
                  {t('applications.actions.pay', {
                    amount: Number(app.feeAmount ?? 0).toLocaleString(),
                    currency: app.feeCurrency,
                  })}
                </Button>
                {/* ponytail: shown unconditionally — the licensing page hides
                    this behind the API's bypassEnabled capability flag, which
                    is off here. Re-gate on capabilities before prod. */}
                <Button
                  size="compact-sm"
                  variant="default"
                  loading={deps.bypassing}
                  onClick={() => deps.onBypass(app)}
                  title="Testing only — marks the fee paid"
                >
                  {t('applications.actions.bypass')}
                </Button>
              </>
            )}
          </Group>
        );
      },
    },
    {
      header: '',
      label: t('common.actions'),
      align: 'right',
      cell: ({ row }) => {
        const app = row.original;
        const needsAction = app.status === 'RESUBMIT_REQUIRED';
        return (
          <Button
            size="compact-sm"
            variant={needsAction ? 'filled' : 'light'}
            color={needsAction ? 'orange' : undefined}
            rightSection={<IconArrowRight size={14} />}
            onClick={() => deps.onOpen(app)}
          >
            {app.status === 'DRAFT'
              ? t('common.continue')
              : needsAction
                ? t('vesselRegistration.inFlight.fix')
                : t('vesselRegistration.inFlight.view')}
          </Button>
        );
      },
    },
  ];
}
