import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import {
  ActivityIndicator,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useProfileData } from '../../src/hooks';
import { colors } from '../../src/theme';
import type { Badge, DimensionScore, JobPreference } from '../../src/types';

/* ===================== 展示层映射（全部使用主题令牌） ===================== */

/** 维度等级 → 展示配置（标签文案 + 配色） */
const DIMENSION_LEVEL: Record<
  DimensionScore['level'],
  { label: string; bg: string; text: string }
> = {
  excellent: { label: '优秀', bg: colors.successLight, text: colors.successText },
  good: { label: '良好', bg: colors.primaryLight, text: colors.primaryText },
};

/** 求职偏好字段 → 展示标签 */
const PREF_ITEMS: { key: keyof JobPreference; label: string }[] = [
  { key: 'position', label: '期望职位' },
  { key: 'city', label: '期望城市' },
  { key: 'salary', label: '期望薪资' },
  { key: 'workType', label: '工作类型' },
  { key: 'status', label: '求职状态' },
];

/* ===================== 子组件 ===================== */

/** 单个维度评分项 */
function DimensionItem({ dimension }: { dimension: DimensionScore }) {
  const theme = DIMENSION_LEVEL[dimension.level];
  return (
    <View style={styles.dimItem}>
      <Text style={styles.dimName}>{dimension.name}</Text>
      <View style={styles.dimScoreRow}>
        <Text style={styles.dimScore}>{dimension.score}</Text>
        <View style={[styles.levelTag, { backgroundColor: theme.bg }]}>
          <Text style={[styles.levelTagText, { color: theme.text }]}>{theme.label}</Text>
        </View>
      </View>
    </View>
  );
}

/** 单个勋章卡片 */
function BadgeCard({ badge }: { badge: Badge }) {
  return (
    <View style={styles.badgeCard}>
      <Text style={styles.badgeIcon}>{badge.icon}</Text>
      <Text style={styles.badgeTitle}>{badge.title}</Text>
      <Text style={styles.badgeDesc}>{badge.description}</Text>
    </View>
  );
}

/**
 * 我的页
 */
