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

const PRESETS = [0, 1, 2, 3, 4];

export function P21Avatar() {
  const { setData, navigate, back, meta } = useOnboarding();
  const [mode, setMode] = useState<'none' | 'camera' | 'album' | 'preset'>('none');
  const [picked, setPicked] = useState(-1);

  const chooseCamera = () => {
    setMode('camera');
    setData({ avatar: 'avatarDesigner' });
  };
  const chooseAlbum = () => {
    setMode('album');
    setData({ avatar: 'avatarDesigner' });
  };
  const choosePreset = (i: number) => {
    setMode('preset');
    setPicked(i);
    setData({ avatar: 'defaultAvatar' });
  };

  const previewName = mode === 'camera' || mode === 'album' ? 'avatarDesigner' : 'defaultAvatar';

  return (
    <ScreenShell time={meta.time} battery={meta.battery} title="头像设置" showBack onBack={back}>
      <View style={styles.previewWrap}>
        <Avatar name={previewName} size={110} selected={mode !== 'none'} />
      </View>

      <View style={styles.actions}>
        <Pressable style={styles.actionBtn} onPress={chooseCamera}>
          <Ionicons name="camera" size={22} color={colors.primary} />
          <Text style={styles.actionText}>拍照上传</Text>
        </Pressable>
        <Pressable style={styles.actionBtn} onPress={chooseAlbum}>
          <Ionicons name="images" size={22} color={colors.primary} />
          <Text style={styles.actionText}>从相册选择</Text>
        </Pressable>
      </View>

      <Text style={styles.subTitle}>系统默认头像</Text>
      <View style={styles.presets}>
        {PRESETS.map((i) => (
          <Avatar
            key={i}
            size={56}
            selected={mode === 'preset' && picked === i}
            onPress={() => choosePreset(i)}
          />
        ))}
      </View>

      <View style={styles.footer}>
        <PrimaryButton label="下一步" active={mode !== 'none'} 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 },
  actionText: { fontSize: 12, color: colors.textSecondary },
  subTitle: { fontSize: 14, fontWeight: '700', color: colors.textPrimary, marginBottom: 14 },
  presets: { flexDirection: 'row', justifyContent: 'space-between', gap: 10 },
  footer: { marginTop: 32 },
});