rebreak-monorepo/apps/rebreak-native/components/mail/MailDistributionChart.tsx

import { useMemo } from 'react';
import { Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { useColors } from '../../lib/theme';
import { HalfDonut } from '../common/HalfDonut';
import type { BlockedByConnectionEntry } from '../../hooks/useMailStats';

type Props = {
  data: BlockedByConnectionEntry[];
  hero?: boolean;
  totalBlocked?: number;
  accountCount?: number;
  isLegend?: boolean;
};

const SLICE_COLORS = ['#ef4444', '#3b82f6', '#f59e0b', '#8b5cf6'];
const OTHER_COLOR = '#a3a3a3';

const MAX_LEGEND_ENTRIES = 3;

const DONUT_WIDTH = 200;

function formatCompact(n: number): string {
  if (n < 1000) return n.toLocaleString();
  const k = n / 1000;
  if (k < 10) return `${Math.floor(k * 10) / 10}k+`;
  return `${Math.floor(k)}k+`;
}

function domainFromEmail(email: string): string {
  return email.split('@')[1] ?? email;
}

function displayLabel(entry: BlockedByConnectionEntry): string {
  return entry.title ?? domainFromEmail(entry.email);
}

export function MailDistributionChart({ data, hero, totalBlocked, isLegend }: Props) {
  const { t } = useTranslation();
  const colors = useColors();

  const total = data.reduce((s, d) => s + d.count, 0);

  const slices = useMemo(() => {
    if (data.length === 0 || total === 0) return [];

    const sorted = [...data].sort((a, b) => b.count - a.count);

    if (sorted.length <= MAX_LEGEND_ENTRIES) {
      return sorted.map((e, i) => ({
        label: displayLabel(e),
        count: e.count,
        color: SLICE_COLORS[i] ?? OTHER_COLOR,
        isOther: false,
      }));
    }

    const top3 = sorted.slice(0, MAX_LEGEND_ENTRIES);
    const rest = sorted.slice(MAX_LEGEND_ENTRIES);
    const restCount = rest.reduce((s, e) => s + e.count, 0);
    const restConnectionCount = rest.length;

    const items = top3.map((e, i) => ({
      label: displayLabel(e),
      count: e.count,
      color: SLICE_COLORS[i],
      isOther: false,
    }));

    items.push({
      label: t('mail.stats.distribution_other_n', { n: restConnectionCount }),
      count: restCount,
      color: OTHER_COLOR,
      isOther: true,
    });

    return items;
  }, [data, total, t]);

  if (data.length <= 1 || total === 0) return null;

  const displayTotal = totalBlocked ?? total;
  const centerValue = formatCompact(displayTotal);
  const centerLabel = t('mail.stats.distribution_center_label');

  const segments = slices.map((s) => ({ value: s.count, color: s.color }));

  if (hero) {
    return (
      <View
        style={{
          backgroundColor: colors.surface,
          borderRadius: 16,
          borderWidth: 1,
          borderColor: colors.border,
          paddingHorizontal: 16,
          paddingTop: 13,
          paddingBottom: 12,
        }}
      >
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'flex-start',
            gap: 20,
          }}
        >
          {/* Donut-Box ist visuell asymmetrisch (Bogen oben, Center-Number bei
              ~70% der Box-Höhe). Negativer marginBottom zieht die effektive
              Box hoch sodass alignItems:center die Legend gegenüber der
              visuellen Donut-Mitte (Center-Number) zentriert statt gegen die
              SVG-Bounding-Box-Mitte. */}
          <View style={{ marginBottom: -28 }}>
            <HalfDonut
              segments={segments}
              centerValue={centerValue}
              centerLabel={centerLabel}
              width={DONUT_WIDTH}
            />
          </View>
          <View style={{ gap: 6, flex: 1, minWidth: 0 }}>
            {slices.map((slice) => (
              <LegendRow key={slice.label} slice={slice} colors={colors} />
            ))}
          </View>
        </View>
      </View>
    );
  }

  return (
    <View
      style={{
        backgroundColor: colors.surface,
        borderRadius: 16,
        borderWidth: 1,
        borderColor: colors.border,
        paddingHorizontal: 16,
        paddingTop: 14,
        paddingBottom: 14,
      }}
    >
      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
        <HalfDonut
          segments={segments}
          centerValue={centerValue}
          centerLabel={centerLabel}
          width={DONUT_WIDTH}
        />
        <View style={{ flex: 1, gap: 6 }}>
          {slices.map((slice) => (
            <LegendRow key={slice.label} slice={slice} colors={colors} />
          ))}
        </View>
      </View>
    </View>
  );
}

function LegendRow({
  slice,
  colors,
}: {
  slice: { label: string; count: number; color: string; isOther: boolean };
  colors: ReturnType<typeof useColors>;
}) {
  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 8,
      }}
    >
      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1, minWidth: 0 }}>
        <View
          style={{
            width: 8,
            height: 8,
            borderRadius: 4,
            backgroundColor: slice.color,
          }}
        />
        <Text
          style={{
            fontSize: 12,
            fontFamily: slice.isOther ? 'Nunito_400Regular' : 'Nunito_600SemiBold',
            color: slice.isOther ? colors.textMuted : colors.text,
            flexShrink: 1,
          }}
          numberOfLines={1}
        >
          {slice.label}
        </Text>
      </View>
      <Text
        style={{
          fontSize: 12,
          fontFamily: 'Nunito_700Bold',
          color: colors.textMuted,
        }}
      >
        {slice.count}
      </Text>
    </View>
  );
}