import { StyleSheet, Text, View } from 'react-native';

import { ActionButton } from '@/shared/components/ActionButton';
import { Screen } from '@/shared/components/Screen';
import { Colors, Radius, Spacing } from '@/constants/theme';
import { useSessionStore } from '@/shared/auth/session';

export default function ProfileScreen() {
  const user = useSessionStore((state) => state.user);
  const signInAsDemoUser = useSessionStore((state) => state.signInAsDemoUser);

  return (
    <Screen title="我的" subtitle="查看当前移动端登录身份、角色和基础设置。">
      <View style={styles.profileCard}>
        <View style={styles.avatar}>
          <Text style={styles.avatarText}>{user?.displayName.slice(0, 1) || '未'}</Text>
        </View>
        <View style={styles.info}>
          <Text style={styles.name}>{user?.displayName || '未登录'}</Text>
          <Text style={styles.meta}>账号：{user?.username || '-'}</Text>
          <Text style={styles.meta}>角色：{user?.roleCodes.join(', ') || '-'}</Text>
        </View>
      </View>

      <View style={styles.settingCard}>
        <Text style={styles.settingTitle}>移动端初始化状态</Text>
        <Text style={styles.settingText}>相机、相册、麦克风、SecureStore 和接口客户端已接入工程骨架。</Text>
      </View>

      <ActionButton accessibilityLabel="恢复演示用户" onPress={signInAsDemoUser}>
        恢复演示用户
      </ActionButton>
    </Screen>
  );
}

const styles = StyleSheet.create({
  profileCard: {
    flexDirection: 'row',
    gap: Spacing.four,
    alignItems: 'center',
    borderRadius: Radius.lg,
    backgroundColor: '#FFFFFF',
    borderWidth: 1,
    borderColor: Colors.light.border,
    padding: Spacing.four,
  },
  avatar: {
    width: 60,
    height: 60,
    borderRadius: Radius.lg,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: Colors.light.primarySoft,
  },
  avatarText: {
    color: Colors.light.primary,
    fontSize: 24,
    fontWeight: '900',
  },
  info: {
    flex: 1,
    gap: 4,
  },
  name: {
    color: Colors.light.text,
    fontSize: 20,
    fontWeight: '900',
  },
  meta: {
    color: Colors.light.textSecondary,
    fontSize: 13,
  },
  settingCard: {
    gap: Spacing.two,
    borderRadius: Radius.lg,
    backgroundColor: Colors.light.primarySoft,
    borderWidth: 1,
    borderColor: '#BFEEDB',
    padding: Spacing.four,
  },
  settingTitle: {
    color: Colors.light.text,
    fontSize: 16,
    fontWeight: '900',
  },
  settingText: {
    color: Colors.light.textSecondary,
    fontSize: 14,
    lineHeight: 22,
  },
});
