import { View, Text, Pressable, ActivityIndicator } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

type Props = {
  remainingFormatted: string;  // "23:59:42"
  onCancel: () => Promise<void>;
};

export function CooldownBanner({ remainingFormatted, onCancel }: Props) {
  const { t } = useTranslation();
  const [cancelling, setCancelling] = useState(false);

  async function handleCancel() {
    setCancelling(true);
    try {
      await onCancel();
    } finally {
      setCancelling(false);
    }
  }

  return (
    <View
      style={{
        backgroundColor: '#fef3c7',
        borderWidth: 1,
        borderColor: '#fcd34d',
        borderRadius: 14,
        padding: 12,
        flexDirection: 'row',
        alignItems: 'center',
        gap: 12,
      }}
    >
      <Ionicons name="time-outline" size={20} color="#d97706" />
      <View style={{ flex: 1 }}>
        <Text style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: '#92400e' }}>
          {t('blocker.cooldown_banner_title')}
        </Text>
        <Text
          style={{
            fontSize: 18,
            fontFamily: 'Nunito_700Bold',
            color: '#92400e',
            fontVariant: ['tabular-nums'],
          }}
        >
          {remainingFormatted}
        </Text>
      </View>
      <Pressable
        onPress={handleCancel}
        disabled={cancelling}
        hitSlop={8}
        style={({ pressed }) => ({
          paddingHorizontal: 12,
          paddingVertical: 8,
          borderRadius: 12,
          backgroundColor: '#16a34a',
          opacity: pressed || cancelling ? 0.7 : 1,
        })}
      >
        {cancelling ? (
          <ActivityIndicator size="small" color="#fff" />
        ) : (
          <Text style={{ fontSize: 12, fontFamily: 'Nunito_600SemiBold', color: '#fff' }}>
            {t('common.cancel')}
          </Text>
        )}
      </Pressable>
    </View>
  );
}