/**
 * VaultScreen 重构使用示例
 *
 * 这个文件展示了如何使用新创建的组件和 hooks 来简化 VaultScreen
 *
 * 使用方法：
 * 1. 将这些代码片段复制到 VaultScreen.tsx 中替换对应的部分
 * 2. 确保导入了所有必要的组件
 */

// ============================================
// 1. 导入新组件和 Hooks
// ============================================

// 在文件顶部添加这些导入
import { VaultButton, LabeledInput, AssetCard } from '@/components/vault';
import { useAddFlow, useMnemonicFlow } from '@/hooks/vault';

// ============================================
// 2. 使用 Hooks 管理状态
// ============================================

export default function VaultScreen() {
  // 原来的代码：
  // const [addStep, setAddStep] = useState(1);
  // const [addMethod, setAddMethod] = useState<'text' | 'file' | 'scan'>('text');
  // const [addVerified, setAddVerified] = useState(false);
  // const [rehearsalConfirmed, setRehearsalConfirmed] = useState(false);
  // const [selectedType, setSelectedType] = useState<VaultAssetType>('custom');
  // const [newLabel, setNewLabel] = useState('');
  // const [treasureContent, setTreasureContent] = useState('');
  // const [accountProvider, setAccountProvider] = useState<'bank' | 'steam' | 'facebook' | 'custom'>('bank');

  // 新代码：使用 useAddFlow hook
  const addFlow = useAddFlow();

  // 原来的代码：
  // const [mnemonicWords, setMnemonicWords] = useState<string[]>([]);
  // const [mnemonicParts, setMnemonicParts] = useState<string[][]>([]);
  // const [mnemonicStep, setMnemonicStep] = useState<1 | 2 | 3 | 4 | 5>(1);
  // const [heirStep, setHeirStep] = useState<'decision' | 'asset' | 'heir' | 'summary'>('decision');
  // const [replaceIndex, setReplaceIndex] = useState<number | null>(null);
  // const [replaceQuery, setReplaceQuery] = useState('');
  // const [progressIndex, setProgressIndex] = useState(0);
  // const [isCapturing, setIsCapturing] = useState(false);

  // 新代码：使用 useMnemonicFlow hook
  const mnemonicFlow = useMnemonicFlow();

  // ... 其他状态保持不变

  // ============================================
  // 3. 更新 resetAddFlow 函数
  // ============================================

  const resetAddFlow = () => {
    // 原来的代码：需要手动重置每个状态
    // setAddStep(1);
    // setAddMethod('text');
    // setAddVerified(false);
    // setRehearsalConfirmed(false);
    // setSelectedType('custom');
    // setNewLabel('');
    // setAccountProvider('bank');

    // 新代码：一行搞定
    addFlow.reset();
  };

  // ============================================
  // 4. 使用 AssetCard 组件渲染资产列表
  // ============================================

  // 原来的代码（在 return 语句中的资产列表部分，第 1089-1159 行）：
  /*
  <ScrollView
    style={styles.assetList}
    showsVerticalScrollIndicator={false}
    contentContainerStyle={styles.assetListContent}
  >
    {assets.map((asset, index) => {
      const config = assetTypeConfig[asset.type];

      if (!assetAnimations.current.has(asset.id)) {
        const anim = new Animated.Value(0);
        assetAnimations.current.set(asset.id, anim);
        Animated.spring(anim, {
          toValue: 1,
          useNativeDriver: true,
          tension: 65,
          friction: 10,
          delay: index * 80,
        }).start();
      }

      const animValue = assetAnimations.current.get(asset.id) || new Animated.Value(1);

      return (
        <Animated.View
          key={asset.id}
          style={{
            opacity: animValue,
            transform: [
              {
                translateY: animValue.interpolate({
                  inputRange: [0, 1],
                  outputRange: [30, 0],
                }),
              },
              {
                scale: animValue.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0.92, 1],
                }),
              },
            ],
          }}
        >
          <TouchableOpacity
            style={styles.assetCard}
            activeOpacity={0.7}
            onPress={() => handleOpenDetail(asset)}
          >
            <View style={styles.assetIconContainer}>
              {renderAssetTypeIcon(config, 24, colors.vault.primary)}
            </View>
            <View style={styles.assetInfo}>
              <Text style={styles.assetType}>{config.label}</Text>
              <Text style={styles.assetLabel}>{asset.label}</Text>
              <View style={styles.assetMetaRow}>
                <Feather name="clock" size={11} color={colors.vault.textSecondary} />
                <Text style={styles.assetMeta}>Sealed {formatDate(asset.createdAt)}</Text>
              </View>
            </View>
            <View style={styles.encryptedBadge}>
              <MaterialCommunityIcons name="lock" size={18} color="#fff" />
            </View>
          </TouchableOpacity>
        </Animated.View>
      );
    })}
    <View style={{ height: 100 }} />
  </ScrollView>
  */

  // 新代码：简洁清晰
  const renderAssetList = () => (
    <ScrollView
      style={styles.assetList}
      showsVerticalScrollIndicator={false}
      contentContainerStyle={styles.assetListContent}
    >
      {assets.map((asset, index) => (
        <AssetCard
          key={asset.id}
          asset={asset}
          index={index}
          onPress={handleOpenDetail}
        />
      ))}
      <View style={{ height: 100 }} />
    </ScrollView>
  );

  // ============================================
  // 5. 使用 VaultButton 组件替换按钮
  // ============================================

  // 原来的代码（解锁按钮，第 1026-1041 行）：
  /*
  <TouchableOpacity
    style={styles.unlockButton}
    onPress={handleUnlock}
    activeOpacity={0.9}
  >
    <LinearGradient
      colors={[colors.vault.primary, colors.vault.secondary]}
      style={styles.unlockButtonGradient}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
    >
      <Ionicons
        name="finger-print"
        size={20}
        color={colors.vault.background}
      />
      <Text style={styles.unlockButtonText}>
        {hasS0 ? 'Captain\'s Verification' : 'Enter Vault'}
      </Text>
    </LinearGradient>
  </TouchableOpacity>
  */

  // 新代码：
  const renderUnlockButton = () => (
    <VaultButton
      variant="primary"
      icon="finger-print"
      onPress={handleUnlock}
      style={styles.unlockButton}
    >
      {hasS0 ? "Captain's Verification" : "Enter Vault"}
    </VaultButton>
  );

  // 原来的代码（添加按钮，第 1162-1180 行）：
  /*
  <TouchableOpacity
    style={styles.addButton}
    onPress={() => {
      resetAddFlow();
      clearAddError();
      setShowAddModal(true);
    }}
    activeOpacity={0.9}
  >
    <LinearGradient
      colors={[colors.vault.primary, colors.vault.secondary]}
      style={styles.addButtonGradient}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 0 }}
    >
      <FontAwesome5 name="plus" size={16} color={colors.vault.background} />
      <Text style={styles.addButtonText}>Add Treasure</Text>
    </LinearGradient>
  </TouchableOpacity>
  */

  // 新代码：
  const renderAddButton = () => (
    <VaultButton
      variant="primary"
      icon="plus"
      onPress={() => {
        resetAddFlow();
        clearAddError();
        setShowAddModal(true);
      }}
      style={styles.addButton}
    >
      Add Treasure
    </VaultButton>
  );

  // ============================================
  // 6. 使用 LabeledInput 组件替换输入框
  // ============================================

  // 在 Add Modal 中（第 1238-1245 行）：
  /*
  <Text style={styles.modalLabel}>TREASURE TITLE</Text>
  <TextInput
    style={styles.input}
    placeholder="e.g., Main wallet mnemonic"
    placeholderTextColor={colors.nautical.sage}
    value={newLabel}
    onChangeText={setNewLabel}
  />
  */

  // 新代码：
  const renderTitleInput = () => (
    <LabeledInput
      label="TREASURE TITLE"
      placeholder="e.g., Main wallet mnemonic"
      value={addFlow.state.label}
      onChangeText={addFlow.setLabel}
    />
  );

  // 在 Add Modal 内容步骤中（第 1305-1315 行）：
  /*
  <Text style={styles.modalLabel}>CONTENT</Text>
  <TextInput
    style={[styles.input, styles.inputMultiline]}
    placeholder="Enter content to seal (plaintext is encrypted locally before upload)"
    placeholderTextColor={colors.nautical.sage}
    value={treasureContent}
    onChangeText={setTreasureContent}
    multiline
    numberOfLines={6}
    textAlignVertical="top"
  />
  */

  // 新代码：
  const renderContentInput = () => (
    <LabeledInput
      label="CONTENT"
      placeholder="Enter content to seal (plaintext is encrypted locally before upload)"
      value={addFlow.state.content}
      onChangeText={addFlow.setContent}
      multiline
    />
  );

  // ============================================
  // 7. 在 Modal 中使用 VaultButton
  // ============================================

  // 原来的模态框按钮代码（第 1428-1481 行）：
  /*
  <View style={styles.modalButtons}>
    <TouchableOpacity
      style={styles.cancelButton}
      onPress={() => {
        if (addStep === 1) {
          setShowAddModal(false);
          setTreasureContent('');
          clearAddError();
        } else {
          setAddStep(addStep - 1);
          clearAddError();
        }
      }}
    >
      <Text style={styles.cancelButtonText}>
        {addStep === 1 ? 'Cancel' : 'Back'}
      </Text>
    </TouchableOpacity>

    {addStep < 3 ? (
      <TouchableOpacity
        style={styles.confirmButton}
        onPress={() => setAddStep(addStep + 1)}
      >
        <LinearGradient
          colors={[colors.nautical.teal, colors.nautical.seafoam]}
          style={styles.confirmButtonGradient}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
        >
          <Text style={styles.confirmButtonText}>Continue</Text>
        </LinearGradient>
      </TouchableOpacity>
    ) : (
      <TouchableOpacity
        style={styles.confirmButton}
        onPress={handleAddAsset}
        activeOpacity={canSeal ? 0.9 : 1}
        disabled={!canSeal}
      >
        <LinearGradient
          colors={[colors.nautical.teal, colors.nautical.seafoam]}
          style={[
            styles.confirmButtonGradient,
            !canSeal && styles.confirmButtonGradientDisabled,
          ]}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
        >
          <MaterialCommunityIcons name="lock" size={18} color="#fff" />
          <Text style={styles.confirmButtonText}>{isSealing ? 'Sealing...' : 'Seal Treasure'}</Text>
        </LinearGradient>
      </TouchableOpacity>
    )}
  </View>
  */

  // 新代码：
  const renderModalButtons = () => {
    const canSeal = addFlow.canProceed();

    return (
      <View style={styles.modalButtons}>
        <VaultButton
          variant="secondary"
          onPress={() => {
            if (addFlow.state.step === 1) {
              setShowAddModal(false);
              addFlow.reset();
              clearAddError();
            } else {
              addFlow.setStep(addFlow.state.step - 1);
              clearAddError();
            }
          }}
          fullWidth
        >
          {addFlow.state.step === 1 ? 'Cancel' : 'Back'}
        </VaultButton>

        {addFlow.state.step < 3 ? (
          <VaultButton
            variant="primary"
            onPress={() => addFlow.setStep(addFlow.state.step + 1)}
            fullWidth
          >
            Continue
          </VaultButton>
        ) : (
          <VaultButton
            variant="primary"
            icon="lock"
            loading={isSealing}
            disabled={!canSeal}
            onPress={handleAddAsset}
            fullWidth
          >
            {isSealing ? 'Sealing...' : 'Seal Treasure'}
          </VaultButton>
        )}
      </View>
    );
  };

  // ============================================
  // 8. 使用 Hook 访问状态的示例
  // ============================================

  // 原来访问状态的方式：
  // if (addStep === 1) { ... }
  // if (mnemonicStep === 3) { ... }
  // setAddStep(2)
  // setMnemonicWords(words)

  // 新的访问方式：
  // if (addFlow.state.step === 1) { ... }
  // if (mnemonicFlow.state.step === 3) { ... }
  // addFlow.setStep(2)
  // mnemonicFlow.setWords(words)

  return (
    // ... 使用上面定义的渲染函数
  );
}

