import { Ionicons } from '@expo/vector-icons';
import React from 'react';
import { Pressable, Text, View } from 'react-native';

interface ConfirmDialogProps {
  icon?: keyof typeof Ionicons.glyphMap;
  title: string;
  subtitle?: string;
  /** 详情键值对 */
  details?: { label: string; value: string }[];
  cancelText?: string;
  confirmText: string;
  onCancel?: () => void;
  onConfirm?: () => void;
}

/**
 * 确认操作对话框 — 用于放款、转账等需二次确认的场景
 * 标题 + 详情面板 + 双按钮
 */
export function ConfirmDialog({
  icon = 'wallet-outline',
  title,
  subtitle,
  details,
  cancelText = '稍后再说',
  confirmText,
  onCancel,
  onConfirm,
}: ConfirmDialogProps) {
  return (
    <View className="bg-surface-container-lowest border border-outline-variant p-6 rounded-xl">
      {/* 头部 */}
      <View className="flex-row items-start gap-4 mb-6">
        <View className="p-3 bg-tertiary-fixed rounded-xl">
          <Ionicons name={icon} size={24} color="#943700" />
        </View>
        <View className="flex-1">
          <Text className="text-lg font-bold text-on-surface">{title}</Text>
          {subtitle && (
            <Text className="text-on-surface-variant text-sm mt-1">{subtitle}</Text>
          )}
        </View>
      </View>

      {/* 详情面板 */}
      {details && details.length > 0 && (
        <View className="bg-surface-container-low rounded-xl p-4 gap-3 mb-6">
          {details.map((d, i) => (
            <View key={i} className="flex-row justify-between items-center">
              <Text className="text-sm text-on-surface-variant">{d.label}</Text>
              <Text className="font-bold text-base text-on-surface">{d.value}</Text>
            </View>
          ))}
        </View>
      )}

      {/* 按钮组 */}
      <View className="flex-row gap-3">
        <Pressable
          onPress={onCancel}
          className="flex-1 py-4 bg-surface-container-high rounded-xl items-center"
          style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
        >
          <Text className="font-semibold text-on-surface">{cancelText}</Text>
        </Pressable>
        <Pressable
          onPress={onConfirm}
          className="flex-1 py-4 bg-primary rounded-xl items-center"
          style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
        >
          <Text className="font-semibold text-on-primary">{confirmText}</Text>
        </Pressable>
      </View>
    </View>
  );
}
