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 = 240;

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: 10,
          paddingBottom: 12,
        }}
      >
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'flex-end',
            marginBottom: 4,
          }}
        >
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              paddingHorizontal: 10,
              paddingVertical: 5,
              borderRadius: 999,
              backgroundColor: isLegend ? '#f0fdf4' : '#eff6ff',
            }}
          >
            <View
              style={{
                width: 6,
                height: 6,
                borderRadius: 3,
                backgroundColor: isLegend ? '#16a34a' : '#2563eb',
                marginRight: 6,
              }}
            />
            <Text
              style={{
                fontSize: 12,
                fontFamily: 'Nunito_700Bold',
                color: isLegend ? '#16a34a' : '#2563eb',
              }}
            >
              {isLegend ? t('mail.live') : t('mail.scheduled')}
            </Text>
          </View>
        </View>

        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
          <HalfDonut
            segments={segments}
            centerValue={centerValue}
            centerLabel={centerLabel}
            width={DONUT_WIDTH}
          />
          <View style={{ flex: 1, gap: 5 }}>
            {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', gap: 6 }}>
      <View
        style={{
          width: 8,
          height: 8,
          borderRadius: 4,
          backgroundColor: slice.color,
        }}
      />
      <Text
        style={{
          flex: 1,
          fontSize: 12,
          fontFamily: slice.isOther ? 'Nunito_400Regular' : 'Nunito_600SemiBold',
          color: slice.isOther ? colors.textMuted : colors.text,
        }}
        numberOfLines={1}
      >
        {slice.label}
      </Text>
      <Text
        style={{
          fontSize: 12,
          fontFamily: 'Nunito_700Bold',
          color: colors.textMuted,
        }}
      >
        {slice.count}
      </Text>
    </View>
  );
}