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 { useGrowthData } from '../src/hooks';
import { colors, jobLevelTextColors , spacing } from '../src/theme';
import { JOB_LEVEL_LABEL } from '../src/constants';
import type { JobLevel } from '../src/types';

const ENTRIES = [
  {
    id: 'holland',
    title: '霍兰德职业兴趣测评',
    desc: '发现你的职业性格类型',
    icon: 'compass-outline',
    route: '/holland',
    color: colors.primary,
    bg: colors.primaryLight,
  },
  {
    id: 'ability',
    title: '四维能力测评',
    desc: '全方位评估你的职场竞争力',
    icon: 'stats-chart-outline',
    route: '/ability',
    color: colors.success,
    bg: colors.successLight,
  },
  {
    id: 'resume',
    title: 'AI简历优化',
    desc: '一键提升简历通过率',
    icon: 'document-text-outline',
    route: '/resume',
    color: colors.info,
    bg: colors.infoLight,
  },
  {
    id: 'interview',
    title: '模拟面试',
    desc: 'AI面试官真实场景演练',
    icon: 'videocam-outline',
    route: '/game',
    color: colors.action,
    bg: colors.actionLight,
  },
];

function Header({ onBack }: { onBack: () => void }) {
  return (
    <View style={styles.header}>
      <Pressable style={styles.headerBtn} onPress={onBack} hitSlop={8}>
        <Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
      </Pressable>
      <Text style={styles.headerTitle}>我的测评</Text>
      <View style={styles.headerBtn} />
    </View>
  );
}

function AbilityCard({
  score,
  level,
  onPress,
}: {
  score: number;
  level: JobLevel;
  onPress: () => void;
}) {
  return (
    <Pressable style={styles.abilityCard} onPress={onPress}>
      <View>
        <Text style={styles.abilityLabel}>四维能力综合评分</Text>
        <View style={styles.abilityScoreRow}>
          <Text style={styles.abilityScore}>{score}</Text>
          <Text style={styles.abilityUnit}>分</Text>
          <View style={[styles.levelBadge, { backgroundColor: colors.primaryLight }]}>
            <Text style={[styles.levelText, { color: jobLevelTextColors[level] }]}>
              {JOB_LEVEL_LABEL[level]}
            </Text>
          </View>
        </View>
        <Text style={styles.abilityDesc}>查看详细能力拆解与提升建议 &gt;</Text>
      </View>
      <Ionicons name="analytics-outline" size={48} color={colors.primary} />
    </Pressable>
  );
}

function EntryCard({
  entry,
  onPress,
}: {
  entry: (typeof ENTRIES)[number];
  onPress: () => void;
}) {
  return (
    <Pressable style={[styles.entryCard, { backgroundColor: entry.bg }]} onPress={onPress}>
      <View style={[styles.entryIcon, { backgroundColor: `${entry.color}20` }]}>
        <Ionicons name={entry.icon as keyof typeof Ionicons.glyphMap} size={26} color={entry.color} />
      </View>
      <View style={styles.entryBody}>
        <Text style={styles.entryTitle}>{entry.title}</Text>
        <Text style={styles.entryDesc}>{entry.desc}</Text>
      </View>
      <Ionicons name="chevron-forward" size={20} color={entry.color} />
    </Pressable>
  );
}

export default function AssessmentScreen() {
  const router = useRouter();
  const { ability, loading, error, refresh } = useGrowthData();

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      <Header onBack={() => router.back()} />
      {loading ? (
        <View style={styles.center}>
          <ActivityIndicator size="large" color={colors.primary} />
        </View>
      ) : error ? (
        <View style={styles.center}>
          <Text style={styles.tip}>加载失败</Text>
          <Pressable style={styles.retryBtn} onPress={refresh}>
            <Text style={styles.retryText}>重试</Text>
          </Pressable>
        </View>
      ) : (
        <ScrollView contentContainerStyle={styles.body} showsVerticalScrollIndicator={false}>
          {ability && (
            <AbilityCard
              score={ability.overallScore}
              level={ability.level}
              onPress={() => router.push('/ability')}
            />
          )}
          <Text style={styles.sectionTitle}>全部测评</Text>
          <View style={styles.entries}>
            {ENTRIES.map((entry) => (
              <EntryCard key={entry.id} entry={entry} onPress={() => router.push(entry.route)} />
            ))}
          </View>
        </ScrollView>
      )}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: colors.pageBg },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 12,
    paddingVertical: 12,
    backgroundColor: colors.white,
  },
  headerBtn: { width: 40, alignItems: 'center' },
  headerTitle: { fontSize: 17, fontWeight: '700', color: colors.textPrimary },
  body: { padding: spacing.card, paddingBottom: 32 },
  abilityCard: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: colors.white,
    borderRadius: spacing.card,
    padding: spacing.card,
    marginBottom: 8,
    borderWidth: 1,
    borderColor: colors.borderLight,
  },
  abilityLabel: { fontSize: 14, color: colors.textSecondary },
  abilityScoreRow: { flexDirection: 'row', alignItems: 'center', marginTop: 8 },
  abilityScore: { fontSize: 42, fontWeight: '800', color: colors.textPrimary },
  abilityUnit: { fontSize: 14, color: colors.textSecondary, marginTop: 16, marginRight: 8 },
  levelBadge: { borderRadius: 10, paddingHorizontal: 10, paddingVertical: 4 },
  levelText: { fontSize: 12, fontWeight: '700' },
  abilityDesc: { fontSize: 13, color: colors.primary, marginTop: 8 },
  sectionTitle: { fontSize: 18, fontWeight: '700', color: colors.textPrimary, marginBottom: 12 },
  entries: { gap: 8 },
  entryCard: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: spacing.card,
    padding: spacing.card,
  },
  entryIcon: {
    width: 44,
    height: 44,
    borderRadius: 22,
    alignItems: 'center',
    justifyContent: 'center',
  },
  entryBody: { flex: 1, marginLeft: 14 },
  entryTitle: { fontSize: 15, fontWeight: '700', color: colors.textPrimary },
  entryDesc: { fontSize: 13, color: colors.textSecondary, marginTop: 2 },
  center: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 40, gap: 12 },
  tip: { fontSize: 14, color: colors.textSecondary },
  retryBtn: { paddingHorizontal: 18, paddingVertical: spacing.card, borderRadius: 16, backgroundColor: colors.primaryLight },
  retryText: { fontSize: 13, fontWeight: '600', color: colors.primaryText },
});