import { FunctionComponent } from 'react';
import { useTranslations } from 'next-intl';
import Chip, { ChipProps } from '@mui/material/Chip';
import AppIcon from '../common/AppIcon';
import type { BadgeState } from '@/services/verification/types';

interface BadgeStyle {
  bg: string;
  fg: string;
  icon: string;
  labelKey: string;
}

// Colors resolve from the semantic --bal-* tokens so the badge switches with the color scheme.
// verified = green trust mark; unverified = neutral (never alarming); expired = amber "needs renewal"
// (distinct from unverified — a required credential lapsed). Never a hard-coded hex.
const BADGE_STYLE: Record<BadgeState, BadgeStyle> = {
  verified: { bg: 'var(--bal-success)', fg: 'var(--bal-success-contrast)', icon: 'verified', labelKey: 'badge_verified' },
  unverified: { bg: 'var(--bal-divider)', fg: 'var(--bal-text-secondary)', icon: 'info', labelKey: 'badge_unverified' },
  expired: { bg: 'var(--bal-warning)', fg: 'var(--bal-warning-contrast)', icon: 'warning', labelKey: 'badge_expired' },
};

export interface TrustBadgeProps extends Omit<ChipProps, 'color' | 'icon' | 'label'> {
  /** The trust state — verified / unverified / expired. */
  state: BadgeState;
}

/**
 * The public trust signal (the "✓ تاییدشده" mark) rendered on a nurse's profile and — reused unchanged
 * in f6 — on search results and the public nurse profile. Fed by `GetVerifiedBadgeQuery`; the state is
 * derived by the caller (`ownBadgeState`/`publicBadgeState`). Honest by construction: `verified` only
 * renders when the aggregate is approved; `expired` is visually distinct from never-verified.
 * @component TrustBadge
 */
const TrustBadge: FunctionComponent<TrustBadgeProps> = ({ state, size = 'small', sx, ...rest }) => {
  const t = useTranslations('verification');
  const style = BADGE_STYLE[state];
  return (
    <Chip
      data-badge-state={state}
      size={size}
      label={t(style.labelKey)}
      icon={<AppIcon icon={style.icon} size={16} color={style.fg} />}
      sx={{ backgroundColor: style.bg, color: style.fg, fontWeight: 700, ...sx }}
      {...rest}
    />
  );
};

export default TrustBadge;
