import { Ionicons } from '@expo/vector-icons';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { colors } from '../../../src/theme';
import { useImagePick, useOnboarding } from '../../../src/hooks';
import { ScreenShell } from '../ui/ScreenShell';
import { Avatar } from '../ui/Avatar';
import { PrimaryButton } from '../ui/PrimaryButton';
import { AVATAR_PRESETS } from '../assets';

export function P21Avatar() {
  const { data, setData, navigate, back } = useOnboarding();
  const { pick, picking, error } = useImagePick();

  // 头像只有一个真相 `data.avatar`：命中预设素材就是预设名，否则是拍照/相册的本地 URI
  const presetName = AVATAR_PRESETS.find((name) => name === data.avatar) ?? null;
  const avatarUri = data.avatar !== null && presetName === null ? data.avatar : null;

  const pickFrom = async (source: 'camera' | 'library') => {
    const result = await pick(source);
    // 取消或未授权时保持原头像不动，不写入空值
    if (result.status === 'picked') setData({ avatar: result.uri });
  };

  return (
    <ScreenShell title="头像设置" showBack onBack={back}>
      <View style={styles.previewWrap}>
        <Avatar
          name={presetName ?? 'defaultAvatar'}
          uri={avatarUri}
          size={110}
          selected={data.avatar !== null}
        />
      </View>

      <View style={styles.actions}>
        {/* picking 期间禁用：否则系统权限弹窗还没出现就能连点出第二个 */}
        <Pressable
          style={[styles.actionBtn, picking && styles.actionBtnDim]}
          disabled={picking}
          onPress={() => void pickFrom('camera')}
        >
          <Ionicons name="camera" size={22} color={colors.primary} />
          <Text style={styles.actionText}>拍照上传</Text>
        </Pressable>
        <Pressable
          style={[styles.actionBtn, picking && styles.actionBtnDim]}
          disabled={picking}
          onPress={() => void pickFrom('library')}
        >
          <Ionicons name="images" size={22} color={colors.primary} />
          <Text style={styles.actionText}>从相册选择</Text>
        </Pressable>
      </View>

      {error ? <Text style={styles.error}>{error}</Text> : null}

      <Text style={styles.subTitle}>系统默认头像</Text>
      <View style={styles.presets}>
        {AVATAR_PRESETS.map((name) => (
          <Avatar
            key={name}
            name={name}
            size={56}
            selected={data.avatar === name}
            onPress={() => setData({ avatar: name })}
          />
        ))}
      </View>

      <View style={styles.footer}>
        <PrimaryButton
          label="下一步"
          active={data.avatar !== null && !picking}
          onPress={() => navigate('P22')}
        />
      </View>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  previewWrap: { alignItems: 'center', marginVertical: 24 },
  actions: { flexDirection: 'row', justifyContent: 'center', gap: 28, marginBottom: 28 },
  actionBtn: { alignItems: 'center', gap: 6 },
  actionBtnDim: { opacity: 0.5 },
  actionText: { fontSize: 12, color: colors.textSecondary },
  error: { fontSize: 12, color: colors.dangerText, textAlign: 'center', marginBottom: 18 },
  subTitle: { fontSize: 14, fontWeight: '700', color: colors.textPrimary, marginBottom: 14 },
  presets: { flexDirection: 'row', justifyContent: 'space-between', gap: 10 },
  footer: { marginTop: 32 },
});