import { Avatar, Badge, Group, Paper, Stack, Text } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import type { ApplicationApplicant } from '@ema-platform/api';
import { useDateDisplayer } from '@ema-platform/shared';

interface ApplicantCardProps {
  applicant: ApplicationApplicant;
}

/**
 * Who the reviewer is deciding about.
 *
 * A company licence names itself in the page title (`companyName`); a seafarer
 * registration has no company, so the officer's screen led with an application
 * number and the human behind it was somewhere in the form answers. This puts
 * the identity where it belongs on a person-centric review: name, national ID,
 * contact, and — for a seafarer who already holds one — their number and
 * standing, which is what says whether this is a first registration or a
 * duplicate.
 *
 * Read-only and sourced from the profile, not the form: this is the record the
 * registration will be written onto, so a reviewer comparing the two is exactly
 * the intended use.
 */
export function ApplicantCard({ applicant }: ApplicantCardProps) {
  const { t } = useTranslation();
  const showDate = useDateDisplayer();

  const fullName = [applicant.firstName, applicant.middleName, applicant.lastName]
    .filter(Boolean)
    .join(' ');
  const initials = [applicant.firstName, applicant.lastName]
    .filter(Boolean)
    .map((part) => part?.[0]?.toUpperCase() ?? '')
    .join('');

  return (
    <Paper withBorder p="md">
      <Group gap="sm" wrap="nowrap" align="flex-start" mb="sm">
        <Avatar radius="xl" color="blue" variant="light">
          {initials || '—'}
        </Avatar>
        <div style={{ minWidth: 0 }}>
          <Text fw={600} size="sm" style={{ wordBreak: 'break-word' }}>
            {fullName || t('review.nameMissing', 'Name not on profile')}
          </Text>
          {applicant.seafarerNumber ? (
            <Group gap={4} mt={2}>
              <Text size="xs" c="dimmed">
                {applicant.seafarerNumber}
              </Text>
              {applicant.seafarerStatus && (
                <Badge
                  size="xs"
                  variant="light"
                  color={applicant.seafarerStatus === 'ACTIVE' ? 'teal' : 'orange'}
                >
                  {applicant.seafarerStatus}
                </Badge>
              )}
            </Group>
          ) : (
            <Text size="xs" c="dimmed" mt={2}>
              {t('review.notYetRegistered', 'Not yet registered')}
            </Text>
          )}
        </div>
      </Group>

      <Stack gap={6}>
        <Row label={t('review.applicantGender', 'Gender')} value={applicant.gender} />
        <Row
          label={t('review.applicantDob', 'Date of birth')}
          value={applicant.dob ? showDate(applicant.dob) : null}
        />
        <Row
          label={t('review.applicantNationality', 'Nationality')}
          value={applicant.nationality}
        />
        <Row
          // The id type is the label, so a Fayda number is not read as a passport.
          label={applicant.idType ?? t('review.applicantId', 'National ID')}
          value={applicant.idNumber}
        />
        <Row
          label={t('review.applicantPhone', 'Phone')}
          value={applicant.primaryPhoneNumber}
        />
        <Row label={t('review.applicantEmail', 'Email')} value={applicant.email} />
      </Stack>
    </Paper>
  );
}

/** One label/value line, omitted entirely when there is nothing to show. */
function Row({ label, value }: { label: string; value?: string | null }) {
  if (!value) return null;
  return (
    <Group justify="space-between" gap="xs" wrap="nowrap" align="flex-start">
      <Text size="xs" c="dimmed" style={{ flexShrink: 0 }}>
        {label}
      </Text>
      <Text size="xs" ta="right" style={{ wordBreak: 'break-word' }}>
        {value}
      </Text>
    </Group>
  );
}
