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 Svg, { Circle, Line, Path, Text as SvgText } from 'react-native-svg';
import { useAbilityAssessment } from '../src/hooks';
import { colors, jobLevelTextColors } from '../src/theme';
import { JOB_LEVEL_LABEL } from '../src/constants';
import type { AbilityDimension, AbilityTrendPoint, JobLevel } from '../src/types';

const DIM_COLORS = [colors.primary, colors.info, colors.success, colors.action];
const DIM_LABELS = ['专业能力', '项目经验', '技能广度', '成长潜力'];

/* ===================== 子组件：顶部导航 ===================== */

function Header({ onBack, onRefresh }: { onBack: () => void; onRefresh: () => 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>
      <Pressable style={styles.headerBtn} onPress={onRefresh} hitSlop={8}>
        <Ionicons name="refresh-outline" size={22} color={colors.textPrimary} />
      </Pressable>
    </View>
  );
}

/* ===================== 子组件：综合评分卡 ===================== */

function ScoreCard({
  score,
  level,
  percentile,
}: {
  score: number;
  level: JobLevel;
  percentile?: number;
}) {
  return (
    <View style={styles.scoreCard}>
      <View style={styles.scoreLeft}>
        <Text style={styles.scoreLabel}>四大核心能力综合测评</Text>
        <View style={styles.scoreRow}>
          <Text style={styles.scoreValue}>{score}</Text>
          <Text style={styles.scoreUnit}>分</Text>
          <View style={[styles.levelTag, { backgroundColor: colors.primaryLight }]}>
            <Text style={[styles.levelText, { color: jobLevelTextColors[level] }]}>
              {JOB_LEVEL_LABEL[level]}
            </Text>
          </View>
        </View>
        <Text style={styles.percentile}>超过 {percentile ?? 0}% 同岗位求职者</Text>
      </View>
      <View style={styles.scoreIcon}>
        <Ionicons name="cube-outline" size={40} color={colors.primary} />
      </View>
    </View>
  );
}

/* ===================== 子组件：能力维度卡片 ===================== */

function DimensionCard({ dim, index }: { dim: AbilityDimension; index: number }) {
  const color = DIM_COLORS[index % DIM_COLORS.length];
  return (
    <View style={styles.dimCard}>
      <View style={styles.dimHeader}>
        <View style={[styles.dimIcon, { backgroundColor: `${color}20` }]}>
          <Ionicons name="stats-chart-outline" size={20} color={color} />
        </View>
        <View style={styles.dimTitleWrap}>
          <Text style={styles.dimTitle}>{dim.label}</Text>
          <Text style={styles.dimPercentile}>{dim.percentileText}</Text>
        </View>
        <View style={styles.dimScoreWrap}>
          <Text style={styles.dimScore}>{dim.value}</Text>
          <Text style={[styles.dimScoreLabel, { color }]}>良好</Text>
        </View>
      </View>
      <View style={styles.dimTrack}>
        <View style={[styles.dimFill, { width: `${dim.value}%`, backgroundColor: color }]} />
      </View>
      {dim.subItems && (
        <View style={styles.subItems}>
          {dim.subItems.map((item) => (
            <View key={item.id} style={styles.subItem}>
              <Text style={styles.subItemLabel}>{item.label}</Text>
              <View style={styles.subItemTrack}>
                <View
                  style={[
                    styles.subItemFill,
                    { width: `${(item.score / item.maxScore) * 100}%`, backgroundColor: color },
                  ]}
                />
              </View>
              <Text style={styles.subItemScore}>{item.score}分</Text>
            </View>
          ))}
        </View>
      )}
    </View>
  );
}

/* ===================== 子组件：趋势折线图 ===================== */

