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

import { View, StyleSheet, Alert, ScrollView } from 'react-native'
import { MetalCard, PhosphorText, PhysicalButton, d3roNativePalette } from '@d3ro/ui-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 (
    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
      <MetalCard style={styles.section}>
        <PhosphorText variant="label" color="label">
          이메일
        </PhosphorText>
        <PhosphorText variant="body" color="primary" style={styles.value}>
          {user?.email ?? '—'}
        </PhosphorText>
      </MetalCard>

      <MetalCard style={styles.section}>
        <PhosphorText variant="label" color="label">
          USER ID
        </PhosphorText>
        <PhosphorText variant="small" color="primary" style={styles.value}>
          {user?.id ?? '—'}
        </PhosphorText>
      </MetalCard>

      <View style={styles.logoutWrap}>
        <PhysicalButton label="로그아웃" variant="danger" onPress={() => void handleLogout()} />
      </View>
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: d3roNativePalette.bg.app },
  content: { padding: 24 },
  section: { marginBottom: 16 },
  value: { marginTop: 6 },
  logoutWrap: { marginTop: 8 }
})