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

import React, { useEffect, useRef, 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 { ConfirmAlert } from '../ConfirmAlert';
import { SuccessAlert } from '../SuccessAlert';
import { useWebContentDomains } from '../../hooks/useWebContentDomains';
import type { CustomDomain, DomainStatus, Tier } from '../../hooks/useCustomDomains';

type VipCustomMeta = { status: DomainStatus; vipEvictAt: string | null | undefined };

// ─── Meine Filter (unified web + mail_domain) ─────────────────────────────────

type MyFiltersProps = {
  domains: CustomDomain[];
  tier: Tier;
  totalCount: number;
  totalLimit: number;
  globalBlocklistCount: number;
  onAddPress: () => void;
  onSubmitDomain: (id: string) => Promise<{ ok: boolean }>;
  colors: ColorScheme;
};

/**
 * "Meine Filter" — unified Sektion für web + mail_domain Einträge.
 *
 * Ein Slot-Pool: totalLimit = Legend 20 / Pro 10 (web+mail zusammen).
 * Kacheln zeigen Typ-Badge (Web / Mail). Jede Kachel hat einen Freigabe-Button:
 * der User reicht die Domain an die globale Blocklist ein (Pro = Community-Vote,
 * Legend = Admin-Review). Bewusst KEIN Entfernen-Button — einmal gesperrt
 * bleibt gesperrt (Anti-Rückfall-Logik).
 */
export function MyFiltersList({
  domains,
  tier,
  totalCount,
  totalLimit,
  globalBlocklistCount,
  onAddPress,
  onSubmitDomain,
  colors,
}: MyFiltersProps) {
  const { t } = useTranslation();

  const visibleDomains = useMemo(
    () => domains.filter((d) => d.status !== 'approved'),
    [domains],
  );

  const atLimit = totalCount >= totalLimit;
  const fillAnim = useRef(new Animated.Value(0)).current;
  const ratio = totalLimit > 0 ? Math.min(totalCount / totalLimit, 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',
      }}
    >
      <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.my_filters_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: totalCount, max: totalLimit })}
          </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 }}>
        <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>

        {visibleDomains.length === 0 ? (
          <MyFiltersEmptyState onAddPress={onAddPress} colors={colors} />
        ) : (
          <FilterTilesGrid domains={visibleDomains} tier={tier} onSubmit={onSubmitDomain} />
        )}

        <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>
  );
}

function MyFiltersEmptyState({ 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.my_filters_empty')}
        </Text>
      </View>
    </TouchableOpacity>
  );
}

function FilterTilesGrid({
  domains,
  tier,
  onSubmit,
}: {
  domains: CustomDomain[];
  tier: Tier;
  onSubmit: (id: string) => Promise<{ ok: boolean }>;
}) {
  return (
    <View style={{ flexDirection: 'row', flexWrap: 'wrap', rowGap: 10, columnGap: 8 }}>
      {domains.map((d) => (
        <FilterTile key={d.id} domain={d} tier={tier} onSubmit={onSubmit} />
      ))}
    </View>
  );
}

