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

const CATS = ['互联网AI', '设计', '金融', '客服运营', '电商'];
const POS: Record<string, string[]> = {
  互联网AI: ['全栈工程师', '鸿蒙开发工程师', '前端开发工程师', 'Java工程师', '测试工程师'],
  设计: ['UI设计师', '视觉设计师'],
  金融: ['风控专员', '财务分析'],
  客服运营: ['客服专员', '用户运营'],
  电商: ['电商运营', '内容运营'],
};
const BLOCKS = ['客服', '内容运营', '电商运营', '用户运营'];

export function P11CurrentPosition() {
  const { data, setData, navigate, back, meta } = useOnboarding();
  const [cat, setCat] = useState('互联网AI');

  const choose = (p: string) => {
    setData({ currentPosition: p });
    navigate('P12');
  };

  return (
    <ScreenShell time={meta.time} battery={meta.battery} title="当前工作职位" showBack onBack={back}>
      <SearchInput value="" onChangeText={() => {}} placeholder="搜索职位" />

      <View style={styles.body}>
        <View style={styles.cats}>
          {CATS.map((c) => (
            <Pressable key={c} style={[styles.catItem, c === cat && styles.catItemActive]} onPress={() => setCat(c)}>
              <Text style={[styles.catText, c === cat && styles.catTextActive]}>{c}</Text>
            </Pressable>
          ))}
        </View>

        <View style={styles.col}>
          <Text style={styles.colTitle}>猜你做过</Text>
          <TagGroup>
            {POS[cat].map((p) => (
              <Tag key={p} label={p} selected={data.currentPosition === p} onPress={() => choose(p)} />
            ))}
          </TagGroup>
        </View>
      </View>

      <Text style={styles.blockTitle}>或者从这些板块选</Text>
      <TagGroup>
        {BLOCKS.map((b) => (
          <Tag key={b} label={b} selected={data.currentPosition === b} onPress={() => choose(b)} />
        ))}
      </TagGroup>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  body: { flexDirection: 'row', gap: 14, marginTop: 8 },
  cats: { width: 92 },
  catItem: { paddingVertical: 12, borderRadius: 10 },
  catItemActive: { backgroundColor: colors.primaryLight },
  catText: { fontSize: 13, color: colors.textSecondary, textAlign: 'center' },
  catTextActive: { color: colors.primaryText, fontWeight: '700' },
  col: { flex: 1 },
  colTitle: { fontSize: 14, fontWeight: '700', color: colors.textPrimary, marginBottom: 12 },
  blockTitle: { fontSize: 14, fontWeight: '700', color: colors.textPrimary, marginVertical: 16 },
});