// Симуляция CSS-раскладки — чистые вычисления

// ===== Flexbox: распределение пространства =====

function calculateFlexLayout(containerWidth, items, options = {}) {
  const { gap = 0, padding = 0 } = options

  // Доступная ширина: контейнер - паддинги - промежутки
  const available = containerWidth - 2 * padding - gap * (items.length - 1)

  // Разделяем фиксированные и flex-элементы
  const fixedItems = items.filter(item => item.width !== undefined && !item.flexGrow)
  const flexItems  = items.filter(item => item.flexGrow !== undefined)

  const fixedTotal = fixedItems.reduce((sum, item) => sum + (item.width ?? 0), 0)
  const flexSpace  = available - fixedTotal
  const totalFlex  = flexItems.reduce((sum, item) => sum + (item.flexGrow ?? 1), 0)

  return items.map(item => {
    const width = item.flexGrow !== undefined
      ? Math.round((item.flexGrow / totalFlex) * flexSpace)
      : (item.width ?? 0)
    return { name: item.name, width }
  })
}

function printLayout(items, containerWidth, title) {
  console.log(`${title} (container: ${containerWidth}px)`)
  const totalWidth = items.reduce((s, i) => s + i.width, 0)
  for (const item of items) {
    const bar   = '█'.repeat(Math.round(item.width / 20))
    const pct   = Math.round(item.width / containerWidth * 100)
    console.log(`  ${item.name.padEnd(14)}: ${String(item.width).padStart(4)}px (${String(pct).padStart(3)}%) ${bar}`)
  }
  console.log(`  Итого: ${totalWidth}px / ${containerWidth}px`)
}

// === Равномерное распределение (flex: 1) ===
console.log('=== Flex раскладки ===')
const equal = calculateFlexLayout(1200, [
  { name: 'Col 1', flexGrow: 1 },
  { name: 'Col 2', flexGrow: 1 },
  { name: 'Col 3', flexGrow: 1 },
])
printLayout(equal, 1200, 'flex:1 для всех')

// === Sidebar (1) + Content (3) ===
const sidebar = calculateFlexLayout(1200, [
  { name: 'Sidebar',  flexGrow: 1 },
  { name: 'Content',  flexGrow: 3 },
], { gap: 24 })
printLayout(sidebar, 1200 - 24, 'Sidebar(1) + Content(3)')

// === Fixed sidebar + Flexible content + Fixed panel ===
console.log()
const mixed = calculateFlexLayout(1200, [
  { name: 'Fixed Nav',   width: 240 },
  { name: 'Main',        flexGrow: 1 },
  { name: 'Fixed Panel', width: 320 },
], { gap: 16 })
printLayout(mixed, 1200, 'Fixed(240) + Flex(1) + Fixed(320)')

// ===== position: absolute — тултип =====
console.log('\n=== Позиционирование тултипа ===')

function positionTooltip(anchorRect, tooltipSize, viewport) {
  const { top, left, bottom, width } = anchorRect
  const { tooltipWidth, tooltipHeight } = tooltipSize
  const { vpWidth, vpHeight, scrollY = 0 } = viewport

  // Пробуем снизу от anchor
  let tipTop  = bottom + scrollY + 8
  let tipLeft = left + (width - tooltipWidth) / 2

  // Не выходим за правый край
  tipLeft = Math.min(tipLeft, vpWidth - tooltipWidth - 8)
  tipLeft = Math.max(tipLeft, 8)

  // Не выходим за нижний край — ставим сверху
  let placement = 'bottom'
  if (bottom + tooltipHeight + 8 > vpHeight) {
    tipTop = top + scrollY - tooltipHeight - 8
    placement = 'top'
  }

  return {
    top: Math.round(tipTop),
    left: Math.round(tipLeft),
    placement,
  }
}

const scenarios = [
  {
    label: 'Кнопка посередине экрана',
    anchor:  { top: 400, left: 600, bottom: 430, width: 120, height: 30 },
    tooltip: { tooltipWidth: 200, tooltipHeight: 40 },
    vp:      { vpWidth: 1440, vpHeight: 900, scrollY: 0 },
  },
  {
    label: 'Кнопка у нижнего края — тултип переходит наверх',
    anchor:  { top: 860, left: 200, bottom: 890, width: 120, height: 30 },
    tooltip: { tooltipWidth: 200, tooltipHeight: 40 },
    vp:      { vpWidth: 1440, vpHeight: 900, scrollY: 0 },
  },
  {
    label: 'Кнопка у правого края — тултип не выходит за экран',
    anchor:  { top: 400, left: 1380, bottom: 430, width: 50, height: 30 },
    tooltip: { tooltipWidth: 200, tooltipHeight: 40 },
    vp:      { vpWidth: 1440, vpHeight: 900, scrollY: 0 },
  },
]

for (const { label, anchor, tooltip, vp } of scenarios) {
  const pos = positionTooltip(anchor, tooltip, vp)
  console.log(`${label}:`)
  console.log(`  top=${pos.top}  left=${pos.left}  placement=${pos.placement}`)
}