managarten/maerchenzauber/apps/mobile/components/settings/DevSettingsSection.tsx

import React from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { router } from 'expo-router';
import Button from '../atoms/Button';
import Text from '../atoms/Text';

interface DevSettingsSectionProps {
  showDebugBorders: boolean;
  onToggleDebugBorders: () => void;
  onOpenOnboarding: () => void;
  onOpenCreators: () => void;
  loadingContext: 'character' | 'story' | 'image' | 'saving' | 'loading';
  onLoadingContextChange: (context: 'character' | 'story' | 'image' | 'saving' | 'loading') => void;
  onShowLoadingScreen: () => void;
  isWideScreen?: boolean;
}

export default function DevSettingsSection({
  showDebugBorders,
  onToggleDebugBorders,
  onOpenOnboarding,
  onOpenCreators,
  loadingContext,
  onLoadingContextChange,
  onShowLoadingScreen,
  isWideScreen = false,
}: DevSettingsSectionProps) {
  const buttonStyle = {
    marginBottom: isWideScreen ? 12 : 8,
  };

  // Unified dev settings color - matching other settings elements
  const DEV_COLOR = '#333333';
  const DEV_COLOR_ACTIVE = '#555555';

  return (
    <View style={styles.container}>
      <Button
        title="Debug Borders"
        onPress={onToggleDebugBorders}
        color={showDebugBorders ? DEV_COLOR_ACTIVE : DEV_COLOR}
        variant="primary"
        size="lg"
        iconName="border-all"
        iconPosition="left"
        style={buttonStyle}
      />
      <Button
        title="Einführung anzeigen"
        onPress={onOpenOnboarding}
        color={DEV_COLOR}
        variant="primary"
        size="lg"
        iconName="school"
        iconPosition="left"
        style={buttonStyle}
      />
      <Button
        title="Unsere Künstler"
        onPress={onOpenCreators}
        color={DEV_COLOR}
        variant="primary"
        size="lg"
        iconName="brush"
        iconPosition="left"
        style={buttonStyle}
      />
      <Button
        title="Creator Verwaltung"
        onPress={() => router.push('/creator-management')}
        color={DEV_COLOR}
        variant="primary"
        size="lg"
        iconName="settings"
        iconPosition="left"
        style={buttonStyle}
      />
      <Button
        title="Bildgenerierung"
        onPress={() => router.push('/(tabs)/(settings)/image-model')}
        color={DEV_COLOR}
        variant="primary"
        size="lg"
        iconName="image"
        iconPosition="left"
        style={buttonStyle}
      />
      <Button
        title="Time of Day Tester"
        onPress={() => router.push('/time-of-day-test')}
        color={DEV_COLOR}
        variant="primary"
        size="lg"
        iconName="sunny"
        iconPosition="left"
        style={buttonStyle}
      />
      <View style={styles.loadingScreenControls}>
        <Text style={styles.controlLabel}>Loading Screen Test:</Text>
        <View style={styles.contextSelector}>
          {(['character', 'story', 'image', 'saving', 'loading'] as const).map((context) => (
            <TouchableOpacity
              key={context}
              style={[styles.contextButton, loadingContext === context && styles.activeContextButton]}
              onPress={() => onLoadingContextChange(context)}
            >
              <Text style={[styles.contextButtonText, loadingContext === context && styles.activeContextButtonText]}>
                {context}
              </Text>
            </TouchableOpacity>
          ))}
        </View>
        <Button
          title="Loading Screen anzeigen"
          onPress={onShowLoadingScreen}
          color={DEV_COLOR}
          variant="primary"
          size="lg"
          iconName="timer"
          iconPosition="left"
          style={buttonStyle}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 16,
  },
  loadingScreenControls: {
    marginTop: 16,
    backgroundColor: '#2C2C2C',
    borderRadius: 12,
    padding: 16,
  },
  controlLabel: {
    color: '#FFFFFF',
    fontSize: 16,
    marginBottom: 8,
  },
  contextSelector: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginBottom: 16,
    gap: 8,
  },
  contextButton: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 16,
    backgroundColor: '#444444',
    marginRight: 8,
    marginBottom: 8,
  },
  activeContextButton: {
    backgroundColor: '#9C27B0',
  },
  contextButtonText: {
    color: '#CCCCCC',
    fontSize: 14,
  },
  activeContextButtonText: {
    color: '#FFFFFF',
    fontWeight: 'bold',
  },
});