import { Ionicons } from '@expo/vector-icons';
import { useFocusEffect, useRouter } from 'expo-router';
import { useCallback, useState } from 'react';
import {
  ActivityIndicator,
  Alert,
  Modal,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useResume } from '../src/hooks';
import { RESUME_EVAL_MAX_LENGTH, UNSET_LABEL } from '../src/constants';
import {colors, spacing} from '../src/theme';
import type { Resume as ResumeType, ResumeExperience, ResumeOptimizePoint, ResumeProject } from '../src/types';
import { formatDateTime } from '../src/utils';

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

/**
 * 顶部导航。`onSave` 可选：加载中 / 加载失败时简历尚未就绪，此时按钮置灰而不是给一个
 * 点了没反应的入口（同 `app/resume/export.tsx` 的处理）。
 */
function Header({
  onBack,
  onSave,
  onExport,
  onVersions,
}: {
  onBack: () => void;
  /** 传 undefined = 简历未就绪，按钮置灰 */
  onSave?: () => void;
  onExport: () => void;
  onVersions?: () => void;
}) {
  const saveDisabled = onSave === undefined;
  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}>AI简历优化</Text>
      <View style={styles.headerActions}>
        {onVersions && (
          <Pressable
            style={styles.headerActionBtn}
            onPress={onVersions}
            hitSlop={8}
            accessibilityLabel="管理简历版本"
          >
            <Ionicons name="layers-outline" size={20} color={colors.textPrimary} />
          </Pressable>
        )}
        <Pressable
          style={styles.headerActionBtn}
          onPress={onSave}
          disabled={saveDisabled}
          hitSlop={8}
          accessibilityLabel="保存简历到本机"
        >
          <Ionicons
            name="save-outline"
            size={20}
            color={saveDisabled ? colors.textDisabled : colors.textPrimary}
          />
        </Pressable>
        <Pressable
          style={styles.headerActionBtn}
          onPress={onExport}
          hitSlop={8}
          accessibilityLabel="导出简历"
        >
          <Ionicons name="download-outline" size={20} color={colors.textPrimary} />
        </Pressable>
      </View>
    </View>
  );
}

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

function ScoreCard({
  score,
  maxScore,
  onOptimize,
  optimizing,
}: {
  score: number;
  maxScore: number;
  onOptimize: () => void;
  optimizing: boolean;
}) {
  const pct = Math.round((score / maxScore) * 100);
  return (
    <View style={styles.scoreCard}>
      <View style={styles.scoreRow}>
        <View>
          <Text style={styles.scoreLabel}>简历评分</Text>
          <View style={styles.scoreValueRow}>
            <Text style={styles.scoreValue}>{score}</Text>
            <Text style={styles.scoreUnit}>分</Text>
          </View>
        </View>
        <View style={styles.scoreBarWrap}>
          <View style={styles.scoreTrack}>
            <View style={[styles.scoreFill, { width: `${pct}%` }]} />
          </View>
          <Pressable
            style={[styles.optimizeBtn, optimizing && styles.optimizeBtnDisabled]}
            onPress={onOptimize}
            disabled={optimizing}
          >
            {optimizing ? (
              <ActivityIndicator size="small" color={colors.white} />
            ) : (
              <Text style={styles.optimizeBtnText}>优化简历</Text>
            )}
          </Pressable>
        </View>
      </View>
    </View>
  );
}

/* ===================== 子组件：优化点列表 ===================== */

function OptimizeCard({
  points,
  onOptimizeAll,
  optimizing,
}: {
  points: ResumeOptimizePoint[];
  onOptimizeAll: () => void;
  optimizing: boolean;
}) {
  return (
    <View style={styles.card}>
      <View style={styles.cardHeader}>
        <Ionicons name="sparkles" size={18} color={colors.info} />
        <Text style={styles.cardHeaderTitle}>AI 检测到 {points.length} 项可优化内容</Text>
      </View>
      {points.map((p) => (
        <View key={p.id} style={styles.optRow}>
          <Ionicons
            name={p.optimized ? 'checkmark-circle' : 'ellipse'}
            size={14}
            color={p.optimized ? colors.success : colors.textHint}
          />
          <Text style={[styles.optTitle, p.optimized && styles.optTitleDone]}>{p.title}</Text>
          <Text style={[styles.optScore, p.optimized && styles.optScoreDone]}>+{p.score}分</Text>
        </View>
      ))}
      <Pressable
        style={[styles.optAllBtn, optimizing && styles.optAllBtnDisabled]}
        onPress={onOptimizeAll}
        disabled={optimizing}
      >
        <Text style={styles.optAllText}>{optimizing ? '优化中…' : '一键全部优化'}</Text>
      </Pressable>
    </View>
  );
}

/* ===================== 子组件：基本信息 ===================== */

