import React, { useState } from 'react';
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native';
import { COLORS } from '../../constants';

interface Props {
  quantity: number;
  unit: string;
  minStockThreshold: number;
  onChangeQuantity: (qty: number) => void;
  compact?: boolean;
}

export function QuantityControl({
  quantity,
  unit,
  minStockThreshold,
  onChangeQuantity,
  compact,
}: Props) {
  const [editing, setEditing] = useState(false);
  const [inputValue, setInputValue] = useState(String(quantity));

  const decrease = () => onChangeQuantity(Math.max(0, quantity - 1));
  const increase = () => onChangeQuantity(quantity + 1);

  const commitEdit = () => {
    const parsed = parseFloat(inputValue.replace(',', '.'));
    if (!isNaN(parsed) && parsed >= 0) {
      onChangeQuantity(Math.round(parsed * 100) / 100);
    }
    setEditing(false);
  };

  const isLow = quantity <= minStockThreshold;
  const btnSize = compact ? 28 : 40;
  const btnRadius = compact ? 8 : 20;
  const fontSize = compact ? 14 : 18;

  return (
    <View style={styles.row}>
      <TouchableOpacity
        style={[styles.btn, { width: btnSize, height: btnSize, borderRadius: btnRadius }]}
        onPress={decrease}
        accessibilityLabel="Menge reduzieren"
      >
        <Text style={[styles.btnText, compact && styles.btnTextCompact]}>−</Text>
      </TouchableOpacity>

      {editing ? (
        <TextInput
          style={[styles.input, { fontSize }]}
          value={inputValue}
          keyboardType="numeric"
          onChangeText={setInputValue}
          onBlur={commitEdit}
          onSubmitEditing={commitEdit}
          autoFocus
        />
      ) : (
        <TouchableOpacity
          onPress={() => {
            setInputValue(String(quantity));
            setEditing(true);
          }}
        >
          <Text style={[styles.quantity, { fontSize }, isLow && styles.quantityLow]}>
            {quantity} {unit}
          </Text>
        </TouchableOpacity>
      )}

      <TouchableOpacity
        style={[styles.btn, { width: btnSize, height: btnSize, borderRadius: btnRadius }]}
        onPress={increase}
        accessibilityLabel="Menge erhöhen"
      >
        <Text style={[styles.btnText, compact && styles.btnTextCompact]}>+</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
  btn: {
    backgroundColor: COLORS.primary,
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnText: { color: COLORS.white, fontSize: 20, fontWeight: '500', lineHeight: 24 },
  btnTextCompact: { fontSize: 16, lineHeight: 20 },
  quantity: {
    fontWeight: '600',
    color: COLORS.text,
    minWidth: 60,
    textAlign: 'center',
  },
  quantityLow: { color: COLORS.danger },
  input: {
    fontWeight: '600',
    color: COLORS.text,
    borderBottomWidth: 2,
    borderBottomColor: COLORS.primary,
    minWidth: 60,
    textAlign: 'center',
    padding: 2,
  },
});
