rebreak-monorepo/apps/rebreak-native/components/profile/UrgeStatsCard.tsx

import { View, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useColors } from '../../lib/theme';

export type HelpedByEntry = {
  key: 'breathing' | 'game' | 'talk' | 'other';
  label: string;
  count: number;
};

type Props = {
  sessions: number;
  overcome: number;
  helpedBy: HelpedByEntry[];
  topEmotion: string | null;
};

export function UrgeStatsCard({ sessions, overcome, helpedBy, topEmotion }: Props) {
  const colors = useColors();
  const overcomePct = sessions > 0 ? Math.round((overcome / sessions) * 100) : 0;
  const totalHelped = helpedBy.reduce((sum, h) => sum + h.count, 0);

  return (
    <View style={{ marginHorizontal: 16, marginTop: 24 }}>
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 8,
          marginBottom: 10,
        }}
      >
        <Ionicons name="sparkles-outline" size={14} color={colors.textMuted} />
        <Text
          style={{
            fontSize: 11,
            color: colors.textMuted,
            fontFamily: 'Nunito_700Bold',
            letterSpacing: 0.8,
          }}
        >
          LYRA INSIGHTS
        </Text>
      </View>

      <View
        style={{
          backgroundColor: colors.surface,
          borderWidth: 1,
          borderColor: colors.border,
          borderRadius: 14,
          padding: 16,
        }}
      >
        <Text
          style={{
            fontSize: 12,
            color: colors.textMuted,
            fontFamily: 'Nunito_400Regular',
          }}
        >
          Letzte 30 Tage
        </Text>

        {sessions === 0 ? (
          <Text
            style={{
              marginTop: 8,
              fontSize: 13,
              color: colors.text,
              fontFamily: 'Nunito_600SemiBold',
            }}
          >
            Noch keine SOS-Session. Lyra ist da, wenn du sie brauchst.
          </Text>
        ) : (
          <>
            <View style={{ marginTop: 6, flexDirection: 'row', alignItems: 'baseline', gap: 6 }}>
              <Text
                style={{
                  fontSize: 22,
                  color: colors.text,
                  fontFamily: 'Nunito_700Bold',
                }}
              >
                {sessions}
              </Text>
              <Text
                style={{
                  fontSize: 13,
                  color: colors.text,
                  fontFamily: 'Nunito_600SemiBold',
                }}
              >
                SOS-Sessions, {overcome} bewältigt
              </Text>
            </View>

            <View
              style={{
                marginTop: 8,
                height: 6,
                backgroundColor: colors.surfaceElevated,
                borderRadius: 999,
                overflow: 'hidden',
              }}
            >
              <View
                style={{
                  height: '100%',
                  width: `${overcomePct}%`,
                  backgroundColor: colors.success,
                  borderRadius: 999,
                }}
              />
            </View>
            <Text
              style={{
                marginTop: 4,
                fontSize: 11,
                color: colors.textMuted,
                fontFamily: 'Nunito_400Regular',
              }}
            >
              {overcomePct}% bewältigt
            </Text>

            {totalHelped > 0 ? (
              <View style={{ marginTop: 16 }}>
                <Text
                  style={{
                    fontSize: 12,
                    color: colors.text,
                    fontFamily: 'Nunito_600SemiBold',
                    marginBottom: 8,
                  }}
                >
                  Was hat geholfen
                </Text>
                {helpedBy.map((h) => {
                  const pct = totalHelped > 0 ? (h.count / totalHelped) * 100 : 0;
                  return (
                    <View key={h.key} style={{ marginBottom: 8 }}>
                      <View
                        style={{
                          flexDirection: 'row',
                          justifyContent: 'space-between',
                          marginBottom: 3,
                        }}
                      >
                        <Text
                          style={{
                            fontSize: 12,
                            color: colors.text,
                            fontFamily: 'Nunito_600SemiBold',
                          }}
                        >
                          {h.label}
                        </Text>
                        <Text
                          style={{
                            fontSize: 11,
                            color: colors.textMuted,
                            fontFamily: 'Nunito_400Regular',
                          }}
                        >
                          {h.count} {h.count === 1 ? 'Session' : 'Sessions'}
                        </Text>
                      </View>
                      <View
                        style={{
                          height: 4,
                          backgroundColor: colors.surfaceElevated,
                          borderRadius: 999,
                          overflow: 'hidden',
                        }}
                      >
                        <View
                          style={{
                            height: '100%',
                            width: `${pct}%`,
                            backgroundColor: colors.brandOrange,
                            borderRadius: 999,
                          }}
                        />
                      </View>
                    </View>
                  );
                })}
              </View>
            ) : null}

            {topEmotion ? (
              <Text
                style={{
                  marginTop: 8,
                  fontSize: 12,
                  color: colors.textMuted,
                  fontFamily: 'Nunito_400Regular',
                }}
              >
                Häufigste Emotion: {topEmotion}
              </Text>
            ) : null}
          </>
        )}
      </View>
    </View>
  );
}