function FilterTile({
  domain,
  tier,
  onSubmit,
}: {
  domain: CustomDomain;
  tier: Tier;
  onSubmit: (id: string) => Promise<{ ok: boolean }>;
}) {
  const { t } = useTranslation();
  const colors = useColors();
  const [imgError, setImgError] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [confirmVisible, setConfirmVisible] = useState(false);
  const [successVisible, setSuccessVisible] = useState(false);

  const isMail = domain.type === 'mail_domain';
  const stripped = domain.domain.replace(/^www\./, '');
  const isLegend = tier.plan === 'legend';
  const isResubmit = domain.status === 'rejected';

  // Freigabe-Button: nur für noch nicht eingereichte Einträge. mail_display_name
  // ist eine Substring-Heuristik — kann nicht in die globale Blocklist.
  const canSubmit =
    tier.canSubmit &&
    (domain.status === 'active' || domain.status === 'rejected') &&
    domain.type !== 'mail_display_name';

  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');
    }
  })();

  const btnColor = isResubmit ? colors.error : colors.brandOrange;

  const confirmTitle = isLegend
    ? isResubmit
      ? t('blocker.domain_confirm_legend_resubmit')
      : t('blocker.domain_confirm_legend_first')
    : isResubmit
      ? t('blocker.domain_confirm_community_resubmit')
      : t('blocker.domain_confirm_community_first');
  const confirmMessage = isLegend
    ? t('blocker.domain_confirm_legend_message', { domain: stripped })
    : t('blocker.domain_confirm_community_message', { domain: stripped });

  async function handleConfirm() {
    setConfirmVisible(false);
    setSubmitting(true);
    try {
      const result = await onSubmit(domain.id);
      if (result.ok) setSuccessVisible(true);
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <>
      <View
        style={{
          backgroundColor: colors.bg,
          borderWidth: 1,
          borderColor: colors.border,
          borderRadius: 14,
          padding: 8,
          width: '31%',
          minHeight: 118,
          gap: 4,
          opacity: submitting ? 0.5 : 1,
        }}
      >
        {/* Type + Status badge row */}
        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
          <View
            style={{
              paddingHorizontal: 4,
              paddingVertical: 1,
              borderRadius: 999,
              backgroundColor: isMail ? '#dbeafe' : colors.surfaceElevated,
            }}
          >
            <Text style={{ fontSize: 7, fontFamily: 'Nunito_600SemiBold', color: isMail ? '#2563eb' : colors.textMuted }}>
              {isMail ? t('blocker.type_mail') : t('blocker.type_web')}
            </Text>
          </View>
          <View
            style={{
              paddingHorizontal: 4,
              paddingVertical: 1,
              borderRadius: 999,
              backgroundColor: statusColor,
            }}
          >
            <Text style={{ fontSize: 7, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
              {badgeLabel}
            </Text>
          </View>
        </View>

        {/* Icon + label */}
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 4, paddingVertical: 6 }}>
          {isMail ? (
            <View
              style={{
                width: 24,
                height: 24,
                borderRadius: 5,
                backgroundColor: '#dbeafe',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Ionicons name="mail-outline" size={13} color="#2563eb" />
            </View>
          ) : !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>

        {/* Bottom slot — Freigabe / Erneut / in Prüfung. Immer 26px hoch,
            damit alle Kacheln gleich hoch bleiben. */}
        <View style={{ height: 26 }}>
          {domain.status === 'submitted' ? (
            <View
              style={{
                flex: 1,
                backgroundColor: colors.warning,
                borderRadius: 6,
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Text style={{ fontSize: 9, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
                {isLegend ? t('blocker.domain_btn_rebreak_prueft') : t('blocker.domain_btn_in_abstimmung')}
              </Text>
            </View>
          ) : canSubmit ? (
            <TouchableOpacity
              onPress={() => setConfirmVisible(true)}
              disabled={submitting}
              activeOpacity={0.65}
              style={{
                flex: 1,
                borderRadius: 6,
                borderWidth: 1,
                borderColor: btnColor,
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              {submitting ? (
                <ActivityIndicator size="small" color={btnColor} />
              ) : (
                <Text style={{ fontSize: 10, fontFamily: 'Nunito_600SemiBold', color: btnColor }}>
                  {isResubmit ? t('blocker.domain_btn_erneut') : t('blocker.domain_btn_freigeben')}
                </Text>
              )}
            </TouchableOpacity>
          ) : null}
        </View>
      </View>

      <ConfirmAlert
        visible={confirmVisible}
        title={confirmTitle}
        message={confirmMessage}
        confirmLabel={t('blocker.domain_btn_freigeben')}
        icon={isLegend ? 'shield-checkmark' : 'people'}
        iconColor="#f59e0b"
        onConfirm={handleConfirm}
        onCancel={() => setConfirmVisible(false)}
      />

      <SuccessAlert
        visible={successVisible}
        title={isLegend ? t('blocker.domain_success_legend_title') : t('blocker.domain_success_community_title')}
        message={isLegend ? t('blocker.domain_success_legend_message') : t('blocker.domain_success_community_message')}
        onClose={() => setSuccessVisible(false)}
      />
    </>
  );
}

// ─── VIP-Liste (collapsible, Zweitschutz) ────────────────────────────────────

type VipListProps = {
  domains: CustomDomain[];
  open: boolean;
  onToggle: () => void;
  colors: ColorScheme;
};

export function VipDomainList({ domains, open, onToggle, colors }: VipListProps) {
  const { t } = useTranslation();
  const { domains: vipList, loading, refetch } = useWebContentDomains();

  const webCustoms = useMemo(
    () => domains.filter((d) => (d.type === 'web' || !d.type) && d.status !== 'rejected'),
    [domains],
  );
  const customStatusMap = useMemo(() => {
    const m = new Map<string, VipCustomMeta>();
    for (const d of webCustoms) {
      m.set(d.domain.replace(/^www\./, ''), { status: d.status, vipEvictAt: d.vipEvictAt });
    }
    return m;
  }, [webCustoms]);

  const domainsSig = useMemo(
    () => domains.map((d) => `${d.id}:${d.status}`).join('|'),
    [domains],
  );
  const firstRunRef = useRef(true);
  useEffect(() => {
    if (firstRunRef.current) {
      firstRunRef.current = false;
      return;
    }
    refetch();
  }, [domainsSig, refetch]);

  const list = vipList ?? [...customStatusMap.keys()];

  const customDomains = list.filter((d) => customStatusMap.has(d));
  const curatedDomains = list.filter((d) => !customStatusMap.has(d));

  function getMeta(d: string): VipCustomMeta {
    return customStatusMap.get(d) ?? { status: 'active', vipEvictAt: null };
  }

  return (
    <View
      style={{
        backgroundColor: colors.surface,
        borderRadius: 16,
        borderWidth: 1,
        borderColor: colors.border,
        overflow: 'hidden',
      }}
    >
      <TouchableOpacity
        onPress={onToggle}
        activeOpacity={0.7}
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          paddingHorizontal: 14,
          paddingVertical: 12,
          gap: 8,
        }}
      >
        <Ionicons name="shield-half-outline" size={16} color={colors.textMuted} />
        <Text style={{ flex: 1, fontSize: 14, fontFamily: 'Nunito_700Bold', color: colors.text }}>
          {t('blocker.vip_layer2_title')}
        </Text>
        <Ionicons
          name={open ? 'chevron-up' : 'chevron-down'}
          size={16}
          color={colors.textMuted}
        />
      </TouchableOpacity>

      {open && (
        <View style={{ paddingHorizontal: 14, paddingBottom: 14, gap: 12 }}>
          <Text
            style={{
              fontSize: 12,
              fontFamily: 'Nunito_400Regular',
              color: colors.textMuted,
              lineHeight: 17,
            }}
          >
            {t('blocker.vip_layer2_desc')}
          </Text>

          {loading && vipList === null ? (
            <View style={{ paddingVertical: 20, alignItems: 'center' }}>
              <ActivityIndicator size="small" color={colors.textMuted} />
            </View>
          ) : (
            <>
              {customDomains.length > 0 && (
                <VipSubSection
                  title={t('blocker.vip_section_custom_title')}
                  count={t('blocker.vip_section_custom_count', { count: customDomains.length })}
                  colors={colors}
                >
                  {customDomains.map((d) => {
                    const meta = getMeta(d);
                    return (
                      <VipCustomTile
                        key={d}
                        domain={d}
                        status={meta.status}
                        vipEvictAt={meta.vipEvictAt}
                        colors={colors}
                      />
                    );
                  })}
                </VipSubSection>
              )}

              {curatedDomains.length > 0 && (
                <VipSubSection
                  title={t('blocker.vip_section_curated_title')}
                  count={t('blocker.vip_section_curated_count', { count: curatedDomains.length })}
                  colors={colors}
                >
                  {curatedDomains.map((d) => (
                    <VipCuratedTile key={d} domain={d} colors={colors} />
                  ))}
                </VipSubSection>
              )}

              {list.length === 0 && (
                <Text
                  style={{
                    fontSize: 12,
                    fontFamily: 'Nunito_400Regular',
                    color: colors.textMuted,
                    textAlign: 'center',
                    paddingVertical: 12,
                  }}
                >
                  {t('blocker.vip_layer2_count', { count: 0 })}
                </Text>
              )}
            </>
          )}
        </View>
      )}
    </View>
  );
}

function VipSubSection({
  title,
  count,
  colors,
  children,
}: {
  title: string;
  count: string;
  colors: ColorScheme;
  children: React.ReactNode;
}) {
  return (
    <View style={{ gap: 8 }}>
      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
        <Text style={{ flex: 1, fontSize: 12, fontFamily: 'Nunito_700Bold', color: colors.text }}>
          {title}
        </Text>
        <Text style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: colors.textMuted }}>
          {count}
        </Text>
      </View>
      <View style={{ flexDirection: 'row', flexWrap: 'wrap', rowGap: 10, columnGap: 8 }}>
        {children}
      </View>
    </View>
  );
}

function VipCustomTile({
  domain,
  status,
  vipEvictAt,
  colors,
}: {
  domain: string;
  status: DomainStatus;
  vipEvictAt?: string | null;
  colors: ColorScheme;
}) {
  const { t } = useTranslation();
  const [imgError, setImgError] = useState(false);
  const stripped = domain.replace(/^www\./, '');

  const evictBadgeHours: number | null = (() => {
    if (!vipEvictAt) return null;
    const ms = new Date(vipEvictAt).getTime() - Date.now();
    if (ms <= 0) return null;
    return Math.ceil(ms / (1000 * 60 * 60));
  })();

  const statusColor: string = (() => {
    switch (status) {
      case 'submitted': return colors.warning;
      case 'approved': return '#22c55e';
      default: return colors.brandOrange;
    }
  })();

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

  return (
    <View
      style={{
        backgroundColor: colors.bg,
        borderWidth: 1,
        borderColor: colors.brandOrange,
        borderRadius: 14,
        padding: 8,
        width: '31%',
        minHeight: 100,
        gap: 4,
      }}
    >
        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
          <Ionicons name="star" size={10} color={colors.brandOrange} />
          <View
            style={{
              paddingHorizontal: 4,
              paddingVertical: 1,
              borderRadius: 999,
              backgroundColor: statusColor,
            }}
          >
            <Text style={{ fontSize: 7, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
              {badgeLabel}
            </Text>
          </View>
        </View>

        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 4, paddingVertical: 4 }}>
          {!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: colors.brandOrange,
                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>

        {evictBadgeHours !== null && (
          <View
            style={{
              backgroundColor: '#fef3c7',
              borderRadius: 6,
              paddingVertical: 2,
              paddingHorizontal: 4,
              alignItems: 'center',
            }}
          >
            <Text
              numberOfLines={1}
              style={{ fontSize: 7, fontFamily: 'Nunito_600SemiBold', color: '#92400e' }}
            >
              {t('blocker.vip_evict_badge', { hours: evictBadgeHours })}
            </Text>
          </View>
        )}
      </View>
  );
}

function VipCuratedTile({ domain, colors }: { domain: string; colors: ColorScheme }) {
  const [imgError, setImgError] = useState(false);
  const stripped = domain.replace(/^www\./, '');

  return (
    <View
      style={{
        backgroundColor: colors.bg,
        borderWidth: 1,
        borderColor: colors.border,
        borderRadius: 14,
        padding: 8,
        width: '31%',
        minHeight: 100,
        gap: 4,
      }}
    >
      <View style={{ alignItems: 'flex-end' }}>
        <Ionicons name="globe-outline" size={10} color={colors.textMuted} />
      </View>

      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 4, paddingVertical: 4 }}>
        {!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: colors.surfaceElevated,
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <Text style={{ fontSize: 8, fontFamily: 'Nunito_700Bold', color: colors.textMuted }}>
              {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>
    </View>
  );
}