'use client';
import { FunctionComponent } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import Skeleton from '@mui/material/Skeleton';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import AppIcon from '../common/AppIcon';
import { formatShamsiDate } from '@/utils';
import type { TrustBadge as TrustBadgeDto } from '@/services/verification/types';

export interface VerificationPanelProps {
  /** The public trust-badge payload (`nurses/{id}/trust_badge`); `undefined` while loading/absent. */
  badge: TrustBadgeDto | undefined;
  isLoading?: boolean;
  isError?: boolean;
}

/**
 * "What Balinyaar verified" — a check-listed explainer fed by the public trust-badge read: one row
 * per `credentialTypes[]` entry (stable codes mapped to i18n labels off the `verification` namespace's
 * step vocabulary — never a raw wire value) plus the approval date. Renders only what is served: no
 * invented steps, no fake dates. Shared by the C3 profile and the `TrustBadge` tap-to-explain
 * sheet/dialog; phase 8's public-profile preview reuses it unchanged.
 * @component VerificationPanel
 */
const VerificationPanel: FunctionComponent<VerificationPanelProps> = ({
  badge,
  isLoading = false,
  isError = false,
}) => {
  const t = useTranslations('verification');
  const locale = useLocale();

  if (isLoading) {
    return (
      <Stack data-verification-panel="loading" sx={{ gap: 1.5 }}>
        <Skeleton variant="text" width="70%" height={24} />
        <Skeleton variant="text" width="90%" />
        <Skeleton variant="text" width="80%" />
      </Stack>
    );
  }

  if (isError || !badge) {
    return (
      <Typography variant="body2" sx={{ color: 'text.secondary' }} data-verification-panel="error">
        {t('explainer_error')}
      </Typography>
    );
  }

  if (!badge.isVerified) {
    return (
      <Typography variant="body2" sx={{ color: 'text.secondary' }} data-verification-panel="unverified">
        {t('explainer_not_verified')}
      </Typography>
    );
  }

  return (
    <Stack data-verification-panel="verified" sx={{ gap: 1.5 }}>
      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
        {t('explainer_intro')}
      </Typography>
      <Stack sx={{ gap: 1 }}>
        {badge.credentialTypes.map((code) => (
          <Stack key={code} direction="row" data-verification-row={code} sx={{ gap: 1, alignItems: 'center' }}>
            <AppIcon icon="verified" size={18} color="var(--bal-trust)" />
            <Typography variant="body2" sx={{ fontWeight: 500 }}>
              {t.has(`step_${code}`) ? t(`step_${code}`) : code}
            </Typography>
          </Stack>
        ))}
      </Stack>
      {badge.approvedAt ? (
        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
          {t('explainer_approved_at', { date: formatShamsiDate(badge.approvedAt, locale) })}
        </Typography>
      ) : null}
    </Stack>
  );
};

export default VerificationPanel;
