heygermany-e2e-mrg5ct1q/apps/website/components/home/HomeResultsPreview.tsx

import type { ReactNode } from 'react'
import type { QualificationCardStatus } from '@heygermany/sdk'
import {
  Box,
  Flex,
  Group,
  SimpleGrid,
  Text,
  ThemeIcon,
} from '@pikku/mantine/core'
import {
  IconBriefcase,
  IconIdBadge2,
  IconSchool,
  IconWorld,
} from '@tabler/icons-react'
import { useI18n } from '@/context/i18n-provider'
import { Qualification } from '@/components/jobs/results/Qualification'
import { QualificationSectionStatusCard } from '@/components/jobs/results/QualificationSectionStatusCard'
import { type I18nString } from '@pikku/react'

type PreviewSection = {
  key: 'education' | 'license' | 'language' | 'additional'
  label: I18nString
  status: QualificationCardStatus
  color: 'education' | 'license' | 'language' | 'additional'
  summaryIcon: ReactNode
  sectionIcon?: ReactNode
  qualification?: {
    title: string
    description: string
    status: QualificationCardStatus
    requirements: string[]
    steps?: string[]
    progress?: number
  }
}

const buildPreviewSections = (t: ReturnType<typeof useI18n>): PreviewSection[] => [
  {
    key: 'education',
    label: t('enums.qualificationsections.education'),
    status: 'completed',
    color: 'education',
    summaryIcon: <IconSchool size={18} />,
    sectionIcon: <IconSchool size={34} />,
    qualification: {
      title: t('jobs.qualifications.education.match.title'),
      description: t('jobs.qualifications.education.match.description'),
      status: 'completed',
      requirements: [
        t('jobs.qualifications.education.match.requirements.degree'),
        t('jobs.qualifications.education.match.requirements.accredited'),
        t('jobs.qualifications.education.match.requirements.structured'),
      ],
    },
  },
  {
    key: 'license',
    label: t('enums.qualificationsections.license'),
    status: 'required',
    color: 'license',
    summaryIcon: <IconIdBadge2 size={18} />,
    sectionIcon: <IconIdBadge2 size={34} />,
    qualification: {
      title: t('jobs.qualifications.license.nursing.title'),
      description: t('jobs.qualifications.license.nursing.description'),
      status: 'required',
      requirements: [t('jobs.qualifications.license.nursing.requirements.license')],
      steps: [t('jobs.qualifications.license.nursing.steps.obtain')],
    },
  },
  {
    key: 'language',
    label: t('enums.qualificationsections.language'),
    status: 'in-progress',
    color: 'language',
    summaryIcon: <IconWorld size={18} />,
    sectionIcon: <IconWorld size={34} />,
    qualification: {
      title: t('jobs.qualifications.language.proficiency.title'),
      description: t('jobs.qualifications.language.proficiency.description'),
      status: 'in-progress',
      progress: 75,
      requirements: [
        t('jobs.qualifications.language.proficiency.requirements.b2'),
        t('jobs.qualifications.language.proficiency.requirements.certificate'),
      ],
      steps: [
        t('jobs.qualifications.language.proficiency.steps.improve'),
        t('jobs.qualifications.language.proficiency.steps.getcertificate'),
      ],
    },
  },
  {
    key: 'additional',
    label: t('enums.qualificationsections.additional'),
    status: 'required',
    color: 'additional',
    summaryIcon: <IconBriefcase size={18} />,
  },
]

export function HomeResultsPreview() {
  const t = useI18n()
  const sections = buildPreviewSections(t)
  const detailedSections = sections.filter(
    (section): section is PreviewSection & { qualification: NonNullable<PreviewSection['qualification']>; sectionIcon: ReactNode } =>
      Boolean(section.qualification && section.sectionIcon)
  )

  return (
    <>
      <Box bg="white" px={{ base: 'md', md: 'xl' }} py={{ base: 'lg', md: 'xl' }}>
        <Flex gap="md" justify="center" wrap="wrap">
          {sections.map((section) => (
            <QualificationSectionStatusCard
              key={section.key}
              label={section.label}
              status={section.status}
              color={`var(--mantine-color-${section.color}-6)`}
              icon={section.summaryIcon}
            />
          ))}
        </Flex>
      </Box>

      <Box
        bg="gray.0"
        px={{ base: 'md', md: 'xl' }}
        pt={{ base: 'xl', md: '3rem' }}
        pb={{ base: '3rem', md: '4.5rem' }}
      >
        <SimpleGrid cols={{ base: 1, md: 3 }} spacing={{ base: 0, md: 'xl' }}>
          {detailedSections.map((section, index) => (
            <Box
              key={section.key}
              display="flex"
              h={{ base: 'auto', md: '100%' }}
              pt={{ base: index === 0 ? 0 : 'xl', md: 0 }}
              style={{ flexDirection: 'column' }}
            >
              <Group align="center" gap="xs" mb="lg" wrap="nowrap">
                <ThemeIcon color={section.color} radius="md" size="xl" variant="transparent">
                  {section.sectionIcon}
                </ThemeIcon>
                <Text c="gray.9" fw={700} size="xl">
                  {section.label}
                </Text>
              </Group>

              <Qualification
                title={section.qualification.title}
                description={section.qualification.description}
                status={section.qualification.status}
                requirements={section.qualification.requirements}
                steps={section.qualification.steps}
                progress={section.qualification.progress}
                fillHeight={false}
              />
            </Box>
          ))}
        </SimpleGrid>
      </Box>
    </>
  )
}