import { useMemo, useState } from 'react';
import { FlatList, Modal, Pressable, View } from 'react-native';

import { Icon } from '../../atoms/Icon';
import { Text } from '../../atoms/Text';
import { cn } from '../../lib/cn';

import { FormField } from '../FormField';
import { SearchInput } from '../SearchInput';

import type { SelectOption, SelectProps } from './Select.types';
import { SelectOptionRow } from './SelectOptionRow';

/**
 * Select universal basado en `Modal` + `FlatList`.
 * Reemplaza `react-native-element-dropdown`. Cuando React Native Reusables
 * publique un `select` estable se puede sustituir manteniendo la API.
 */
export function Select<TValue extends string = string>({
  value,
  options,
  onSelect,
  placeholder = 'Selecciona una opción',
  label,
  helperText,
  error,
  disabled = false,
  searchable = false,
  searchPlaceholder = 'Buscar...',
  emptyText = 'No hay opciones',
  className,
  triggerClassName,
  testID,
}: SelectProps<TValue>) {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState('');

  const selected = useMemo<SelectOption<TValue> | undefined>(
    () => options.find((option) => option.value === value),
    [options, value],
  );

  const filtered = useMemo(() => {
    if (!searchable || !query) {
      return options;
    }
    const normalized = query.toLowerCase();
    return options.filter((option) => option.label.toLowerCase().includes(normalized));
  }, [options, query, searchable]);

  const handleOpen = () => {
    if (disabled) return;
    setOpen(true);
  };

  const handleSelect = (option: SelectOption<TValue>) => {
    if (option.disabled) return;
    onSelect(option.value);
    setOpen(false);
    setQuery('');
  };

  const hasError = Boolean(error);

  return (
    <FormField label={label} helperText={helperText} error={error} className={className}>
      <Pressable
        testID={testID}
        accessibilityRole="combobox"
        accessibilityLabel={label ?? placeholder}
        accessibilityState={{ disabled, expanded: open }}
        onPress={handleOpen}
        disabled={disabled}
        className={cn(
          'h-11 flex-row items-center justify-between rounded-md border border-input bg-background px-3',
          hasError && 'border-danger',
          disabled && 'opacity-60',
          triggerClassName,
        )}
      >
        <Text
          variant="bodyMedium"
          tone={selected ? 'default' : 'muted'}
          className="flex-1"
          numberOfLines={1}
        >
          {selected?.label ?? placeholder}
        </Text>
        <Icon name="chevronDown" size={18} className="text-muted-foreground" />
      </Pressable>
      <Modal
        visible={open}
        transparent
        animationType="fade"
        statusBarTranslucent
        onRequestClose={() => setOpen(false)}
      >
        <Pressable
          accessibilityRole="button"
          accessibilityLabel="Cerrar selector"
          onPress={() => setOpen(false)}
          className="flex-1 bg-overlay/40"
        >
          <View className="flex-1 items-center justify-center px-6">
            <Pressable className="w-full max-w-sm gap-3 rounded-2xl bg-card p-4 shadow-lg">
              {label ? (
                <Text variant="subtitleLarge" className="text-foreground">
                  {label}
                </Text>
              ) : null}
              {searchable ? (
                <SearchInput
                  value={query}
                  onChangeText={setQuery}
                  placeholder={searchPlaceholder}
                  onClear={() => setQuery('')}
                />
              ) : null}
              {filtered.length === 0 ? (
                <View className="py-6">
                  <Text variant="bodyMedium" tone="muted" className="text-center">
                    {emptyText}
                  </Text>
                </View>
              ) : (
                <FlatList
                  data={filtered}
                  keyExtractor={(item) => item.value}
                  ItemSeparatorComponent={() => <View className="h-px bg-border" />}
                  className="max-h-80"
                  renderItem={({ item }) => (
                    <SelectOptionRow
                      option={item}
                      isSelected={item.value === value}
                      onPress={handleSelect}
                    />
                  )}
                />
              )}
            </Pressable>
          </View>
        </Pressable>
      </Modal>
    </FormField>
  );
}