function TrendChart({ trends }: { trends: AbilityTrendPoint[] }) {
  const width = 320;
  const height = 160;
  const padding = { top: 20, right: 20, bottom: 30, left: 30 };
  const chartW = width - padding.left - padding.right;
  const chartH = height - padding.top - padding.bottom;
  const max = 100;
  const months = trends.map((t) => t.month);

  const lines = DIM_LABELS.map((label, dimIndex) => {
    const key = (['professional', 'project', 'skill', 'growth'] as const)[dimIndex];
    const pts = trends.map((t, i) => ({
      x: padding.left + (i / (trends.length - 1)) * chartW,
      y: padding.top + (1 - (t[key] / max)) * chartH,
    }));
    const d = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
    return { label, color: DIM_COLORS[dimIndex], d, last: pts[pts.length - 1] };
  });

  return (
    <View style={styles.chartCard}>
      <Text style={styles.chartTitle}>能力成长趋势</Text>
      <Svg width={width} height={height}>
        {/* 网格线 */}
        {[0, 25, 50, 75, 100].map((v, i) => {
          const y = padding.top + (1 - v / max) * chartH;
          return (
            <Line key={i} x1={padding.left} y1={y} x2={width - padding.right} y2={y} stroke={colors.borderLight} strokeWidth={1} />
          );
        })}
        {/* X 轴标签 */}
        {months.map((m, i) => {
          const x = padding.left + (i / (months.length - 1)) * chartW;
          return (
            <SvgText key={m} x={x} y={height - 8} fill={colors.textHint} fontSize="10" textAnchor="middle">
              {m}
            </SvgText>
          );
        })}
        {/* 折线 */}
        {lines.map((line) => (
          <Path key={line.label} d={line.d} fill="none" stroke={line.color} strokeWidth={2} />
        ))}
        {/* 端点 */}
        {lines.map((line) => (
          <Circle key={`dot-${line.label}`} cx={line.last.x} cy={line.last.y} r={3} fill={line.color} />
        ))}
      </Svg>
      <View style={styles.legend}>
        {lines.map((line) => (
          <View key={line.label} style={styles.legendItem}>
            <View style={[styles.legendDot, { backgroundColor: line.color }]} />
            <Text style={styles.legendText}>{line.label}</Text>
          </View>
        ))}
      </View>
    </View>
  );
}

/* ===================== 子组件：提升建议 ===================== */

function ImprovementCard({ item }: { item: import('../src/types').AbilityImprovement }) {
  return (
    <View style={styles.improveCard}>
      <Ionicons name={item.icon as keyof typeof Ionicons.glyphMap} size={22} color={colors.primary} />
      <View style={styles.improveBody}>
        <Text style={styles.improveTitle}>{item.title}</Text>
        <Text style={styles.improveDesc}>{item.description}</Text>
      </View>
    </View>
  );
}

/* ===================== 子组件：四态 ===================== */

function Loading() {
  return (
    <View style={styles.center}>
      <ActivityIndicator size="large" color={colors.primary} />
      <Text style={styles.tip}>正在加载测评…</Text>
    </View>
  );
}

function ErrorState({ onRetry }: { onRetry: () => void }) {
  return (
    <View style={styles.center}>
      <Ionicons name="alert-circle-outline" size={40} color={colors.textHint} />
      <Text style={styles.tip}>测评加载失败</Text>
      <Pressable style={styles.retryBtn} onPress={onRetry} hitSlop={6}>
        <Text style={styles.retryText}>点击重试</Text>
      </Pressable>
    </View>
  );
}

