import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { useRouter } from 'expo-router';
import type { ComponentProps } from 'react';
import {
  ActivityIndicator,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Svg, { Circle, Line, Polygon } from 'react-native-svg';
import { useGrowthData } from '../../src/hooks';

import { colors, headerGradient } from '../../src/theme';
import { formatThousands, formatViews } from '../../src/utils';
import { JOB_LEVEL_LABEL } from '../../src/constants';
import type { AbilityDimension, JobLevel } from '../../src/types';

type IconName = ComponentProps<typeof Ionicons>['name'];

/* ===================== 雷达图 ===================== */

const RADAR_SIZE = 132;
const RADAR_CENTER = RADAR_SIZE / 2;
/** 最大绘制半径（留边距，避免顶点被裁切） */
const RADAR_MAX_RADIUS = RADAR_SIZE / 2 - 4;

/** 计算雷达图第 index 个顶点的坐标（从正上方开始，顺时针） */
function radarPoint(index: number, total: number, radius: number) {
  const angle = (Math.PI * 2 * index) / total - Math.PI / 2;
  return {
    x: RADAR_CENTER + radius * Math.cos(angle),
    y: RADAR_CENTER + radius * Math.sin(angle),
  };
}

/**
 * 四维能力雷达图：3 层网格 + 轴线 + 数据填充多边形 + 顶点圆点
 */
function RadarChart({ dimensions }: { dimensions: AbilityDimension[] }) {
  const total = dimensions.length;

  // 3 层网格（1/3、2/3、3/3 半径）
  const gridPolygons = [1, 2, 3].map((level) =>
    dimensions
      .map((_, i) => {
        const p = radarPoint(i, total, (RADAR_MAX_RADIUS * level) / 3);
        return `${p.x},${p.y}`;
      })
      .join(' '),
  );

  // 轴线（中心 → 顶点）
  const axes = dimensions.map((_, i) => radarPoint(i, total, RADAR_MAX_RADIUS));

  // 数据多边形 + 顶点
  const dataVertices = dimensions.map((d, i) =>
    radarPoint(i, total, (RADAR_MAX_RADIUS * d.value) / 100),
  );
  const dataPoints = dataVertices.map((p) => `${p.x},${p.y}`).join(' ');

  return (
    <Svg width={RADAR_SIZE} height={RADAR_SIZE}>
      {gridPolygons.map((points, i) => (
        <Polygon
          key={`grid-${i}`}
          points={points}
          fill="none"
          stroke={colors.borderStrong}
          strokeWidth={1}
        />
      ))}
      {axes.map((p, i) => (
        <Line
          key={`axis-${i}`}
          x1={RADAR_CENTER}
          y1={RADAR_CENTER}
          x2={p.x}
          y2={p.y}
          stroke={colors.borderStrong}
          strokeWidth={1}
        />
      ))}
      <Polygon
        points={dataPoints}
        fill={colors.primary}
        fillOpacity={0.22}
        stroke={colors.primary}
        strokeWidth={2}
      />
      {dataVertices.map((p, i) => (
        <Circle key={`dot-${i}`} cx={p.x} cy={p.y} r={3} fill={colors.primary} />
      ))}
    </Svg>
  );
}

/* ===================== 配色映射 ===================== */

/** 能力等级 → 文字颜色（与岗位评分标签一致） */
const LEVEL_TEXT_COLOR: Record<JobLevel, string> = {
  excellent: colors.primaryDark,
  good: colors.primary,
  medium: colors.textSecondary,
};

/** AI 工具卡片色调映射 */
const TOOL_STYLE = {
  primary: {
    bg: colors.primaryLight,
    border: colors.primaryBorder,
    icon: colors.primary,
    action: colors.primaryText,
  },
  success: {
    bg: colors.successLight,
    border: colors.successBorder,
    icon: colors.success,
    action: colors.successText,
  },
} as const;

/** 文章缩略图配色映射（复用信息/行动/成功三组语义色） */
const THUMBNAIL_STYLE = {
  violet: { bg: colors.infoLight, color: colors.info },
  orange: { bg: colors.actionLight, color: colors.action },
  green: { bg: colors.successLight, color: colors.success },
} as const;

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

/**
 * 成长中心页
 */
export default function GrowthScreen() {
  const router = useRouter();
  const { holland, ability, aiTools, articles, loading, error, refresh } = useGrowthData();

  // 错误态
  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 || !holland || !ability) {
    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. 顶部导航 */}

        <LinearGradient
          colors={headerGradient}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={styles.header}
        >
          <Text style={styles.headerTitle}>成长中心</Text>
          <Pressable style={styles.headerAction} onPress={() => { /* TODO: 设置/更多 */ }}>
            <Ionicons name="settings-outline" size={22} color={colors.textInverse} />
          </Pressable>
        </LinearGradient>

        {/* 2. 霍兰德职业兴趣测评 Hero Card */}
        <LinearGradient
          colors={[colors.primary, colors.primaryDark]}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={styles.heroCard}
        >
          <View style={styles.heroIcon}>
            <Ionicons name="compass" size={30} color={colors.primary} />
          </View>
          <View style={styles.heroContent}>
            <Text style={styles.heroTitle}>霍兰德职业兴趣测评</Text>
            <Text style={styles.heroSubtitle}>发现你的职业性格类型</Text>
            <View style={styles.heroBottom}>
              <Pressable style={styles.heroButton} onPress={() => router.push('/holland')}>
                <Text style={styles.heroButtonText}>立即测评</Text>
              </Pressable>
              <Text style={styles.heroParticipants}>
                已有 {formatThousands(holland.totalParticipants)} 人完成
              </Text>
            </View>
          </View>
        </LinearGradient>

        {/* 3. 四维能力测评 */}
        <View style={styles.sectionHeader}>
          <Text style={styles.sectionTitle}>四维能力测评</Text>
          <Pressable onPress={() => router.push('/ability')}>
            <Text style={styles.sectionMore}>查看报告 &gt;</Text>
          </Pressable>
        </View>

        <View style={styles.abilityCard}>
          <View style={styles.abilityTop}>
            <RadarChart dimensions={ability.dimensions} />
            <View style={styles.scoreBlock}>
              <View style={styles.scoreRow}>
                <Text style={styles.scoreNumber}>{ability.overallScore}</Text>
                <Text style={styles.scoreUnit}>分</Text>
                <View style={styles.levelBadge}>
                  <Text style={[styles.levelBadgeText, { color: LEVEL_TEXT_COLOR[ability.level] }]}>
                    {JOB_LEVEL_LABEL[ability.level]}
                  </Text>
                </View>
              </View>
              <View style={styles.bars}>
                {ability.dimensions.map((dim) => (
                  <View key={dim.label} style={styles.barRow}>
                    <Text style={styles.barLabel}>{dim.label}</Text>
                    <View style={styles.barTrack}>
                      <View style={[styles.barFill, { width: `${dim.value}%` }]} />
                    </View>
                    <Text style={styles.barValue}>{dim.value}</Text>
                  </View>
                ))}
              </View>
            </View>
          </View>
          <Pressable style={styles.retestBtn} onPress={() => router.push('/ability')}>
            <Text style={styles.retestText}>重新测评</Text>
          </Pressable>
        </View>

        {/* 4. AI 求职工具 */}
        <View style={styles.sectionHeader}>
          <Text style={styles.sectionTitle}>AI求职工具</Text>
        </View>
        <View style={styles.toolsRow}>
          {aiTools.map((tool) => {
            const style = TOOL_STYLE[tool.variant];
            return (
              <Pressable
                key={tool.id}
                style={[styles.toolCard, { backgroundColor: style.bg, borderColor: style.border }]}
                onPress={() => {
                  if (tool.id === 'ai-resume') router.push('/resume');
                  else if (tool.id === 'ai-interview') router.push('/interview');
                }}
              >
                <Ionicons name={tool.icon as IconName} size={28} color={style.icon} />
                <Text style={styles.toolTitle}>{tool.title}</Text>
                <Text style={styles.toolDesc}>{tool.description}</Text>
                <Text style={[styles.toolAction, { color: style.action }]}>{tool.action} →</Text>
              </Pressable>
            );
          })}
        </View>

        {/* 5. 职场干货 */}
        <View style={styles.sectionHeader}>
          <Text style={styles.sectionTitle}>职场干货</Text>
          <Pressable onPress={() => { /* TODO: 更多 */ }}>
            <Text style={styles.sectionMore}>更多 &gt;</Text>
          </Pressable>
        </View>
        {articles.map((article) => {
          const thumb = THUMBNAIL_STYLE[article.thumbnailColor];
          return (
            <Pressable
              key={article.id}
              style={styles.articleCard}
              onPress={() => { /* TODO: 阅读文章 */ }}
            >
              <View style={[styles.articleThumb, { backgroundColor: thumb.bg }]}>
                <Ionicons name={article.icon as IconName} size={26} color={thumb.color} />
              </View>
              <View style={styles.articleBody}>
                <Text style={styles.articleTitle} numberOfLines={2}>
                  {article.title}
                </Text>
                <View style={styles.articleMeta}>
                  <Text style={styles.articleTag}>{article.tag}</Text>
                  <Text style={styles.articleViews}>{formatViews(article.views)}阅读</Text>
                </View>
              </View>
            </Pressable>
          );
        })}
      </ScrollView>
    </SafeAreaView>
  );
}


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: 8,
    paddingBottom: 24,
  },
  /* ---- 顶部导航 ---- */
  header: {
    height: 48,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
  headerTitle: {
    fontSize: 17,
    fontWeight: '700',
    color: colors.textInverse,
  },
  headerAction: {
    position: 'absolute',
    right: 0,
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  /* ---- 霍兰德 Hero Card ---- */
  heroCard: {
    flexDirection: 'row',
    marginTop: 8,
    borderRadius: 8,
    padding: 20,
  },
  heroIcon: {
    width: 52,
    height: 52,
    borderRadius: 26,
    backgroundColor: colors.white,
    alignItems: 'center',
    justifyContent: 'center',
  },
  heroContent: {
    flex: 1,
    marginLeft: 14,
  },
  heroTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: colors.white,
  },
  heroSubtitle: {
    marginTop: 6,
    fontSize: 13,
    color: colors.white,
    opacity: 0.9,
  },
  heroBottom: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 16,
  },
  heroButton: {
    borderRadius: 18,
    paddingHorizontal: 16,
    paddingVertical: 8,
    backgroundColor: colors.white,
  },
  heroButtonText: {
    fontSize: 14,
    fontWeight: '600',
    color: colors.primaryText,
  },
  heroParticipants: {
    marginLeft: 10,
    fontSize: 12,
    color: colors.white,
    opacity: 0.8,
  },
  /* ---- 通用分区标题 ---- */
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 24,
    marginBottom: 12,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  sectionMore: {
    fontSize: 13,
    color: colors.primary,
  },
  /* ---- 四维能力测评卡片 ---- */
  abilityCard: {
    backgroundColor: colors.white,
    borderRadius: 8,
    padding: 16,
  },
  abilityTop: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  scoreBlock: {
    flex: 1,
    marginLeft: 16,
  },
  scoreRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  scoreNumber: {
    fontSize: 40,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  scoreUnit: {
    fontSize: 13,
    color: colors.textSecondary,
    marginLeft: 4,
    marginTop: 16,
  },
  levelBadge: {
    marginLeft: 10,
    paddingHorizontal: 8,
    paddingVertical: 3,
    borderRadius: 8,
    backgroundColor: colors.primaryLight,
  },
  levelBadgeText: {
    fontSize: 12,
    fontWeight: '600',
  },
  bars: {
    marginTop: 12,
  },
  barRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
  },
  barLabel: {
    width: 52,
    fontSize: 12,
    color: colors.textSecondary,
  },
  barTrack: {
    flex: 1,
    height: 6,
    borderRadius: 3,
    backgroundColor: colors.borderLight,
    overflow: 'hidden',
  },
  barFill: {
    height: 6,
    borderRadius: 3,
    backgroundColor: colors.primary,
  },
  barValue: {
    width: 26,
    marginLeft: 6,
    fontSize: 12,
    fontWeight: '600',
    color: colors.textPrimary,
    textAlign: 'right',
  },
  retestBtn: {
    marginTop: 16,
    alignSelf: 'center',
    paddingHorizontal: 28,
    paddingVertical: 9,
    borderRadius: 20,
    backgroundColor: colors.primaryLight,
  },
  retestText: {
    fontSize: 14,
    fontWeight: '600',
    color: colors.primaryText,
  },
  /* ---- AI 求职工具 ---- */
  toolsRow: {
    flexDirection: 'row',
    gap: 12,
  },
  toolCard: {
    flex: 1,
    borderRadius: 8,
    padding: 16,
    borderWidth: 1,
  },
  toolTitle: {
    marginTop: 12,
    fontSize: 15,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  toolDesc: {
    marginTop: 6,
    fontSize: 12,
    color: colors.textSecondary,
  },
  toolAction: {
    marginTop: 12,
    fontSize: 13,
    fontWeight: '600',
  },
  /* ---- 职场干货 ---- */
  articleCard: {
    flexDirection: 'row',
    backgroundColor: colors.white,
    borderRadius: 8,
    padding: 12,
    marginBottom: 8,
  },
  articleThumb: {
    width: 96,
    height: 72,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  articleBody: {
    flex: 1,
    marginLeft: 12,
    justifyContent: 'space-between',
  },
  articleTitle: {
    fontSize: 15,
    fontWeight: '600',
    color: colors.textPrimary,
    lineHeight: 20,
  },
  articleMeta: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 8,
  },
  articleTag: {
    fontSize: 11,
    color: colors.primaryText,
    backgroundColor: colors.primaryLight,
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 8,
    overflow: 'hidden',
  },
  articleViews: {
    fontSize: 11,
    color: colors.textHint,
  },
});