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

export function P16WorkContent() {
  const { data, setData, navigate, back, meta } = useOnboarding();
  const finish = useRegisterFinish();
  const targetRole: AppRole = data.identity === 'recruiter' ? 'enterprise' : 'candidate';
  const text = data.workContent;
  const canNext = text.trim().length >= 5;

  return (
    <ScreenShell time={meta.time} battery={meta.battery} showBack onBack={back}>
      <View style={styles.header}>
        <Text style={styles.title}>工作内容介绍</Text>
        <Pressable onPress={() => finish(targetRole)}>
          <Text style={styles.save}>保存</Text>
        </Pressable>
      </View>

      <Pressable style={styles.ref} onPress={() => navigate('P17')}>
        <Ionicons name="eye-outline" size={18} color={colors.primary} />
        <Text style={styles.refText}>看看别人怎么写</Text>
      </Pressable>

      <TextInput
        style={styles.input}
        value={text}
        onChangeText={(t) => setData({ workContent: t })}
        placeholder="至少输入 5 个字，描述你的主要工作内容"
        placeholderTextColor={colors.textHint}
        multiline
        textAlignVertical="top"
      />

      <View style={styles.footer}>
        <PrimaryButton label="下一步" active={canNext} onPress={() => navigate('P18')} />
      </View>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 },
  title: { fontSize: 20, fontWeight: '800', color: colors.textPrimary },
  save: { fontSize: 15, fontWeight: '700', color: colors.primary },
  ref: { flexDirection: 'row', alignItems: 'center', gap: 6, alignSelf: 'flex-start', marginBottom: 14 },
  refText: { fontSize: 14, color: colors.primary, fontWeight: '600' },
  input: {
    minHeight: 200,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: colors.border,
    backgroundColor: colors.white,
    padding: 14,
    fontSize: 15,
    color: colors.textPrimary,
  },
  footer: { marginTop: 24 },
});