import { useMemo, useState } from 'react';
import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
import { colors, radii, spacing } from '../../constants/theme';
import type { PosCustomerOption } from '../../types/pos';

type Props = {
  saleCustomerType: 'walk_in' | 'customer';
  selectedCustomerId: string;
  customers: PosCustomerOption[];
  onSaleCustomerTypeChange: (type: 'walk_in' | 'customer') => void;
  onSelectedCustomerIdChange: (id: string) => void;
};

export function PosCustomerLookup({
  saleCustomerType,
  selectedCustomerId,
  customers,
  onSaleCustomerTypeChange,
  onSelectedCustomerIdChange,
}: Props) {
  const [search, setSearch] = useState('');

  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase();
    if (!q) return customers;
    return customers.filter((c) => c.label.toLowerCase().includes(q));
  }, [customers, search]);

  return (
    <View>
      <Text style={styles.label}>Sale type</Text>
      <View style={styles.chipRow}>
        <Pressable
          style={[styles.chip, saleCustomerType === 'walk_in' && styles.chipActive]}
          onPress={() => {
            onSaleCustomerTypeChange('walk_in');
            onSelectedCustomerIdChange('');
          }}
        >
          <Text style={[styles.chipText, saleCustomerType === 'walk_in' && styles.chipTextActive]}>
            Walk-in
          </Text>
        </Pressable>
        <Pressable
          style={[styles.chip, saleCustomerType === 'customer' && styles.chipActive]}
          onPress={() => onSaleCustomerTypeChange('customer')}
        >
          <Text style={[styles.chipText, saleCustomerType === 'customer' && styles.chipTextActive]}>
            Customer
          </Text>
        </Pressable>
      </View>
      {saleCustomerType === 'customer' ? (
        <>
          <TextInput
            style={styles.input}
            placeholder="Search customers..."
            value={search}
            onChangeText={setSearch}
          />
          <View style={styles.chipRow}>
            {filtered.slice(0, 24).map((customer) => {
              const value = String(customer.value);
              const active = selectedCustomerId === value;
              return (
                <Pressable
                  key={value}
                  style={[styles.chip, active && styles.chipActive]}
                  onPress={() => onSelectedCustomerIdChange(value)}
                >
                  <Text style={[styles.chipText, active && styles.chipTextActive]} numberOfLines={1}>
                    {customer.label.split(' - ')[0]}
                  </Text>
                </Pressable>
              );
            })}
          </View>
        </>
      ) : null}
    </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,
    maxWidth: '48%',
    backgroundColor: colors.surface,
  },
  chipActive: { backgroundColor: colors.primary, borderColor: colors.primary },
  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,
  },
});