import { Divider, Stack, Table, Text } from '@mantine/core';
import {
  SEAFARER_REGISTRATION_FIELD_LABELS,
  SEAFARER_REGISTRATION_SECTIONS,
  displaySeafarerAnswer,
  useGetActiveDepartmentsQuery,
  useLocalized,
  type Attachment,
  type DocumentRequirement,
  type SaveSeafarerRegistration,
} from '@ema-platform/api';
import { documentSlots } from './RegistrationDocuments';

/** Read-only view of every answer and upload, grouped as the wizard asked them. */
export function RegistrationSummary({
  answers,
  attachments,
  requirements = [],
}: {
  answers: SaveSeafarerRegistration;
  attachments?: Attachment[];
  /** The configured document slots, so the summary lists what was asked for. */
  requirements?: DocumentRequirement[];
}) {
  const localized = useLocalized();
  const { data: departments } = useGetActiveDepartmentsQuery();
  const departmentOptions = departments?.map((d) => ({ value: d.code, label: localized(d.name) }));

  return (
    <Stack gap="md">
      {SEAFARER_REGISTRATION_SECTIONS.map((section) => (
        <div key={section.key}>
          <Text fw={600} size="sm" mb={4}>
            {section.title}
          </Text>
          <Table withTableBorder withColumnBorders>
            <Table.Tbody>
              {section.fields
                .filter((f) => f !== 'passportExpiry' || answers.passportNumber)
                .map((field) => (
                  <Table.Tr key={field}>
                    <Table.Td w="45%">
                      <Text size="xs" c="dimmed">
                        {SEAFARER_REGISTRATION_FIELD_LABELS[field]}
                      </Text>
                    </Table.Td>
                    <Table.Td>
                      <Text size="sm">
                        {displaySeafarerAnswer(field, answers[field], departmentOptions)}
                      </Text>
                    </Table.Td>
                  </Table.Tr>
                ))}
            </Table.Tbody>
          </Table>
        </div>
      ))}
      {attachments && (
        <>
          <Divider />
          <Text fw={600} size="sm" mb={4}>
            Documents
          </Text>
          <Table withTableBorder withColumnBorders>
            <Table.Tbody>
              {documentSlots(requirements, answers as Record<string, unknown>).map((slot) => {
                const file = attachments.find((a) => a.documentKey === slot.key)?.files?.[0];
                return (
                  <Table.Tr key={slot.key}>
                    <Table.Td w="45%">
                      <Text size="xs" c="dimmed">
                        {localized(slot.name)}
                      </Text>
                    </Table.Td>
                    <Table.Td>
                      {file ? (
                        file.url ? (
                          <a href={file.url} target="_blank" rel="noreferrer">
                            {file.originalName}
                          </a>
                        ) : (
                          <Text size="sm">{file.originalName}</Text>
                        )
                      ) : (
                        <Text size="sm" c={slot.isRequired ? 'red' : 'dimmed'}>
                          {slot.isRequired ? 'Missing' : '—'}
                        </Text>
                      )}
                    </Table.Td>
                  </Table.Tr>
                );
              })}
            </Table.Tbody>
          </Table>
        </>
      )}
    </Stack>
  );
}
