import React, { useState, useEffect, useCallback } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  TextInput,
  Modal,
  Alert,
  RefreshControl,
  ActivityIndicator,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { colors } from '../../src/constants/colors';
import api from '../../src/services/api';

export default function UsersScreen() {
  const [users, setUsers] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [showPasswordModal, setShowPasswordModal] = useState(false);
  const [generatedPassword, setGeneratedPassword] = useState('');
  const [selectedUsers, setSelectedUsers] = useState<Set<string>>(new Set());
  const [selectionMode, setSelectionMode] = useState(false);
  const [showBulkActionModal, setShowBulkActionModal] = useState(false);
  const [dietPlans, setDietPlans] = useState<any[]>([]);
  const [workoutPlans, setWorkoutPlans] = useState<any[]>([]);
  const [newUser, setNewUser] = useState({
    name: '',
    email: '',
    password: '',
    height_cm: '',
    weight_kg: '',
    age: '',
    gender: 'male',
    calorie_target: '2000',
    protein_target: '150',
  });

  useEffect(() => {
    loadUsers();
    loadPlans();
  }, []);

  const loadUsers = async () => {
    try {
      const response = await api.get('/admin/users');
      setUsers(response.data);
    } catch (error) {
      console.error('Error loading users:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const loadPlans = async () => {
    try {
      const [dietRes, workoutRes] = await Promise.all([
        api.get('/admin/diet-plans'),
        api.get('/admin/workout-plans'),
      ]);
      setDietPlans(dietRes.data);
      setWorkoutPlans(workoutRes.data);
    } catch (error) {
      console.log('Error loading plans:', error);
    }
  };

  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    await loadUsers();
    setRefreshing(false);
  }, []);

  const generatePassword = () => {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let password = '';
    for (let i = 0; i < 10; i++) {
      password += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return password;
  };

  const handleCreateUser = async () => {
    if (!newUser.name || !newUser.email) {
      Alert.alert('Error', 'Please fill in name and email');
      return;
    }

    try {
      const password = newUser.password || generatePassword();
      const response = await api.post('/admin/users', {
        ...newUser,
        password,
        height_cm: newUser.height_cm ? parseFloat(newUser.height_cm) : null,
        weight_kg: newUser.weight_kg ? parseFloat(newUser.weight_kg) : null,
        age: newUser.age ? parseInt(newUser.age) : null,
        calorie_target: parseInt(newUser.calorie_target) || 2000,
        protein_target: parseInt(newUser.protein_target) || 150,
      });
      
      setShowModal(false);
      setGeneratedPassword(response.data.generated_password);
      setShowPasswordModal(true);
      setNewUser({
        name: '',
        email: '',
        password: '',
        height_cm: '',
        weight_kg: '',
        age: '',
        gender: 'male',
        calorie_target: '2000',
        protein_target: '150',
      });
      loadUsers();
    } catch (error: any) {
      Alert.alert('Error', error.response?.data?.detail || 'Failed to create user');
    }
  };

  const handleDeleteUser = (userId: string, userName: string) => {
    Alert.alert(
      'Delete User',
      `Are you sure you want to delete ${userName}?`,
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Delete',
          style: 'destructive',
          onPress: async () => {
            try {
              await api.delete(`/admin/users/${userId}`);
              loadUsers();
            } catch (error) {
              Alert.alert('Error', 'Failed to delete user');
            }
          },
        },
      ]
    );
  };

  const handleBlockUser = async (userId: string, isBlocked: boolean) => {
    try {
      const endpoint = isBlocked ? `/admin/users/${userId}/unblock` : `/admin/users/${userId}/block`;
      await api.put(endpoint);
      loadUsers();
      Alert.alert('Success', isBlocked ? 'User unblocked' : 'User blocked');
    } catch (error) {
      Alert.alert('Error', 'Failed to update user status');
    }
  };

  const toggleUserSelection = (userId: string) => {
    const newSelected = new Set(selectedUsers);
    if (newSelected.has(userId)) {
      newSelected.delete(userId);
    } else {
      newSelected.add(userId);
    }
    setSelectedUsers(newSelected);
  };

  const selectAll = () => {
    if (selectedUsers.size === users.length) {
      setSelectedUsers(new Set());
    } else {
      setSelectedUsers(new Set(users.map(u => u.id)));
    }
  };

  const handleBulkAction = async (action: string, planId?: string) => {
    if (selectedUsers.size === 0) {
      Alert.alert('Error', 'No users selected');
      return;
    }

    const actionNames: Record<string, string> = {
      delete: 'delete',
      block: 'block',
      unblock: 'unblock',
      assign_diet_plan: 'assign diet plan to',
      assign_workout_plan: 'assign workout plan to',
    };

    Alert.alert(
      'Confirm Action',
      `Are you sure you want to ${actionNames[action]} ${selectedUsers.size} user(s)?`,
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Confirm',
          style: action === 'delete' ? 'destructive' : 'default',
          onPress: async () => {
            try {
              await api.post('/admin/users/bulk-action', {
                user_ids: Array.from(selectedUsers),
                action,
                plan_id: planId,
              });
              setSelectedUsers(new Set());
              setSelectionMode(false);
              setShowBulkActionModal(false);
              loadUsers();
              Alert.alert('Success', `Action completed for ${selectedUsers.size} users`);
            } catch (error) {
              Alert.alert('Error', 'Failed to perform bulk action');
            }
          },
        },
      ]
    );
  };

  if (isLoading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color={colors.primary} />
      </View>
    );
  }

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      <View style={styles.header}>
        <Text style={styles.title}>Clients</Text>
        <View style={styles.headerActions}>
          {selectionMode ? (
            <>
              <TouchableOpacity style={styles.headerButton} onPress={selectAll}>
                <Text style={styles.headerButtonText}>
                  {selectedUsers.size === users.length ? 'Deselect All' : 'Select All'}
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.headerButton}
                onPress={() => {
                  setSelectionMode(false);
                  setSelectedUsers(new Set());
                }}
              >
                <Text style={styles.headerButtonText}>Cancel</Text>
              </TouchableOpacity>
            </>
          ) : (
            <>
              <TouchableOpacity
                style={styles.iconButton}
                onPress={() => setSelectionMode(true)}
              >
                <Ionicons name="checkbox-outline" size={24} color={colors.text} />
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.addButton}
                onPress={() => setShowModal(true)}
              >
                <Ionicons name="add" size={24} color={colors.text} />
              </TouchableOpacity>
            </>
          )}
        </View>
      </View>

      {/* Bulk Actions Bar */}
      {selectionMode && selectedUsers.size > 0 && (
        <View style={styles.bulkActionsBar}>
          <Text style={styles.selectedCount}>{selectedUsers.size} selected</Text>
          <View style={styles.bulkActions}>
            <TouchableOpacity
              style={styles.bulkAction}
              onPress={() => handleBulkAction('block')}
            >
              <Ionicons name="ban" size={18} color={colors.warning} />
              <Text style={styles.bulkActionText}>Block</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.bulkAction}
              onPress={() => handleBulkAction('unblock')}
            >
              <Ionicons name="checkmark-circle" size={18} color={colors.success} />
              <Text style={styles.bulkActionText}>Unblock</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.bulkAction}
              onPress={() => setShowBulkActionModal(true)}
            >
              <Ionicons name="clipboard" size={18} color={colors.primary} />
              <Text style={styles.bulkActionText}>Assign</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.bulkAction}
              onPress={() => handleBulkAction('delete')}
            >
              <Ionicons name="trash" size={18} color={colors.error} />
              <Text style={[styles.bulkActionText, { color: colors.error }]}>Delete</Text>
            </TouchableOpacity>
          </View>
        </View>
      )}

      <ScrollView
        style={styles.content}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            tintColor={colors.primary}
          />
        }
      >
        {users.length === 0 ? (
          <View style={styles.emptyState}>
            <Ionicons name="people-outline" size={64} color={colors.textMuted} />
            <Text style={styles.emptyText}>No clients yet</Text>
            <Text style={styles.emptySubtext}>Tap + to add your first client</Text>
          </View>
        ) : (
          users.map((user) => (
            <TouchableOpacity
              key={user.id}
              style={[
                styles.userCard,
                selectedUsers.has(user.id) && styles.userCardSelected,
                user.is_blocked && styles.userCardBlocked,
              ]}
              onPress={() => selectionMode ? toggleUserSelection(user.id) : null}
              onLongPress={() => {
                if (!selectionMode) {
                  setSelectionMode(true);
                  toggleUserSelection(user.id);
                }
              }}
            >
              {selectionMode && (
                <View style={styles.checkbox}>
                  <Ionicons
                    name={selectedUsers.has(user.id) ? 'checkbox' : 'square-outline'}
                    size={24}
                    color={selectedUsers.has(user.id) ? colors.primary : colors.textMuted}
                  />
                </View>
              )}
              <View style={[styles.userAvatar, user.is_blocked && styles.avatarBlocked]}>
                <Text style={styles.avatarText}>
                  {user.name.charAt(0).toUpperCase()}
                </Text>
              </View>
              <View style={styles.userInfo}>
                <View style={styles.userNameRow}>
                  <Text style={styles.userName}>{user.name}</Text>
                  {user.is_blocked && (
                    <View style={styles.blockedBadge}>
                      <Ionicons name="ban" size={12} color={colors.error} />
                      <Text style={styles.blockedText}>Blocked</Text>
                    </View>
                  )}
                </View>
                <Text style={styles.userEmail}>{user.email}</Text>
                <View style={styles.userStats}>
                  {user.bmi && (
                    <Text style={styles.userStat}>BMI: {user.bmi}</Text>
                  )}
                  {user.weight_kg && (
                    <Text style={styles.userStat}>{user.weight_kg}kg</Text>
                  )}
                </View>
              </View>
              {!selectionMode && (
                <View style={styles.userActions}>
                  <TouchableOpacity
                    style={styles.actionButton}
                    onPress={() => handleBlockUser(user.id, user.is_blocked)}
                  >
                    <Ionicons
                      name={user.is_blocked ? 'checkmark-circle-outline' : 'ban-outline'}
                      size={20}
                      color={user.is_blocked ? colors.success : colors.warning}
                    />
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={styles.actionButton}
                    onPress={() => handleDeleteUser(user.id, user.name)}
                  >
                    <Ionicons name="trash-outline" size={20} color={colors.error} />
                  </TouchableOpacity>
                </View>
              )}
            </TouchableOpacity>
          ))
        )}
        <View style={{ height: 100 }} />
      </ScrollView>

      {/* Add User Modal */}
      <Modal visible={showModal} animationType="slide" transparent>
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <View style={styles.modalHeader}>
              <Text style={styles.modalTitle}>Add New Client</Text>
              <TouchableOpacity onPress={() => setShowModal(false)}>
                <Ionicons name="close" size={24} color={colors.text} />
              </TouchableOpacity>
            </View>
            <ScrollView style={styles.modalScroll}>
              <TextInput
                style={styles.input}
                placeholder="Name *"
                placeholderTextColor={colors.textMuted}
                value={newUser.name}
                onChangeText={(text) => setNewUser({ ...newUser, name: text })}
              />
              <TextInput
                style={styles.input}
                placeholder="Email *"
                placeholderTextColor={colors.textMuted}
                keyboardType="email-address"
                autoCapitalize="none"
                value={newUser.email}
                onChangeText={(text) => setNewUser({ ...newUser, email: text })}
              />
              <TextInput
                style={styles.input}
                placeholder="Password (auto-generated if empty)"
                placeholderTextColor={colors.textMuted}
                secureTextEntry
                value={newUser.password}
                onChangeText={(text) => setNewUser({ ...newUser, password: text })}
              />
              <View style={styles.inputRow}>
                <TextInput
                  style={[styles.input, styles.halfInput]}
                  placeholder="Height (cm)"
                  placeholderTextColor={colors.textMuted}
                  keyboardType="numeric"
                  value={newUser.height_cm}
                  onChangeText={(text) => setNewUser({ ...newUser, height_cm: text })}
                />
                <TextInput
                  style={[styles.input, styles.halfInput]}
                  placeholder="Weight (kg)"
                  placeholderTextColor={colors.textMuted}
                  keyboardType="numeric"
                  value={newUser.weight_kg}
                  onChangeText={(text) => setNewUser({ ...newUser, weight_kg: text })}
                />
              </View>
              <View style={styles.inputRow}>
                <TextInput
                  style={[styles.input, styles.halfInput]}
                  placeholder="Age"
                  placeholderTextColor={colors.textMuted}
                  keyboardType="numeric"
                  value={newUser.age}
                  onChangeText={(text) => setNewUser({ ...newUser, age: text })}
                />
                <View style={[styles.input, styles.halfInput, styles.genderPicker]}>
                  <TouchableOpacity
                    style={[
                      styles.genderOption,
                      newUser.gender === 'male' && styles.genderSelected,
                    ]}
                    onPress={() => setNewUser({ ...newUser, gender: 'male' })}
                  >
                    <Text
                      style={[
                        styles.genderText,
                        newUser.gender === 'male' && styles.genderTextSelected,
                      ]}
                    >
                      M
                    </Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={[
                      styles.genderOption,
                      newUser.gender === 'female' && styles.genderSelected,
                    ]}
                    onPress={() => setNewUser({ ...newUser, gender: 'female' })}
                  >
                    <Text
                      style={[
                        styles.genderText,
                        newUser.gender === 'female' && styles.genderTextSelected,
                      ]}
                    >
                      F
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
              <View style={styles.inputRow}>
                <TextInput
                  style={[styles.input, styles.halfInput]}
                  placeholder="Calorie Target"
                  placeholderTextColor={colors.textMuted}
                  keyboardType="numeric"
                  value={newUser.calorie_target}
                  onChangeText={(text) => setNewUser({ ...newUser, calorie_target: text })}
                />
                <TextInput
                  style={[styles.input, styles.halfInput]}
                  placeholder="Protein Target"
                  placeholderTextColor={colors.textMuted}
                  keyboardType="numeric"
                  value={newUser.protein_target}
                  onChangeText={(text) => setNewUser({ ...newUser, protein_target: text })}
                />
              </View>
            </ScrollView>
            <TouchableOpacity style={styles.createButton} onPress={handleCreateUser}>
              <Text style={styles.createButtonText}>Create Client</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>

      {/* Password Modal */}
      <Modal visible={showPasswordModal} animationType="fade" transparent>
        <View style={styles.modalOverlay}>
          <View style={styles.passwordModal}>
            <Ionicons name="checkmark-circle" size={48} color={colors.success} />
            <Text style={styles.passwordTitle}>Client Created!</Text>
            <Text style={styles.passwordLabel}>Generated Password:</Text>
            <View style={styles.passwordBox}>
              <Text style={styles.passwordText}>{generatedPassword}</Text>
            </View>
            <Text style={styles.passwordNote}>
              Share this password with the client. They can change it later.
            </Text>
            <TouchableOpacity
              style={styles.createButton}
              onPress={() => setShowPasswordModal(false)}
            >
              <Text style={styles.createButtonText}>Done</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>

      {/* Bulk Assign Modal */}
      <Modal visible={showBulkActionModal} animationType="slide" transparent>
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <View style={styles.modalHeader}>
              <Text style={styles.modalTitle}>Assign Plan</Text>
              <TouchableOpacity onPress={() => setShowBulkActionModal(false)}>
                <Ionicons name="close" size={24} color={colors.text} />
              </TouchableOpacity>
            </View>
            <ScrollView style={styles.modalScroll}>
              <Text style={styles.sectionLabel}>Diet Plans</Text>
              {dietPlans.length === 0 ? (
                <Text style={styles.emptyPlanText}>No diet plans available</Text>
              ) : (
                dietPlans.map(plan => (
                  <TouchableOpacity
                    key={plan.id}
                    style={styles.planOption}
                    onPress={() => handleBulkAction('assign_diet_plan', plan.id)}
                  >
                    <Ionicons name="restaurant-outline" size={20} color={colors.primary} />
                    <Text style={styles.planName}>{plan.name}</Text>
                    <Ionicons name="chevron-forward" size={20} color={colors.textMuted} />
                  </TouchableOpacity>
                ))
              )}

              <Text style={[styles.sectionLabel, { marginTop: 24 }]}>Workout Plans</Text>
              {workoutPlans.length === 0 ? (
                <Text style={styles.emptyPlanText}>No workout plans available</Text>
              ) : (
                workoutPlans.map(plan => (
                  <TouchableOpacity
                    key={plan.id}
                    style={styles.planOption}
                    onPress={() => handleBulkAction('assign_workout_plan', plan.id)}
                  >
                    <Ionicons name="barbell-outline" size={20} color={colors.primary} />
                    <Text style={styles.planName}>{plan.name}</Text>
                    <Ionicons name="chevron-forward" size={20} color={colors.textMuted} />
                  </TouchableOpacity>
                ))
              )}
            </ScrollView>
          </View>
        </View>
      </Modal>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.background,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: colors.background,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 20,
    paddingBottom: 12,
  },
  title: {
    fontSize: 28,
    fontWeight: '700',
    color: colors.text,
  },
  headerActions: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  headerButton: {
    paddingHorizontal: 12,
    paddingVertical: 8,
  },
  headerButtonText: {
    fontSize: 14,
    color: colors.primary,
    fontWeight: '600',
  },
  iconButton: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: colors.backgroundCard,
    justifyContent: 'center',
    alignItems: 'center',
  },
  addButton: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: colors.primary,
    justifyContent: 'center',
    alignItems: 'center',
  },
  bulkActionsBar: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: colors.backgroundCard,
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: colors.border,
  },
  selectedCount: {
    fontSize: 14,
    color: colors.text,
    fontWeight: '600',
  },
  bulkActions: {
    flexDirection: 'row',
    gap: 16,
  },
  bulkAction: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  bulkActionText: {
    fontSize: 12,
    color: colors.text,
    fontWeight: '500',
  },
  content: {
    flex: 1,
    padding: 20,
    paddingTop: 0,
  },
  emptyState: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 100,
  },
  emptyText: {
    fontSize: 18,
    fontWeight: '600',
    color: colors.text,
    marginTop: 16,
  },
  emptySubtext: {
    fontSize: 14,
    color: colors.textMuted,
    marginTop: 4,
  },
  userCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.backgroundCard,
    padding: 16,
    borderRadius: 16,
    marginBottom: 12,
  },
  userCardSelected: {
    backgroundColor: `${colors.primary}20`,
    borderWidth: 2,
    borderColor: colors.primary,
  },
  userCardBlocked: {
    opacity: 0.7,
    borderLeftWidth: 4,
    borderLeftColor: colors.error,
  },
  checkbox: {
    marginRight: 12,
  },
  userAvatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: colors.primary,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  avatarBlocked: {
    backgroundColor: colors.textMuted,
  },
  avatarText: {
    fontSize: 20,
    fontWeight: '700',
    color: colors.text,
  },
  userInfo: {
    flex: 1,
  },
  userNameRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  userName: {
    fontSize: 16,
    fontWeight: '600',
    color: colors.text,
  },
  blockedBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
    backgroundColor: 'rgba(239, 68, 68, 0.1)',
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 4,
  },
  blockedText: {
    fontSize: 10,
    color: colors.error,
    fontWeight: '600',
  },
  userEmail: {
    fontSize: 14,
    color: colors.textSecondary,
    marginTop: 2,
  },
  userStats: {
    flexDirection: 'row',
    gap: 12,
    marginTop: 4,
  },
  userStat: {
    fontSize: 12,
    color: colors.textMuted,
  },
  userActions: {
    flexDirection: 'row',
    gap: 8,
  },
  actionButton: {
    padding: 8,
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    backgroundColor: colors.backgroundCard,
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    maxHeight: '85%',
    padding: 20,
  },
  modalHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: '700',
    color: colors.text,
  },
  modalScroll: {
    maxHeight: 400,
  },
  input: {
    backgroundColor: colors.background,
    borderRadius: 12,
    padding: 16,
    fontSize: 16,
    color: colors.text,
    marginBottom: 12,
  },
  inputRow: {
    flexDirection: 'row',
    gap: 12,
  },
  halfInput: {
    flex: 1,
  },
  genderPicker: {
    flexDirection: 'row',
    padding: 8,
    justifyContent: 'center',
    gap: 8,
  },
  genderOption: {
    flex: 1,
    paddingVertical: 8,
    borderRadius: 8,
    alignItems: 'center',
    backgroundColor: colors.background,
  },
  genderSelected: {
    backgroundColor: colors.primary,
  },
  genderText: {
    fontSize: 16,
    fontWeight: '600',
    color: colors.textMuted,
  },
  genderTextSelected: {
    color: colors.text,
  },
  createButton: {
    backgroundColor: colors.primary,
    padding: 16,
    borderRadius: 12,
    alignItems: 'center',
    marginTop: 16,
  },
  createButtonText: {
    fontSize: 16,
    fontWeight: '600',
    color: colors.text,
  },
  passwordModal: {
    backgroundColor: colors.backgroundCard,
    margin: 20,
    borderRadius: 24,
    padding: 24,
    alignItems: 'center',
  },
  passwordTitle: {
    fontSize: 24,
    fontWeight: '700',
    color: colors.text,
    marginTop: 16,
    marginBottom: 20,
  },
  passwordLabel: {
    fontSize: 14,
    color: colors.textMuted,
    marginBottom: 8,
  },
  passwordBox: {
    backgroundColor: colors.background,
    padding: 16,
    borderRadius: 12,
    width: '100%',
    alignItems: 'center',
  },
  passwordText: {
    fontSize: 24,
    fontWeight: '700',
    color: colors.primary,
    letterSpacing: 2,
  },
  passwordNote: {
    fontSize: 12,
    color: colors.textMuted,
    textAlign: 'center',
    marginTop: 12,
    marginBottom: 20,
  },
  sectionLabel: {
    fontSize: 14,
    fontWeight: '600',
    color: colors.textMuted,
    marginBottom: 12,
    textTransform: 'uppercase',
    letterSpacing: 1,
  },
  emptyPlanText: {
    fontSize: 14,
    color: colors.textMuted,
    fontStyle: 'italic',
    textAlign: 'center',
    padding: 16,
  },
  planOption: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.background,
    padding: 16,
    borderRadius: 12,
    marginBottom: 8,
    gap: 12,
  },
  planName: {
    flex: 1,
    fontSize: 16,
    color: colors.text,
    fontWeight: '500',
  },
});