rebreak-monorepo/apps/rebreak-native/components/blocker/VipSwapSheet.tsx

import { useState } from 'react';
import { ActivityIndicator, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { Image } from 'expo-image';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { FormSheet } from '../FormSheet';
import { useColors } from '../../lib/theme';
import type { CustomDomain } from '../../hooks/useCustomDomains';

type Props = {
  visible: boolean;
  newDomainId: string;
  candidates: CustomDomain[];
  onClose: () => void;
  onSwap: (newDomainId: string, evictedDomainId: string) => Promise<{ ok: boolean; error?: string }>;
};

function isVipEligible(d: CustomDomain): boolean {
  if (d.type !== 'web') return false;
  if (d.status === 'rejected') return false;
  const now = Date.now();
  if (d.vipDeferUntil && new Date(d.vipDeferUntil).getTime() > now) return false;
  if (d.vipEvictAt && new Date(d.vipEvictAt).getTime() < now) return false;
  return true;
}

export function VipSwapSheet({ visible, newDomainId, candidates, onClose, onSwap }: Props) {
  const { t } = useTranslation();
  const colors = useColors();
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const eligible = candidates.filter(isVipEligible);

  function close() {
    setSelectedId(null);
    setError(null);
    onClose();
  }

  async function handleSwap() {
    if (!selectedId || submitting) return;
    setSubmitting(true);
    setError(null);
    const result = await onSwap(newDomainId, selectedId);
    setSubmitting(false);
    if (result.ok) {
      close();
      return;
    }
    setError(t('blocker.vip_swap_error'));
  }

  const ctaEnabled = selectedId !== null && !submitting;

  return (
    <FormSheet
      visible={visible}
      onClose={close}
      title={t('blocker.vip_swap_title')}
    >
      <ScrollView
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ padding: 16, gap: 12 }}
      >
        {/* Erklärtext */}
        <View
          style={{
            flexDirection: 'row',
            gap: 10,
            padding: 12,
            backgroundColor: '#fff7ed',
            borderRadius: 12,
            borderWidth: 1,
            borderColor: '#fed7aa',
          }}
        >
          <Ionicons name="swap-horizontal" size={18} color="#c2410c" style={{ marginTop: 1 }} />
          <Text
            style={{
              flex: 1,
              fontSize: 13,
              fontFamily: 'Nunito_400Regular',
              color: '#7c2d12',
              lineHeight: 18,
            }}
          >
            {t('blocker.vip_swap_desc')}
          </Text>
        </View>

        {/* Pick-Label */}
        <Text
          style={{
            fontSize: 13,
            fontFamily: 'Nunito_700Bold',
            color: colors.text,
            marginTop: 4,
          }}
        >
          {t('blocker.vip_swap_pick')}
        </Text>

        {/* Domain-Liste */}
        {eligible.length === 0 ? (
          <Text
            style={{
              fontSize: 13,
              fontFamily: 'Nunito_400Regular',
              color: colors.textMuted,
              textAlign: 'center',
              paddingVertical: 16,
            }}
          >
            {t('blocker.vip_swap_no_candidates')}
          </Text>
        ) : (
          <View style={{ gap: 8 }}>
            {eligible.map((d) => (
              <SwapCandidateTile
                key={d.id}
                domain={d}
                selected={selectedId === d.id}
                onSelect={() => setSelectedId(d.id)}
                colors={colors}
              />
            ))}
          </View>
        )}

        {error && (
          <Text
            style={{
              fontSize: 12,
              fontFamily: 'Nunito_400Regular',
              color: '#dc2626',
              textAlign: 'center',
            }}
          >
            {error}
          </Text>
        )}

        {/* Buttons */}
        <View style={{ flexDirection: 'row', gap: 10, marginTop: 4 }}>
          <TouchableOpacity onPress={close} activeOpacity={0.8} style={{ flex: 1 }}>
            <View
              style={{
                borderRadius: 14,
                paddingVertical: 14,
                alignItems: 'center',
                backgroundColor: colors.surfaceElevated,
                borderWidth: 1,
                borderColor: colors.border,
              }}
            >
              <Text
                style={{
                  fontSize: 15,
                  fontFamily: 'Nunito_600SemiBold',
                  color: colors.textMuted,
                }}
              >
                {t('common.cancel')}
              </Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={handleSwap}
            disabled={!ctaEnabled}
            activeOpacity={0.85}
            style={{ flex: 2 }}
          >
            <View
              style={{
                backgroundColor: ctaEnabled ? '#c2410c' : '#d4d4d4',
                borderRadius: 14,
                paddingVertical: 14,
                alignItems: 'center',
              }}
            >
              {submitting ? (
                <ActivityIndicator color="#fff" />
              ) : (
                <Text
                  style={{
                    fontSize: 15,
                    fontFamily: 'Nunito_700Bold',
                    color: '#fff',
                  }}
                >
                  {t('blocker.vip_swap_cta')}
                </Text>
              )}
            </View>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </FormSheet>
  );
}

function SwapCandidateTile({
  domain,
  selected,
  onSelect,
  colors,
}: {
  domain: CustomDomain;
  selected: boolean;
  onSelect: () => void;
  colors: ReturnType<typeof useColors>;
}) {
  const [imgError, setImgError] = useState(false);
  const stripped = domain.domain.replace(/^www\./, '');

  return (
    <TouchableOpacity
      onPress={onSelect}
      activeOpacity={0.75}
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 12,
        padding: 12,
        borderRadius: 12,
        borderWidth: 1.5,
        borderColor: selected ? '#c2410c' : colors.border,
        backgroundColor: selected ? '#fff7ed' : colors.surface,
      }}
    >
      {!imgError ? (
        <Image
          source={{ uri: `https://www.google.com/s2/favicons?domain=${stripped}&sz=64` }}
          style={{ width: 28, height: 28, borderRadius: 6 }}
          onError={() => setImgError(true)}
        />
      ) : (
        <View
          style={{
            width: 28,
            height: 28,
            borderRadius: 6,
            backgroundColor: colors.surfaceElevated,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text
            style={{
              fontSize: 9,
              fontFamily: 'Nunito_700Bold',
              color: colors.textMuted,
            }}
          >
            {stripped.slice(0, 2).toUpperCase()}
          </Text>
        </View>
      )}

      <Text
        style={{
          flex: 1,
          fontSize: 14,
          fontFamily: 'Nunito_600SemiBold',
          color: colors.text,
        }}
        numberOfLines={1}
      >
        {stripped}
      </Text>

      <View
        style={{
          width: 22,
          height: 22,
          borderRadius: 11,
          borderWidth: 1.5,
          borderColor: selected ? '#c2410c' : colors.border,
          backgroundColor: selected ? '#c2410c' : 'transparent',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {selected && <Ionicons name="checkmark" size={13} color="#fff" />}
      </View>
    </TouchableOpacity>
  );
}