// Демонстрируем Compound Components через замыкания (аналог Context в React).
// Каждый "компонент" — функция, получающая доступ к shared state через closure.

// --- Создаём систему вкладок ---

function createTabSystem(defaultTab) {
  // Shared state — аналог Context
  let activeTab = defaultTab
  const tabs = []       // зарегистрированные вкладки
  const panels = []     // зарегистрированные панели
  const listeners = []  // подписчики на изменение

  function notify() {
    listeners.forEach(fn => fn(activeTab))
  }

  // --- Корневой компонент ---
  function Tabs(config) {
    return {
      type: 'Tabs',
      activeTab,
      children: config.children || [],
      render() {
        const tabBar = tabs.map(tab => tab.render()).join(' | ')
        const activePanel = panels.find(p => p.value === activeTab)
        const content = activePanel ? activePanel.render() : '[Панель не найдена]'
        return '[ Вкладки: ' + tabBar + ' ]
[ Содержимое: ' + content + ' ]'
      }
    }
  }

  // --- Дочерний компонент Tab ---
  // Имеет доступ к shared state через замыкание
  function Tab(config) {
    const { value, label } = config

    tabs.push({
      value,
      render() {
        const isActive = activeTab === value
        return isActive ? '【' + label + '】' : label
      }
    })

    return {
      type: 'Tab',
      value,
      label,
      activate() {
        activeTab = value
        notify()
        console.log('Переключено на вкладку:', value)
      }
    }
  }

  // --- Дочерний компонент TabPanel ---
  function TabPanel(config) {
    const { value, content } = config

    panels.push({
      value,
      render() { return content }
    })

    return {
      type: 'TabPanel',
      value,
      isVisible: () => activeTab === value
    }
  }

  // --- Составной интерфейс (статические свойства) ---
  const TabSystem = {
    Tabs,
    Tab,
    TabPanel,
    onChange: (fn) => listeners.push(fn),
    render() {
      const tabBar = tabs.map(t => t.render()).join(' | ')
      const activePanel = panels.find(p => p.value === activeTab)
      const content = activePanel ? activePanel.render() : '—'
      return '┌─ Tabs ─────────────────────┐
' +
             '│ ' + tabBar + '
' +
             '├────────────────────────────┤
' +
             '│ ' + content + '
' +
             '└────────────────────────────┘'
    }
  }

  return TabSystem
}

// --- Использование ---

console.log('=== Compound Components: Tabs ===')
const TabSystem = createTabSystem('profile')

// "Рендерим" дочерние компоненты — они регистрируют себя в shared state
const profileTab = TabSystem.Tab({ value: 'profile', label: 'Профиль' })
const settingsTab = TabSystem.Tab({ value: 'settings', label: 'Настройки' })
const securityTab = TabSystem.Tab({ value: 'security', label: 'Безопасность' })

TabSystem.TabPanel({ value: 'profile',  content: 'Здесь данные профиля: имя, фото, bio' })
TabSystem.TabPanel({ value: 'settings', content: 'Здесь настройки: язык, тема, уведомления' })
TabSystem.TabPanel({ value: 'security', content: 'Здесь безопасность: пароль, 2FA, сессии' })

TabSystem.onChange(tab => console.log('Событие onChange: активная вкладка =', tab))

// Начальное состояние
console.log('
Начальный рендер (profile активна):')
console.log(TabSystem.render())

// Переключение вкладки
settingsTab.activate()
console.log('
После переключения на settings:')
console.log(TabSystem.render())

securityTab.activate()
console.log('
После переключения на security:')
console.log(TabSystem.render())

// --- Accordion: ещё один пример Compound Components ---

function createAccordion(allowMultiple = false) {
  const items = new Map()
  let openItems = new Set()

  const Accordion = {
    Item(id, header, content) {
      items.set(id, { id, header, content })
      return {
        type: 'Accordion.Item',
        id,
        toggle() {
          if (openItems.has(id)) {
            openItems.delete(id)
          } else {
            if (!allowMultiple) openItems.clear()
            openItems.add(id)
          }
        },
        isOpen: () => openItems.has(id)
      }
    },

    render() {
      let output = '=== Accordion ===
'
      items.forEach(({ id, header, content }) => {
        const isOpen = openItems.has(id)
        output += isOpen
          ? '▼ ' + header + '
  ' + content + '
'
          : '▶ ' + header + '
'
      })
      return output
    }
  }

  return Accordion
}

console.log('
=== Compound Components: Accordion ===')
const accordion = createAccordion(false)  // только один открытый

const item1 = accordion.Item('q1', 'Что такое React?', 'React — библиотека для UI')
const item2 = accordion.Item('q2', 'Что такое Virtual DOM?', 'Виртуальное дерево DOM для быстрого diff')
const item3 = accordion.Item('q3', 'Что такое хуки?', 'Функции для работы со состоянием в функциональных компонентах')

console.log(accordion.render())

item1.toggle()
console.log('После открытия q1:')
console.log(accordion.render())

item2.toggle()
console.log('После открытия q2 (q1 должен закрыться):')
console.log(accordion.render())