function BasicInfoCard({ info, onEdit }: { info: ResumeType['basicInfo']; onEdit: () => void }) {
  // 引导未强制填姓名（P6/P16 可跳过直接进入），头像字取展示姓名的首字，保持一致
  const name = info.name || UNSET_LABEL;
  const rows = [
    { key: 'phone', icon: 'call-outline' as const, value: info.phone },
    { key: 'email', icon: 'mail-outline' as const, value: info.email },
    { key: 'location', icon: 'location-outline' as const, value: info.location },
  ].filter((row) => row.value !== '');

  return (
    <View style={styles.card}>
      <View style={styles.sectionTitleRow}>
        <Text style={styles.sectionTitle}>基本信息</Text>
        <Pressable onPress={onEdit} hitSlop={6}>
          <Text style={styles.editLink}>编辑基本信息 &gt;</Text>
        </Pressable>
      </View>
      <View style={styles.basicRow}>
        <View style={styles.avatar}>
          <Text style={styles.avatarText}>{name.slice(0, 1)}</Text>
        </View>
        <View style={styles.basicBody}>
          <View style={styles.nameRow}>
            <Text style={styles.name}>{name}</Text>
            <Ionicons name="pencil" size={14} color={colors.primary} />
          </View>
          {/* 空值不渲染空行：手机号 / 邮箱引导未采集，画一行空白比不画更让人困惑 */}
          {rows.map((row) => (
            <View key={row.key} style={styles.contactRow}>
              <Ionicons name={row.icon} size={14} color={colors.textHint} />
              <Text style={styles.contactText}>{row.value}</Text>
            </View>
          ))}
        </View>
      </View>
    </View>
  );
}

/* ===================== 子组件：求职意向 ===================== */

function JobIntentionCard({ intention }: { intention: ResumeType['jobIntention'] }) {
  const router = useRouter();
  return (
    <View style={styles.card}>
      <View style={styles.sectionTitleRow}>
        <Text style={styles.sectionTitle}>求职意向</Text>
        {/* 指向已存在的求职意向编辑页（此前是无 onPress 的死按钮） */}
        <Pressable onPress={() => router.push('/job-preference')} hitSlop={6}>
          <Text style={styles.editLink}>编辑 &gt;</Text>
        </Pressable>
      </View>
      <View style={styles.intentionGrid}>
        <IntentionItem label="目标职位" value={intention.position} />
        <IntentionItem label="期望薪资" value={intention.salary} />
        <IntentionItem label="期望城市" value={intention.city} />
        <IntentionItem
          label="求职状态"
          value={intention.statusLabel}
          // 无状态文案时不打「积极求职中」的彩色标签：颜色本身也是一句话
          tag={intention.status === 'active' && intention.statusLabel !== ''}
        />
      </View>
    </View>
  );
}

function IntentionItem({
  label,
  value,
  tag,
}: {
  label: string;
  value: string;
  tag?: boolean;
}) {
  const text = value || UNSET_LABEL;
  return (
    <View style={styles.intentionItem}>
      <Text style={styles.intentionLabel}>{label}</Text>
      {tag ? (
        <View style={styles.intentionTag}>
          <Text style={styles.intentionTagText}>{text}</Text>
        </View>
      ) : (
        <Text style={styles.intentionValue}>{text}</Text>
      )}
    </View>
  );
}

/* ===================== 子组件：教育背景 ===================== */

function EducationCard({
  education,
  onAdd,
  onEdit,
  onItem,
}: {
  education: ResumeType['education'];
  onAdd: () => void;
  onEdit: () => void;
  onItem: (id: string) => void;
}) {
  return (
    <View style={styles.card}>
      <View style={styles.sectionTitleRow}>
        <Text style={styles.sectionTitle}>教育背景</Text>
        <View style={styles.sectionActions}>
          <Pressable onPress={onEdit} hitSlop={6}>
            <Text style={styles.editLink}>编辑 &gt;</Text>
          </Pressable>
          <Pressable style={styles.addBtn} onPress={onAdd} hitSlop={6}>
            <Ionicons name="add" size={18} color={colors.primary} />
            <Text style={styles.addText}>添加教育经历</Text>
          </Pressable>
        </View>
      </View>
      {education.length === 0 && <Text style={styles.emptyText}>未填写教育背景</Text>}
      {education.map((edu) => {
        // 专业 / 年份引导未采集时为空串，拼出来会剩一个孤零零的「· 本科」或「-」
        const majorDegree = [edu.major, edu.degree].filter(Boolean).join(' · ');
        const years = [edu.startYear, edu.endYear].filter(Boolean).join('-');
        return (
          <Pressable key={edu.id} style={styles.eduRow} onPress={() => onItem(edu.id)}>
            <View>
              <Text style={styles.eduSchool}>{edu.school}</Text>
              {majorDegree !== '' && <Text style={styles.eduMajor}>{majorDegree}</Text>}
            </View>
            {years !== '' && <Text style={styles.eduYear}>{years}</Text>}
          </Pressable>
        );
      })}
    </View>
  );
}

/* ===================== 子组件：工作经历 ===================== */

