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

import React, { useState } from 'react';
import { View, StyleSheet, Linking, Alert } from 'react-native';
import { useRouter } from 'expo-router';
import Button from '../atoms/Button';
import Text from '../atoms/Text';
import { ParentalGate } from '../../src/components/ParentalGate';
import { useParentalGate } from '../../src/hooks/useParentalGate';

interface AccountSectionProps {
  email?: string;
  onLogout: () => void;
  isWideScreen?: boolean;
}

export default function AccountSection({ email, onLogout, isWideScreen = false }: AccountSectionProps) {
  const router = useRouter();
  const { isVisible, config, setIsVisible, openEmailWithGate, openExternalLinkWithGate } = useParentalGate();

  const dynamicStyles = {
    userInfo: {
      padding: isWideScreen ? 20 : 16,
      marginBottom: isWideScreen ? 20 : 16,
    },
    button: {
      marginBottom: isWideScreen ? 12 : 8,
    },
  };

  const handleContactPress = () => {
    openEmailWithGate('kontakt@memoro.ai');
  };

  const handleFeedbackPress = () => {
    router.push('/feedback');
  };

  const handlePrivacyPress = () => {
    openExternalLinkWithGate('https://märchen-zauber.de/privacy', {
      title: 'Datenschutzerklärung öffnen',
      message: 'Um die Datenschutzerklärung zu öffnen, löse bitte diese Rechenaufgabe:',
    });
  };

  const handleTermsPress = () => {
    openExternalLinkWithGate('https://märchen-zauber.de/terms', {
      title: 'AGB öffnen',
      message: 'Um die AGB zu öffnen, löse bitte diese Rechenaufgabe:',
    });
  };

  const handleDeleteAccount = () => {
    Alert.alert(
      'Account löschen',
      'Möchtest du deinen Account wirklich löschen? Alle deine Geschichten und Charaktere werden dauerhaft gelöscht.\n\nBitte kontaktiere unseren Support, um dein Konto zu löschen.',
      [
        {
          text: 'Abbrechen',
          style: 'cancel',
        },
        {
          text: 'Support kontaktieren',
          style: 'destructive',
          onPress: () => {
            openEmailWithGate(
              'kontakt@memoro.ai',
              'Account Deletion Request',
              `Hallo,\n\nIch möchte meinen Account löschen.\n\nE-Mail: ${email}\n\nBitte löscht alle meine Daten gemäß DSGVO.\n\nVielen Dank`
            );
          },
        },
      ]
    );
  };

  return (
    <View style={styles.container}>
      <ParentalGate
        visible={isVisible}
        onSuccess={() => {
          setIsVisible(false);
          config.onSuccess?.();
        }}
        onCancel={() => setIsVisible(false)}
        title={config.title}
        message={config.message}
      />

      <View style={[styles.userInfo, dynamicStyles.userInfo]}>
        <Text style={styles.label}>E-Mail</Text>
        <Text style={styles.email}>{email}</Text>
      </View>

      <Button
        title="Feedback & Wünsche"
        onPress={handleFeedbackPress}
        color="#4A9EFF"
        iconName="bubble.left"
        iconSet="sf-symbols"
        iconPosition="left"
        style={[styles.feedbackButton, dynamicStyles.button]}
      />

      <Button
        title="Support kontaktieren"
        onPress={handleContactPress}
        color="#333333"
        iconName="envelope"
        iconSet="sf-symbols"
        iconPosition="left"
        style={[styles.contactButton, dynamicStyles.button]}
      />

      <View style={styles.legalLinksContainer}>
        <Button
          title="Datenschutzerklärung"
          onPress={handlePrivacyPress}
          color="#444444"
          iconName="shield"
          iconSet="sf-symbols"
          iconPosition="left"
          style={[styles.legalButton, dynamicStyles.button]}
        />

        <Button
          title="AGB"
          onPress={handleTermsPress}
          color="#444444"
          iconName="doc.text"
          iconSet="sf-symbols"
          iconPosition="left"
          style={[styles.legalButton, dynamicStyles.button]}
        />
      </View>

      <Button
        title="Account löschen"
        onPress={handleDeleteAccount}
        color="#FF3B30"
        iconName="trash"
        iconSet="sf-symbols"
        iconPosition="left"
        style={[styles.deleteButton, dynamicStyles.button]}
      />

      <Button
        title="Abmelden"
        onPress={onLogout}
        color="#333333"
        iconName="rectangle.portrait.and.arrow.right"
        iconSet="sf-symbols"
        iconPosition="left"
        style={[styles.logoutButton, dynamicStyles.button]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 16,
  },
  userInfo: {
    backgroundColor: '#222',
    borderRadius: 12,
  },
  label: {
    color: '#999999',
    fontSize: 14,
    marginBottom: 4,
  },
  email: {
    color: '#fff',
    fontSize: 16,
  },
  feedbackButton: {
    marginTop: 8,
  },
  contactButton: {
    marginTop: 8,
  },
  legalLinksContainer: {
    marginTop: 16,
    marginBottom: 8,
  },
  legalButton: {
    marginTop: 8,
  },
  deleteButton: {
    marginTop: 16,
  },
  logoutButton: {
    marginTop: 8,
  },
});