// ============================================
// 9. 可以删除的代码
// ============================================

/*
重构后可以删除以下内容：

1. 大量的状态变量声明（第 111-167 行）
2. assetAnimations ref 和相关逻辑（第 171 行及使用处）
3. 资产卡片的动画代码（已移到 AssetCard 组件）
4. 所有重复的按钮样式定义
5. 所有重复的输入框样式定义

StyleSheet 中可以删除：
- unlockButton, unlockButtonGradient, unlockButtonText
- addButton, addButtonGradient, addButtonText
- assetCard, assetIconContainer, assetInfo, assetType, assetLabel, assetMetaRow, assetMeta, encryptedBadge
- 大部分 modal 相关的样式（已移到 modalStyles.ts）
*/

// ============================================
// 10. 性能优化建议
// ============================================

/*
1. 使用 React.memo 包装 AssetCard 避免不必要的重渲染
2. 使用 useCallback 包装事件处理函数
3. 考虑使用 FlatList 替代 ScrollView（如果资产列表很长）
4. 延迟加载模态框组件（React.lazy）

示例：
const AssetList = React.memo(({ assets, onOpenDetail }) => (
  assets.map((asset, index) => (
    <AssetCard key={asset.id} asset={asset} index={index} onPress={onOpenDetail} />
  ))
));

const handleOpenDetail = useCallback((asset: VaultAsset) => {
  setSelectedAsset(asset);
  setShowDetail(true);
}, []);
*/