function ExperienceCard({
  experiences,
  onAdd,
  onEdit,
  onItem,
  onOptimize,
  aiBusy,
}: {
  experiences: ResumeExperience[];
  onAdd: () => void;
  onEdit: () => void;
  onItem: (id: string) => void;
  onOptimize: (id: string) => void;
  /** AI 请求进行中：按钮禁用，避免连点堆起多个请求 */
  aiBusy: boolean;
}) {
  return (
    <View style={styles.card}>
      <View style={styles.sectionTitleRow}>
        <Text style={styles.sectionTitle}>工作经历</Text>
        <View style={styles.sectionActions}>
          <Pressable onPress={onEdit} hitSlop={6}>
            <Text style={styles.editLink}>编辑 &gt;</Text>
          </Pressable>
          <Pressable style={styles.addBtn} onPress={onAdd} hitSlop={6}>
            <Ionicons name="add" size={18} color={colors.primary} />
            <Text style={styles.addText}>添加工作经历</Text>
          </Pressable>
        </View>
      </View>
      {experiences.length === 0 && <Text style={styles.emptyText}>未填写工作经历</Text>}
      {experiences.map((exp) => (
        <Pressable key={exp.id} style={styles.expRow} onPress={() => onItem(exp.id)}>
          <View style={styles.expHeader}>
            <Text style={styles.expCompany}>{exp.company}</Text>
            {/* 离职时结束时间未采集（留空），只展示已采集到的那一端，不补「-」 */}
            {[exp.startDate, exp.endDate].filter(Boolean).length > 0 && (
              <Text style={styles.expDate}>
                {[exp.startDate, exp.endDate].filter(Boolean).join(' - ')}
              </Text>
            )}
          </View>
          {exp.position !== '' && <Text style={styles.expPosition}>{exp.position}</Text>}
          {exp.description !== '' && <Text style={styles.expDesc}>{exp.description}</Text>}
          {!exp.aiOptimized && (
            <View style={styles.aiTip}>
              <Ionicons name="sparkles" size={14} color={colors.info} />
              <Text style={styles.aiTipText}>AI 建议优化</Text>
              <Pressable
                style={styles.aiOptimizeMiniBtn}
                onPress={() => onOptimize(exp.id)}
                disabled={aiBusy}
                accessibilityLabel={`AI 优化 ${exp.company} 的工作内容`}
              >
                <Text style={styles.aiOptimizeMiniText}>AI 优化</Text>
              </Pressable>
            </View>
          )}
        </Pressable>
      ))}
    </View>
  );
}

/* ===================== 子组件：项目经历 ===================== */

function ProjectCard({
  projects,
  onAdd,
  onEdit,
  onItem,
}: {
  projects: ResumeProject[];
  onAdd: () => void;
  onEdit: () => void;
  onItem: (id: string) => void;
}) {
  return (
    <View style={styles.card}>
      <View style={styles.sectionTitleRow}>
        <Text style={styles.sectionTitle}>项目经历</Text>
        <View style={styles.sectionActions}>
          <Pressable onPress={onEdit} hitSlop={6}>
            <Text style={styles.editLink}>编辑 &gt;</Text>
          </Pressable>
          <Pressable style={styles.addBtn} onPress={onAdd} hitSlop={6}>
            <Ionicons name="add" size={18} color={colors.primary} />
            <Text style={styles.addText}>添加项目经历</Text>
          </Pressable>
        </View>
      </View>
      {projects.length === 0 && <Text style={styles.emptyText}>未填写项目经历</Text>}
      {projects.map((proj) => (
        <Pressable key={proj.id} style={styles.projRow} onPress={() => onItem(proj.id)}>
          <View style={styles.expHeader}>
            <Text style={styles.expCompany}>{proj.name}</Text>
            <Text style={styles.expPosition}>{proj.role}</Text>
          </View>
          <Text style={styles.expDesc}>{proj.description}</Text>
          {proj.aiOptimized && (
            <View style={styles.optimizedTag}>
              <Ionicons name="checkmark-circle" size={14} color={colors.success} />
              <Text style={styles.optimizedText}>已量化</Text>
            </View>
          )}
        </Pressable>
      ))}
    </View>
  );
}

/* ===================== 子组件：技能特长 ===================== */

function SkillsCard({ skills, onEdit }: { skills: ResumeType['skills']; onEdit: () => void }) {
  return (
    <View style={styles.card}>
      <View style={styles.sectionTitleRow}>
        <Text style={styles.sectionTitle}>技能特长</Text>
        <Pressable style={styles.addBtn} onPress={onEdit} hitSlop={6}>
          <Ionicons name="add" size={18} color={colors.primary} />
          <Text style={styles.addText}>添加技能</Text>
        </Pressable>
      </View>
      <View style={styles.skillsWrap}>
        {skills.length === 0 && <Text style={styles.emptyText}>未填写技能特长</Text>}
        {skills.map((skill) => (
          <View key={skill.name} style={styles.skillTag}>
            <Text style={styles.skillText}>{skill.name}</Text>
          </View>
        ))}
      </View>
    </View>
  );
}

