// Симулируем архитектуру React Native на ванильном JS.
// Показываем: компонентные фабрики, StyleSheet, Platform detection.

// --- StyleSheet.create симуляция ---

const StyleSheet = {
  create(styles) {
    // В реальном RN здесь происходит регистрация стилей
    // и оптимизация для нативного слоя
    const result = {}
    for (const key in styles) {
      result[key] = { ...styles[key], __id: Math.random().toString(36).slice(2) }
    }
    return result
  },
  flatten(styleArray) {
    if (!Array.isArray(styleArray)) return styleArray
    return styleArray.filter(Boolean).reduce((acc, style) => ({ ...acc, ...style }), {})
  }
}

// --- Platform симуляция ---

const Platform = {
  OS: 'ios',  // 'ios' | 'android' | 'web'
  select(options) {
    return options[this.OS] ?? options.default ?? {}
  }
}

// --- Базовые компоненты-фабрики ---

function createComponent(type) {
  return function(props = {}) {
    const { children, style, ...rest } = props
    return {
      type,
      props: rest,
      style: StyleSheet.flatten(Array.isArray(style) ? style : [style]),
      children: Array.isArray(children) ? children : (children ? [children] : []),
    }
  }
}

const View = createComponent('View')
const Text = createComponent('Text')
const TouchableOpacity = createComponent('TouchableOpacity')
const Image = createComponent('Image')

// --- Стили (как StyleSheet.create) ---

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    margin: 8,
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 8 },
      android: { elevation: 4 },
    })
  },
  title: { fontSize: 18, fontWeight: 'bold', color: '#1a1a1a' },
  subtitle: { fontSize: 14, color: '#666', marginTop: 4 },
  button: { backgroundColor: '#007AFF', borderRadius: 8, padding: 10, marginTop: 12 },
  buttonText: { color: '#fff', textAlign: 'center', fontWeight: '600' },
})

// --- Создание мобильного компонента ---

function ProfileCard(name, role) {
  const card = View({
    style: styles.card,
    children: [
      Text({ style: styles.title, children: name }),
      Text({ style: styles.subtitle, children: role }),
      TouchableOpacity({
        style: styles.button,
        onPress: () => console.log('Нажато!'),
        children: Text({ style: styles.buttonText, children: 'Подробнее' }),
      })
    ]
  })
  return card
}

// --- Рендер дерева (упрощённо) ---

function renderTree(node, indent = 0) {
  const pad = '  '.repeat(indent)
  const styleKeys = node.style ? Object.keys(node.style).filter(k => k !== '__id').join(', ') : ''
  console.log(pad + '<' + node.type + (styleKeys ? ' style={' + styleKeys + '}' : '') + '>')

  if (typeof node.children === 'string' || typeof node.children === 'number') {
    console.log(pad + '  ' + node.children)
  } else if (Array.isArray(node.children)) {
    node.children.forEach(child => {
      if (typeof child === 'object' && child !== null) {
        renderTree(child, indent + 1)
      } else {
        console.log(pad + '  ' + child)
      }
    })
  }

  console.log(pad + '</' + node.type + '>')
}

// --- Запуск ---

console.log('Платформа:', Platform.OS)
console.log('')

const card = ProfileCard('Алексей Иванов', 'Senior React Native Developer')

console.log('=== Дерево компонентов ===')
renderTree(card)

console.log('')
console.log('=== Стиль карточки ===')
const cardStyleKeys = Object.keys(card.style).filter(k => k !== '__id')
cardStyleKeys.forEach(key => console.log(' ', key + ':', card.style[key]))

console.log('')
console.log('Platform.select результат (iOS):')
console.log(Platform.select({ ios: 'shadowColor', android: 'elevation', default: 'none' }))