rebreak-monorepo/apps/rebreak-native/components/profile/ProfileHeader.tsx

import { useState } from 'react';
import { View, Text, Pressable, Image } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { colors } from '../../lib/theme';
import { resolveAvatar } from '../../lib/resolveAvatar';
import type { Plan } from '../../hooks/useUserPlan';

export type AuthProvider = 'apple' | 'google' | 'email';

type Props = {
  nickname: string;
  email: string;
  avatar: string | null;
  plan: Plan;
  memberSince: string;
  provider: AuthProvider;
  showDemographicsHint?: boolean;
  onEditAvatar?: () => void;
  onEditNickname?: () => void;
  onDemographicsHintPress?: () => void;
};

const planLabel: Record<Plan, string> = {
  free: 'Free',
  pro: 'Pro',
  legend: 'Legend',
};

const planColors: Record<Plan, { bg: string; text: string; border: string }> = {
  free: { bg: '#f5f5f5', text: '#525252', border: '#e5e5e5' },
  pro: { bg: '#fff7ed', text: '#c2410c', border: '#fed7aa' },
  legend: { bg: '#fef9c3', text: '#854d0e', border: '#fde68a' },
};

export function ProfileHeader({
  nickname,
  email,
  avatar,
  plan,
  memberSince,
  provider,
  showDemographicsHint,
  onEditAvatar,
  onEditNickname,
  onDemographicsHintPress,
}: Props) {
  const [imageFailed, setImageFailed] = useState(false);
  const avatarUrl = resolveAvatar(avatar, nickname);
  const initials = nickname.slice(0, 2).toUpperCase();
  const showImage = !!avatar && !imageFailed;

  const planStyle = planColors[plan];

  const providerPillLabel =
    provider === 'apple' ? 'via Apple Sign-In'
    : provider === 'google' ? 'via Google Sign-In'
    : null;

  return (
    <View style={{ alignItems: 'center', paddingVertical: 24, paddingHorizontal: 20 }}>
      {/* Avatar — Pressable; Camera-Badge ist eigene Pressable (vorher nur dekoratives View) */}
      <Pressable
        onPress={onEditAvatar}
        style={({ pressed }) => ({
          position: 'relative',
          opacity: pressed ? 0.85 : 1,
        })}
      >
        <View
          style={{
            width: 96,
            height: 96,
            borderRadius: 48,
            borderWidth: 2,
            borderColor: planStyle.border,
            alignItems: 'center',
            justifyContent: 'center',
            overflow: 'hidden',
            backgroundColor: showImage ? '#fafafa' : colors.brandOrange,
          }}
        >
          {showImage ? (
            <Image
              source={{ uri: avatarUrl }}
              onError={() => setImageFailed(true)}
              style={{ width: 92, height: 92, borderRadius: 46 }}
            />
          ) : (
            <Text style={{ color: '#fff', fontSize: 32, fontFamily: 'Nunito_700Bold' }}>
              {initials}
            </Text>
          )}
        </View>

        {/* Camera-Badge — iOS-Photos-Pattern: blauer Kreis, weißes Icon */}
        <View
          pointerEvents="none"
          style={{
            position: 'absolute',
            right: -2,
            bottom: -2,
            width: 30,
            height: 30,
            borderRadius: 15,
            backgroundColor: '#0a0a0a',
            borderWidth: 2,
            borderColor: '#ffffff',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Ionicons name="camera" size={14} color="#ffffff" />
        </View>
      </Pressable>

      {/* Nickname — ganze Zeile Pressable (iOS-Settings-Pattern), kein hässliches Pencil */}
      <Pressable
        onPress={onEditNickname}
        hitSlop={8}
        style={({ pressed }) => ({
          flexDirection: 'row',
          alignItems: 'center',
          marginTop: 16,
          gap: 6,
          opacity: pressed ? 0.5 : 1,
        })}
      >
        <Text
          style={{
            fontSize: 22,
            color: colors.text,
            fontFamily: 'Nunito_700Bold',
          }}
        >
          {nickname}
        </Text>
        <Ionicons name="chevron-forward" size={16} color={colors.textMuted} />
      </Pressable>

      {providerPillLabel ? (
        <View
          style={{
            marginTop: 4,
            flexDirection: 'row',
            alignItems: 'center',
            gap: 6,
            paddingHorizontal: 10,
            paddingVertical: 4,
            borderRadius: 999,
            backgroundColor: '#f5f5f5',
            borderWidth: 1,
            borderColor: '#e5e5e5',
          }}
        >
          <Ionicons
            name={provider === 'apple' ? 'logo-apple' : 'logo-google'}
            size={11}
            color={colors.textMuted}
          />
          <Text style={{ fontSize: 11, color: colors.textMuted, fontFamily: 'Nunito_600SemiBold' }}>
            {providerPillLabel}
          </Text>
        </View>
      ) : (
        <Text
          style={{
            marginTop: 4,
            fontSize: 12,
            color: colors.textMuted,
            fontFamily: 'Nunito_400Regular',
          }}
        >
          {email}
        </Text>
      )}

      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, marginTop: 12 }}>
        <View
          style={{
            paddingHorizontal: 10,
            paddingVertical: 3,
            borderRadius: 999,
            backgroundColor: planStyle.bg,
            borderWidth: 1,
            borderColor: planStyle.border,
          }}
        >
          <Text
            style={{
              fontSize: 11,
              color: planStyle.text,
              fontFamily: 'Nunito_700Bold',
              letterSpacing: 0.4,
            }}
          >
            {planLabel[plan].toUpperCase()}
          </Text>
        </View>
        <Text style={{ fontSize: 12, color: colors.textMuted, fontFamily: 'Nunito_400Regular' }}>
          Mitglied seit {memberSince}
        </Text>
      </View>

      {/* Freundlicher Hint statt Progress-Bar — nur sichtbar wenn Demographics unvollständig */}
      {showDemographicsHint ? (
        <Pressable
          onPress={onDemographicsHintPress}
          hitSlop={6}
          style={({ pressed }) => ({
            alignSelf: 'stretch',
            width: '100%',
            marginTop: 14,
            paddingHorizontal: 14,
            paddingVertical: 12,
            borderRadius: 12,
            backgroundColor: '#f5f8ff',
            borderWidth: 1,
            borderColor: '#dbe5ff',
            flexDirection: 'row',
            alignItems: 'center',
            gap: 10,
            opacity: pressed ? 0.7 : 1,
          })}
        >
          <Ionicons name="heart-outline" size={16} color={colors.brandOrange} style={{ flexShrink: 0 }} />
          <Text
            numberOfLines={2}
            style={{
              flex: 1,
              minWidth: 0,
              flexShrink: 1,
              fontSize: 12,
              color: colors.text,
              fontFamily: 'Nunito_600SemiBold',
              lineHeight: 17,
            }}
          >
            Hilf uns rebreak besser zu machen — fülle deine anonymen Daten aus.
          </Text>
          <Ionicons name="chevron-forward" size={14} color={colors.textMuted} style={{ flexShrink: 0 }} />
        </Pressable>
      ) : null}
    </View>
  );
}