import { StyleSheet, Text, TextInput, View } from 'react-native';
import { Pressable } from 'react-native';
import { colors, radii, spacing } from '../../constants/theme';
import { DISCOUNT_TYPES, getDiscountLabel, isScPwdDiscount, type DiscountType } from '../../utils/posTotals';

type Props = {
  discountType: DiscountType;
  discountValue: string;
  scPwdIdNumber: string;
  onDiscountTypeChange: (type: DiscountType) => void;
  onDiscountValueChange: (value: string) => void;
  onScPwdIdNumberChange: (value: string) => void;
};

const standardTypes = DISCOUNT_TYPES.filter((opt) => ['none', 'amount', 'percent'].includes(opt.value));

export function PosDiscountPanel({
  discountType,
  discountValue,
  scPwdIdNumber,
  onDiscountTypeChange,
  onDiscountValueChange,
  onScPwdIdNumberChange,
}: Props) {
  const selectType = (type: DiscountType) => {
    if (discountType === type) {
      onDiscountTypeChange('none');
      if (type === 'senior_citizen' || type === 'pwd') {
        onScPwdIdNumberChange('');
      }
      return;
    }

    onDiscountTypeChange(type);
    if (type !== 'senior_citizen' && type !== 'pwd') {
      onScPwdIdNumberChange('');
    }
  };

  return (
    <View>
      <Text style={styles.label}>Discount</Text>
      <View style={styles.chipRow}>
        {standardTypes.map((opt) => (
          <Pressable
            key={opt.value}
            style={[styles.chip, discountType === opt.value && styles.chipActive]}
            onPress={() => selectType(opt.value)}
          >
            <Text style={[styles.chipText, discountType === opt.value && styles.chipTextActive]}>
              {opt.label}
            </Text>
          </Pressable>
        ))}
      </View>
      {(discountType === 'amount' || discountType === 'percent') && (
        <TextInput
          style={styles.input}
          keyboardType="decimal-pad"
          value={discountValue}
          onChangeText={onDiscountValueChange}
          placeholder={discountType === 'percent' ? 'Percent' : 'Amount (₱)'}
        />
      )}

      <View style={styles.scPwdBox}>
        <Text style={styles.scPwdTitle}>Senior Citizen / PWD</Text>
        <Text style={styles.hint}>20% discount · VAT exempt on qualified sales</Text>
        <View style={styles.chipRow}>
          <Pressable
            style={[styles.scPwdChip, discountType === 'senior_citizen' && styles.scPwdChipActive]}
            onPress={() => selectType('senior_citizen')}
          >
            <Text style={[styles.chipText, discountType === 'senior_citizen' && styles.chipTextActive]}>
              Senior Citizen
            </Text>
          </Pressable>
          <Pressable
            style={[styles.scPwdChip, discountType === 'pwd' && styles.scPwdChipActive]}
            onPress={() => selectType('pwd')}
          >
            <Text style={[styles.chipText, discountType === 'pwd' && styles.chipTextActive]}>
              PWD
            </Text>
          </Pressable>
        </View>
        {isScPwdDiscount(discountType) ? (
          <>
            <TextInput
              style={styles.input}
              value={scPwdIdNumber}
              onChangeText={onScPwdIdNumberChange}
              placeholder={discountType === 'senior_citizen' ? 'Senior Citizen ID number' : 'PWD ID number'}
            />
            {!scPwdIdNumber.trim() ? (
              <Text style={styles.required}>ID number is required before completing the sale.</Text>
            ) : null}
          </>
        ) : null}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  label: { fontSize: 14, fontWeight: '600', color: colors.text, marginTop: spacing.sm },
  chipRow: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing.xs, marginTop: spacing.xs },
  chip: {
    borderWidth: 1,
    borderColor: colors.border,
    borderRadius: radii.pill,
    paddingHorizontal: spacing.sm,
    paddingVertical: 6,
    backgroundColor: colors.surface,
  },
  chipActive: { backgroundColor: colors.primary, borderColor: colors.primary },
  scPwdBox: {
    marginTop: spacing.md,
    borderWidth: 1,
    borderColor: '#ffc107',
    backgroundColor: '#fff8e6',
    borderRadius: radii.md,
    padding: spacing.sm,
    gap: spacing.xs,
  },
  scPwdTitle: { fontSize: 14, fontWeight: '700', color: colors.text },
  scPwdChip: {
    borderWidth: 1,
    borderColor: '#ffc107',
    borderRadius: radii.pill,
    paddingHorizontal: spacing.sm,
    paddingVertical: 6,
    backgroundColor: colors.surface,
  },
  scPwdChipActive: { backgroundColor: '#ffc107', borderColor: '#ffc107' },
  chipText: { fontSize: 12, color: colors.text },
  chipTextActive: { color: '#fff', fontWeight: '600' },
  input: {
    borderWidth: 1,
    borderColor: colors.border,
    borderRadius: radii.md,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
    marginTop: spacing.sm,
    backgroundColor: colors.surface,
    color: colors.text,
  },
  hint: { fontSize: 12, color: colors.textMuted },
  required: { fontSize: 12, color: colors.danger, marginTop: 4 },
});