managarten/memoro/apps/mobile/components/statistics/WeeklyChart.tsx

import React from 'react';
import { View, Text, Dimensions } from 'react-native';
import { useTheme } from '~/features/theme/ThemeProvider';
import colors from '~/tailwind.config.js';
import { useTranslation } from 'react-i18next';

interface WeekData {
  weekNumber: number;
  year: number;
  startDate: Date;
  endDate: Date;
  memos: number;
  memories: number;
  duration: number;
  words: number;
}

interface WeeklyChartProps {
  data: WeekData[];
}

/**
 * Beautiful visual chart component for displaying weekly statistics
 */
const WeeklyChart: React.FC<WeeklyChartProps> = ({ data }) => {
  const { isDark, themeVariant } = useTheme();
  const { t } = useTranslation();
  const screenWidth = Dimensions.get('window').width;
  const chartWidth = screenWidth - 80; // Account for padding

  const textColor = isDark ? '#FFFFFF' : '#000000';
  const textSecondaryColor = isDark ? '#CCCCCC' : '#666666';
  const contentBackgroundColor = isDark
    ? (colors as any).theme?.extend?.colors?.dark?.[themeVariant]?.contentBackground
    : (colors as any).theme?.extend?.colors?.[themeVariant]?.contentBackground;
  const borderColor = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
  const primaryColor = isDark
    ? (colors as any).theme?.extend?.colors?.dark?.[themeVariant]?.primary
    : (colors as any).theme?.extend?.colors?.[themeVariant]?.primary;

  if (data.length === 0) return null;

  // Find max values for scaling
  const maxMemos = Math.max(...data.map((w) => w.memos));
  const maxMemories = Math.max(...data.map((w) => w.memories));
  const maxWords = Math.max(...data.map((w) => w.words));

  // Bar width calculation
  const barWidth = Math.max(20, (chartWidth - data.length * 8) / data.length);

  const formatDuration = (seconds: number): string => {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);

    if (hours > 0) {
      return `${hours}h ${minutes}m`;
    } else if (minutes > 0) {
      return `${minutes}m`;
    } else {
      return `${seconds}s`;
    }
  };

  const formatWeekLabel = (week: WeekData) => {
    return `${t('statistics.week_abbr')}${week.weekNumber}`;
  };

  return (
    <View
      style={{
        backgroundColor: contentBackgroundColor,
        borderRadius: 16,
        borderWidth: 1.5,
        borderColor: borderColor,
        padding: 20,
      }}>
      {/* Chart Title */}
      <Text
        style={{
          fontSize: 16,
          fontWeight: '600',
          color: textColor,
          marginBottom: 20,
          textAlign: 'center',
        }}>
        {t('statistics.memo_activity_recent_weeks', 'Memo-Aktivität der letzten Wochen')}
      </Text>

      {/* Bar Chart */}
      <View
        style={{
          height: 200,
          flexDirection: 'row',
          alignItems: 'flex-end',
          justifyContent: 'space-around',
          marginBottom: 20,
        }}>
        {data
          .slice()
          .reverse()
          .map((week, index) => {
            const memoHeight = maxMemos > 0 ? (week.memos / maxMemos) * 150 : 0;
            const memoryHeight = maxMemories > 0 ? (week.memories / maxMemories) * 150 : 0;

            return (
              <View
                key={`${week.year}-W${week.weekNumber}`}
                style={{
                  alignItems: 'center',
                  width: barWidth,
                }}>
                {/* Bars Container */}
                <View
                  style={{
                    height: 150,
                    flexDirection: 'row',
                    alignItems: 'flex-end',
                    justifyContent: 'center',
                    gap: 2,
                  }}>
                  {/* Memo Bar */}
                  <View
                    style={{
                      width: Math.max(8, barWidth / 3),
                      height: Math.max(2, memoHeight),
                      backgroundColor: primaryColor,
                      borderRadius: 2,
                      opacity: 0.8,
                    }}
                  />

                  {/* Memory Bar */}
                  <View
                    style={{
                      width: Math.max(8, barWidth / 3),
                      height: Math.max(2, memoryHeight),
                      backgroundColor: primaryColor,
                      borderRadius: 2,
                      opacity: 0.5,
                    }}
                  />
                </View>

                {/* Week Label */}
                <Text
                  style={{
                    fontSize: 10,
                    color: textSecondaryColor,
                    marginTop: 8,
                    textAlign: 'center',
                  }}>
                  {formatWeekLabel(week)}
                </Text>

                {/* Value Label */}
                <Text
                  style={{
                    fontSize: 9,
                    color: textSecondaryColor,
                    marginTop: 2,
                    textAlign: 'center',
                  }}>
                  {week.memos}
                </Text>
              </View>
            );
          })}
      </View>

      {/* Legend */}
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'center',
          gap: 20,
          marginBottom: 15,
        }}>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 6,
          }}>
          <View
            style={{
              width: 12,
              height: 8,
              backgroundColor: primaryColor,
              borderRadius: 2,
              opacity: 0.8,
            }}
          />
          <Text
            style={{
              fontSize: 12,
              color: textSecondaryColor,
            }}>
            {t('statistics.memos')}
          </Text>
        </View>

        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 6,
          }}>
          <View
            style={{
              width: 12,
              height: 8,
              backgroundColor: primaryColor,
              borderRadius: 2,
              opacity: 0.5,
            }}
          />
          <Text
            style={{
              fontSize: 12,
              color: textSecondaryColor,
            }}>
            {t('statistics.memories')}
          </Text>
        </View>
      </View>

      {/* Summary Stats */}
      <View
        style={{
          borderTopWidth: 1,
          borderTopColor: borderColor,
          paddingTop: 15,
          flexDirection: 'row',
          justifyContent: 'space-around',
        }}>
        <View style={{ alignItems: 'center' }}>
          <Text
            style={{
              fontSize: 18,
              fontWeight: 'bold',
              color: textColor,
            }}>
            {data.reduce((sum, week) => sum + week.memos, 0)}
          </Text>
          <Text
            style={{
              fontSize: 12,
              color: textSecondaryColor,
            }}>
            {t('statistics.memos')}
          </Text>
        </View>

        <View style={{ alignItems: 'center' }}>
          <Text
            style={{
              fontSize: 18,
              fontWeight: 'bold',
              color: textColor,
            }}>
            {data.reduce((sum, week) => sum + week.memories, 0)}
          </Text>
          <Text
            style={{
              fontSize: 12,
              color: textSecondaryColor,
            }}>
            {t('statistics.memories')}
          </Text>
        </View>

        <View style={{ alignItems: 'center' }}>
          <Text
            style={{
              fontSize: 18,
              fontWeight: 'bold',
              color: textColor,
            }}>
            {formatDuration(data.reduce((sum, week) => sum + week.duration, 0))}
          </Text>
          <Text
            style={{
              fontSize: 12,
              color: textSecondaryColor,
            }}>
            {t('statistics.total', 'Gesamt')}
          </Text>
        </View>
      </View>
    </View>
  );
};

export default WeeklyChart;