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 = ['客服', '内容运营', '电商运营', '用户运营'];

/** 全部分类的职位去重展开，供搜索跨分类匹配 */
const ALL_POS: string[] = Array.from(new Set(Object.values(POS).flat()));

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

  const keyword = query.trim();
  const searching = keyword !== '';
  // 搜索态跨分类匹配（与 P6 同一处理）：只搜当前分类会让「搜不到」看起来像没有这个职位
  const visiblePos = searching ? ALL_POS.filter((p) => p.includes(keyword)) : POS[cat];
  const visibleBlocks = searching ? BLOCKS.filter((b) => b.includes(keyword)) : BLOCKS;

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

  return (
    <ScreenShell title="当前工作职位" showBack onBack={back}>
      <SearchInput value={query} onChangeText={setQuery} placeholder="搜索职位" onClear={() => setQuery('')} />

      <View style={styles.body}>
        <View style={styles.cats}>
          {CATS.map((c) => (
            <Pressable
              key={c}
              style={[styles.catItem, c === cat && styles.catItemActive]}
              onPress={() => {
                // 搜索态下切分类不改变右侧内容，清掉关键词保证动作有可见结果
                setQuery('');
                setCat(c);
              }}
            >
              <Text style={[styles.catText, c === cat && styles.catTextActive]}>{c}</Text>
            </Pressable>
          ))}
        </View>

        <View style={styles.col}>
          <Text style={styles.colTitle}>猜你做过</Text>
          {visiblePos.length > 0 ? (
            <TagGroup>
              {visiblePos.map((p) => (
                <Tag key={p} label={p} selected={data.currentPosition === p} onPress={() => choose(p)} />
              ))}
            </TagGroup>
          ) : (
            <Text style={styles.empty}>没有匹配「{keyword}」的职位</Text>
          )}
        </View>
      </View>

      <Text style={styles.blockTitle}>或者从这些板块选</Text>
      {visibleBlocks.length > 0 ? (
        <TagGroup>
          {visibleBlocks.map((b) => (
            <Tag key={b} label={b} selected={data.currentPosition === b} onPress={() => choose(b)} />
          ))}
        </TagGroup>
      ) : (
        <Text style={styles.empty}>没有匹配「{keyword}」的板块</Text>
      )}
    </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 },
  empty: { fontSize: 13, color: colors.textHint, lineHeight: 20 },
  blockTitle: { fontSize: 14, fontWeight: '700', color: colors.textPrimary, marginVertical: 16 },
});