'use client';
import { FunctionComponent } from 'react';
import { useTranslations } from 'next-intl';
import { Stack, Typography } from '@mui/material';
import { AppIcon, SurfaceCard, TrustBadge } from '@/components';
import { ownBadgeState, type VerificationStatus } from '@/services/verification/types';
import { groupLabelKey, groupStatus, groupedDisplaySteps } from './verificationSteps';

export interface TrustBadgePreviewPanelProps {
  status: VerificationStatus | undefined;
}

/**
 * The hub's payoff moment (ui-phase-8 §3.2) — a live preview of the badge families actually see,
 * with a per-group fill indicator so progress on this screen visibly maps to the trust signal it
 * earns. Never invents a "verified" state: the chip is the same `ownBadgeState` derivation the
 * profile page and dashboard use, so it only ever shows what the approved aggregate supports.
 * @component TrustBadgePreviewPanel
 */
const TrustBadgePreviewPanel: FunctionComponent<TrustBadgePreviewPanelProps> = ({ status }) => {
  const t = useTranslations('verification');
  const groups = groupedDisplaySteps(status);

  return (
    <SurfaceCard padding="md" data-trust-badge-preview>
      <Stack sx={{ gap: 1.5 }}>
        <Stack sx={{ gap: 0.25 }}>
          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
            {t('payoff_title')}
          </Typography>
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
            {t('payoff_subtitle')}
          </Typography>
        </Stack>

        <TrustBadge state={ownBadgeState(status)} sx={{ alignSelf: 'flex-start' }} />

        <Stack direction="row" sx={{ gap: 2, flexWrap: 'wrap' }}>
          {groups.map(({ group, steps }) => {
            const passed = groupStatus(steps) === 'passed';
            return (
              <Stack key={group} direction="row" sx={{ gap: 0.5, alignItems: 'center' }} data-payoff-group={group}>
                <AppIcon
                  icon={passed ? 'verified' : 'pending'}
                  size={16}
                  color={passed ? 'var(--bal-success)' : 'var(--bal-text-secondary)'}
                />
                <Typography variant="caption" sx={{ color: passed ? 'text.primary' : 'text.secondary' }}>
                  {t(groupLabelKey(group))}
                </Typography>
              </Stack>
            );
          })}
        </Stack>
      </Stack>
    </SurfaceCard>
  );
};

export default TrustBadgePreviewPanel;
