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

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

type Props = {
  domains: CustomDomain[];
  webCount: number;
  webLimit: number;
  globalBlocklistCount: number;
  onAddPress: () => void;
  onRemoveDomain: (id: string) => Promise<void>;
  colors: ColorScheme;
};

/**
 * VIP-Sektion: "Meine geblockten Seiten".
 *
 * Zeigt eigene Web-Custom-Domains des Users (kind='web') + Zähler (X / Limit).
 * Domain entfernen → 3-Click Friction via RemoveDomainSheet (selbes Pattern wie
 * Schutz-Deaktivieren). Domain hinzufügen → frei via onAddPress.
 * Darunter: ruhiger Hinweis auf die automatische globale Blocklist.
 */
export function VipDomainList({
  domains,
  webCount,
  webLimit,
  globalBlocklistCount,
  onAddPress,
  onRemoveDomain,
  colors,
}: Props) {
  const { t } = useTranslation();

  const webDomains = useMemo(
    () => domains.filter((d) => (d.type === 'web' || !d.type) && d.status !== 'approved'),
    [domains],
  );

  const atLimit = webCount >= webLimit;
  const fillAnim = useRef(new Animated.Value(0)).current;
  const ratio = webLimit > 0 ? Math.min(webCount / webLimit, 1) : 0;

  useEffect(() => {
    Animated.timing(fillAnim, { toValue: ratio, duration: 380, useNativeDriver: false }).start();
  }, [ratio]);

  const pct = ratio * 100;
  const barColor = pct >= 90 ? colors.error : pct >= 60 ? colors.warning : colors.brandOrange;

  const badgeBg = atLimit ? '#fee2e2' : colors.surfaceElevated;
  const badgeFg = atLimit ? colors.error : colors.textMuted;

  return (
    <View
      style={{
        backgroundColor: colors.surface,
        borderRadius: 16,
        borderWidth: 1,
        borderColor: colors.border,
        overflow: 'hidden',
      }}
    >
      {/* Header */}
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          paddingHorizontal: 14,
          paddingTop: 12,
          paddingBottom: 10,
          gap: 8,
        }}
      >
        <Text style={{ flex: 1, fontSize: 14, fontFamily: 'Nunito_700Bold', color: colors.text }}>
          {t('blocker.vip_section_title')}
        </Text>
        <View
          style={{
            paddingHorizontal: 8,
            paddingVertical: 3,
            borderRadius: 999,
            backgroundColor: badgeBg,
          }}
        >
          <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: badgeFg }}>
            {t('blocker.count_label', { count: webCount, max: webLimit })}
          </Text>
        </View>
        <TouchableOpacity
          onPress={atLimit ? undefined : onAddPress}
          activeOpacity={atLimit ? 1 : 0.75}
          style={{
            width: 28,
            height: 28,
            borderRadius: 14,
            backgroundColor: atLimit ? colors.surfaceElevated : colors.brandOrange,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Ionicons name="add" size={18} color={atLimit ? colors.textMuted : '#fff'} />
        </TouchableOpacity>
      </View>

      <View style={{ paddingHorizontal: 14, paddingBottom: 14, gap: 12 }}>
        {/* Progress bar */}
        <View
          style={{
            height: 5,
            borderRadius: 3,
            backgroundColor: colors.surfaceElevated,
            overflow: 'hidden',
          }}
        >
          <Animated.View
            style={{
              height: '100%',
              borderRadius: 3,
              backgroundColor: barColor,
              width: fillAnim.interpolate({ inputRange: [0, 1], outputRange: ['0%', '100%'] }),
            }}
          />
        </View>

        {/* Domain list or empty state */}
        {webDomains.length === 0 ? (
          <VipEmptyState onAddPress={onAddPress} colors={colors} />
        ) : (
          <VipDomainTiles domains={webDomains} onRemoveDomain={onRemoveDomain} />
        )}

        {/* Global list hint — ruhig, nicht als Casino-Trigger */}
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'flex-start',
            gap: 6,
            paddingTop: 2,
          }}
        >
          <Ionicons name="shield-checkmark-outline" size={13} color={colors.textMuted} style={{ marginTop: 1 }} />
          <Text
            style={{
              flex: 1,
              fontSize: 11,
              fontFamily: 'Nunito_400Regular',
              color: colors.textMuted,
              lineHeight: 16,
            }}
          >
            {t('blocker.vip_global_hint', { count: globalBlocklistCount })}
          </Text>
        </View>
      </View>
    </View>
  );
}

// ─── Empty State ──────────────────────────────────────────────────────────────

