// Симуляция Box Model — чистые вычисления

// ===== Вычисление размеров =====

function calculateBoxModel({ width, height, padding, border, margin, scrollbarWidth = 0 }) {
  // --- content-box (исторический) ---
  const contentBox = {
    contentWidth:  width,
    contentHeight: height,
    offsetWidth:   width + 2 * padding + 2 * border,
    clientWidth:   width + 2 * padding - scrollbarWidth,
    totalWidth:    width + 2 * padding + 2 * border + 2 * margin,
  }

  // --- border-box (современный) ---
  const borderBox = {
    contentWidth:  width - 2 * padding - 2 * border,
    contentHeight: height - 2 * padding - 2 * border,
    offsetWidth:   width,                                    // width уже включает всё
    clientWidth:   width - 2 * border - scrollbarWidth,
    totalWidth:    width + 2 * margin,
  }

  return { contentBox, borderBox }
}

// === Демонстрация: content-box vs border-box ===
console.log('=== content-box vs border-box (width=200, padding=20, border=2, margin=16) ===')
const el = { width: 200, height: 100, padding: 20, border: 2, margin: 16 }
const { contentBox, borderBox } = calculateBoxModel(el)

console.log()
console.log('Свойство'.padEnd(18) + 'content-box'.padEnd(14) + 'border-box')
console.log('-'.repeat(44))
const props = ['contentWidth', 'offsetWidth', 'clientWidth', 'totalWidth']
for (const p of props) {
  console.log(p.padEnd(18) + String(contentBox[p]).padEnd(14) + String(borderBox[p]))
}

console.log()
console.log('content-box: ожидаешь 200px, получаешь offsetWidth =', contentBox.offsetWidth, '(НЕОЖИДАННО!)')
console.log('border-box:  width =', borderBox.offsetWidth, '(ПРЕДСКАЗУЕМО!)')

// ===== Margin Collapse =====
console.log('\n=== Margin Collapse ===')

function verticalGap(mb, mt, isFlex = false) {
  // В flex/grid — отступы СКЛАДЫВАЮТСЯ (нет collapse)
  return isFlex ? mb + mt : Math.max(mb, mt)
}

const scenarios = [
  { mb: 20, mt: 20, flex: false, desc: 'div(mb:20) + div(mt:20) — обычный поток' },
  { mb: 20, mt: 30, flex: false, desc: 'div(mb:20) + div(mt:30) — обычный поток' },
  { mb: 20, mt: 30, flex: true,  desc: 'flex-item(mb:20) + flex-item(mt:30)' },
  { mb: 0,  mt: 40, flex: false, desc: 'div(mb:0) + div(mt:40)' },
]

for (const s of scenarios) {
  const gap  = verticalGap(s.mb, s.mt, s.flex)
  const note = s.flex ? '(flex — нет collapse)' : '(collapse: max)'
  console.log(`${s.desc}`)
  console.log(`  ${s.mb}px + ${s.mt}px = ${gap}px ${note}`)
}

// ===== offsetWidth vs clientWidth vs scrollWidth =====
console.log('\n=== offsetWidth / clientWidth / scrollWidth ===')

function simulateScrollElement(containerW, contentW, padding, border) {
  // clientWidth: ширина без border, без скроллбара (15px стандарт)
  const SCROLLBAR = 15
  return {
    offsetWidth:  containerW,
    clientWidth:  containerW - 2 * border - SCROLLBAR,
    scrollWidth:  contentW + 2 * padding,
    canScroll:    (contentW + 2 * padding) > (containerW - 2 * border - SCROLLBAR),
  }
}

const scrollEl = simulateScrollElement(400, 800, 16, 1)
console.log('Контейнер 400px, контент 800px:')
console.log(`  offsetWidth  = ${scrollEl.offsetWidth}px  (с border)`)
console.log(`  clientWidth  = ${scrollEl.clientWidth}px  (без border, без скроллбара)`)
console.log(`  scrollWidth  = ${scrollEl.scrollWidth}px  (полный контент)`)
console.log(`  Скроллируемый: ${scrollEl.canScroll}`)

// ===== overflow text-overflow =====
console.log('\n=== overflow паттерны ===')

// Симулируем text-overflow: ellipsis логикой
function truncateToWidth(text, maxChars, suffix = '…') {
  if (text.length <= maxChars) return text
  return text.slice(0, maxChars - suffix.length) + suffix
}

const longTitle = 'JavaScript — это высокоуровневый язык программирования'
const widths = [20, 30, 40, 50]
for (const w of widths) {
  console.log(`  ${w} chars: "${truncateToWidth(longTitle, w)}"`)
}

// ===== calc() паттерны =====
console.log('\n=== calc() в реальных ситуациях ===')
const VIEWPORT_HEIGHT = 900
const HEADER_H = 64, FOOTER_H = 48, PADDING = 32

const contentHeight = VIEWPORT_HEIGHT - HEADER_H - FOOTER_H - 2 * PADDING
console.log(`calc(100vh - 64px - 48px - 64px) = ${contentHeight}px — высота контента`)
console.log(`calc(50% - 8px) при 1200px = ${1200 / 2 - 8}px — колонка в 2-колоночном grid`)