FEDEO/mobile/app/(tabs)/explore.tsx

import { useState } from 'react';
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';

import { useAuth, useTokenStorageInfo } from '@/src/providers/auth-provider';

const PRIMARY = '#69c350';

export default function AccountScreen() {
  const { token, user, tenants, activeTenantId, activeTenant, switchTenant, logout } = useAuth();
  const storageInfo = useTokenStorageInfo();

  const [switchingTenantId, setSwitchingTenantId] = useState<number | null>(null);
  const [switchError, setSwitchError] = useState<string | null>(null);

  const userId = String(user?.id || 'unbekannt');

  async function onSwitchTenant(tenantId: number) {
    setSwitchingTenantId(tenantId);
    setSwitchError(null);

    try {
      await switchTenant(tenantId);
    } catch (err) {
      setSwitchError(err instanceof Error ? err.message : 'Tenant konnte nicht gewechselt werden.');
    } finally {
      setSwitchingTenantId(null);
    }
  }

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.title}>Konto</Text>
      <Text style={styles.subtitle}>Session-Infos und Tenant-Wechsel.</Text>

      <View style={styles.card}>
        <Text style={styles.label}>Token vorhanden</Text>
        <Text style={styles.value}>{token ? 'ja' : 'nein'}</Text>

        <Text style={styles.label}>User ID</Text>
        <Text style={styles.value}>{userId}</Text>

        <Text style={styles.label}>Aktiver Tenant</Text>
        <Text style={styles.value}>{activeTenant ? `${activeTenant.name} (#${activeTenantId})` : 'nicht gesetzt'}</Text>

        <Text style={styles.label}>Storage Modus</Text>
        <Text style={styles.value}>{storageInfo.mode}</Text>
      </View>

      <View style={styles.card}>
        <Text style={styles.sectionTitle}>Tenant wechseln</Text>

        {switchError ? <Text style={styles.error}>{switchError}</Text> : null}

        {tenants.map((tenant) => {
          const tenantId = Number(tenant.id);
          const isActive = tenantId === activeTenantId;
          const isSwitching = switchingTenantId === tenantId;

          return (
            <Pressable
              key={String(tenant.id)}
              style={[
                styles.tenantButton,
                isActive ? styles.tenantButtonActive : null,
                isSwitching ? styles.tenantButtonDisabled : null,
              ]}
              onPress={() => onSwitchTenant(tenantId)}
              disabled={isActive || switchingTenantId !== null}>
              <View style={styles.tenantInfo}>
                <Text style={styles.tenantName} numberOfLines={2} ellipsizeMode="tail">
                  {tenant.name}
                </Text>
                <Text style={styles.tenantMeta}>ID: {tenantId}</Text>
              </View>
              <View style={styles.tenantActionWrap}>
                <Text style={styles.tenantAction}>{isActive ? 'Aktiv' : isSwitching ? 'Wechsel...' : 'Wechseln'}</Text>
              </View>
            </Pressable>
          );
        })}
      </View>

      <Pressable style={styles.logoutButton} onPress={logout}>
        <Text style={styles.logoutText}>Logout</Text>
      </Pressable>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    backgroundColor: '#f9fafb',
    padding: 16,
    gap: 12,
  },
  title: {
    fontSize: 24,
    fontWeight: '700',
    color: '#111827',
  },
  subtitle: {
    color: '#6b7280',
  },
  card: {
    backgroundColor: '#ffffff',
    borderRadius: 12,
    padding: 14,
    borderWidth: 1,
    borderColor: '#e5e7eb',
    gap: 8,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#111827',
    marginBottom: 2,
  },
  label: {
    fontSize: 12,
    color: '#6b7280',
    textTransform: 'uppercase',
  },
  value: {
    fontSize: 16,
    color: '#111827',
    marginBottom: 2,
  },
  error: {
    color: '#dc2626',
    marginBottom: 4,
  },
  tenantButton: {
    borderRadius: 10,
    padding: 12,
    borderWidth: 1,
    borderColor: '#d1d5db',
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  tenantButtonActive: {
    borderColor: PRIMARY,
    backgroundColor: '#eff9ea',
  },
  tenantButtonDisabled: {
    opacity: 0.6,
  },
  tenantInfo: {
    flex: 1,
    minWidth: 0,
    paddingRight: 10,
  },
  tenantName: {
    fontSize: 15,
    fontWeight: '600',
    color: '#111827',
    flexShrink: 1,
  },
  tenantMeta: {
    color: '#6b7280',
    marginTop: 3,
  },
  tenantActionWrap: {
    minWidth: 84,
    alignItems: 'flex-end',
  },
  tenantAction: {
    color: PRIMARY,
    fontWeight: '600',
    textAlign: 'right',
  },
  logoutButton: {
    marginTop: 4,
    backgroundColor: '#dc2626',
    minHeight: 44,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  logoutText: {
    color: '#ffffff',
    fontWeight: '600',
    fontSize: 16,
  },
});