/* ===================== 子组件：技能编辑弹窗 ===================== */
/*
 * 技能只有「名词」一个字段，为它单开一个路由不划算，就地弹层编辑：
 * 已添加的标签点 × 即时删除，输入框 +「添加」追加。
 * 去重的权威规则在 API 层（`saveResumeSkills`），这里只做即时门槛让按钮状态诚实。
 */
function SkillsModal({
  visible,
  skills,
  draft,
  onDraftChange,
  onClose,
  onAdd,
  onRemove,
  saving,
}: {
  visible: boolean;
  skills: ResumeType['skills'];
  /** 草稿由页面持有（与 `SaveSheet` 同款）：关掉再打开时页面已经把它清掉了，弹层不必自己同步 */
  draft: string;
  onDraftChange: (v: string) => void;
  onClose: () => void;
  onAdd: (name: string) => void;
  onRemove: (name: string) => void;
  saving: boolean;
}) {
  const name = draft.trim();
  const duplicated = name !== '' && skills.some((s) => s.name === name);
  const canAdd = name !== '' && !duplicated && !saving;

  return (
    <Modal transparent visible={visible} animationType="slide" onRequestClose={onClose}>
      {/* 内层 Pressable 吞掉冒泡：点内容区不该关闭弹层 */}
      <Pressable style={styles.modalMask} onPress={onClose}>
        {/* affordance-ok：吞冒泡，点弹层内容区不关闭 */}
        <Pressable style={styles.modalSheet} onPress={() => {}}>
          <View style={styles.modalHeader}>
            <Text style={styles.modalTitle}>编辑技能</Text>
            <Pressable onPress={onClose} hitSlop={8} accessibilityLabel="关闭">
              <Ionicons name="close" size={22} color={colors.textSecondary} />
            </Pressable>
          </View>

          <ScrollView style={styles.modalBody} showsVerticalScrollIndicator={false}>
            <Text style={styles.modalLabel}>已添加（点 × 删除）</Text>
            {skills.length === 0 ? (
              <Text style={styles.emptyText}>还没有添加技能</Text>
            ) : (
              <View style={styles.skillsWrap}>
                {skills.map((skill) => (
                  <Pressable
                    key={skill.name}
                    style={[styles.skillTag, styles.skillTagEditable]}
                    onPress={() => onRemove(skill.name)}
                    disabled={saving}
                    accessibilityLabel={`删除技能 ${skill.name}`}
                  >
                    <Text style={styles.skillText}>{skill.name}</Text>
                    <Ionicons name="close" size={14} color={colors.textSecondary} />
                  </Pressable>
                ))}
              </View>
            )}
          </ScrollView>

          <View style={styles.modalInputRow}>
            <TextInput
              style={styles.modalInput}
              value={draft}
              onChangeText={onDraftChange}
              placeholder="如：TypeScript"
              placeholderTextColor={colors.textHint}
              maxLength={20}
              onSubmitEditing={() => canAdd && onAdd(name)}
              returnKeyType="done"
            />
            <Pressable
              style={[styles.modalAddBtn, !canAdd && styles.modalAddBtnDisabled]}
              onPress={() => onAdd(name)}
              disabled={!canAdd}
            >
              <Text style={styles.modalAddText}>添加</Text>
            </Pressable>
          </View>
          {duplicated && <Text style={styles.modalError}>已添加过该技能</Text>}
        </Pressable>
      </Pressable>
    </Modal>
  );
}

/* ===================== 子组件：自我评价编辑弹窗 ===================== */

function EvaluationModal({
  visible,
  draft,
  onDraftChange,
  onClose,
  onSave,
  saving,
}: {
  visible: boolean;
  draft: string;
  onDraftChange: (v: string) => void;
  onClose: () => void;
  onSave: () => void;
  saving: boolean;
}) {
  return (
    <Modal transparent visible={visible} animationType="slide" onRequestClose={onClose}>
      <Pressable style={styles.modalMask} onPress={onClose}>
        {/* affordance-ok：吞冒泡，点弹层内容区不关闭 */}
        <Pressable style={styles.modalSheet} onPress={() => {}}>
          <View style={styles.modalHeader}>
            <Text style={styles.modalTitle}>编辑自我评价</Text>
            <Pressable onPress={onClose} hitSlop={8} accessibilityLabel="关闭">
              <Ionicons name="close" size={22} color={colors.textSecondary} />
            </Pressable>
          </View>

          <TextInput
            style={styles.evalInput}
            value={draft}
            onChangeText={onDraftChange}
            placeholder="用几句话说明你的经验、优势与求职期望"
            placeholderTextColor={colors.textHint}
            multiline
            maxLength={RESUME_EVAL_MAX_LENGTH}
            autoFocus
          />
          <Text style={styles.evalCounter}>
            {draft.length}/{RESUME_EVAL_MAX_LENGTH}
          </Text>

          <View style={styles.modalFooter}>
            <Pressable style={styles.modalCancelBtn} onPress={onClose} hitSlop={6}>
              <Text style={styles.modalCancelText}>取消</Text>
            </Pressable>
            <Pressable
              style={[styles.modalSaveBtn, saving && styles.modalSaveBtnDisabled]}
              onPress={onSave}
              disabled={saving}
            >
              <Text style={styles.modalSaveText}>{saving ? '保存中…' : '保存'}</Text>
            </Pressable>
          </View>
        </Pressable>
      </Pressable>
    </Modal>
  );
}

