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

const ALL = ['北京', '上海', '广州', '深圳', '杭州', '成都', '南京', '武汉', '西安', '苏州', '天津', '重庆', '青岛', '长沙', '郑州', '东莞'];
const HOT = ['北京', '上海', '广州', '深圳', '杭州', '成都'];

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

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

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

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

      <Pressable style={styles.locate} onPress={() => pick('上海')}>
        <Ionicons name="locate" size={18} color={colors.primary} />
        <Text style={styles.locateText}>自动定位：上海</Text>
      </Pressable>

      <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({
  locate: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, marginTop: 12 },
  locateText: { fontSize: 14, fontWeight: '600', color: colors.primaryText },
  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' },
});