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 { EXPECTED_CITY_OPTIONS, HOT_CITY_OPTIONS } from '../../../src/constants';
import { ScreenShell } from '../ui/ScreenShell';
import { SearchInput } from '../ui/SearchInput';
import { Tag, TagGroup } from '../ui/Tag';

// 城市表放常量：「设置求职意向」页用的是同一份，两处各写一份会让采集到的城市在那页选不中
const ALL = EXPECTED_CITY_OPTIONS;
const HOT = HOT_CITY_OPTIONS;

export function P5City() {
  const { data, setData, back } = useOnboarding();
  const [query, setQuery] = useState('');

  const pick = (city: string) => {
    setData({ city });
    back();
  };

  const list = query ? ALL.filter((c) => c.includes(query)) : ALL;

  return (
    <ScreenShell title="选择城市" showBack onBack={back}>
      <SearchInput value={query} onChangeText={setQuery} placeholder="搜索城市" onClear={() => setQuery('')} />

      {/* 原「自动定位：上海」按钮已移除：它不做定位，只是把「上海」写死成选中值。
          不做定位就不宣称定位（已决定不引入 expo-location） */}
      <Text style={styles.section}>热门城市</Text>
      <TagGroup>
        {HOT.map((c) => (
          <Tag key={c} label={c} selected={data.city === c} onPress={() => pick(c)} />
        ))}
      </TagGroup>

      <Text style={styles.section}>全部城市</Text>
      <View style={styles.list}>
        {list.map((c) => (
          <Pressable key={c} style={styles.cityItem} onPress={() => pick(c)}>
            <Text style={[styles.cityName, data.city === c && styles.cityNameActive]}>{c}</Text>
            {data.city === c ? <Ionicons name="checkmark" size={16} color={colors.primary} /> : null}
          </Pressable>
        ))}
      </View>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  section: { fontSize: 14, fontWeight: '700', color: colors.textPrimary, marginTop: 22, marginBottom: 12 },
  list: { gap: 2 },
  cityItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 13,
    borderBottomWidth: 1,
    borderColor: colors.borderLight,
  },
  cityName: { fontSize: 15, color: colors.textPrimary },
  cityNameActive: { color: colors.primary, fontWeight: '700' },
});