/* ===================== 页面 ===================== */

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

  if (loading) {
    return (
      <SafeAreaView style={styles.container} edges={['top']}>
        <Header onBack={() => router.back()} onRefresh={refresh} />
        <Loading />
      </SafeAreaView>
    );
  }

  if (error || !ability) {
    return (
      <SafeAreaView style={styles.container} edges={['top']}>
        <Header onBack={() => router.back()} onRefresh={refresh} />
        <ErrorState onRetry={refresh} />
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      <Header onBack={() => router.back()} onRefresh={refresh} />
      <ScrollView contentContainerStyle={styles.body} showsVerticalScrollIndicator={false}>
        <ScoreCard score={ability.overallScore} level={ability.level} percentile={ability.percentile} />

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>四维能力详解</Text>
          {ability.dimensions.map((dim, i) => (
            <DimensionCard key={dim.label} dim={dim} index={i} />
          ))}
        </View>

        <TrendChart trends={ability.trends} />

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>针对性提升建议</Text>
          {ability.improvements.length === 0 ? (
            <View style={styles.emptyBox}>
              <Ionicons name="bulb-outline" size={28} color={colors.textHint} />
              <Text style={styles.emptyText}>完成测评后，这里会给出针对性的提升建议</Text>
            </View>
          ) : (
            ability.improvements.map((item) => <ImprovementCard key={item.id} item={item} />)
          )}
        </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: 16, paddingBottom: 32 },
  scoreCard: {
    flexDirection: 'row',
    backgroundColor: colors.white,
    borderRadius: 8,
    padding: 18,
    marginBottom: 12,
    borderWidth: 1,
    borderColor: colors.borderLight,
  },
  scoreLeft: { flex: 1 },
  scoreLabel: { fontSize: 14, color: colors.textSecondary },
  scoreRow: { flexDirection: 'row', alignItems: 'center', marginTop: 8 },
  scoreValue: { fontSize: 48, fontWeight: '800', color: colors.textPrimary },
  scoreUnit: { fontSize: 14, color: colors.textSecondary, marginTop: 16, marginRight: 8 },
  levelTag: { borderRadius: 10, paddingHorizontal: 10, paddingVertical: 4 },
  levelText: { fontSize: 12, fontWeight: '700' },
  percentile: { fontSize: 13, color: colors.successText, marginTop: 8 },
  scoreIcon: { justifyContent: 'center' },
  section: { marginTop: 16 },
  emptyBox: {
    backgroundColor: colors.surface,
    borderRadius: 8,
    paddingVertical: 28,
    paddingHorizontal: 16,
    alignItems: 'center',
    gap: 8,
  },
  emptyText: { fontSize: 13, color: colors.textSecondary, textAlign: 'center' },
  sectionTitle: { fontSize: 18, fontWeight: '700', color: colors.textPrimary, marginBottom: 12 },
  dimCard: {
    backgroundColor: colors.white,
    borderRadius: 8,
    padding: 16,
    marginBottom: 10,
    borderWidth: 1,
    borderColor: colors.borderLight,
  },
  dimHeader: { flexDirection: 'row', alignItems: 'center' },
  dimIcon: {
    width: 36,
    height: 36,
    borderRadius: 18,
    alignItems: 'center',
    justifyContent: 'center',
  },
  dimTitleWrap: { flex: 1, marginLeft: 10 },
  dimTitle: { fontSize: 15, fontWeight: '700', color: colors.textPrimary },
  dimPercentile: { fontSize: 12, color: colors.textSecondary, marginTop: 2 },
  dimScoreWrap: { alignItems: 'flex-end' },
  dimScore: { fontSize: 24, fontWeight: '800', color: colors.textPrimary },
  dimScoreLabel: { fontSize: 11, fontWeight: '600', marginTop: 2 },
  dimTrack: {
    height: 8,
    borderRadius: 4,
    backgroundColor: colors.borderLight,
    marginTop: 12,
    overflow: 'hidden',
  },
  dimFill: { height: 8, borderRadius: 4 },
  subItems: { marginTop: 12, gap: 10 },
  subItem: { flexDirection: 'row', alignItems: 'center' },
  subItemLabel: { width: 90, fontSize: 12, color: colors.textSecondary },
  subItemTrack: { flex: 1, height: 6, borderRadius: 3, backgroundColor: colors.borderLight, overflow: 'hidden' },
  subItemFill: { height: 6, borderRadius: 3 },
  subItemScore: { width: 50, fontSize: 12, color: colors.textPrimary, textAlign: 'right' },
  chartCard: {
    backgroundColor: colors.white,
    borderRadius: 8,
    padding: 16,
    marginTop: 16,
    borderWidth: 1,
    borderColor: colors.borderLight,
  },
  chartTitle: { fontSize: 15, fontWeight: '700', color: colors.textPrimary, marginBottom: 10 },
  legend: { flexDirection: 'row', flexWrap: 'wrap', gap: 12, marginTop: 8 },
  legendItem: { flexDirection: 'row', alignItems: 'center' },
  legendDot: { width: 8, height: 8, borderRadius: 4, marginRight: 4 },
  legendText: { fontSize: 11, color: colors.textSecondary },
  improveCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.white,
    borderRadius: 8,
    padding: 14,
    marginBottom: 10,
    borderWidth: 1,
    borderColor: colors.borderLight,
  },
  improveBody: { flex: 1, marginLeft: 12 },
  improveTitle: { fontSize: 14, fontWeight: '700', color: colors.textPrimary },
  improveDesc: { fontSize: 12, color: colors.textSecondary, marginTop: 2, lineHeight: 18 },
  center: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 40, gap: 12 },
  tip: { fontSize: 14, color: colors.textSecondary },
  retryBtn: { paddingHorizontal: 18, paddingVertical: 8, borderRadius: 16, backgroundColor: colors.primaryLight },
  retryText: { fontSize: 13, fontWeight: '600', color: colors.primaryText },
});