/**
 * 评分权重设置页：调整九大评价维度权重，支持套用预设模板。
 * 数据通过 useWeightSettings 获取，页面只负责交互与渲染。
 */
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 { useWeightSettings } from '../../src/hooks';
import { colors } from '../../src/theme';

const MIN_WEIGHT = 0;
const MAX_WEIGHT = 100;
const STEP = 1;

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 WeightSettingsScreen() {
  const router = useRouter();
  const {
    settings,
    dimensions,
    totalWeight,
    loading,
    error,
    saving,
    refresh,
    updateWeight,
    applyTemplate,
    save,
  } = useWeightSettings();

  const isValid = totalWeight === 100;

  // 错误态
  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>
    );
  }

  return (
    <SafeAreaView style={styles.safeArea} edges={['top']}>
      <Header onBack={() => router.back()} />
      <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
        <View style={[styles.summaryCard, !isValid && styles.summaryCardWarn]}>
          <View>
            <Text style={styles.summaryLabel}>权重总和</Text>
            <Text style={[styles.summaryValue, !isValid && styles.summaryValueWarn]}>
              {totalWeight}%
            </Text>
          </View>
          <Text style={styles.summaryHint}>
            {isValid ? '配置合理，可直接保存' : '各维度权重之和需等于 100%'}
          </Text>
        </View>

        <View style={styles.sectionHeader}>
          <View style={styles.sectionBar} />
          <Text style={styles.sectionTitle}>预设模板</Text>
        </View>
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={styles.templateRow}
        >
          {(settings?.templates ?? []).map((template) => (
            <Pressable
              key={template.id}
              style={styles.templateCard}
              onPress={() => applyTemplate(template.id)}
            >
              <Text style={styles.templateName}>{template.name}</Text>
              <Text style={styles.templateDesc}>{template.description}</Text>
            </Pressable>
          ))}
        </ScrollView>

        <View style={styles.sectionHeader}>
          <View style={styles.sectionBar} />
          <Text style={styles.sectionTitle}>评价维度</Text>
        </View>
        <View style={styles.dimensionCard}>
          {dimensions.map((item, index) => {
            const isLast = index === dimensions.length - 1;
            return (
              <View key={item.id} style={[styles.dimRow, isLast && styles.dimRowLast]}>
                <View style={styles.dimHead}>
                  <Text style={styles.dimName}>{item.name}</Text>
                  {item.isReversed ? (
                    <View style={styles.reversedTag}>
                      <Text style={styles.reversedText}>反向指标</Text>
                    </View>
                  ) : null}
                  <Text style={styles.dimValue}>{item.weight}%</Text>
                </View>
                <View style={styles.dimTrack}>
                  <View
                    style={[
                      styles.dimFill,
                      { width: `${item.weight}%`, backgroundColor: colors.primaryBtn },
                    ]}
                  />
                </View>
                <View style={styles.dimActions}>
                  <Pressable
                    style={styles.stepBtn}
                    onPress={() =>
                      updateWeight(item.id, Math.max(MIN_WEIGHT, item.weight - STEP))
                    }
                  >
                    <Ionicons name="remove" size={16} color={colors.primaryText} />
                  </Pressable>
                  <Pressable
                    style={styles.stepBtn}
                    onPress={() =>
                      updateWeight(item.id, Math.min(MAX_WEIGHT, item.weight + STEP))
                    }
                  >
                    <Ionicons name="add" size={16} color={colors.primaryText} />
                  </Pressable>
                </View>
              </View>
            );
          })}
        </View>
      </ScrollView>

      <View style={styles.footer}>
        <Pressable
          style={[styles.saveBtn, (!isValid || saving) && styles.saveBtnDisabled]}
          disabled={!isValid || saving}
          onPress={save}
        >
          <Text style={styles.saveText}>{saving ? '保存中…' : '保存设置'}</Text>
        </Pressable>
      </View>
    </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: 24 },
  stateWrap: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12 },
  stateText: { fontSize: 14, color: colors.textSecondary },
  retryBtn: {
    paddingHorizontal: 20,
    paddingVertical: 8,
    borderRadius: 8,
    backgroundColor: colors.primaryLight,
  },
  retryText: { fontSize: 14, color: colors.primaryText },
  summaryCard: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 16,
    borderRadius: 8,
    backgroundColor: colors.primaryLight,
  },
  summaryCardWarn: { backgroundColor: colors.dangerLight },
  summaryLabel: { fontSize: 12, color: colors.textSecondary, marginBottom: 4 },
  summaryValue: { fontSize: 24, fontWeight: '500', color: colors.primaryText },
  summaryValueWarn: { color: colors.dangerText },
  summaryHint: { flex: 1, textAlign: 'right', fontSize: 12, color: colors.textSecondary },
  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 },
  templateRow: { gap: 10, paddingRight: 16 },
  templateCard: {
    width: 140,
    padding: 12,
    borderRadius: 8,
    backgroundColor: colors.surface,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.borderLight,
  },
  templateName: { fontSize: 14, fontWeight: '500', color: colors.textPrimary, marginBottom: 4 },
  templateDesc: { fontSize: 11, color: colors.textSecondary },
  dimensionCard: {
    borderRadius: 8,
    backgroundColor: colors.surface,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.borderLight,
    paddingHorizontal: 14,
  },
  dimRow: {
    paddingVertical: 14,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: colors.borderLight,
  },
  dimRowLast: { borderBottomWidth: 0 },
  dimHead: { flexDirection: 'row', alignItems: 'center', marginBottom: 8 },
  dimName: { fontSize: 14, color: colors.textPrimary, marginRight: 6 },
  reversedTag: {
    paddingHorizontal: 6,
    paddingVertical: 1,
    borderRadius: 4,
    backgroundColor: colors.infoLight,
    marginRight: 6,
  },
  reversedText: { fontSize: 10, color: colors.infoText },
  dimValue: { marginLeft: 'auto', fontSize: 14, fontWeight: '500', color: colors.primaryText },
  dimTrack: {
    height: 6,
    borderRadius: 3,
    backgroundColor: colors.borderLight,
    overflow: 'hidden',
    marginBottom: 10,
  },
  dimFill: { height: '100%', borderRadius: 3 },
  dimActions: { flexDirection: 'row', gap: 8 },
  stepBtn: {
    width: 28,
    height: 28,
    borderRadius: 6,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.primaryLight,
  },
  footer: {
    padding: 16,
    backgroundColor: colors.surface,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: colors.borderLight,
  },
  saveBtn: {
    height: 46,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.primaryBtn,
  },
  saveBtnDisabled: { backgroundColor: colors.border },
  saveText: { fontSize: 15, fontWeight: '500', color: colors.white },
});