import { StyleSheet, Text, View } from 'react-native';
import { colors } from '../../../src/theme';
import { useOnboarding } from '../../../src/hooks';
import { ScreenShell } from '../ui/ScreenShell';
import { Tag, TagGroup } from '../ui/Tag';
import { PrimaryButton } from '../ui/PrimaryButton';

const MAX = 5;
const GROUPS = [
  { name: '运维工具', items: ['Kubernetes', 'Docker'] },
  { name: '前端框架', items: ['Vue.js', 'React', 'Angular', 'AngularJS', 'Bootstrap', 'JQuery', 'Vue'] },
  { name: '软件开发工具', items: ['SVN'] },
  {
    name: '技术类型',
    items: ['多进程', '网络协议', 'AJAX', '数据结构', '消息队列', '多线程', '分布式技术', '微服务架构'],
  },
  { name: '后端框架', items: ['Spring', 'Django', 'Express', 'Gin'] },
];

export function P14Skills() {
  const { data, setData, navigate, back } = useOnboarding();
  const skills = data.skills;
  const full = skills.length >= MAX;

  const toggle = (s: string) => {
    if (skills.includes(s)) {
      setData({ skills: skills.filter((x) => x !== s) });
    } else if (!full) {
      setData({ skills: [...skills, s] });
    }
  };

  return (
    <ScreenShell showBack onBack={back}>
      <View style={styles.header}>
        <Text style={styles.title}>技能选择</Text>
        <View style={[styles.counter, skills.length > 0 && styles.counterActive]}>
          <Text style={[styles.counterText, skills.length > 0 && styles.counterTextActive]}>
            {skills.length}/{MAX}
          </Text>
        </View>
      </View>

      {GROUPS.map((g) => (
        <View key={g.name} style={styles.group}>
          <Text style={styles.groupName}>{g.name}</Text>
          <TagGroup>
            {g.items.map((s) => (
              <Tag
                key={s}
                label={s}
                selected={skills.includes(s)}
                disabled={!skills.includes(s) && full}
                onPress={() => toggle(s)}
              />
            ))}
          </TagGroup>
        </View>
      ))}

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

const styles = StyleSheet.create({
  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 },
  title: { fontSize: 20, fontWeight: '800', color: colors.textPrimary },
  counter: { backgroundColor: colors.borderLight, paddingHorizontal: 12, paddingVertical: 4, borderRadius: 12 },
  counterActive: { backgroundColor: colors.primaryLight },
  counterText: { fontSize: 13, fontWeight: '700', color: colors.textDisabled },
  counterTextActive: { color: colors.primaryText },
  group: { marginBottom: 18 },
  groupName: { fontSize: 14, fontWeight: '700', color: colors.textPrimary, marginBottom: 10 },
  footer: { marginTop: 20 },
});