import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { useCallback, useState } from 'react';
import {
  ActivityIndicator,
  Alert,
  KeyboardAvoidingView,
  Modal,
  Platform,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useResumeVersions } from '../src/hooks';
import { colors, spacing } from '../src/theme';
import type { ResumeVersion } from '../src/types';
import { formatBytes, formatDateTime } from '../src/utils';

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

function Header({
  onBack,
  onNew,
}: {
  onBack: () => void;
  onNew: () => 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.headerActionBtn} onPress={onNew} hitSlop={8}>
        <Ionicons name="add" size={22} color={colors.primary} />
      </Pressable>
    </View>
  );
}

/* ===================== 子组件：版本卡 ===================== */

function VersionCard({
  version,
  onSetDefault,
  onExport,
  onDelete,
}: {
  version: ResumeVersion;
  onSetDefault: () => void;
  onExport: () => void;
  onDelete: () => void;
}) {
  return (
    <View style={[styles.card, version.isDefault && styles.cardDefault]}>
      <View style={styles.cardTop}>
        <View style={styles.cardTitleWrap}>
          <Text style={styles.cardTitle} numberOfLines={1}>
            {version.name}
          </Text>
          {version.isDefault && (
            <View style={styles.defaultBadge}>
              <Text style={styles.defaultBadgeText}>默认</Text>
            </View>
          )}
        </View>
        <Text style={styles.cardVersion}>v{version.versionNo}</Text>
      </View>

      <Text style={styles.cardMeta}>
        {version.fileName} · {formatBytes(version.fileSize)}
      </Text>
      <Text style={styles.cardTime}>
        更新于 {formatDateTime(version.updatedAt)}
      </Text>

      <View style={styles.cardActions}>
        {!version.isDefault && (
          <Pressable style={styles.actionBtn} onPress={onSetDefault}>
            <Ionicons name="star-outline" size={16} color={colors.primary} />
            <Text style={[styles.actionText, { color: colors.primary }]}>设为默认</Text>
          </Pressable>
        )}
        <Pressable style={styles.actionBtn} onPress={onExport}>
          <Ionicons name="download-outline" size={16} color={colors.textSecondary} />
          <Text style={styles.actionText}>导出</Text>
        </Pressable>
        {!version.isDefault && (
          <Pressable style={styles.actionBtn} onPress={onDelete}>
            <Ionicons name="trash-outline" size={16} color={colors.danger} />
            <Text style={[styles.actionText, { color: colors.danger }]}>删除</Text>
          </Pressable>
        )}
      </View>
    </View>
  );
}

/* ===================== 子组件：新建版本弹窗 ===================== */

function NewVersionModal({
  visible,
  onClose,
  onCreate,
}: {
  visible: boolean;
  onClose: () => void;
  onCreate: (name: string) => void;
}) {
  const [name, setName] = useState('');

  const handleConfirm = () => {
    onCreate(name.trim());
    setName('');
  };

  return (
    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
      <View style={styles.modalMask}>
        <KeyboardAvoidingView
          style={styles.modalSheet}
          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
        >
          <Text style={styles.modalTitle}>新建简历版本</Text>
          <TextInput
            style={styles.modalInput}
            placeholder="版本名（可空，默认按序号命名）"
            placeholderTextColor={colors.textHint}
            value={name}
            onChangeText={setName}
            maxLength={30}
          />
          {/* affordance-pending-backend：真实文件上传需后端 multipart 接口，当前以占位文件创建 */}
          <Text style={styles.modalHint}>文件上传需后端支持，当前以占位文件创建版本</Text>
          <View style={styles.modalActions}>
            <Pressable style={styles.modalCancel} onPress={onClose}>
              <Text style={styles.modalCancelText}>取消</Text>
            </Pressable>
            <Pressable style={styles.modalConfirm} onPress={handleConfirm}>
              <Text style={styles.modalConfirmText}>创建</Text>
            </Pressable>
          </View>
        </KeyboardAvoidingView>
      </View>
    </Modal>
  );
}

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

