import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { colors, radii, spacing } from '../../theme';
import { useResponsive } from '../../hooks/useResponsive';

interface StatusBadgeProps {
  status: string;
  size?: 'sm' | 'md';
}

const STATUS_COLORS: Record<string, { bg: string; text: string; dot: string }> = {
  DRAFT: { bg: colors.gray[100], text: colors.gray[600], dot: colors.gray[400] },
  PENDING_APPROVAL: { bg: colors.warning[50], text: colors.warning[700], dot: colors.warning[500] },
  APPROVED: { bg: colors.info[50], text: colors.info[700], dot: colors.info[500] },
  ASSIGNED: { bg: colors.info[50], text: colors.info[700], dot: colors.info[500] },
  ACCEPTED: { bg: colors.primary[50], text: colors.primary[700], dot: colors.primary[500] },
  ON_THE_WAY: { bg: colors.warning[50], text: colors.warning[700], dot: colors.warning[500] },
  CHECKED_IN: { bg: colors.warning[50], text: colors.warning[700], dot: colors.warning[500] },
  IN_PROGRESS: { bg: colors.primary[50], text: colors.primary[700], dot: colors.primary[500] },
  ON_HOLD: { bg: colors.gray[100], text: colors.gray[600], dot: colors.gray[400] },
  COMPLETED: { bg: colors.success[50], text: colors.success[700], dot: colors.success[500] },
  ACTIVE: { bg: colors.success[50], text: colors.success[700], dot: colors.success[500] },
  REJECTED: { bg: colors.danger[50], text: colors.danger[700], dot: colors.danger[500] },
  CANCELLED: { bg: colors.danger[50], text: colors.danger[700], dot: colors.danger[500] },
  REOPENED: { bg: colors.warning[50], text: colors.warning[700], dot: colors.warning[500] },
  INACTIVE: { bg: colors.gray[100], text: colors.gray[600], dot: colors.gray[400] },
  BLOCKED: { bg: colors.danger[50], text: colors.danger[700], dot: colors.danger[500] },
  REQUESTED: { bg: colors.warning[50], text: colors.warning[700], dot: colors.warning[500] },
  APPROVED_material: { bg: colors.success[50], text: colors.success[700], dot: colors.success[500] },
  STOCK: { bg: colors.info[50], text: colors.info[700], dot: colors.info[500] },
  IN_USE: { bg: colors.warning[50], text: colors.warning[700], dot: colors.warning[500] },
  RETURNED: { bg: colors.success[50], text: colors.success[700], dot: colors.success[500] },
  ORDERED: { bg: colors.primary[50], text: colors.primary[700], dot: colors.primary[500] },
  RECEIVED: { bg: colors.success[50], text: colors.success[700], dot: colors.success[500] },
};

export function StatusBadge({ status, size = 'sm' }: StatusBadgeProps) {
  const { fontSize } = useResponsive();
  const safeStatus = status || 'UNKNOWN';
  const colors_map = STATUS_COLORS[safeStatus] || { bg: colors.gray[100], text: colors.gray[600], dot: colors.gray[400] };
  const isSmall = size === 'sm';

  return (
    <View style={[styles.badge, { backgroundColor: colors_map.bg }, isSmall && styles.badgeSm]}>
      <View style={[styles.dot, { backgroundColor: colors_map.dot }, isSmall && styles.dotSm]} />
      <Text style={[styles.text, { color: colors_map.text, fontSize: isSmall ? fontSize.caption : fontSize.bodySmall }]}>
        {safeStatus.replace(/_/g, ' ')}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  badge: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: radii.full,
    alignSelf: 'flex-start',
    gap: 5,
  },
  badgeSm: {
    paddingHorizontal: 8,
    paddingVertical: 3,
    gap: 4,
  },
  dot: {
    width: 6,
    height: 6,
    borderRadius: 3,
  },
  dotSm: {
    width: 5,
    height: 5,
  },
  text: {
    fontWeight: '600',
    textTransform: 'capitalize',
  },
});