import { Alert, Anchor, Button, Group, List, Stack, Text } from '@mantine/core';
import { IconInfoCircle } from '@tabler/icons-react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import {
  PROFILE_FIELD_SECTION,
  useCurrentProfile,
  type ProfileRequirement,
} from '@ema-platform/auth';
import type { ReactNode } from 'react';

interface ProfileRequirementGateProps {
  requirement: ProfileRequirement;
  /** Rendered once the requirement is satisfied. */
  children: ReactNode;
  /**
   * When true the children still render alongside the notice. Use for flows
   * the applicant can keep working through while a detail is outstanding.
   */
  advisory?: boolean;
}

/**
 * Asks for missing profile details in place.
 *
 * Deliberately not a redirect. Sending someone to /profile mid-application
 * loses their work and their place, which is what the old setup wizard did at
 * a larger scale. This renders an inline card naming exactly which fields are
 * outstanding and links to the tab that collects them, so the applicant can
 * fill them in a second tab and come back.
 */
export function ProfileRequirementGate({
  requirement,
  children,
  advisory = false,
}: ProfileRequirementGateProps) {
  const { t } = useTranslation();
  const { gapsFor, isLoading } = useCurrentProfile();

  // Never block on the resolver: showing the flow and letting submission fail
  // is better than a spinner over content that is probably fine.
  if (isLoading) return <>{children}</>;

  const gaps = gapsFor(requirement);
  if (gaps.length === 0) return <>{children}</>;

  const sections = [...new Set(gaps.map((field) => PROFILE_FIELD_SECTION[field]))];

  return (
    <Stack gap="md">
      <Alert
        variant="light"
        color="blue"
        icon={<IconInfoCircle size={18} />}
        title={t('profileGate.title', {
          count: gaps.length,
          defaultValue: 'We need {{count}} more detail before you continue',
          defaultValue_other: 'We need {{count}} more details before you continue',
        })}
      >
        <Stack gap="xs">
          <Text size="sm">{t(requirement.reason)}</Text>
          <List size="sm" spacing={2}>
            {gaps.map((field) => (
              <List.Item key={field}>
                {t(`profileFields.${field}`, { defaultValue: field })}
              </List.Item>
            ))}
          </List>
          <Group gap="xs">
            {sections.map((section) => (
              <Button
                key={section}
                component={Link}
                to={`/profile#${section}`}
                size="xs"
                variant="light"
              >
                {t('profileGate.addDetails', 'Add these details')}
              </Button>
            ))}
            <Anchor component={Link} to="/profile" size="xs" c="dimmed">
              {t('profileGate.viewProfile', 'View full profile')}
            </Anchor>
          </Group>
        </Stack>
      </Alert>
      {advisory && children}
    </Stack>
  );
}
