import { NumberInput, Text, TextInput } from '@mantine/core';
import type { TFunction } from 'i18next';
import type { AdvancedColumn } from '@ema-platform/ui';
import type { QuestionBrief } from '../../../exam/types/exam';

export function recordResultColumns(
  t: TFunction,
  locale: 'en' | 'am',
  handlers: {
    scores: Record<string, number>;
    questionRemarks: Record<string, string>;
    onScoreChange: (questionId: string, value: number) => void;
    onRemarkChange: (questionId: string, value: string) => void;
  },
): AdvancedColumn<QuestionBrief>[] {
  return [
    {
      header: t('result.recordModal.question'),
      cell: ({ row }) => (
        <Text fz="sm" maw={250} lineClamp={2}>
          {row.original.title[locale]}
        </Text>
      ),
    },
    {
      header: t('result.recordModal.maxPoints'),
      cell: ({ row }) => (
        <Text fz="sm" fw={600}>
          {row.original.points}
        </Text>
      ),
    },
    {
      header: t('result.recordModal.score'),
      cell: ({ row }) => (
        <NumberInput
          value={handlers.scores[row.original.id] ?? 0}
          onChange={(v) => handlers.onScoreChange(row.original.id, Number(v))}
          min={0}
          max={row.original.points}
          size="xs"
          style={{ width: 80 }}
        />
      ),
    },
    {
      header: t('result.recordModal.remark'),
      cell: ({ row }) => (
        <TextInput
          placeholder={t('result.recordModal.remarkOptional')}
          value={handlers.questionRemarks[row.original.id] ?? ''}
          onChange={(e) => handlers.onRemarkChange(row.original.id, e.currentTarget.value)}
          size="xs"
          style={{ minWidth: 160 }}
        />
      ),
    },
  ];
}