/* ===================== 子组件：自我评价 ===================== */

function EvaluationCard({
  content,
  onEdit,
  onPolish,
  polishing,
}: {
  content: string;
  onEdit: () => void;
  onPolish: () => void;
  polishing: boolean;
}) {
  return (
    <View style={styles.card}>
      <View style={styles.sectionTitleRow}>
        <Text style={styles.sectionTitle}>自我评价</Text>
        <View style={styles.sectionActions}>
          <Pressable onPress={onEdit} hitSlop={6}>
            <Text style={styles.editLink}>{content === '' ? '去填写' : '编辑'} &gt;</Text>
          </Pressable>
          <Pressable
            style={styles.aiOptimizeMiniBtn}
            onPress={onPolish}
            disabled={polishing}
            accessibilityLabel="AI 润色自我评价"
          >
            <Text style={styles.aiOptimizeMiniText}>AI 润色</Text>
          </Pressable>
        </View>
      </View>
      {content === '' ? (
        <Text style={styles.emptyText}>未填写自我评价</Text>
      ) : (
        <Text style={styles.evalText}>{content}</Text>
      )}
    </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="document-text-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 ResumeScreen() {
  const router = useRouter();
  const {
    resume,
    savedAt,
    loading,
    error,
    refresh,
    saving,
    optimize,
    save,
    saveSelfEvaluation,
    saveSkills,
    optimizeExperience,
    polishSelfEvaluation,
  } = useResume();

  /**
   * 「AI 一键优化」只留下评分——它返回的正文与当前简历一致（mock 阶段不改写用户内容，
   * 见 `optimizeResume`），把整份结果塞进 state 会让此后每一次编辑都显示旧数据。
   */
  const [optimizedScore, setOptimizedScore] = useState<ResumeType['score'] | null>(null);
  const [optimizing, setOptimizing] = useState(false);
  /** AI 单点动作进行中：按钮禁用，避免连点堆请求 */
  const [aiBusy, setAiBusy] = useState(false);

  const [skillsModal, setSkillsModal] = useState(false);
  const [skillDraft, setSkillDraft] = useState('');
  const [evalModal, setEvalModal] = useState(false);
  const [evalDraft, setEvalDraft] = useState('');

  // 简历永远取自 storage（唯一真相源），会话内的优化只覆盖评分那一块
  const displayResume = resume === null ? null : { ...resume, score: optimizedScore ?? resume.score };

  // 从编辑页返回时重新取数：各编辑页写入的是覆盖层，不刷新就显示旧值
  // （useAsyncData 只在挂载时取数）
  useFocusEffect(
    useCallback(() => {
      refresh();
    }, [refresh]),
  );

  const handleOptimize = async () => {
    if (optimizing) return;
    setOptimizing(true);
    try {
      const optimized = await optimize();
      setOptimizedScore(optimized.score);
    } finally {
      setOptimizing(false);
    }
  };

  const handleSave = async () => {
    if (displayResume === null || saving) return;
    try {
      const { savedAt: at } = await save(displayResume);
      Alert.alert('已保存到本机', `保存时间 ${formatDateTime(at)}`);
    } catch {
      Alert.alert('保存失败', '请稍后重试');
    }
  };

  /* ---------- AI 动作：能力未接入时只如实说明，不动简历 ---------- */

  const runAIAction = async (action: () => Promise<{ message: string }>) => {
    if (aiBusy) return;
    setAiBusy(true);
    try {
      const result = await action();
      Alert.alert('暂未开放', result.message);
    } finally {
      setAiBusy(false);
    }
  };

  /* ---------- 技能：删除即时落盘，添加是一次写入 ---------- */

  const skills = displayResume?.skills ?? [];

  const handleAddSkill = async (name: string) => {
    if (saving) return;
    await saveSkills([...skills, { name }]);
    setSkillDraft('');
  };

  const handleRemoveSkill = (name: string) => {
    if (saving) return;
    void saveSkills(skills.filter((s) => s.name !== name));
  };

  /* ---------- 自我评价 ---------- */

  const openEvalModal = () => {
    setEvalDraft(displayResume?.selfEvaluation.content ?? '');
    setEvalModal(true);
  };

  const handleSaveEvaluation = async () => {
    if (saving) return;
    await saveSelfEvaluation(evalDraft);
    setEvalModal(false);
  };

  /*
   * 只在「还没有任何数据」时显示加载态。
   * 本页每次获得焦点都会 refresh（编辑页可能写过覆盖层），
   * 若按 `loading` 直接渲染骨架屏，从编辑页返回时会整页白闪一次 —— 刚改完的内容，
   * 用户看到的却是一次全屏加载。
   */
  if (loading && displayResume === null) {
    return (
      <SafeAreaView style={styles.container} edges={['top']}>
        <Header onBack={() => router.back()} onExport={() => router.push('/resume/export')} />
        <Loading />
      </SafeAreaView>
    );
  }

  if (error !== null || displayResume === null) {
    return (
      <SafeAreaView style={styles.container} edges={['top']}>
        <Header onBack={() => router.back()} onExport={() => router.push('/resume/export')} />
        <ErrorState onRetry={refresh} />
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      <Header
        onBack={() => router.back()}
        onSave={handleSave}
        onExport={() => router.push('/resume/export')}
        onVersions={() => router.push('/resume-versions')}
      />
      <ScrollView contentContainerStyle={styles.body} showsVerticalScrollIndicator={false}>
        <ScoreCard
          score={displayResume.score.score}
          maxScore={displayResume.score.maxScore}
          onOptimize={handleOptimize}
          optimizing={optimizing}
        />
        {/* 「保存」不是装饰：这里要如实显示存到了什么时候，否则用户不知道头部那个图标干了什么 */}
        {savedAt !== '' && <Text style={styles.savedAt}>上次保存：{formatDateTime(savedAt)}</Text>}
        <OptimizeCard
          points={displayResume.score.optimizePoints}
          onOptimizeAll={handleOptimize}
          optimizing={optimizing}
        />
        <BasicInfoCard info={displayResume.basicInfo} onEdit={() => router.push('/resume/basic')} />
        <JobIntentionCard intention={displayResume.jobIntention} />
        <EducationCard
          education={displayResume.education}
          onAdd={() => router.push('/resume/education?new=1')}
          onEdit={() => router.push('/resume/education')}
          onItem={(id) => router.push('/resume/education?id=' + id)}
        />
        <ExperienceCard
          experiences={displayResume.experience}
          onAdd={() => router.push('/resume/experience?new=1')}
          onEdit={() => router.push('/resume/experience')}
          onItem={(id) => router.push('/resume/experience?id=' + id)}
          onOptimize={(id) => void runAIAction(() => optimizeExperience(id))}
          aiBusy={aiBusy}
        />
        <ProjectCard
          projects={displayResume.projects}
          onAdd={() => router.push('/resume/project?new=1')}
          onEdit={() => router.push('/resume/project')}
          onItem={(id) => router.push('/resume/project?id=' + id)}
        />
        <SkillsCard skills={displayResume.skills} onEdit={() => setSkillsModal(true)} />
        <EvaluationCard
          content={displayResume.selfEvaluation.content}
          onEdit={openEvalModal}
          onPolish={() => void runAIAction(() => polishSelfEvaluation(displayResume.selfEvaluation.content))}
          polishing={aiBusy}
        />
      </ScrollView>

      <View style={styles.footer}>
        <Pressable
          style={styles.previewBtn}
          onPress={() => router.push('/resume/preview')}
          hitSlop={6}
        >
          <Text style={styles.previewBtnText}>预览</Text>
        </Pressable>
        <Pressable
          style={[styles.optimizeFooterBtn, optimizing && styles.optimizeBtnDisabled]}
          onPress={handleOptimize}
          disabled={optimizing}
        >
          {optimizing ? (
            <ActivityIndicator size="small" color={colors.white} />
          ) : (
            <Text style={styles.optimizeFooterBtnText}>AI 一键优化</Text>
          )}
        </Pressable>
      </View>

      <SkillsModal
        visible={skillsModal}
        skills={displayResume.skills}
        draft={skillDraft}
        onDraftChange={setSkillDraft}
        onClose={() => {
          setSkillDraft('');
          setSkillsModal(false);
        }}
        onAdd={(name) => void handleAddSkill(name)}
        onRemove={handleRemoveSkill}
        saving={saving}
      />
      <EvaluationModal
        visible={evalModal}
        draft={evalDraft}
        onDraftChange={setEvalDraft}
        onClose={() => setEvalModal(false)}
        onSave={() => void handleSaveEvaluation()}
        saving={saving}
      />
    </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 },
  headerActions: { flexDirection: 'row', gap: 4 },
  headerActionBtn: { width: 36, alignItems: 'center' },
  body: { padding: spacing.card, paddingBottom: 100 },
  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 },
  card: {
    backgroundColor: colors.white,
    borderRadius: spacing.card,
    padding: spacing.card,
    marginBottom: 8,
    borderWidth: 1,
    borderColor: colors.borderLight,
  },
  scoreCard: {
    backgroundColor: colors.white,
    borderRadius: spacing.card,
    padding: spacing.card,
    marginBottom: 8,
    borderWidth: 1,
    borderColor: colors.borderLight,
  },
  scoreRow: { flexDirection: 'row', alignItems: 'center' },
  scoreLabel: { fontSize: 13, color: colors.textSecondary },
  scoreValueRow: { flexDirection: 'row', alignItems: 'baseline', marginTop: 6 },
  scoreValue: { fontSize: 42, fontWeight: '800', color: colors.textPrimary },
  scoreUnit: { fontSize: 14, color: colors.textSecondary, marginLeft: 4 },
  scoreBarWrap: { flex: 1, marginLeft: 20 },
  scoreTrack: {
    height: 10,
    borderRadius: 5,
    backgroundColor: colors.borderLight,
    overflow: 'hidden',
  },
  scoreFill: { height: 10, borderRadius: 5, backgroundColor: colors.primary },
  optimizeBtn: {
    marginTop: 12,
    alignSelf: 'flex-end',
    backgroundColor: colors.primaryBtn,
    borderRadius: 16,
    paddingHorizontal: 18,
    paddingVertical: spacing.card,
  },
  optimizeBtnDisabled: { backgroundColor: colors.textDisabled },
  optimizeBtnText: { fontSize: 14, fontWeight: '700', color: colors.white },
  cardHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
  cardHeaderTitle: { fontSize: 15, fontWeight: '700', color: colors.textPrimary, marginLeft: 8 },
  optRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 10,
    borderTopWidth: 1,
    borderTopColor: colors.borderLight,
  },
  optTitle: { flex: 1, fontSize: 14, color: colors.textPrimary, marginLeft: 10 },
  optTitleDone: { textDecorationLine: 'line-through', color: colors.textHint },
  optScore: { fontSize: 13, color: colors.successText, fontWeight: '600' },
  optScoreDone: { color: colors.textHint },
  optAllBtn: {
    marginTop: 12,
    backgroundColor: colors.primaryLight,
    borderRadius: 12,
    paddingVertical: 12,
    alignItems: 'center',
  },
  optAllText: { fontSize: 14, fontWeight: '700', color: colors.primaryText },
  optAllBtnDisabled: { opacity: 0.7 },
  sectionTitleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 14,
  },
  sectionTitle: { fontSize: 16, fontWeight: '700', color: colors.textPrimary },
  sectionActions: { flexDirection: 'row', alignItems: 'center', gap: 14 },
  editLink: { fontSize: 13, color: colors.primary },
  /** 「上次保存」那行：只在真的保存过之后出现 */
  savedAt: { fontSize: 12, color: colors.textHint, marginBottom: 12, marginTop: -4 },
  basicRow: { flexDirection: 'row', alignItems: 'center' },
  avatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: colors.primary,
    alignItems: 'center',
    justifyContent: 'center',
  },
  avatarText: { fontSize: 24, fontWeight: '700', color: colors.white },
  basicBody: { marginLeft: 14, flex: 1 },
  nameRow: { flexDirection: 'row', alignItems: 'center' },
  name: { fontSize: 18, fontWeight: '700', color: colors.textPrimary },
  contactRow: { flexDirection: 'row', alignItems: 'center', marginTop: 6 },
  contactText: { fontSize: 13, color: colors.textSecondary, marginLeft: 6 },
  intentionGrid: { flexDirection: 'row', flexWrap: 'wrap' },
  intentionItem: { width: '50%', marginBottom: 14 },
  intentionLabel: { fontSize: 12, color: colors.textHint, marginBottom: 4 },
  intentionValue: { fontSize: 14, fontWeight: '700', color: colors.textPrimary },
  intentionTag: {
    alignSelf: 'flex-start',
    backgroundColor: colors.successLight,
    borderRadius: 10,
    paddingHorizontal: spacing.card,
    paddingVertical: 2,
  },
  intentionTagText: { fontSize: 12, color: colors.successText, fontWeight: '600' },
  addBtn: { flexDirection: 'row', alignItems: 'center' },
  addText: { fontSize: 13, color: colors.primary, marginLeft: 2 },
  eduRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 10,
    borderTopWidth: 1,
    borderTopColor: colors.borderLight,
  },
  eduSchool: { fontSize: 15, fontWeight: '700', color: colors.textPrimary },
  eduMajor: { fontSize: 13, color: colors.textSecondary, marginTop: 2 },
  eduYear: { fontSize: 13, color: colors.textHint },
  expRow: { paddingVertical: 12, borderTopWidth: 1, borderTopColor: colors.borderLight },
  expHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  expCompany: { fontSize: 15, fontWeight: '700', color: colors.textPrimary },
  expDate: { fontSize: 12, color: colors.textHint },
  expPosition: { fontSize: 13, color: colors.textSecondary, marginTop: 2 },
  expDesc: { fontSize: 13, color: colors.textSecondary, marginTop: 8, lineHeight: 20 },
  aiTip: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 8,
    backgroundColor: colors.infoLight,
    borderRadius: spacing.card,
    paddingHorizontal: spacing.card,
    paddingVertical: spacing.card,
  },
  aiTipText: { flex: 1, fontSize: 12, color: colors.infoText, marginLeft: 6 },
  aiOptimizeMiniBtn: {
    backgroundColor: colors.info,
    borderRadius: 10,
    paddingHorizontal: 10,
    paddingVertical: 4,
  },
  aiOptimizeMiniText: { fontSize: 12, fontWeight: '600', color: colors.white },
  optimizedTag: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'flex-start',
    marginTop: 8,
    backgroundColor: colors.successLight,
    borderRadius: 10,
    paddingHorizontal: spacing.card,
    paddingVertical: 2,
  },
  optimizedText: { fontSize: 12, color: colors.successText, marginLeft: 4 },
  projRow: { paddingVertical: 12, borderTopWidth: 1, borderTopColor: colors.borderLight },
  skillsWrap: { flexDirection: 'row', flexWrap: 'wrap', gap: 10 },
  skillTag: {
    backgroundColor: colors.pageBg,
    borderRadius: 12,
    paddingHorizontal: 12,
    paddingVertical: 6,
  },
  /** 弹层里的标签可点删除：补一个 × 图标，光靠「可点击」没有视觉线索 */
  skillTagEditable: { flexDirection: 'row', alignItems: 'center', gap: 6 },
  skillText: { fontSize: 13, color: colors.textPrimary },
  evalText: { fontSize: 13, color: colors.textSecondary, lineHeight: 22 },
  /** 引导未采集该板块时的空态文案（不伪装成已填写） */
  emptyText: { fontSize: 13, color: colors.textHint, marginTop: 4 },
  footer: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    flexDirection: 'row',
    paddingHorizontal: spacing.framework,
    paddingVertical: 12,
    backgroundColor: colors.white,
    borderTopWidth: 1,
    borderTopColor: colors.borderLight,
  },
  previewBtn: {
    flex: 1,
    backgroundColor: colors.white,
    borderRadius: 24,
    paddingVertical: 14,
    alignItems: 'center',
    borderWidth: 1,
    borderColor: colors.border,
    marginRight: 12,
  },
  previewBtnText: { fontSize: 15, fontWeight: '700', color: colors.textPrimary },
  optimizeFooterBtn: {
    flex: 2,
    backgroundColor: colors.primaryBtn,
    borderRadius: 24,
    paddingVertical: 14,
    alignItems: 'center',
  },
  optimizeFooterBtnText: { fontSize: 15, fontWeight: '700', color: colors.white },
  /* ---------- 技能 / 自我评价弹层 ---------- */
  modalMask: { flex: 1, justifyContent: 'flex-end', backgroundColor: colors.scrim },
  modalSheet: {
    backgroundColor: colors.white,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    paddingHorizontal: 20,
    paddingTop: 16,
    paddingBottom: 28,
    maxHeight: '80%',
  },
  modalHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 14,
  },
  modalTitle: { fontSize: 17, fontWeight: '700', color: colors.textPrimary },
  modalBody: { maxHeight: 180 },
  modalLabel: { fontSize: 13, color: colors.textHint, marginBottom: 10 },
  modalInputRow: { flexDirection: 'row', alignItems: 'center', gap: 10, marginTop: 16 },
  modalInput: {
    flex: 1,
    height: 46,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: colors.border,
    paddingHorizontal: 14,
    fontSize: 15,
    color: colors.textPrimary,
  },
  modalAddBtn: {
    backgroundColor: colors.primaryBtn,
    borderRadius: 12,
    paddingHorizontal: 18,
    paddingVertical: 13,
  },
  modalAddBtnDisabled: { backgroundColor: colors.border },
  modalAddText: { fontSize: 14, fontWeight: '700', color: colors.white },
  modalError: { fontSize: 12, color: colors.dangerText, marginTop: 8 },
  evalInput: {
    height: 140,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: colors.border,
    paddingHorizontal: 14,
    paddingTop: 12,
    fontSize: 15,
    lineHeight: 22,
    color: colors.textPrimary,
    textAlignVertical: 'top',
  },
  evalCounter: { fontSize: 12, color: colors.textHint, textAlign: 'right', marginTop: 6 },
  modalFooter: { flexDirection: 'row', gap: 12, marginTop: 18 },
  modalCancelBtn: {
    flex: 1,
    borderRadius: 24,
    paddingVertical: 14,
    alignItems: 'center',
    borderWidth: 1,
    borderColor: colors.border,
  },
  modalCancelText: { fontSize: 15, fontWeight: '700', color: colors.textSecondary },
  modalSaveBtn: {
    flex: 2,
    backgroundColor: colors.primaryBtn,
    borderRadius: 24,
    paddingVertical: 14,
    alignItems: 'center',
  },
  modalSaveBtnDisabled: { backgroundColor: colors.textDisabled },
  modalSaveText: { fontSize: 15, fontWeight: '700', color: colors.white },
});