import { FunctionComponent } from 'react';
import Chip, { ChipProps } from '@mui/material/Chip';
import AppIcon from '../common/AppIcon';

export type StatusKind = 'verified' | 'active' | 'pending' | 'rejected' | 'info' | 'neutral';

interface StatusStyle {
  bg: string;
  fg: string;
  icon: string;
  /** High-alarm states render a solid fill; everything else is a soft tint + strong text. */
  solid?: boolean;
}

/*
 * Colors come from the semantic --bal-* tokens (both schemes defined in tokens.css), so the chip
 * switches with the color scheme automatically. Never hard-code a hex here.
 *
 * Status weight hierarchy (v2 — soft-tint by default, solid fill reserved for the alarm tier):
 *   neutral (divider tint)  <  info (info-soft)  <  progress/pending (primary-soft — "in motion",
 *   deliberately calmer than the old amber "pending" so routine waiting doesn't read as a warning)  <
 *   success/verified+active (success-soft)  <  warning (warning-soft — reserved for a future "needs
 *   attention" kind; no current StatusKind uses it, the token exists for the next one that does)  <
 *   alarm/rejected (solid --bal-error — the one kind that stays a solid fill).
 */
const STATUS_STYLE: Record<StatusKind, StatusStyle> = {
  neutral: { bg: 'var(--bal-divider)', fg: 'var(--bal-text-secondary)', icon: 'info' },
  info: { bg: 'var(--bal-info-soft)', fg: 'var(--bal-info)', icon: 'info' },
  pending: { bg: 'var(--bal-primary-soft)', fg: 'var(--bal-primary)', icon: 'pending' },
  verified: { bg: 'var(--bal-success-soft)', fg: 'var(--bal-success)', icon: 'verified' },
  active: { bg: 'var(--bal-success-soft)', fg: 'var(--bal-success)', icon: 'verified' },
  rejected: { bg: 'var(--bal-error)', fg: 'var(--bal-error-contrast)', icon: 'rejected', solid: true },
};

export interface StatusChipProps extends Omit<ChipProps, 'color' | 'icon' | 'label'> {
  /** Semantic status that drives the color and icon. */
  status: StatusKind;
  /** Display text — already translated by the caller (labels are i18n keys off the code). */
  label: string;
}

/**
 * Brand-harmonized status chip (verified / pending / rejected / …) — the single delegation point every
 * status-shaped surface (`BankStatusPanel`, `VariantCard`, `PaymentStatusBadge`, `EarningsRow`,
 * `PayoutHistoryRow`, `RefundStatusCard`, `CancellationPolicyDisclosure`, …) renders through. Composed
 * from MUI Chip + the AppIcon registry; colors resolve from the --bal-* semantic tokens, soft-tint by
 * default per the weight hierarchy above.
 * @component StatusChip
 */
const StatusChip: FunctionComponent<StatusChipProps> = ({ status, label, size = 'small', sx, ...rest }) => {
  const style = STATUS_STYLE[status];
  return (
    <Chip
      data-status={status}
      size={size}
      label={label}
      icon={<AppIcon icon={style.icon} size={16} color={style.fg} />}
      sx={{ backgroundColor: style.bg, color: style.fg, fontWeight: 500, ...sx }}
      {...rest}
    />
  );
};

export default StatusChip;
