/**
 * 岗位对比页：并排对比 2-3 个岗位的九大维度评分、基本信息与福利标签。
 * 数据通过 useCompareData 获取，页面只负责渲染与交互。
 */
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useCompareData } from '../../src/hooks';
import { colors } from '../../src/theme';

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

export default function CompareScreen() {
  const router = useRouter();
  const { jobs, dimensionScores, basicInfo, benefits, loading, error, refresh } =
    useCompareData();

  // 错误态
  if (error) {
    return (
      <SafeAreaView style={styles.safeArea} edges={['top']}>
        <Header onBack={() => router.back()} />
        <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) {
    return (
      <SafeAreaView style={styles.safeArea} edges={['top']}>
        <Header onBack={() => router.back()} />
        <View style={styles.stateWrap}>
          <Text style={styles.stateText}>加载中…</Text>
        </View>
      </SafeAreaView>
    );
  }

  // 空态
  if (jobs.length === 0) {
    return (
      <SafeAreaView style={styles.safeArea} edges={['top']}>
        <Header onBack={() => router.back()} />
        <View style={styles.stateWrap}>
          <View style={styles.emptyIconWrap}>
            <Ionicons name="git-compare-outline" size={32} color={colors.primaryBtn} />
          </View>
          <Text style={styles.emptyTitle}>暂无对比岗位</Text>
          <Text style={styles.emptyDesc}>在岗位详情页点击「加入对比」即可开始对比</Text>
          <Pressable style={styles.emptyBtn} onPress={() => router.push('/(tabs)/jobs')}>
            <Text style={styles.emptyBtnText}>去挑选岗位</Text>
          </Pressable>
        </View>
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={styles.safeArea} edges={['top']}>
      <Header onBack={() => router.back()} />
      <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
        <View style={styles.jobRow}>
          {jobs.map((job) => (
            <View key={job.id} style={styles.jobCard}>
              <View style={[styles.jobColorBar, { backgroundColor: job.color }]} />
              <Text style={styles.jobTitle} numberOfLines={1}>
                {job.title}
              </Text>
              <Text style={styles.jobCompany} numberOfLines={1}>
                {job.company}
              </Text>
              <Text style={styles.jobSalary}>{job.salary}</Text>
            </View>
          ))}
        </View>

        <View style={styles.sectionHeader}>
          <View style={styles.sectionBar} />
          <Text style={styles.sectionTitle}>九大维度评分</Text>
        </View>
        <View style={styles.card}>
          {dimensionScores.map((row, index) => {
            const isLast = index === dimensionScores.length - 1;
            return (
              <View key={row.dimension} style={[styles.scoreRow, isLast && styles.scoreRowLast]}>
                <Text style={styles.scoreDimension}>{row.dimension}</Text>
                <View style={styles.scoreBars}>
                  {row.scores.map((score, i) => (
                    <View key={jobs[i]?.id ?? i} style={styles.scoreBarItem}>
                      <Text style={styles.scoreValue}>{score}</Text>
                      <View style={styles.scoreTrack}>
                        <View
                          style={[
                            styles.scoreFill,
                            {
                              width: `${score}%`,
                              backgroundColor: jobs[i]?.color ?? colors.primaryBtn,
                            },
                          ]}
                        />
                      </View>
                    </View>
                  ))}
                </View>
              </View>
            );
          })}
        </View>

        <View style={styles.sectionHeader}>
          <View style={styles.sectionBar} />
          <Text style={styles.sectionTitle}>基本信息</Text>
        </View>
        <View style={styles.card}>
          {basicInfo.fields.map((field, index) => {
            const isLast = index === basicInfo.fields.length - 1;
            return (
              <View key={field} style={[styles.infoRow, isLast && styles.infoRowLast]}>
                <Text style={styles.infoField}>{field}</Text>
                <View style={styles.infoValues}>
                  {jobs.map((job, i) => (
                    <Text key={job.id} style={styles.infoValue}>
                      {basicInfo.values[index]?.[i] ?? '-'}
                    </Text>
                  ))}
                </View>
              </View>
            );
          })}
        </View>

        <View style={styles.sectionHeader}>
          <View style={styles.sectionBar} />
          <Text style={styles.sectionTitle}>福利标签</Text>
        </View>
        <View style={styles.card}>
          {jobs.map((job, index) => {
            const isLast = index === jobs.length - 1;
            const tags = benefits[index] ?? [];
            return (
              <View key={job.id} style={[styles.benefitRow, isLast && styles.benefitRowLast]}>
                <Text style={styles.benefitJob} numberOfLines={1}>
                  {job.title}
                </Text>
                <View style={styles.benefitTags}>
                  {tags.length === 0 ? (
                    <Text style={styles.benefitEmpty}>暂无</Text>
                  ) : (
                    tags.map((tag) => (
                      <View key={tag} style={styles.benefitTag}>
                        <Text style={styles.benefitTagText}>{tag}</Text>
                      </View>
                    ))
                  )}
                </View>
              </View>
            );
          })}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: { flex: 1, backgroundColor: colors.pageBg },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: colors.surface,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: colors.borderLight,
  },
  headerBtn: { width: 32, alignItems: 'center' },
  headerTitle: { fontSize: 17, fontWeight: '500', color: colors.textPrimary },
  content: { padding: 16, paddingBottom: 32 },
  stateWrap: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 12,
    paddingHorizontal: 32,
  },
  stateText: { fontSize: 14, color: colors.textSecondary },
  retryBtn: {
    paddingHorizontal: 20,
    paddingVertical: 8,
    borderRadius: 8,
    backgroundColor: colors.primaryLight,
  },
  retryText: { fontSize: 14, color: colors.primaryText },
  emptyIconWrap: {
    width: 64,
    height: 64,
    borderRadius: 32,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.primaryLight,
    marginBottom: 4,
  },
  emptyTitle: { fontSize: 15, fontWeight: '500', color: colors.textPrimary },
  emptyDesc: { fontSize: 13, color: colors.textSecondary, textAlign: 'center' },
  emptyBtn: {
    marginTop: 8,
    paddingHorizontal: 24,
    paddingVertical: 10,
    borderRadius: 10,
    backgroundColor: colors.primaryBtn,
  },
  emptyBtnText: { fontSize: 14, fontWeight: '500', color: colors.white },
  jobRow: { flexDirection: 'row', gap: 10 },
  jobCard: {
    flex: 1,
    padding: 12,
    borderRadius: 8,
    backgroundColor: colors.surface,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.borderLight,
    overflow: 'hidden',
  },
  jobColorBar: { height: 3, borderRadius: 2, marginBottom: 8 },
  jobTitle: { fontSize: 14, fontWeight: '500', color: colors.textPrimary, marginBottom: 2 },
  jobCompany: { fontSize: 12, color: colors.textSecondary, marginBottom: 6 },
  jobSalary: { fontSize: 13, fontWeight: '500', color: colors.actionText },
  sectionHeader: { flexDirection: 'row', alignItems: 'center', marginTop: 20, marginBottom: 12 },
  sectionBar: {
    width: 3,
    height: 14,
    borderRadius: 2,
    backgroundColor: colors.primaryBtn,
    marginRight: 8,
  },
  sectionTitle: { fontSize: 15, fontWeight: '500', color: colors.textPrimary },
  card: {
    borderRadius: 8,
    backgroundColor: colors.surface,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.borderLight,
    paddingHorizontal: 14,
  },
  scoreRow: {
    paddingVertical: 12,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: colors.borderLight,
  },
  scoreRowLast: { borderBottomWidth: 0 },
  scoreDimension: { fontSize: 13, color: colors.textPrimary, marginBottom: 8 },
  scoreBars: { gap: 6 },
  scoreBarItem: { flexDirection: 'row', alignItems: 'center', gap: 8 },
  scoreValue: { width: 24, fontSize: 12, color: colors.textSecondary },
  scoreTrack: {
    flex: 1,
    height: 6,
    borderRadius: 3,
    backgroundColor: colors.borderLight,
    overflow: 'hidden',
  },
  scoreFill: { height: '100%', borderRadius: 3 },
  infoRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: colors.borderLight,
  },
  infoRowLast: { borderBottomWidth: 0 },
  infoField: { width: 80, fontSize: 13, color: colors.textSecondary },
  infoValues: { flex: 1, flexDirection: 'row' },
  infoValue: { flex: 1, fontSize: 13, color: colors.textPrimary },
  benefitRow: {
    paddingVertical: 12,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: colors.borderLight,
  },
  benefitRowLast: { borderBottomWidth: 0 },
  benefitJob: { fontSize: 13, color: colors.textPrimary, marginBottom: 8 },
  benefitTags: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
  benefitTag: {
    paddingHorizontal: 8,
    paddingVertical: 3,
    borderRadius: 4,
    backgroundColor: colors.primaryLight,
  },
  benefitTagText: { fontSize: 11, color: colors.primaryText },
  benefitEmpty: { fontSize: 12, color: colors.textHint },
});