managarten/manadeck/apps/mobile/components/study/StudyModeSelector.tsx

import React from 'react';
import { View, Pressable, Modal } from 'react-native';
import { Icon } from '../ui/Icon';
import { Text } from '../ui/Text';
import { Button } from '../ui/Button';
import { Card } from '../ui/Card';
import { useThemeColors } from '~/utils/themeUtils';

export type StudyMode = 'all' | 'new' | 'review' | 'favorites' | 'random';

interface StudyModeSelectorProps {
  visible: boolean;
  onClose: () => void;
  onSelectMode: (mode: StudyMode) => void;
  cardStats?: {
    total: number;
    favorites: number;
    new: number;
    review: number;
  };
}

interface StudyModeOption {
  id: StudyMode;
  name: string;
  description: string;
  icon: string;
  getColor: (colors: ReturnType<typeof useThemeColors>) => string;
  disabled?: boolean;
}

const getStudyModes = (colors: ReturnType<typeof useThemeColors>): StudyModeOption[] => [
  {
    id: 'all' as StudyMode,
    name: 'Alle Karten',
    description: 'Alle Karten der Reihe nach durchgehen',
    icon: 'albums-outline',
    getColor: (c) => c.primary,
  },
  {
    id: 'random' as StudyMode,
    name: 'Zufällig',
    description: 'Karten in zufälliger Reihenfolge',
    icon: 'shuffle-outline',
    getColor: (c) => c.secondary,
  },
  {
    id: 'favorites' as StudyMode,
    name: 'Favoriten',
    description: 'Nur als Favorit markierte Karten',
    icon: 'heart-outline',
    getColor: (c) => c.destructive,
  },
  {
    id: 'new' as StudyMode,
    name: 'Neue Karten',
    description: 'Noch nicht gelernte Karten',
    icon: 'sparkles-outline',
    getColor: (c) => c.accent,
    disabled: false,
  },
  {
    id: 'review' as StudyMode,
    name: 'Wiederholung',
    description: 'Fällige Karten wiederholen',
    icon: 'refresh-outline',
    getColor: (c) => c.secondary,
    disabled: false,
  },
];

export const StudyModeSelector: React.FC<StudyModeSelectorProps> = ({
  visible,
  onClose,
  onSelectMode,
  cardStats,
}) => {
  const colors = useThemeColors();
  const studyModes = getStudyModes(colors);
  
  return (
    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
      <View style={{ flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' }}>
        <View style={{ borderTopLeftRadius: 24, borderTopRightRadius: 24, backgroundColor: colors.surface, paddingBottom: 32, paddingTop: 24 }}>
          <View style={{ marginBottom: 24, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24 }}>
            <Text style={{ fontSize: 20, fontWeight: 'bold', color: colors.foreground }}>Lernmodus wählen</Text>
            <Pressable onPress={onClose} style={({ pressed }) => pressed && { opacity: 0.7 }}>
              <Icon name="close" library="Ionicons" size={24} color={colors.foreground} />
            </Pressable>
          </View>

          <View style={{ paddingHorizontal: 24 }}>
            {studyModes.map((mode) => (
              <Pressable
                key={mode.id}
                onPress={() => {
                  if (!mode.disabled) {
                    onSelectMode(mode.id);
                    onClose();
                  }
                }}
                disabled={mode.disabled}
                style={({ pressed }) => ({ opacity: pressed && !mode.disabled ? 0.7 : 1 })}>
                <Card
                  variant={mode.disabled ? 'outlined' : 'elevated'}
                  padding="md"
                  style={{ marginBottom: 12, opacity: mode.disabled ? 0.5 : 1 }}>
                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                    <View
                      style={{
                        height: 48,
                        width: 48,
                        backgroundColor: mode.disabled ? colors.muted : mode.getColor(colors),
                        marginRight: 16,
                        alignItems: 'center',
                        justifyContent: 'center',
                        borderRadius: 8,
                      }}>
                      <Icon name={mode.icon} library="Ionicons" size={24} color={mode.disabled ? colors.mutedForeground : "white"} />
                    </View>
                    <View style={{ flex: 1 }}>
                      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <Text style={{ fontSize: 16, fontWeight: '600', color: colors.foreground }}>{mode.name}</Text>
                        {mode.disabled && (
                          <View style={{ marginLeft: 8, borderRadius: 12, backgroundColor: colors.muted, paddingHorizontal: 8, paddingVertical: 2 }}>
                            <Text style={{ fontSize: 12, color: colors.mutedForeground }}>Bald verfügbar</Text>
                          </View>
                        )}
                      </View>
                      <Text style={{ marginTop: 4, fontSize: 14, color: colors.mutedForeground }}>{mode.description}</Text>
                      {cardStats && mode.id === 'all' && (
                        <Text style={{ marginTop: 4, fontSize: 12, color: colors.mutedForeground }}>
                          {cardStats.total} Karten verfügbar
                        </Text>
                      )}
                      {cardStats && mode.id === 'favorites' && (
                        <Text style={{ marginTop: 4, fontSize: 12, color: colors.mutedForeground }}>
                          {cardStats.favorites} Favoriten verfügbar
                        </Text>
                      )}
                    </View>
                    {!mode.disabled && (
                      <Icon name="chevron-forward" library="Ionicons" size={20} color={colors.mutedForeground} />
                    )}
                  </View>
                </Card>
              </Pressable>
            ))}

            <View style={{ marginTop: 16 }}>
              <Button onPress={onClose} variant="outline" fullWidth>
                Abbrechen
              </Button>
            </View>
          </View>
        </View>
      </View>
    </Modal>
  );
};