import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { COLORS, RADIUS, FONT_SIZE } from '../../theme';

type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'purple' | 'plan';

interface BadgeProps {
  label: string;
  variant?: BadgeVariant;
}

const BG: Record<BadgeVariant, string> = {
  default: '#f3f4f6',
  success: '#d1fae5',
  warning: '#fef3c7',
  error: '#fee2e2',
  info: '#dbeafe',
  purple: '#ede9fe',
  plan: COLORS.primaryUltraLight,
};

const FG: Record<BadgeVariant, string> = {
  default: '#374151',
  success: '#065f46',
  warning: '#92400e',
  error: '#991b1b',
  info: '#1e40af',
  purple: '#5b21b6',
  plan: COLORS.primaryDark,
};

export function Badge({ label, variant = 'default' }: BadgeProps) {
  return (
    <View style={[styles.badge, { backgroundColor: BG[variant] }]}>
      <Text style={[styles.label, { color: FG[variant] }]}>{label}</Text>
    </View>
  );
}

export function PlanBadge({ plan }: { plan: string }) {
  const variant =
    plan === 'free' ? 'default'
    : plan === 'starter' ? 'info'
    : plan === 'business' ? 'success'
    : plan === 'agency' ? 'purple'
    : 'plan';

  return <Badge label={plan.charAt(0).toUpperCase() + plan.slice(1)} variant={variant as BadgeVariant} />;
}

export function StatusBadge({ status }: { status: string }) {
  const variant =
    status === 'completed' || status === 'active' || status === 'published' ? 'success'
    : status === 'processing' ? 'info'
    : status === 'pending' ? 'warning'
    : status === 'failed' ? 'error'
    : 'default';

  return <Badge label={status} variant={variant as BadgeVariant} />;
}

const styles = StyleSheet.create({
  badge: {
    borderRadius: RADIUS.full,
    paddingVertical: 2,
    paddingHorizontal: 8,
    alignSelf: 'flex-start',
  },
  label: {
    fontSize: FONT_SIZE.xs,
    fontWeight: '600',
    textTransform: 'capitalize',
  },
});
