import { Pressable, StyleSheet, Text, View } from 'react-native';
import { colors, radii, shadows, spacing } from '../../constants/theme';
import { Icon } from './Icon';

type Action = { icon: string; label: string; onPress: () => void; variant?: 'danger' };

type Props = {
  title: string;
  subtitle?: string;
  badge?: string;
  lowStock?: boolean;
  onPress?: () => void;
  actions?: Action[];
};

export function RecordCard({ title, subtitle, badge, lowStock = false, onPress, actions }: Props) {
  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [
        styles.card,
        lowStock && styles.cardLowStock,
        pressed && onPress && { opacity: 0.92 },
      ]}
      disabled={!onPress}
    >
      <View style={styles.body}>
        <View style={styles.titleRow}>
          <Text style={styles.title} numberOfLines={1}>
            {title}
          </Text>
          {badge ? <Text style={styles.badge}>{badge}</Text> : null}
        </View>
        {subtitle ? (
          <Text style={styles.subtitle} numberOfLines={2}>
            {subtitle}
          </Text>
        ) : null}
      </View>
      {actions?.length ? (
        <View style={styles.actions}>
          {actions.map((action) => (
            <Pressable
              key={action.label}
              onPress={action.onPress}
              style={[
                styles.actionBtn,
                action.variant === 'danger' && styles.actionBtnDanger,
              ]}
              hitSlop={6}
            >
              <Icon
                name={action.icon}
                size={16}
                color={action.variant === 'danger' ? colors.danger : colors.primary}
              />
              <Text
                style={[
                  styles.actionLabel,
                  action.variant === 'danger' && styles.actionLabelDanger,
                ]}
              >
                {action.label}
              </Text>
            </Pressable>
          ))}
        </View>
      ) : null}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.surface,
    borderRadius: radii.md,
    padding: spacing.md,
    marginBottom: spacing.sm,
    borderWidth: 1,
    borderColor: colors.border,
    gap: spacing.sm,
    ...shadows.card,
  },
  cardLowStock: {
    backgroundColor: '#fff8e6',
    borderColor: '#ffc107',
  },
  body: { flex: 1 },
  titleRow: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: spacing.sm,
    justifyContent: 'space-between',
  },
  title: { flex: 1, fontSize: 16, fontWeight: '600', color: colors.text },
  badge: {
    backgroundColor: colors.primaryLight,
    borderRadius: radii.pill,
    color: colors.primaryDark,
    fontSize: 11,
    fontWeight: '700',
    overflow: 'hidden',
    paddingHorizontal: spacing.sm,
    paddingVertical: 2,
    textTransform: 'capitalize',
  },
  subtitle: { fontSize: 13, color: colors.textMuted, marginTop: 4, lineHeight: 18 },
  actions: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing.sm },
  actionBtn: {
    alignItems: 'center',
    backgroundColor: colors.background,
    borderColor: colors.border,
    borderRadius: radii.sm,
    borderWidth: 1,
    flexDirection: 'row',
    gap: 4,
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.xs,
  },
  actionBtnDanger: {
    backgroundColor: '#fef2f2',
    borderColor: '#fecaca',
  },
  actionLabel: {
    color: colors.primary,
    fontSize: 12,
    fontWeight: '600',
  },
  actionLabelDanger: {
    color: colors.danger,
  },
});