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

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

type Props = {
  data: BlockedByConnectionEntry[];
};

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

const R_OUTER = 54;
const R_INNER = 34;
const CX = 64;
const CY = 64;

// Half-donut renders the UPPER semicircle (flat edge at bottom).
// CY=64 places the center at the bottom of the 68px-tall viewBox.
// angleDeg=0 → top (12 o'clock), angleDeg=-90 → left, angleDeg=90 → right.
// Slices sweep from -90° (left) to +90° (right) = 180° total.
const HALF_DONUT_START_DEG = -90;

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

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

function polarToXY(cx: number, cy: number, r: number, angleDeg: number) {
  const rad = ((angleDeg - 90) * Math.PI) / 180;
  return {
    x: cx + r * Math.cos(rad),
    y: cy + r * Math.sin(rad),
  };
}

function arcPath(
  cx: number,
  cy: number,
  rOuter: number,
  rInner: number,
  startDeg: number,
  endDeg: number,
): string {
  const outerStart = polarToXY(cx, cy, rOuter, startDeg);
  const outerEnd = polarToXY(cx, cy, rOuter, endDeg);
  const innerEnd = polarToXY(cx, cy, rInner, endDeg);
  const innerStart = polarToXY(cx, cy, rInner, startDeg);
  const large = endDeg - startDeg > 180 ? 1 : 0;

  return [
    `M ${outerStart.x} ${outerStart.y}`,
    `A ${rOuter} ${rOuter} 0 ${large} 1 ${outerEnd.x} ${outerEnd.y}`,
    `L ${innerEnd.x} ${innerEnd.y}`,
    `A ${rInner} ${rInner} 0 ${large} 0 ${innerStart.x} ${innerStart.y}`,
    'Z',
  ].join(' ');
}

export function MailDistributionChart({ data }: 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);
    const top = sorted.slice(0, MAX_SLICES);
    const rest = sorted.slice(MAX_SLICES);

    const items: { label: string; count: number; color: string }[] = top.map((e, i) => ({
      label: displayLabel(e),
      count: e.count,
      color: SLICE_COLORS[i],
    }));

    if (rest.length > 0) {
      items.push({
        label: t('mail.stats.distribution_other'),
        count: rest.reduce((s, e) => s + e.count, 0),
        color: OTHER_COLOR,
      });
    }

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

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

  let cursor = HALF_DONUT_START_DEG;

  return (
    <View
      style={{
        backgroundColor: colors.surface,
        borderRadius: 16,
        borderWidth: 1,
        borderColor: colors.border,
        paddingHorizontal: 16,
        paddingTop: 14,
        paddingBottom: 14,
      }}
    >
      <Text
        style={{
          fontSize: 11,
          fontFamily: 'Nunito_700Bold',
          color: colors.textMuted,
          textTransform: 'uppercase',
          letterSpacing: 0.7,
          marginBottom: 12,
        }}
      >
        {t('mail.stats.distribution_heading')}
      </Text>

      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
        {/* Half-donut — upper semicircle, center pinned at bottom of viewBox */}
        <Svg width={128} height={68} viewBox="0 0 128 68">
          {slices.map((slice) => {
            const sweep = (slice.count / total) * 180;
            const startDeg = cursor;
            cursor += sweep;
            return (
              <Path
                key={slice.label}
                d={arcPath(CX, CY, R_OUTER, R_INNER, startDeg, startDeg + sweep)}
                fill={slice.color}
              />
            );
          })}
          {/* Inner fill to enforce donut shape */}
          <Circle cx={CX} cy={CY} r={R_INNER - 1} fill={colors.surface} />
        </Svg>

        {/* Legend */}
        <View style={{ flex: 1, gap: 6 }}>
          {slices.map((slice) => (
            <View key={slice.label} 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: 'Nunito_600SemiBold',
                  color: colors.text,
                }}
                numberOfLines={1}
              >
                {slice.label}
              </Text>
              <Text
                style={{
                  fontSize: 12,
                  fontFamily: 'Nunito_700Bold',
                  color: colors.textMuted,
                }}
              >
                {slice.count}
              </Text>
            </View>
          ))}
        </View>
      </View>
    </View>
  );
}