import { Paper, Text, Box, Stack, Group } from '@pikku/mantine/core';
import { GetCandidateResult } from '@heygermany/sdk';
import React from 'react';
import { asI18n, type I18nNode } from '@pikku/react';

  const renderFieldValue = (value: any, key: string): I18nNode => {
    let displayValue: string;

    if (typeof value === 'boolean') {
      displayValue = value ? 'Yes' : 'No';
    } else if (value === null || value === undefined) {
      displayValue = 'N/A';
    } else if (key === 'languageLevel') {
      displayValue = (value as string).replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase());
    } else if (key === 'qualificationStatusHomeCountry') {
      displayValue = (value as string).replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase());
    } else if (key === 'qualificationStatusGermany') {
      displayValue = (value as string).replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase());
    } else if (key === 'languageAssessmentType') {
      displayValue = value === 'certificate' ? 'Certificate' : value === 'self_assessment' ? 'Self Assessment' : 'N/A';
    } else {
      displayValue = String(value);
    }

    const getColor = (val: string) => {
      if (val === 'Verified') return 'green';
      if (val === 'Unverified') return 'yellow';
      if (val === 'Missing') return 'red';
      if (val === 'Yes') return 'green';
      if (val === 'No') return 'red';
      if (val === 'N/A') return 'dimmed';
      return undefined;
    };

    return <Text span c={getColor(displayValue)}>{asI18n(displayValue)}</Text>;
  };

  const renderRow = (label: string, value: I18nNode) => (
    <Group gap={4} wrap="wrap" align="baseline">
      <Text fw={500} size="sm">{asI18n(label)}</Text>
      <Text size="sm">{value}</Text>
    </Group>
  );

export const QualificationAssessment: React.FunctionComponent<{ candidateResult?: GetCandidateResult }> = ({ candidateResult }) => {
  if (!candidateResult) return null;

  return (
    <>
      <Paper p="md" radius="sm" withBorder my="lg" shadow='lg'>
        <Stack gap="sm">
          {renderRow('Qualification Status Home Country:', renderFieldValue(candidateResult.qualificationStatusHomeCountry, 'qualificationStatusHomeCountry'))}
          {renderRow('Qualification Status Germany:', renderFieldValue(candidateResult.qualificationStatusGermany, 'qualificationStatusGermany'))}
          {renderRow('Nursing Related Degree:', renderFieldValue(candidateResult.nursingRelatedDegree, 'nursingRelatedDegree'))}
          {renderRow('Accredited University:', renderFieldValue(candidateResult.accreditedUniversity, 'accreditedUniversity'))}
          {renderRow('Accredited Study Program:', renderFieldValue(candidateResult.accreditedStudyProgram, 'accreditedStudyProgram'))}

          <Box>
            {renderRow('Structured Training:', renderFieldValue(candidateResult.structuredTraining?.overallStatus, 'structuredTraining'))}
            <Box ml="xl" mt="xs" p="xs" style={{ borderLeft: '2px solid #e0e0e0' }}>
              <Stack gap="xs">
                {renderRow('Duration:', renderFieldValue(candidateResult.structuredTraining?.hasDuration, 'hasDuration'))}
                {renderRow('Nursing Focus:', renderFieldValue(candidateResult.structuredTraining?.isNursingFocus, 'isNursingFocus'))}
                {renderRow('Theory & Practice:', renderFieldValue(
                    candidateResult.structuredTraining?.hasTheoryHours && candidateResult.structuredTraining?.hasPracticeHours,
                    'theoryAndPractice'
                  ))}
              </Stack>
            </Box>
          </Box>

          <Box>
            {renderRow('License:', null)}
            <Box ml="xl" mt="xs" p="xs" style={{ borderLeft: '2px solid #e0e0e0' }}>
              <Stack gap="xs">
                {renderRow('Mandatory:', renderFieldValue(candidateResult.licenseMandatory, 'licenseMandatory'))}
                {renderRow('Uploaded:', renderFieldValue(candidateResult.docs?.license, 'licenseUploaded'))}
              </Stack>
            </Box>
          </Box>

          <Box>
            {renderRow('Language:', null)}
            <Box ml="xl" mt="xs" p="xs" style={{ borderLeft: '2px solid #e0e0e0' }}>
              <Stack gap="xs">
                {renderRow('Level:', renderFieldValue(candidateResult.languageLevel, 'languageLevel'))}
                {renderRow('Assessment Type:', renderFieldValue(candidateResult.languageAssessmentType, 'languageAssessmentType'))}
              </Stack>
            </Box>
          </Box>

          {renderRow('CV Uploaded:', renderFieldValue(candidateResult.docs?.cv, 'cvUploaded'))}
        </Stack>
      </Paper>
    </>
  );
}