import { StyleSheet, Text, View } from 'react-native';

import { AppButton } from '../ui/AppButton';

import { colors, radii, spacing } from '../../constants/theme';



export type ServiceListFilters = {

  type: string;

  staff_id: string;

  low_stock: boolean;

};



type StaffOption = { value: string | number; label: string };



type Props = {

  filters: ServiceListFilters;

  staffOptions: StaffOption[];

  exporting: boolean;

  onChange: (patch: Partial<ServiceListFilters>) => void;

  onApply: (filters: ServiceListFilters) => void;

  onClear: () => void;

  onExport: () => void;

};



export function ServicesFilterBar({

  filters,

  staffOptions,

  exporting,

  onChange,

  onApply,

  onClear,

  onExport,

}: Props) {

  return (

    <View style={styles.wrap}>

      <Text style={styles.sectionTitle}>Filter list</Text>



      <View style={styles.legend}>

        <View style={styles.legendSwatch} />

        <Text style={styles.legendText}>

          Yellow rows are tracked products at or below their reorder level.

        </Text>

      </View>



      <Text style={styles.label}>Type</Text>

      <View style={styles.chips}>

        {[

          { value: '', label: 'All' },

          { value: 'service', label: 'Service' },

          { value: 'product', label: 'Product' },

        ].map((option) => {

          const active = filters.type === option.value;

          return (

            <AppButton

              key={option.value || 'all'}

              label={option.label}

              variant={active ? 'primary' : 'secondary'}

              onPress={() => onChange({ type: option.value })}

            />

          );

        })}

      </View>



      <Text style={styles.label}>Assigned to</Text>

      <View style={styles.chips}>

        <AppButton

          label="Anyone"

          variant={!filters.staff_id ? 'primary' : 'secondary'}

          onPress={() => onChange({ staff_id: '' })}

        />

        {staffOptions.slice(0, 8).map((option) => {

          const value = String(option.value);

          const active = filters.staff_id === value;

          return (

            <AppButton

              key={value}

              label={option.label.split(' - ')[0]}

              variant={active ? 'primary' : 'secondary'}

              onPress={() => onChange({ staff_id: value })}

            />

          );

        })}

      </View>



      <AppButton

        label={filters.low_stock ? 'Low stock only' : 'Include all stock levels'}

        variant={filters.low_stock ? 'primary' : 'secondary'}

        onPress={() => onChange({ low_stock: !filters.low_stock })}

      />



      <View style={styles.actions}>

        <AppButton

          label="Apply filters"

          onPress={() => onApply({

            type: filters.type,

            staff_id: filters.staff_id,

            low_stock: filters.low_stock,

          })}

        />

        <AppButton label="Clear" variant="secondary" onPress={onClear} />

        <AppButton label="Export" icon="download" variant="secondary" loading={exporting} onPress={onExport} />

      </View>

    </View>

  );

}



const styles = StyleSheet.create({

  wrap: {

    backgroundColor: '#f8fafc',

    borderColor: colors.border,

    borderRadius: radii.md,

    borderWidth: 1,

    gap: spacing.sm,

    marginBottom: spacing.md,

    padding: spacing.md,

  },

  sectionTitle: {

    color: colors.text,

    fontSize: 15,

    fontWeight: '700',

    marginBottom: spacing.xs,

  },

  legend: {

    alignItems: 'flex-start',

    backgroundColor: '#fffbeb',

    borderLeftColor: '#f59e0b',

    borderLeftWidth: 3,

    borderRadius: radii.sm,

    flexDirection: 'row',

    gap: spacing.sm,

    paddingHorizontal: spacing.sm,

    paddingVertical: spacing.sm,

  },

  legendSwatch: {

    backgroundColor: '#fef3c7',

    borderColor: '#fcd34d',

    borderRadius: 3,

    borderWidth: 1,

    height: 14,

    marginTop: 3,

    width: 14,

  },

  legendText: {

    color: '#78350f',

    flex: 1,

    fontSize: 12,

    lineHeight: 17,

  },

  label: {

    color: colors.textMuted,

    fontSize: 12,

    fontWeight: '600',

    marginTop: spacing.xs,

  },

  chips: {

    flexDirection: 'row',

    flexWrap: 'wrap',

    gap: spacing.xs,

  },

  actions: {

    flexDirection: 'row',

    flexWrap: 'wrap',

    gap: spacing.sm,

    marginTop: spacing.sm,

    paddingTop: spacing.sm,

    borderTopColor: colors.border,

    borderTopWidth: 1,

  },

});