// apps/mobile/app/(tabs)/profile.tsx
// 프로필 — 사용자 정보 + 로그아웃

import { View, Text, Pressable, StyleSheet, Alert } from 'react-native'
import { useAuth } from '../../lib/auth-context'
import { supabase } from '../../lib/supabase'

export default function ProfileScreen(): React.ReactElement {
  const { user } = useAuth()

  async function handleLogout(): Promise<void> {
    Alert.alert('로그아웃', '정말 로그아웃하시겠습니까?', [
      { text: '취소', style: 'cancel' },
      {
        text: '로그아웃',
        style: 'destructive',
        onPress: async () => {
          await supabase.auth.signOut()
        }
      }
    ])
  }

  return (
    <View style={styles.container}>
      <View style={styles.section}>
        <Text style={styles.label}>이메일</Text>
        <Text style={styles.value}>{user?.email ?? '—'}</Text>
      </View>

      <View style={styles.section}>
        <Text style={styles.label}>User ID</Text>
        <Text style={styles.value}>{user?.id ?? '—'}</Text>
      </View>

      <Pressable style={styles.logoutButton} onPress={() => void handleLogout()}>
        <Text style={styles.logoutText}>로그아웃</Text>
      </Pressable>
    </View>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 24 },
  section: {
    backgroundColor: '#242427',
    padding: 16,
    borderRadius: 12,
    marginBottom: 16,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.04)'
  },
  label: {
    color: '#8e8e93',
    fontSize: 11,
    fontWeight: '700',
    letterSpacing: 1.5,
    textTransform: 'uppercase',
    marginBottom: 4
  },
  value: { color: '#ffffff', fontSize: 14 },
  logoutButton: {
    marginTop: 16,
    paddingVertical: 14,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#ef4444',
    alignItems: 'center'
  },
  logoutText: { color: '#ef4444', fontSize: 14, fontWeight: '600' }
})