import { View, Text, TouchableOpacity, ScrollView, Alert, StyleSheet } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { LogOut, CreditCard, Globe } from 'lucide-react-native'
import { useAuthStore } from '@/lib/store'
import { C } from '@/lib/theme'

const TIER_LABELS: Record<string, string> = {
  FREE: 'Gratuit',
  BASIC: 'Basic',
  PRO: 'Pro',
  BUSINESS: 'Business',
  ENTERPRISE: 'Enterprise',
}

export default function ProfileScreen() {
  const { user, logout } = useAuthStore()
  const initial = (user?.name?.[0] ?? user?.email?.[0] ?? '?').toUpperCase()

  const handleLogout = () => {
    Alert.alert(
      'Se déconnecter',
      'Voulez-vous vraiment vous déconnecter ?',
      [
        { text: 'Annuler', style: 'cancel' },
        { text: 'Déconnecter', style: 'destructive', onPress: logout },
      ]
    )
  }

  return (
    <SafeAreaView style={s.safe}>
      <ScrollView style={{ flex: 1, paddingHorizontal: 20 }}>
        <Text style={s.title}>Profil</Text>

        <View style={s.card}>
          <View style={s.avatar}>
            <Text style={s.avatarText}>{initial}</Text>
          </View>
          <Text style={s.name}>{user?.name ?? 'Utilisateur'}</Text>
          <Text style={s.email}>{user?.email}</Text>
          {user?.tier && (
            <View style={s.badge}>
              <Text style={s.badgeText}>{TIER_LABELS[user.tier] ?? user.tier}</Text>
            </View>
          )}
        </View>

        <View style={s.actionsCard}>
          <TouchableOpacity style={[s.actionRow, s.actionRowBorder]}>
            <CreditCard size={18} color={C.concrete} />
            <Text style={s.actionText}>Abonnement</Text>
          </TouchableOpacity>
          <TouchableOpacity style={s.actionRow}>
            <Globe size={18} color={C.concrete} />
            <Text style={s.actionText}>Ouvrir memento-note.com</Text>
          </TouchableOpacity>
        </View>

        <TouchableOpacity onPress={handleLogout} style={s.logoutBtn}>
          <LogOut size={18} color={C.rose} />
          <Text style={s.logoutText}>Se déconnecter</Text>
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  )
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: C.paper },
  title: { fontSize: 22, fontStyle: 'italic', fontWeight: '700', color: C.ink, paddingTop: 16, paddingBottom: 24 },
  card: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 20, padding: 20, marginBottom: 16 },
  avatar: { width: 56, height: 56, borderRadius: 28, backgroundColor: '#f3ece4', alignItems: 'center', justifyContent: 'center', marginBottom: 12 },
  avatarText: { fontSize: 22, fontWeight: '700', color: C.brand },
  name: { fontSize: 17, fontWeight: '600', color: C.ink },
  email: { fontSize: 13, color: C.concrete, marginTop: 2 },
  badge: { marginTop: 12, alignSelf: 'flex-start', backgroundColor: '#f3ece4', paddingHorizontal: 12, paddingVertical: 4, borderRadius: 20 },
  badgeText: { fontSize: 11, fontWeight: '800', color: C.brand, letterSpacing: 1, textTransform: 'uppercase' },
  actionsCard: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 20, overflow: 'hidden', marginBottom: 16 },
  actionRow: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 14 },
  actionRowBorder: { borderBottomWidth: 1, borderBottomColor: C.border },
  actionText: { fontSize: 15, color: C.ink, flex: 1 },
  logoutBtn: { backgroundColor: C.white, borderWidth: 1, borderColor: C.roseBorder, borderRadius: 20, flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 14 },
  logoutText: { fontSize: 15, color: C.rose, fontWeight: '500' },
})