import React from 'react';
import { ActivityIndicator, Modal, Pressable, Text, View } from 'react-native';

import { styles } from '../../styles';

export type AgentAction = {
  key: string;
  label: string;
  icon: React.ReactNode;
  destructive?: boolean;
  onPress: () => void;
};

/** Bottom action sheet listing the actions available for a single agent. */
export function AgentActionsSheet({
  visible,
  title,
  actions,
  onClose,
}: {
  visible: boolean;
  title?: string;
  actions: AgentAction[];
  onClose: () => void;
}) {
  return (
    <Modal animationType="slide" transparent visible={visible} onRequestClose={onClose}>
      <View style={styles.sheetRoot}>
        <Pressable style={styles.sheetBackdrop} onPress={onClose} accessibilityLabel="Dismiss menu" />
        <View style={styles.sheetPanel}>
          <View style={styles.sheetHandle} />
          {title ? <Text style={styles.sheetTitle} numberOfLines={1}>{title}</Text> : null}
          {actions.map((action) => (
            <Pressable
              key={action.key}
              accessibilityRole="button"
              onPress={action.onPress}
              style={({ pressed }) => [styles.sheetAction, pressed && styles.sheetRowPressed]}
            >
              <View style={styles.sheetActionIcon}>{action.icon}</View>
              <Text style={[styles.sheetActionLabel, action.destructive && styles.sheetActionDestructive]}>
                {action.label}
              </Text>
            </Pressable>
          ))}
          <Pressable
            accessibilityRole="button"
            onPress={onClose}
            style={({ pressed }) => [styles.sheetCancel, pressed && styles.sheetRowPressed]}
          >
            <Text style={styles.sheetCancelText}>Cancel</Text>
          </Pressable>
        </View>
      </View>
    </Modal>
  );
}

/** Lightweight confirm dialog (used for destructive actions like delete). */
export function ConfirmDialog({
  visible,
  title,
  message,
  confirmLabel,
  destructive = false,
  isBusy = false,
  onCancel,
  onConfirm,
}: {
  visible: boolean;
  title: string;
  message: string;
  confirmLabel: string;
  destructive?: boolean;
  isBusy?: boolean;
  onCancel: () => void;
  onConfirm: () => void;
}) {
  return (
    <Modal animationType="fade" transparent visible={visible} onRequestClose={onCancel}>
      <View style={styles.confirmBackdrop}>
        <View style={styles.confirmCard}>
          <Text style={styles.confirmTitle}>{title}</Text>
          <Text style={styles.confirmBody}>{message}</Text>
          <View style={styles.confirmButtons}>
            <Pressable
              accessibilityRole="button"
              disabled={isBusy}
              onPress={onCancel}
              style={({ pressed }) => [styles.confirmBtn, styles.confirmBtnCancel, pressed && styles.sheetRowPressed]}
            >
              <Text style={styles.confirmBtnCancelText}>Cancel</Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              disabled={isBusy}
              onPress={onConfirm}
              style={({ pressed }) => [
                styles.confirmBtn,
                destructive ? styles.confirmBtnDanger : styles.confirmBtnPrimary,
                pressed && styles.pressed,
              ]}
            >
              {isBusy ? (
                // Inline white so it stays white on the colored button in both
                // schemes — the themed stylesheet would otherwise remap #FFFFFF.
                <ActivityIndicator color="#FFFFFF" size="small" />
              ) : (
                <Text style={[styles.confirmBtnConfirmText, { color: '#FFFFFF' }]}>{confirmLabel}</Text>
              )}
            </Pressable>
          </View>
        </View>
      </View>
    </Modal>
  );
}