import React from 'react';
import { useTheme, Chip } from 'react-native-paper';
import type { RideStatus } from '../../types/ride';
import { RIDE_STATUS_LABELS } from '../../utils/constants';

export interface StatusChipProps {
  /** The ride status to visualise */
  status: RideStatus;
}

/**
 * Coloured chip that displays the human-readable label for a ride status.
 *
 * Colour mapping (M3 tokens):
 *  - active    → primary
 *  - ongoing   → rideActive (amber via tertiary)
 *  - matched   → primary
 *  - completed → outline variant
 *  - cancelled → error
 *  - draft     → outline variant
 */
export function StatusChip({ status }: StatusChipProps) {
  const theme = useTheme();

  const chipStyle: Record<RideStatus, { bgColor: string; textColor: string }> = {
    active: {
      bgColor: theme.colors.primaryContainer,
      textColor: theme.colors.onPrimaryContainer,
    },
    ongoing: {
      bgColor: theme.colors.tertiaryContainer,
      textColor: theme.colors.onTertiaryContainer,
    },
    matched: {
      bgColor: theme.colors.secondaryContainer,
      textColor: theme.colors.onSecondaryContainer,
    },
    completed: {
      bgColor: 'transparent',
      textColor: theme.colors.outline,
    },
    cancelled: {
      bgColor: theme.colors.errorContainer,
      textColor: theme.colors.onErrorContainer,
    },
    draft: {
      bgColor: 'transparent',
      textColor: theme.colors.outline,
    },
  };

  const variant: Record<RideStatus, 'flat' | 'outlined'> = {
    active: 'flat',
    ongoing: 'flat',
    matched: 'flat',
    completed: 'outlined',
    cancelled: 'flat',
    draft: 'outlined',
  };

  const colors = chipStyle[status];

  return (
    <Chip
      mode={variant[status]}
      style={[
        styles.chip,
        {
          backgroundColor: colors.bgColor,
        },
      ]}
      textStyle={{
        color: colors.textColor,
        fontSize: 12,
      }}
      compact
    >
      {RIDE_STATUS_LABELS[status]}
    </Chip>
  );
}

const styles = {
  chip: {
    height: 28,
    justifyContent: 'center',
  } as const,
};