import { useState } from 'react';
import { Modal, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { AppButton } from './AppButton';
import { AppIcon } from './app-icon';
import { colors, fonts, radius, spacing } from '../theme/proulr-theme';

function OptionModal({
  title,
  visible,
  options,
  selected,
  multi,
  onClose,
  onSelect,
}: {
  title: string;
  visible: boolean;
  options: string[];
  selected: string[];
  multi?: boolean;
  onClose: () => void;
  onSelect: (v: string) => void;
}) {
  return (
    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
      <Pressable style={styles.modalBackdrop} onPress={onClose}>
        <Pressable style={styles.modalSheet}>
          <Text style={styles.modalTitle}>{title}</Text>
          <ScrollView style={{ maxHeight: 360 }}>
            {options.map((opt) => {
              const isSel = selected.includes(opt);
              return (
                <Pressable key={opt} style={styles.optionRow} onPress={() => onSelect(opt)}>
                  <Text style={{ color: isSel ? colors.accentText : colors.white, fontSize: 16 }}>{opt}</Text>
                  {isSel ? <AppIcon name="check" size={16} color={colors.accent} /> : null}
                </Pressable>
              );
            })}
          </ScrollView>
          {multi ? (
            <View style={{ marginTop: spacing.md }}>
              <AppButton label="Pronto" onPress={onClose} />
            </View>
          ) : null}
        </Pressable>
      </Pressable>
    </Modal>
  );
}

export function SelectRow({
  label,
  value,
  options,
  onChange,
}: {
  label: string;
  value?: string | null;
  options: string[];
  onChange: (v: string) => void;
}) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Pressable style={styles.selectRow} onPress={() => setOpen(true)}>
        <Text style={styles.selectLabel}>{label}</Text>
        <Text style={styles.selectValue} numberOfLines={1}>
          {value || 'Selecionar'}
        </Text>
        <AppIcon name="chevron-right" size={18} color={colors.textSecondary} />
      </Pressable>
      <OptionModal
        title={label}
        visible={open}
        options={options}
        selected={value ? [value] : []}
        onClose={() => setOpen(false)}
        onSelect={(v) => {
          onChange(v);
          setOpen(false);
        }}
      />
    </>
  );
}

export function MultiSelectRow({
  label,
  values,
  options,
  onChange,
}: {
  label: string;
  values: string[];
  options: string[];
  onChange: (v: string[]) => void;
}) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Pressable style={styles.selectRow} onPress={() => setOpen(true)}>
        <Text style={styles.selectLabel}>{label}</Text>
        <Text style={styles.selectValue} numberOfLines={1}>
          {values.length ? values.join(', ') : 'Selecionar'}
        </Text>
        <AppIcon name="chevron-right" size={18} color={colors.textSecondary} />
      </Pressable>
      <OptionModal
        title={label}
        visible={open}
        options={options}
        selected={values}
        multi
        onClose={() => setOpen(false)}
        onSelect={(v) => {
          const set = new Set(values);
          if (set.has(v)) set.delete(v);
          else set.add(v);
          onChange(Array.from(set));
        }}
      />
    </>
  );
}

const styles = StyleSheet.create({
  selectRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.sm,
    paddingHorizontal: spacing.sm,
    paddingVertical: 15,
    borderRadius: radius.lg,
    backgroundColor: colors.surface2,
  },
  selectLabel: { flex: 1, color: colors.white, fontSize: 15, fontFamily: fonts.medium },
  selectValue: { color: colors.textSecondary, fontSize: 14, maxWidth: 160 },
  modalBackdrop: { flex: 1, backgroundColor: colors.overlay, justifyContent: 'flex-end' },
  modalSheet: {
    backgroundColor: colors.surface,
    borderTopLeftRadius: radius.xl,
    borderTopRightRadius: radius.xl,
    padding: spacing.xl,
    borderTopWidth: 1,
    borderColor: colors.border,
  },
  modalTitle: { color: colors.white, fontSize: 18, fontFamily: fonts.bold, marginBottom: spacing.md },
  optionRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 14,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: colors.border,
  },
});