function VipEmptyState({ onAddPress, colors }: { onAddPress: () => void; colors: ColorScheme }) {
  const { t } = useTranslation();
  return (
    <TouchableOpacity onPress={onAddPress} activeOpacity={0.7}>
      <View
        style={{
          paddingVertical: 28,
          paddingHorizontal: 16,
          borderRadius: 14,
          borderWidth: 1,
          borderStyle: 'dashed',
          borderColor: colors.border,
          alignItems: 'center',
          gap: 6,
        }}
      >
        <Ionicons name="add-circle-outline" size={26} color={colors.textMuted} />
        <Text
          style={{
            fontSize: 13,
            fontFamily: 'Nunito_400Regular',
            color: colors.textMuted,
            textAlign: 'center',
            lineHeight: 18,
          }}
        >
          {t('blocker.vip_empty')}
        </Text>
      </View>
    </TouchableOpacity>
  );
}

// ─── Domain Tiles ─────────────────────────────────────────────────────────────

function VipDomainTiles({
  domains,
  onRemoveDomain,
}: {
  domains: CustomDomain[];
  onRemoveDomain: (id: string) => Promise<void>;
}) {
  return (
    <View style={{ flexDirection: 'row', flexWrap: 'wrap', rowGap: 10, columnGap: 8 }}>
      {domains.map((d) => (
        <VipDomainTile key={d.id} domain={d} onRemove={onRemoveDomain} />
      ))}
    </View>
  );
}

function VipDomainTile({
  domain,
  onRemove,
}: {
  domain: CustomDomain;
  onRemove: (id: string) => Promise<void>;
}) {
  const { t } = useTranslation();
  const colors = useColors();
  const [imgError, setImgError] = useState(false);
  const [removeSheetOpen, setRemoveSheetOpen] = useState(false);
  const [removing, setRemoving] = useState(false);

  const stripped = domain.domain.replace(/^www\./, '');

  const statusColor: string = (() => {
    switch (domain.status) {
      case 'submitted': return colors.warning;
      case 'rejected': return colors.error;
      default: return colors.brandOrange;
    }
  })();

  const badgeLabel: string = (() => {
    switch (domain.status) {
      case 'submitted': return t('blocker.domain_badge_pruefung');
      case 'rejected': return t('blocker.domain_badge_rejected');
      default: return t('blocker.domain_badge_active');
    }
  })();

  async function handleConfirmRemove() {
    setRemoving(true);
    try {
      await onRemove(domain.id);
    } finally {
      setRemoving(false);
    }
  }

  return (
    <>
      <View
        style={{
          backgroundColor: colors.bg,
          borderWidth: 1,
          borderColor: colors.border,
          borderRadius: 14,
          padding: 8,
          width: '31%',
          minHeight: 110,
          gap: 4,
          opacity: removing ? 0.4 : 1,
        }}
      >
        {/* Status badge row */}
        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}>
          <View
            style={{
              paddingHorizontal: 5,
              paddingVertical: 1,
              borderRadius: 999,
              backgroundColor: statusColor,
            }}
          >
            <Text style={{ fontSize: 8, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
              {badgeLabel}
            </Text>
          </View>
        </View>

        {/* Favicon + domain name */}
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 4, paddingVertical: 6 }}>
          {!imgError ? (
            <Image
              source={{ uri: `https://www.google.com/s2/favicons?domain=${stripped}&sz=128` }}
              style={{ width: 24, height: 24, borderRadius: 5 }}
              onError={() => setImgError(true)}
            />
          ) : (
            <View
              style={{
                width: 24,
                height: 24,
                borderRadius: 5,
                backgroundColor: '#525252',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Text style={{ fontSize: 8, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
                {stripped.slice(0, 2).toUpperCase()}
              </Text>
            </View>
          )}
          <Text
            numberOfLines={1}
            style={{
              fontSize: 10,
              fontFamily: 'Nunito_600SemiBold',
              color: colors.text,
              textAlign: 'center',
              width: '100%',
            }}
          >
            {stripped}
          </Text>
        </View>

        {/* Remove button */}
        <TouchableOpacity
          onPress={() => setRemoveSheetOpen(true)}
          disabled={removing}
          activeOpacity={0.65}
          style={{
            height: 26,
            borderRadius: 6,
            borderWidth: 1,
            borderColor: colors.border,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          {removing ? (
            <ActivityIndicator size="small" color={colors.textMuted} />
          ) : (
            <Ionicons name="trash-outline" size={13} color={colors.textMuted} />
          )}
        </TouchableOpacity>
      </View>

      <RemoveDomainSheet
        visible={removeSheetOpen}
        domain={stripped}
        onClose={() => setRemoveSheetOpen(false)}
        onConfirmRemove={handleConfirmRemove}
      />
    </>
  );
}