import { Box, Container, rem, Stack, Text } from "@pikku/mantine/core"
import { CTASection } from "./results/CTASection"
import NextSteps from "./results/NextSteps"
import { QualificationsSection } from "./results/QualificationsSection"
import React from "react"
import { CandidateResults } from "@heygermany/sdk"
import { Emphasize } from "../ui/Emphasize"
import { useI18n } from "@/context/i18n-provider"

export const CandidateResult: React.FunctionComponent<{
  candidateResults: CandidateResults
  ctaPublicMode?: boolean
}> = ({ candidateResults, ctaPublicMode = false }) => {
  const { textContent } = candidateResults
  const t = useI18n()

  if (!textContent.renderPath) {
    return <div>{t('jobs.result.noeligibletemplate')}</div>
  }

  const isHelper = textContent.renderPath.startsWith("helper.")
  const afterExplanationParaNotes = textContent.notes.afterExplanation

  return (
    <>
      {/* Hero Section */}
      <Box bg="white" py="xl">
        <Container size="lg" ta="center">
          <Emphasize text={textContent.hero} tt="capitalize" size="xxxl" fw={700} mt="xl" mb="md" />
          <Emphasize text={textContent.result} size="xxl" fw={700} mt="xl" mb="xl" />

          <Container maw={rem(800)} size="md" mb="xl">
            <Stack gap="md">
              {/* First paragraph */}
              {textContent.explanation[0] && <Emphasize size="lgxl" text={textContent.explanation[0]} />}

              {/* Remaining paragraphs */}
              {textContent.explanation.slice(1).map((p: string, i: number) => <Emphasize key={i} size="lgxl" text={p} />)}

              {/* Visa note(s) after explanation */}
              {afterExplanationParaNotes.map((n: string, idx: number) => (
                <Emphasize key={`note-${idx}`} size="lgxl" text={n} />
              ))}
            </Stack>
          </Container>
        </Container>
      </Box>

      {/* Qualifications Section */}
      <QualificationsSection candidateResults={candidateResults} />

      {/* What does this mean — render only if not Helper */}
      {!isHelper && textContent.recognition?.length ? (
        <Container maw={rem(800)} size="md" my="xl">
          <Text fz="xxxl" fw={700} mb='lg' ta='center'>
            {t('jobs.nextsteps.whatdoesthismean')}
          </Text>

          <Stack gap='sm' c="dimmed" mx="auto" align='center'>
            <Emphasize primary={false} text={textContent.recognition[0]} ta='center' fz="xl" fw={700} mb='lg' />
            {textContent.recognition.slice(1).map((line: string, idx: number) => (
              <Emphasize
                primary={false}
                renderInlineStyles={false}
                key={idx}
                ta='center'
                text={line}
                fz='xl'
                fw={500}
              />
            ))}
          </Stack>
        </Container>
      ) : null}

      {/* NextSteps Section */}
      <NextSteps joinTalentPool={candidateResults.joinTalentPool!} nextSteps={candidateResults.nextSteps} isHelper={isHelper} />

      {/* CTA Section */}
      <CTASection joinTalentPool={candidateResults.joinTalentPool!} publicMode={ctaPublicMode} />
    </>
  )
}