import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { useState } from 'react';
import {
  ActivityIndicator,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useResume } from '../src/hooks';
import { colors } from '../src/theme';
import type { Resume as ResumeType, ResumeExperience, ResumeOptimizePoint, ResumeProject } from '../src/types';

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

function Header({
  onBack,
  onSave,
  onExport,
}: {
  onBack: () => void;
  onSave: () => void;
  onExport: () => 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}>AI简历优化</Text>
      <View style={styles.headerActions}>
        <Pressable style={styles.headerActionBtn} onPress={onSave} hitSlop={8}>
          <Ionicons name="save-outline" size={20} color={colors.textPrimary} />
        </Pressable>
        <Pressable style={styles.headerActionBtn} onPress={onExport} hitSlop={8}>
          <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,
}: {
  points: ResumeOptimizePoint[];
}) {
  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}>
        <Text style={styles.optAllText}>一键全部优化</Text>
      </Pressable>
    </View>
  );
}

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

function BasicInfoCard({ info }: { info: ResumeType['basicInfo'] }) {
  return (
    <View style={styles.card}>
      <View style={styles.sectionTitleRow}>
        <Text style={styles.sectionTitle}>基本信息</Text>
        <Pressable>
          <Text style={styles.editLink}>编辑基本信息 &gt;</Text>
        </Pressable>
      </View>
      <View style={styles.basicRow}>
        <View style={styles.avatar}>
          <Text style={styles.avatarText}>{info.avatar}</Text>
        </View>
        <View style={styles.basicBody}>
          <View style={styles.nameRow}>
            <Text style={styles.name}>{info.name}</Text>
            <Ionicons name="pencil" size={14} color={colors.primary} />
          </View>
          <View style={styles.contactRow}>
            <Ionicons name="call-outline" size={14} color={colors.textHint} />
            <Text style={styles.contactText}>{info.phone}</Text>
          </View>
          <View style={styles.contactRow}>
            <Ionicons name="mail-outline" size={14} color={colors.textHint} />
            <Text style={styles.contactText}>{info.email}</Text>
          </View>
          <View style={styles.contactRow}>
            <Ionicons name="location-outline" size={14} color={colors.textHint} />
            <Text style={styles.contactText}>{info.location}</Text>
          </View>
        </View>
      </View>
    </View>
  );
}

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

function JobIntentionCard({ intention }: { intention: ResumeType['jobIntention'] }) {
  return (
    <View style={styles.card}>
      <View style={styles.sectionTitleRow}>
        <Text style={styles.sectionTitle}>求职意向</Text>
        <Pressable>
          <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'}
        />
      </View>
    </View>
  );
}

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

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

function EducationCard({ education }: { education: ResumeType['education'] }) {
  return (
    <View style={styles.card}>
      <View style={styles.sectionTitleRow}>
        <Text style={styles.sectionTitle}>教育背景</Text>
        <Pressable style={styles.addBtn}>
          <Ionicons name="add" size={18} color={colors.primary} />
          <Text style={styles.addText}>添加教育经历</Text>
        </Pressable>
      </View>
      {education.map((edu) => (
        <View key={edu.id} style={styles.eduRow}>
          <View>
            <Text style={styles.eduSchool}>{edu.school}</Text>
            <Text style={styles.eduMajor}>
              {edu.major} · {edu.degree}
            </Text>
          </View>
          <Text style={styles.eduYear}>
            {edu.startYear}-{edu.endYear}
          </Text>
        </View>
      ))}
    </View>
  );
}

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

function ExperienceCard({
  experiences,
}: {
  experiences: ResumeExperience[];
}) {
  return (
    <View style={styles.card}>
      <View style={styles.sectionTitleRow}>
        <Text style={styles.sectionTitle}>工作经历</Text>
        <Pressable style={styles.addBtn}>
          <Ionicons name="add" size={18} color={colors.primary} />
          <Text style={styles.addText}>添加工作经历</Text>
        </Pressable>
      </View>
      {experiences.map((exp) => (
        <View key={exp.id} style={styles.expRow}>
          <View style={styles.expHeader}>
            <Text style={styles.expCompany}>{exp.company}</Text>
            <Text style={styles.expDate}>
              {exp.startDate} - {exp.endDate}
            </Text>
          </View>
          <Text style={styles.expPosition}>{exp.position}</Text>
          <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}>
                <Text style={styles.aiOptimizeMiniText}>AI 优化</Text>
              </Pressable>
            </View>
          )}
        </View>
      ))}
    </View>
  );
}

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

