import React, { type ReactNode } from 'react';
import { ActivityIndicator, Pressable, Text, View } from 'react-native';
import { CheckCircle2 } from 'lucide-react-native';

import { conversationStyles } from '../../features/conversation/conversationStyles';
import { themedColor } from '../../theme';
import { toolWidgetStyles } from './toolWidgetStyles';

/**
 * Bordered approval surface — native analog of the web EntityApprovalCard /
 * batch approval container: pending-dot header, content, then Approve on the
 * left and Reject on the right. Button styling reuses the timeline's
 * ToolApprovalCard styles so every approval in the chat looks the same.
 */
export function ApprovalCard({
  approveDisabled,
  approveLabel,
  children,
  error,
  isSubmitting,
  onApprove,
  onReject,
  rejectLabel,
  title,
  unavailableNote,
}: {
  approveDisabled?: boolean;
  approveLabel: string;
  children: ReactNode;
  error?: string | null;
  isSubmitting: boolean;
  onApprove?: () => void;
  onReject?: () => void;
  rejectLabel: string;
  title: string;
  /** Replaces the default no-controls note (e.g. the stale-turn message). */
  unavailableNote?: string;
}) {
  const canAct = Boolean(onApprove && onReject);
  const disablePrimary = !canAct || isSubmitting || Boolean(approveDisabled);

  return (
    <View style={conversationStyles.toolApprovalCard}>
      <View style={toolWidgetStyles.approvalHeader}>
        <View style={toolWidgetStyles.approvalDot} />
        <Text style={conversationStyles.toolApprovalTitle}>{title}</Text>
      </View>
      <View style={toolWidgetStyles.approvalDivider} />

      {children}

      {canAct ? (
        <View style={toolWidgetStyles.approvalActions}>
          <Pressable
            accessibilityRole="button"
            disabled={disablePrimary}
            onPress={onApprove}
            style={[
              conversationStyles.toolApprovalPrimaryButton,
              disablePrimary && conversationStyles.toolApprovalButtonDisabled,
            ]}
          >
            {isSubmitting
              ? <ActivityIndicator color={themedColor('#111111')} size="small" />
              : <CheckCircle2 color={themedColor('#111111')} size={15} strokeWidth={2.5} />}
            <Text style={conversationStyles.toolApprovalPrimaryText}>
              {isSubmitting ? 'Working...' : approveLabel}
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            disabled={isSubmitting}
            onPress={onReject}
            style={[
              conversationStyles.toolApprovalSecondaryButton,
              isSubmitting && conversationStyles.toolApprovalButtonDisabled,
            ]}
          >
            <Text style={conversationStyles.toolApprovalSecondaryText}>{rejectLabel}</Text>
          </Pressable>
        </View>
      ) : (
        <Text style={conversationStyles.toolApprovalPreviousText}>
          {unavailableNote ?? 'Approval controls are not available here.'}
        </Text>
      )}

      {error ? <Text style={conversationStyles.toolApprovalError}>{error}</Text> : null}
    </View>
  );
}