// Симуляция Shadow DOM без реального DOM
// Демонстрируем концепцию инкапсуляции через объектную структуру

// ===== Фабрика элементов =====
function createElement(tagName) {
  return {
    tagName: tagName.toUpperCase(),
    _attrs:   {},
    _cssVars: {},
    shadowRoot: null,
    attachShadow(options) {
      const shadow = {
        mode: options.mode || 'open',
        host: this,
        _html: '',
        _styles: '',
        get innerHTML() { return this._html },
        set innerHTML(v) {
          this._html = v
          const m = v.match(/<style[^>]*>([sS]*?)</style>/i)
          this._styles = m ? m[1].trim() : ''
        },
      }
      this.shadowRoot = (options.mode === 'open') ? shadow : null
      return shadow
    },
    setAttribute(k, v) { this._attrs[k] = String(v) },
    getAttribute(k)    { return this._attrs[k] ?? null },
    setCSSVar(k, v)    { this._cssVars[k] = v },
    getCSSVar(k)       { return this._cssVars[k] ?? null },
  }
}

// ===== 1. Изоляция стилей =====
console.log('=== Изоляция стилей ===')

const PAGE_STYLES = { p: { color: 'blue', fontSize: '20px' } }
console.log('Глобальный стиль страницы: p { color:', PAGE_STYLES.p.color, '}')

const widget = createElement('my-widget')
const shadow  = widget.attachShadow({ mode: 'open' })
shadow.innerHTML = `
<style>
  p { color: red; font-size: 14px; }
  .title { font-weight: bold; }
</style>
<p class="title">Заголовок виджета</p>
<p>Тело виджета</p>`

console.log('mode:', shadow.mode)   // open
console.log('shadowRoot доступен:', widget.shadowRoot !== null)  // true
console.log('Shadow DOM стили изолированы: p внутри → red (не blue от страницы)')

// ===== 2. mode: closed =====
console.log('\n=== mode: closed ===')
const secret = createElement('secret-widget')
const closedShadow = secret.attachShadow({ mode: 'closed' })
closedShadow.innerHTML = '<p>Скрытое содержимое</p>'

console.log('secret.shadowRoot:', secret.shadowRoot)  // null
console.log('Снаружи shadowRoot недоступен — инкапсуляция работает')

// ===== 3. CSS Custom Properties =====
console.log('\n=== CSS Custom Properties ===')

const btn = createElement('my-button')
// Снаружи задаём CSS-переменные (в реальном CSS: my-button { --color: red })
btn.setCSSVar('--btn-color', '#0066cc')
btn.setCSSVar('--btn-radius', '8px')
btn.setCSSVar('--btn-padding', '10px 20px')

const btnShadow = btn.attachShadow({ mode: 'open' })
btnShadow.innerHTML = `
<style>
  :host { display: inline-block; }
  button {
    background: var(--btn-color, #333);
    border-radius: var(--btn-radius, 4px);
    padding: var(--btn-padding, 8px 16px);
    color: white; border: none; cursor: pointer;
  }
</style>
<button><slot>Кнопка</slot></button>`

// CSS-переменные "пробивают" Shadow DOM
function resolveVar(shadow, varName) {
  const hostVal = shadow.host.getCSSVar(varName)
  if (hostVal) return hostVal + ' (с хоста)'

  const fallbackMatch = shadow._styles.match(
    new RegExp('var\\(' + varName.replace(/[-[]{}()*+?.,\^$|#s]/g, '\\$&') + ',\\s*([^)]+)\\)')
  )
  return fallbackMatch ? fallbackMatch[1].trim() + ' (fallback)' : 'не задано'
}

console.log('--btn-color:', btn.getCSSVar('--btn-color'))    // #0066cc
console.log('--btn-radius:', btn.getCSSVar('--btn-radius'))  // 8px

// ===== 4. Тематизация: один компонент, разные темы =====
console.log('\n=== Тематизация через CSS Custom Properties ===')

class ThemedCard {
  constructor(theme = {}) {
    this.host   = createElement('themed-card')
    this.shadow = this.host.attachShadow({ mode: 'open' })

    Object.entries(theme).forEach(([k, v]) => this.host.setCSSVar(k, v))
    this._render()
  }

  _render() {
    this.shadow.innerHTML = `
<style>
  :host {
    display: block;
    border: 1px solid var(--card-border, #ddd);
    border-radius: var(--card-radius, 8px);
    overflow: hidden;
  }
  .header {
    background: var(--card-header-bg, #f5f5f5);
    color: var(--card-header-color, #333);
    padding: 12px 16px;
    font-weight: bold;
  }
  .body {
    padding: 16px;
    color: var(--card-body-color, #555);
  }
</style>
<div class="header"><slot name="title">Без заголовка</slot></div>
<div class="body"><slot>Нет содержимого</slot></div>`
  }

  describe(name) {
    const vars = Object.entries(this.host._cssVars)
    console.log(`  ${name}:`)
    console.log(`    mode: ${this.shadow.mode}`)
    console.log(`    CSS-переменные (снаружи): ${vars.map(([k,v]) => `${k}=${v}`).join(', ')}`)
    console.log(`    Изолирован от других карточек: ДА`)
  }
}

const lightCard = new ThemedCard({
  '--card-header-bg':    '#e8f4fd',
  '--card-header-color': '#0066cc',
  '--card-border':       '#b3d9f7',
})

const darkCard = new ThemedCard({
  '--card-header-bg':    '#1a1a2e',
  '--card-header-color': '#e0e0ff',
  '--card-border':       '#444',
  '--card-body-color':   '#bbb',
})

lightCard.describe('Light Theme')
darkCard.describe('Dark Theme')
console.log('\nОба компонента изолированы — стили не конфликтуют')