stadtwerke/innungsapp/apps/mobile/app/(app)/profil/index.tsx

import { View, Text, ScrollView, TouchableOpacity, Alert, StyleSheet } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { Ionicons } from '@expo/vector-icons'
import { useAuth } from '@/hooks/useAuth'
import { MOCK_MEMBER_ME } from '@/lib/mock-data'

type Item = {
  label: string
  icon: React.ComponentProps<typeof Ionicons>['name']
  badge?: string
}

const MENU_ITEMS: Item[] = [
  { label: 'Persoenliche Daten', icon: 'person-outline' },
  { label: 'Betriebsdaten', icon: 'business-outline', badge: 'Aktiv' },
  { label: 'Mitteilungen', icon: 'notifications-outline', badge: '2' },
  { label: 'Sicherheit & Login', icon: 'shield-checkmark-outline' },
  { label: 'Hilfe & Support', icon: 'help-circle-outline' },
]

export default function ProfilScreen() {
  const { signOut } = useAuth()
  const member = MOCK_MEMBER_ME

  const initials = member.name
    .split(' ')
    .slice(0, 2)
    .map((chunk) => chunk[0]?.toUpperCase() ?? '')
    .join('')

  const openPlaceholder = () => {
    Alert.alert('Hinweis', 'Dieser Bereich folgt in einer naechsten Version.')
  }

  return (
    <SafeAreaView style={styles.safeArea} edges={['top']}>
      <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
        <View style={styles.hero}>
          <View style={styles.avatarWrap}>
            <Text style={styles.avatarText}>{initials}</Text>
            <TouchableOpacity style={styles.settingsBtn} activeOpacity={0.8} onPress={openPlaceholder}>
              <Ionicons name="settings-outline" size={15} color="#64748B" />
            </TouchableOpacity>
          </View>
          <Text style={styles.name}>{member.name}</Text>
          <Text style={styles.role}>Innungsgeschaeftsfuehrer</Text>
          <View style={styles.badgesRow}>
            <View style={styles.statusBadge}>
              <Text style={styles.statusBadgeText}>Admin-Status</Text>
            </View>
            <View style={[styles.statusBadge, styles.verifyBadge]}>
              <Text style={[styles.statusBadgeText, styles.verifyBadgeText]}>Verifiziert</Text>
            </View>
          </View>
        </View>

        <Text style={styles.sectionTitle}>Mein Account</Text>
        <View style={styles.menuCard}>
          {MENU_ITEMS.map((item, index) => (
            <TouchableOpacity
              key={item.label}
              style={[styles.menuRow, index < MENU_ITEMS.length - 1 && styles.menuRowBorder]}
              activeOpacity={0.82}
              onPress={openPlaceholder}
            >
              <View style={styles.menuLeft}>
                <View style={styles.menuIcon}>
                  <Ionicons name={item.icon} size={18} color="#475569" />
                </View>
                <Text style={styles.menuLabel}>{item.label}</Text>
              </View>
              <View style={styles.menuRight}>
                {item.badge ? (
                  <View style={[styles.rowBadge, item.badge === 'Aktiv' ? styles.rowBadgeActive : styles.rowBadgeAlert]}>
                    <Text style={styles.rowBadgeText}>{item.badge}</Text>
                  </View>
                ) : null}
                <Ionicons name="chevron-forward" size={16} color="#94A3B8" />
              </View>
            </TouchableOpacity>
          ))}
        </View>

        <Text style={styles.sectionTitle}>Unterstuetzung</Text>
        <View style={styles.supportCard}>
          <Text style={styles.supportTitle}>Probleme oder Fragen?</Text>
          <Text style={styles.supportText}>
            Unser Support-Team hilft Ihnen gerne bei technischen Schwierigkeiten weiter.
          </Text>
          <TouchableOpacity style={styles.supportBtn} activeOpacity={0.84} onPress={openPlaceholder}>
            <Text style={styles.supportBtnText}>Support kontaktieren</Text>
          </TouchableOpacity>
          <Ionicons name="help-circle-outline" size={70} color="rgba(255,255,255,0.12)" style={styles.supportIcon} />
        </View>

        <TouchableOpacity style={styles.logoutBtn} activeOpacity={0.84} onPress={() => void signOut()}>
          <Ionicons name="log-out-outline" size={20} color="#B91C1C" />
          <Text style={styles.logoutText}>Abmelden</Text>
        </TouchableOpacity>

        <Text style={styles.footer}>InnungsApp Version 2.4.0</Text>
      </ScrollView>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#F8FAFC',
  },
  content: {
    paddingHorizontal: 18,
    paddingBottom: 30,
    gap: 14,
  },
  hero: {
    backgroundColor: '#FFFFFF',
    alignItems: 'center',
    paddingTop: 24,
    paddingBottom: 18,
    borderRadius: 22,
    borderWidth: 1,
    borderColor: '#E2E8F0',
    marginTop: 8,
  },
  avatarWrap: {
    position: 'relative',
  },
  avatarText: {
    width: 94,
    height: 94,
    borderRadius: 47,
    backgroundColor: '#DBEAFE',
    borderWidth: 4,
    borderColor: '#FFFFFF',
    overflow: 'hidden',
    textAlign: 'center',
    textAlignVertical: 'center',
    color: '#003B7E',
    fontSize: 34,
    fontWeight: '800',
    includeFontPadding: false,
  },
  settingsBtn: {
    position: 'absolute',
    right: 0,
    bottom: 2,
    width: 30,
    height: 30,
    borderRadius: 15,
    backgroundColor: '#FFFFFF',
    borderWidth: 1,
    borderColor: '#E2E8F0',
    alignItems: 'center',
    justifyContent: 'center',
  },
  name: {
    marginTop: 14,
    fontSize: 24,
    fontWeight: '800',
    color: '#0F172A',
  },
  role: {
    marginTop: 2,
    fontSize: 12,
    fontWeight: '700',
    letterSpacing: 0.5,
    color: '#64748B',
    textTransform: 'uppercase',
  },
  badgesRow: {
    marginTop: 10,
    flexDirection: 'row',
    gap: 8,
  },
  statusBadge: {
    backgroundColor: '#DCFCE7',
    borderRadius: 999,
    paddingHorizontal: 10,
    paddingVertical: 4,
  },
  statusBadgeText: {
    color: '#166534',
    fontSize: 11,
    fontWeight: '700',
  },
  verifyBadge: {
    backgroundColor: '#DBEAFE',
  },
  verifyBadgeText: {
    color: '#1D4ED8',
  },
  sectionTitle: {
    marginTop: 2,
    paddingLeft: 2,
    fontSize: 11,
    textTransform: 'uppercase',
    letterSpacing: 1.1,
    color: '#94A3B8',
    fontWeight: '800',
  },
  menuCard: {
    backgroundColor: '#FFFFFF',
    borderRadius: 18,
    borderWidth: 1,
    borderColor: '#E2E8F0',
    overflow: 'hidden',
  },
  menuRow: {
    paddingHorizontal: 14,
    paddingVertical: 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  menuRowBorder: {
    borderBottomWidth: 1,
    borderBottomColor: '#F1F5F9',
  },
  menuLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  menuIcon: {
    width: 36,
    height: 36,
    borderRadius: 11,
    backgroundColor: '#F1F5F9',
    alignItems: 'center',
    justifyContent: 'center',
  },
  menuLabel: {
    fontSize: 14,
    fontWeight: '700',
    color: '#1E293B',
  },
  menuRight: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 7,
  },
  rowBadge: {
    paddingHorizontal: 8,
    paddingVertical: 3,
    borderRadius: 999,
  },
  rowBadgeActive: {
    backgroundColor: '#DCFCE7',
  },
  rowBadgeAlert: {
    backgroundColor: '#EF4444',
  },
  rowBadgeText: {
    fontSize: 10,
    fontWeight: '700',
    color: '#FFFFFF',
  },
  supportCard: {
    borderRadius: 18,
    backgroundColor: '#003B7E',
    padding: 16,
    overflow: 'hidden',
    position: 'relative',
  },
  supportTitle: {
    color: '#FFFFFF',
    fontSize: 18,
    fontWeight: '800',
    marginBottom: 4,
    maxWidth: 180,
  },
  supportText: {
    color: '#BFDBFE',
    fontSize: 12,
    lineHeight: 18,
    marginBottom: 12,
    maxWidth: 240,
  },
  supportBtn: {
    alignSelf: 'flex-start',
    backgroundColor: 'rgba(255,255,255,0.15)',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.25)',
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 8,
  },
  supportBtnText: {
    color: '#FFFFFF',
    fontSize: 12,
    fontWeight: '700',
    textTransform: 'uppercase',
    letterSpacing: 0.6,
  },
  supportIcon: {
    position: 'absolute',
    right: -10,
    bottom: -12,
  },
  logoutBtn: {
    marginTop: 4,
    backgroundColor: '#FEF2F2',
    borderRadius: 14,
    borderWidth: 1,
    borderColor: '#FECACA',
    paddingVertical: 14,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
  },
  logoutText: {
    color: '#B91C1C',
    fontSize: 14,
    fontWeight: '800',
    textTransform: 'uppercase',
    letterSpacing: 0.8,
  },
  footer: {
    textAlign: 'center',
    marginTop: 4,
    fontSize: 10,
    fontWeight: '700',
    letterSpacing: 1,
    color: '#94A3B8',
    textTransform: 'uppercase',
  },
})