import { Picker } from '@react-native-picker/picker';
import { useState } from 'react';
import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';

type Props = {
  label: string;
  value: string;
  options: string[];
  onValueChange: (value: string) => void;
  disabled?: boolean;
  placeholder?: string;
};

export function MasterSelectField({
  label,
  value,
  options,
  onValueChange,
  disabled = false,
  placeholder = '選択してください',
}: Props) {
  const [open, setOpen] = useState(false);

  const displayText = value || placeholder;
  const isPlaceholder = !value;

  const handleDone = () => {
    setOpen(false);
  };

  return (
    <View style={styles.wrap}>
      <Text style={styles.label}>{label}</Text>
      <Pressable
        onPress={() => !disabled && setOpen(true)}
        disabled={disabled}
        style={({ pressed }) => [
          styles.field,
          disabled && styles.fieldDisabled,
          pressed && !disabled && styles.pressed,
        ]}
        accessibilityRole="button"
        accessibilityLabel={`${label}、${displayText}`}>
        <Text style={[styles.fieldText, isPlaceholder && styles.placeholder]} numberOfLines={1}>
          {displayText}
        </Text>
        <Text style={styles.chevron}>▼</Text>
      </Pressable>

      <Modal visible={open} transparent animationType="slide" onRequestClose={handleDone}>
        <Pressable style={styles.backdrop} onPress={handleDone} accessibilityLabel="閉じる" />
        <View style={styles.sheet}>
          <View style={styles.toolbar}>
            <Text style={styles.toolbarTitle}>{label}</Text>
            <Pressable onPress={handleDone} style={styles.doneBtn} accessibilityRole="button">
              <Text style={styles.doneText}>完了</Text>
            </Pressable>
          </View>
          <Picker
            selectedValue={value}
            onValueChange={(v) => onValueChange(String(v))}
            style={styles.picker}>
            <Picker.Item label={placeholder} value="" />
            {options.map((id) => (
              <Picker.Item key={id} label={id} value={id} />
            ))}
          </Picker>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: {
    marginTop: 6,
  },
  label: {
    fontSize: 13,
    fontWeight: '700',
    color: '#0b3a5b',
  },
  field: {
    marginTop: 6,
    minHeight: 48,
    paddingHorizontal: 14,
    paddingVertical: 12,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#e2e8f0',
    backgroundColor: '#f8fafc',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 8,
  },
  fieldDisabled: {
    opacity: 0.55,
  },
  fieldText: {
    flex: 1,
    fontSize: 16,
    color: '#1f2937',
  },
  placeholder: {
    color: '#94a3b8',
  },
  chevron: {
    fontSize: 11,
    color: '#64748b',
  },
  backdrop: {
    flex: 1,
    backgroundColor: 'rgba(15, 23, 42, 0.35)',
  },
  sheet: {
    backgroundColor: '#ffffff',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    paddingBottom: 8,
  },
  toolbar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#e2e8f0',
  },
  toolbarTitle: {
    fontSize: 15,
    fontWeight: '700',
    color: '#0b3a5b',
  },
  doneBtn: {
    paddingHorizontal: 8,
    paddingVertical: 4,
  },
  doneText: {
    fontSize: 16,
    fontWeight: '700',
    color: '#1f8ef1',
  },
  picker: {
    height: 216,
  },
  pressed: {
    opacity: 0.85,
  },
});