export default function ResumeVersionsScreen() {
  const router = useRouter();
  const { versions, loading, error, refresh, busy, create, setDefault, remove, exportAndPoll } =
    useResumeVersions();
  const [newVisible, setNewVisible] = useState(false);

  const handleNew = useCallback(
    (name: string) => {
      setNewVisible(false);
      void create({
        name: name || undefined,
        fileName: `${name || '简历'}版本.pdf`,
        fileSize: 200_000,
      });
    },
    [create],
  );

  const handleSetDefault = useCallback(
    (id: string, name: string) => {
      Alert.alert('设为默认', `将「${name}」设为默认简历？`, [
        { text: '取消', style: 'cancel' },
        { text: '设为默认', onPress: () => void setDefault(id) },
      ]);
    },
    [setDefault],
  );

  const handleDelete = useCallback(
    (id: string, name: string) => {
      Alert.alert('删除版本', `确定删除「${name}」吗？默认版本需先设其他版本为默认。`, [
        { text: '取消', style: 'cancel' },
        { text: '删除', style: 'destructive', onPress: () => void remove(id) },
      ]);
    },
    [remove],
  );

  const handleExport = useCallback(
    async (id: string, name: string) => {
      const task = await exportAndPoll(id);
      if (!task) {
        Alert.alert('导出失败', '导出任务异常，请稍后重试');
        return;
      }
      if (task.status === 'SUCCESS') {
        Alert.alert('导出完成', `「${name}」已导出${task.outputUrl ? `：${task.outputUrl}` : ''}`);
      } else if (task.status === 'FAILED') {
        Alert.alert('导出失败', task.error || '导出任务失败');
      } else {
        Alert.alert('导出中', '任务仍在处理，请稍后到导出记录查看');
      }
    },
    [exportAndPoll],
  );

  return (
    <SafeAreaView style={styles.safeArea} edges={['top']}>
      <Header onBack={() => router.back()} onNew={() => setNewVisible(true)} />

      {loading ? (
        <View style={styles.stateBox}>
          <ActivityIndicator size="large" color={colors.primary} />
        </View>
      ) : error ? (
        <View style={styles.stateBox}>
          <Text style={styles.stateText}>加载失败</Text>
          <Pressable style={styles.retryBtn} onPress={refresh}>
            <Text style={styles.retryText}>重试</Text>
          </Pressable>
        </View>
      ) : versions.length === 0 ? (
        <View style={styles.stateBox}>
          <Ionicons name="document-outline" size={48} color={colors.textHint} />
          <Text style={styles.stateText}>还没有简历版本</Text>
          <Pressable style={styles.retryBtn} onPress={() => setNewVisible(true)}>
            <Text style={styles.retryText}>新建版本</Text>
          </Pressable>
        </View>
      ) : (
        <ScrollView
          style={styles.scroll}
          contentContainerStyle={styles.scrollContent}
          showsVerticalScrollIndicator={false}
        >
          {versions.map((v) => (
            <VersionCard
              key={v.id}
              version={v}
              onSetDefault={() => handleSetDefault(v.id, v.name)}
              onExport={() => void handleExport(v.id, v.name)}
              onDelete={() => handleDelete(v.id, v.name)}
            />
          ))}
        </ScrollView>
      )}

      {busy && (
        <View style={styles.busyMask}>
          <ActivityIndicator size="small" color={colors.primary} />
        </View>
      )}

      <NewVersionModal
        visible={newVisible}
        onClose={() => setNewVisible(false)}
        onCreate={handleNew}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: colors.pageBg,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: spacing.card,
    height: 52,
    backgroundColor: colors.white,
    borderBottomWidth: 1,
    borderBottomColor: colors.borderLight,
  },
  headerBtn: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerTitle: {
    fontSize: 17,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  headerActionBtn: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  scroll: {
    flex: 1,
  },
  scrollContent: {
    padding: spacing.card,
    paddingBottom: 24,
  },
  card: {
    backgroundColor: colors.white,
    borderRadius: spacing.card,
    padding: spacing.card,
    marginBottom: spacing.card,
  },
  cardDefault: {
    borderWidth: 1,
    borderColor: colors.primary,
  },
  cardTop: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  cardTitleWrap: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
    marginRight: 8,
  },
  cardTitle: {
    fontSize: 15,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  defaultBadge: {
    marginLeft: 8,
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 4,
    backgroundColor: colors.primaryLight,
  },
  defaultBadgeText: {
    fontSize: 11,
    fontWeight: '700',
    color: colors.primary,
  },
  cardVersion: {
    fontSize: 13,
    color: colors.textSecondary,
  },
  cardMeta: {
    marginTop: 6,
    fontSize: 13,
    color: colors.textSecondary,
  },
  cardTime: {
    marginTop: 2,
    fontSize: 12,
    color: colors.textHint,
  },
  cardActions: {
    flexDirection: 'row',
    marginTop: 12,
    paddingTop: 12,
    borderTopWidth: 1,
    borderTopColor: colors.borderLight,
  },
  actionBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 20,
  },
  actionText: {
    marginLeft: 4,
    fontSize: 13,
    color: colors.textSecondary,
  },
  stateBox: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  stateText: {
    marginTop: 12,
    fontSize: 14,
    color: colors.textSecondary,
  },
  retryBtn: {
    marginTop: 16,
    paddingHorizontal: 24,
    paddingVertical: spacing.card,
    borderRadius: 18,
    backgroundColor: colors.primaryBtn,
  },
  retryText: {
    fontSize: 13,
    fontWeight: '600',
    color: colors.white,
  },
  busyMask: {
    ...StyleSheet.absoluteFill,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.scrimLight,
  },
  modalMask: {
    flex: 1,
    backgroundColor: colors.scrim,
    justifyContent: 'flex-end',
  },
  modalSheet: {
    backgroundColor: colors.white,
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    padding: spacing.card,
    paddingBottom: 24,
  },
  modalTitle: {
    fontSize: 16,
    fontWeight: '700',
    color: colors.textPrimary,
    marginBottom: 12,
  },
  modalInput: {
    borderWidth: 1,
    borderColor: colors.borderLight,
    borderRadius: spacing.card,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 14,
    color: colors.textPrimary,
  },
  modalHint: {
    marginTop: 8,
    fontSize: 12,
    color: colors.textHint,
  },
  modalActions: {
    flexDirection: 'row',
    marginTop: 16,
  },
  modalCancel: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 12,
    marginRight: 8,
    borderRadius: spacing.card,
    backgroundColor: colors.pageBg,
  },
  modalCancelText: {
    fontSize: 14,
    color: colors.textSecondary,
  },
  modalConfirm: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 12,
    marginLeft: 8,
    borderRadius: spacing.card,
    backgroundColor: colors.primaryBtn,
  },
  modalConfirmText: {
    fontSize: 14,
    fontWeight: '700',
    color: colors.white,
  },
});