function ProjectCard({ projects }: { projects: ResumeProject[] }) {
  return (
    <View style={styles.card}>
      <View style={styles.sectionTitleRow}>
        <Text style={styles.sectionTitle}>项目经历</Text>
        <Pressable style={styles.addBtn}>
          <Ionicons name="add" size={18} color={colors.primary} />
          <Text style={styles.addText}>添加项目经历</Text>
        </Pressable>
      </View>
      {projects.map((proj) => (
        <View key={proj.id} style={styles.projRow}>
          <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>
          )}
        </View>
      ))}
    </View>
  );
}

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

function SkillsCard({ skills }: { skills: ResumeType['skills'] }) {
  return (
    <View style={styles.card}>
      <View style={styles.sectionTitleRow}>
        <Text style={styles.sectionTitle}>技能特长</Text>
        <Pressable style={styles.addBtn}>
          <Ionicons name="add" size={18} color={colors.primary} />
          <Text style={styles.addText}>添加技能</Text>
        </Pressable>
      </View>
      <View style={styles.skillsWrap}>
        {skills.map((skill) => (
          <View key={skill.name} style={styles.skillTag}>
            <Text style={styles.skillText}>{skill.name}</Text>
          </View>
        ))}
      </View>
    </View>
  );
}

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

function EvaluationCard({ content }: { content: string }) {
  return (
    <View style={styles.card}>
      <View style={styles.sectionTitleRow}>
        <Text style={styles.sectionTitle}>自我评价</Text>
        <Pressable style={styles.aiOptimizeMiniBtn}>
          <Text style={styles.aiOptimizeMiniText}>AI 润色</Text>
        </Pressable>
      </View>
      <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, loading, error, refresh, optimize } = useResume();
  const [currentResume, setCurrentResume] = useState<ResumeType | null>(null);
  const [optimizing, setOptimizing] = useState(false);

  const displayResume = currentResume ?? resume;

  const handleOptimize = async () => {
    setOptimizing(true);
    try {
      const optimized = await optimize();
      setCurrentResume(optimized);
    } finally {
      setOptimizing(false);
    }
  };

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

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

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      <Header
        onBack={() => router.back()}
        onSave={() => {}}
        onExport={() => router.push('/resume/export')}
      />
      <ScrollView contentContainerStyle={styles.body} showsVerticalScrollIndicator={false}>
        <ScoreCard
          score={displayResume.score.score}
          maxScore={displayResume.score.maxScore}
          onOptimize={handleOptimize}
          optimizing={optimizing}
        />
        <OptimizeCard points={displayResume.score.optimizePoints} />
        <BasicInfoCard info={displayResume.basicInfo} />
        <JobIntentionCard intention={displayResume.jobIntention} />
        <EducationCard education={displayResume.education} />
        <ExperienceCard experiences={displayResume.experience} />
        <ProjectCard projects={displayResume.projects} />
        <SkillsCard skills={displayResume.skills} />
        <EvaluationCard content={displayResume.selfEvaluation.content} />
      </ScrollView>

      <View style={styles.footer}>
        <Pressable style={styles.previewBtn}>
          <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>
    </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: 16, paddingBottom: 100 },
  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 },
  card: {
    backgroundColor: colors.white,
    borderRadius: 14,
    padding: 16,
    marginBottom: 12,
    borderWidth: 1,
    borderColor: colors.borderLight,
  },
  scoreCard: {
    backgroundColor: colors.white,
    borderRadius: 14,
    padding: 18,
    marginBottom: 12,
    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: 8,
  },
  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 },
  sectionTitleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 14,
  },
  sectionTitle: { fontSize: 16, fontWeight: '700', color: colors.textPrimary },
  editLink: { fontSize: 13, color: colors.primary },
  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: 8,
    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: 10,
    backgroundColor: colors.infoLight,
    borderRadius: 10,
    paddingHorizontal: 10,
    paddingVertical: 6,
  },
  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: 8,
    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,
  },
  skillText: { fontSize: 13, color: colors.textPrimary },
  evalText: { fontSize: 13, color: colors.textSecondary, lineHeight: 22 },
  footer: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    flexDirection: 'row',
    paddingHorizontal: 16,
    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 },
});