export default function ProfileScreen() {
  const { profile, overallScore, dimensions, preference, badges, loading, error, refresh } =
    useProfileData();
  const router = useRouter();

  // 错误态
  if (error) {
    return (
      <SafeAreaView style={styles.safeArea} edges={['top']}>
        <View style={styles.stateWrap}>
          <Text style={styles.stateText}>加载失败，请重试</Text>
          <Pressable style={styles.retryBtn} onPress={refresh}>
            <Text style={styles.retryText}>重试</Text>
          </Pressable>
        </View>
      </SafeAreaView>
    );
  }

  // 加载态
  if (loading || !profile || !overallScore || !preference) {
    return (
      <SafeAreaView style={styles.safeArea} edges={['top']}>
        <View style={styles.stateWrap}>
          <ActivityIndicator size="large" color={colors.primary} />
        </View>
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={styles.safeArea} edges={['top']}>
      <ScrollView
        style={styles.scroll}
        contentContainerStyle={styles.content}
        showsVerticalScrollIndicator={false}
      >
        {/* 1. 顶部导航 */}
        <View style={styles.header}>
          <Text style={styles.headerTitle}>我的</Text>
          <Pressable style={styles.headerAction} onPress={() => router.push('/settings')}>
            <Ionicons name="settings-outline" size={22} color={colors.textPrimary} />
          </Pressable>
        </View>

        {/* 2. 用户信息 */}
        <View style={styles.profileCard}>
          <View style={styles.profileTop}>
            <View style={styles.avatar}>
              <Text style={styles.avatarText}>{profile.avatar}</Text>
            </View>
            <Text style={styles.userName}>{profile.name}</Text>
          </View>
          <Text style={styles.bio}>{profile.bio}</Text>
        </View>

        {/* 3. 综合评分卡片 */}
        <View style={styles.scoreCard}>
          <Text style={styles.scoreValue}>
            {overallScore.score}
            <Text style={styles.scoreUnit}>分</Text>
          </Text>
          <View style={styles.scoreTag}>
            <Text style={styles.scoreTagText}>{overallScore.level}</Text>
          </View>
          <View style={styles.scoreRight}>
            <Text style={styles.scoreRank}>{overallScore.rank}</Text>
            <Pressable onPress={() => console.log('评分申诉')}>
              <Text style={styles.scoreAppeal}>评分申诉</Text>
            </Pressable>
          </View>
        </View>

        {/* 4. 八大维度评分 */}
        <Text style={[styles.sectionTitle, styles.sectionGap]}>八大维度评分</Text>
        <View style={styles.dimGrid}>
          {dimensions.map((dimension) => (
            <DimensionItem key={dimension.id} dimension={dimension} />
          ))}
        </View>

        {/* 5. 求职偏好 */}
        <Text style={[styles.sectionTitle, styles.sectionGap]}>求职偏好</Text>
        <View style={styles.prefCard}>
          {PREF_ITEMS.map(({ key, label }, index) => {
            const value = preference[key];
            const isLast = index === PREF_ITEMS.length - 1;
            return (
              <View key={key} style={[styles.prefRow, isLast && styles.prefRowLast]}>
                <Text style={styles.prefLabel}>{label}</Text>
                {key === 'status' ? (
                  <View style={styles.prefStatusTag}>
                    <Text style={styles.prefStatusText}>{value}</Text>
                  </View>
                ) : (
                  <Text style={styles.prefValue}>{value}</Text>
                )}
              </View>
            );
          })}
        </View>

        {/* 6. 全部勋章 */}
        <View style={styles.sectionHeader}>
          <Text style={styles.sectionTitle}>全部勋章</Text>
          <Pressable onPress={() => console.log('查看全部勋章')}>
            <Text style={styles.sectionMore}>&gt;</Text>
          </Pressable>
        </View>
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          style={styles.hScroll}
          contentContainerStyle={styles.hScrollContent}
        >
          {badges.map((badge) => (
            <BadgeCard key={badge.id} badge={badge} />
          ))}
        </ScrollView>
      </ScrollView>
    </SafeAreaView>
  );
}

// 跨平台阴影
const shadow = {
  shadowColor: colors.textPrimary,
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.06,
  shadowRadius: 8,
  elevation: 3,
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: colors.pageBg,
  },
  stateWrap: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  stateText: {
    marginTop: 12,
    fontSize: 14,
    color: colors.textSecondary,
  },
  retryBtn: {
    marginTop: 16,
    paddingHorizontal: 24,
    paddingVertical: 8,
    borderRadius: 18,
    backgroundColor: colors.primaryBtn,
  },
  retryText: {
    fontSize: 13,
    fontWeight: '600',
    color: colors.white,
  },
  scroll: {
    flex: 1,
  },
  content: {
    paddingHorizontal: 20,
    paddingBottom: 24,
  },
  /* ---- 顶部导航 ---- */
  header: {
    height: 48,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerTitle: {
    fontSize: 17,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  headerAction: {
    position: 'absolute',
    right: 0,
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  /* ---- 用户信息 ---- */
  profileCard: {
    marginTop: 8,
    backgroundColor: colors.white,
    borderRadius: 16,
    padding: 20,
    ...shadow,
  },
  profileTop: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: colors.primary,
    alignItems: 'center',
    justifyContent: 'center',
  },
  avatarText: {
    fontSize: 24,
    fontWeight: '700',
    color: colors.white,
  },
  userName: {
    marginLeft: 14,
    fontSize: 20,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  bio: {
    marginTop: 14,
    fontSize: 13,
    color: colors.textSecondary,
  },
  /* ---- 综合评分卡片 ---- */
  scoreCard: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 12,
    backgroundColor: colors.white,
    borderRadius: 16,
    padding: 20,
    ...shadow,
  },
  scoreValue: {
    fontSize: 40,
    fontWeight: '700',
    color: colors.primary,
  },
  scoreUnit: {
    fontSize: 16,
    fontWeight: '600',
    color: colors.primary,
  },
  scoreTag: {
    marginLeft: 12,
    backgroundColor: colors.successLight,
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 12,
  },
  scoreTagText: {
    fontSize: 13,
    fontWeight: '600',
    color: colors.successText,
  },
  scoreRight: {
    flex: 1,
    alignItems: 'flex-end',
    marginLeft: 12,
  },
  scoreRank: {
    fontSize: 13,
    color: colors.textSecondary,
  },
  scoreAppeal: {
    marginTop: 8,
    fontSize: 13,
    color: colors.primary,
  },
  /* ---- 分区标题 ---- */
  sectionTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  sectionGap: {
    marginTop: 24,
    marginBottom: 12,
  },
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 24,
    marginBottom: 12,
  },
  sectionMore: {
    fontSize: 18,
    fontWeight: '700',
    color: colors.textSecondary,
  },
  /* ---- 八大维度 ---- */
  dimGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  dimItem: {
    width: '48.5%',
    backgroundColor: colors.white,
    borderRadius: 16,
    padding: 16,
    marginBottom: 12,
    ...shadow,
  },
  dimName: {
    fontSize: 13,
    color: colors.textSecondary,
  },
  dimScoreRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 8,
  },
  dimScore: {
    fontSize: 24,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  levelTag: {
    marginLeft: 8,
    paddingHorizontal: 8,
    paddingVertical: 3,
    borderRadius: 10,
  },
  levelTagText: {
    fontSize: 12,
    fontWeight: '600',
  },
  /* ---- 求职偏好 ---- */
  prefCard: {
    backgroundColor: colors.white,
    borderRadius: 16,
    paddingHorizontal: 16,
    paddingVertical: 6,
    ...shadow,
  },
  prefRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: colors.borderLight,
  },
  prefRowLast: {
    borderBottomWidth: 0,
  },
  prefLabel: {
    fontSize: 14,
    color: colors.textSecondary,
  },
  prefValue: {
    fontSize: 14,
    fontWeight: '600',
    color: colors.textPrimary,
  },
  prefStatusTag: {
    backgroundColor: colors.successLight,
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 12,
  },
  prefStatusText: {
    fontSize: 13,
    fontWeight: '600',
    color: colors.successText,
  },
  /* ---- 全部勋章 ---- */
  hScroll: {
    flexGrow: 0,
    marginHorizontal: -20,
  },
  hScrollContent: {
    paddingHorizontal: 20,
    gap: 12,
  },
  badgeCard: {
    width: 140,
    backgroundColor: colors.white,
    borderRadius: 16,
    padding: 16,
    alignItems: 'center',
    ...shadow,
  },
  badgeIcon: {
    fontSize: 32,
  },
  badgeTitle: {
    marginTop: 10,
    fontSize: 14,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  badgeDesc: {
    marginTop: 4,
    fontSize: 12,
    color: colors.textSecondary,
    textAlign: 'center',
  },
});