/**
 * 高级筛选底部弹层（spec §6）：账户 / 日期范围 / 金额区间。
 * 受控组件：值由父级持有，「完成」回调应用，「重置」清空。
 */
import React from 'react';
import { StyleSheet, Text, TextInput, View } from 'react-native';
import { useTheme, createCommonStyles } from '../theme';
import { useT } from '../i18n';
import { BottomSheet } from './BottomSheet';
import { DatePickerField } from './DatePickerField';
import { Button } from './Button';

export interface AdvancedFilterValues {
  account: string;
  dateFrom: string;
  dateTo: string;
  amountMin: string;
  amountMax: string;
}

interface FilterSheetProps {
  visible: boolean;
  onClose: () => void;
  values: AdvancedFilterValues;
  onChange: (values: AdvancedFilterValues) => void;
  onReset: () => void;
}

export function FilterSheet({ visible, onClose, values, onChange, onReset }: FilterSheetProps) {
  const { theme } = useTheme();
  const commonStyles = createCommonStyles(theme);
  const t = useT();
  const set = (patch: Partial<AdvancedFilterValues>) => onChange({ ...values, ...patch });

  return (
    <BottomSheet visible={visible} onClose={onClose} title={t('filter.title')} scrollable>
      <Text style={[theme.typography.caption, styles.label, { color: theme.colors.fgSecondary }]}>
        {t('transactions.accountFilterPlaceholder')}
      </Text>
      <TextInput
        value={values.account}
        onChangeText={v => set({ account: v })}
        placeholder={t('transactions.accountFilterPlaceholder')}
        placeholderTextColor={theme.colors.fgSecondary}
        style={commonStyles.input}
      />

      <Text style={[theme.typography.caption, styles.label, { color: theme.colors.fgSecondary }]}>
        {t('transactions.dateFrom')} ~ {t('transactions.dateTo')}
      </Text>
      <View style={styles.row}>
        <View style={styles.flex1}><DatePickerField value={values.dateFrom} onChange={v => set({ dateFrom: v })} placeholder={t('transactions.dateFrom')} /></View>
        <View style={styles.flex1}><DatePickerField value={values.dateTo} onChange={v => set({ dateTo: v })} placeholder={t('transactions.dateTo')} /></View>
      </View>

      <Text style={[theme.typography.caption, styles.label, { color: theme.colors.fgSecondary }]}>
        {t('transactions.amountMin')} ~ {t('transactions.amountMax')}
      </Text>
      <View style={styles.row}>
        <TextInput
          value={values.amountMin}
          onChangeText={v => set({ amountMin: v })}
          placeholder={t('transactions.amountMin')}
          placeholderTextColor={theme.colors.fgSecondary}
          keyboardType="decimal-pad"
          style={[commonStyles.input, styles.flex1]}
        />
        <TextInput
          value={values.amountMax}
          onChangeText={v => set({ amountMax: v })}
          placeholder={t('transactions.amountMax')}
          placeholderTextColor={theme.colors.fgSecondary}
          keyboardType="decimal-pad"
          style={[commonStyles.input, styles.flex1]}
        />
      </View>

      <View style={[styles.row, styles.actions]}>
        <View style={styles.flex1}>
          <Button label={t('filter.reset')} variant="secondary" onPress={onReset} />
        </View>
        <View style={styles.flex1}>
          <Button label={t('filter.apply')} onPress={onClose} />
        </View>
      </View>
    </BottomSheet>
  );
}

const styles = StyleSheet.create({
  label: { marginTop: 10, marginBottom: 4 },
  row: { flexDirection: 'row', gap: 8 },
  flex1: { flex: 1 },
  actions: { marginTop: 16 },
});