import React from "react";
import { View, Text, StyleSheet, ViewStyle, StyleProp } from "react-native";
import { useTheme } from "../contexts/ThemeContext";
import { fontSize, fontWeight } from "../styles/typography";

type BadgeVariant =
  | "neutral"
  | "success"
  | "warning"
  | "danger"
  | "info"
  | "primary";
type BadgeSize = "sm" | "md";

interface BadgeProps {
  label: string;
  variant?: BadgeVariant;
  size?: BadgeSize;
  style?: StyleProp<ViewStyle>;
}

/**
 * Badge - Pill-shaped status indicator
 *
 * Variants:
 * - neutral: Gray badge for general labels
 * - success: Green badge for positive status
 * - warning: Orange/yellow badge for warnings
 * - danger: Red badge for errors or critical status
 * - info: Blue badge for informational status
 * - primary: Primary color badge
 *
 * Sizes:
 * - sm: 5px vertical, 10px horizontal, 11px font
 * - md: 6px vertical, 12px horizontal, 13px font (default)
 */
export function Badge({
  label,
  variant = "neutral",
  size = "md",
  style,
}: BadgeProps) {
  const { colors } = useTheme();

  const sizeStyles = {
    sm: {
      paddingVertical: 5,
      paddingHorizontal: 10,
      fontSize: fontSize.xs,
    },
    md: {
      paddingVertical: 6,
      paddingHorizontal: 12,
      fontSize: fontSize.sm,
    },
  };

  const variantStyles: Record<
    BadgeVariant,
    { backgroundColor: string; color: string }
  > = {
    neutral: {
      backgroundColor: colors.surfaceElevated,
      color: colors.textSecondary,
    },
    success: {
      backgroundColor: `${colors.success}20`, // 20% opacity
      color: colors.success,
    },
    warning: {
      backgroundColor: `${colors.warning}20`,
      color: colors.warning,
    },
    danger: {
      backgroundColor: `${colors.danger}20`,
      color: colors.danger,
    },
    info: {
      backgroundColor: `${colors.info}20`,
      color: colors.info,
    },
    primary: {
      backgroundColor: `${colors.primary}20`,
      color: colors.primary,
    },
  };

  return (
    <View
      style={[
        styles.badge,
        {
          backgroundColor: variantStyles[variant].backgroundColor,
          paddingVertical: sizeStyles[size].paddingVertical,
          paddingHorizontal: sizeStyles[size].paddingHorizontal,
        },
        style,
      ]}
    >
      <Text
        style={[
          styles.label,
          {
            color: variantStyles[variant].color,
            fontSize: sizeStyles[size].fontSize,
            fontWeight: fontWeight.medium,
          },
        ]}
      >
        {label}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  badge: {
    borderRadius: 999, // Full pill shape
    alignSelf: "flex-start",
  },
  label: {
    textAlign: "center",
  },
});
