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 SAMPLES = [
  {
    name: '资深 UI 设计师',
    items: [
      '1、负责移动端 Android / iOS 的 UI 设计',
      '2、制定 App 界面实现标准',
      '3、负责版本迭代与用户体验优化',
    ],
  },
  {
    name: '高级前端工程师',
    items: [
      '1、负责核心业务前端架构设计',
      '2、推动组件化与工程化落地',
      '3、主导性能优化与疑难问题攻关',
    ],
  },
  {
    name: '产品经理',
    items: [
      '1、负责求职模块需求规划与原型设计',
      '2、推进版本迭代与数据分析',
      '3、协调研发、设计、运营达成目标',
    ],
  },
];

export function P17Reference() {
  const { setData, back, navigate, meta } = useOnboarding();
  const [idx, setIdx] = useState(0);
  const sample = SAMPLES[idx];

  const useIt = () => {
    setData({ workContent: sample.items.join('\n') });
    navigate('P16');
  };

  return (
    <ScreenShell time={meta.time} battery={meta.battery} title="参考案例" showBack onBack={back}>
      <View style={styles.head}>
        <Avatar name="avatarDesigner" size={56} />
        <View style={styles.headText}>
          <Text style={styles.name}>{sample.name}</Text>
          <Pressable style={styles.swap} onPress={() => setIdx((i) => (i + 1) % SAMPLES.length)}>
            <Ionicons name="refresh" size={14} color={colors.primary} />
            <Text style={styles.swapText}>换一个</Text>
          </Pressable>
        </View>
      </View>

      <View style={styles.card}>
        {sample.items.map((it) => (
          <Text key={it} style={styles.item}>
            {it}
          </Text>
        ))}
      </View>

      <View style={styles.footer}>
        <PrimaryButton label="采用并填写" active onPress={useIt} />
      </View>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  head: { flexDirection: 'row', alignItems: 'center', gap: 14, marginBottom: 18 },
  headText: { gap: 8 },
  name: { fontSize: 16, fontWeight: '700', color: colors.textPrimary },
  swap: { flexDirection: 'row', alignItems: 'center', gap: 4 },
  swapText: { fontSize: 13, color: colors.primary, fontWeight: '600' },
  card: {
    backgroundColor: colors.white,
    borderRadius: 14,
    padding: 18,
    gap: 12,
    borderWidth: 1,
    borderColor: colors.border,
  },
  item: { fontSize: 14, color: colors.textSecondary, lineHeight: 22 },
  footer: { marginTop: 24 },
});