/**
 * Chart 4 — Сравнение регионов: две вертикальные панели рядом.
 *
 * Левая панель: зелёные бары (лидеры).
 * Правая панель: оранжевые/светлые бары (аутсайдеры).
 * Выбранный субъект: жёлтый/оранжевый highlight (isHighlight=true).
 *
 * Параметры:
 *   left:  { title, bars: [{ label, value, isHighlight? }] }
 *   right: { title, bars: [{ label, value, isHighlight? }] }
 *   regionLabel: string
 *   unit: string
 */

const sharp = require('sharp')
const { PALETTE } = require('../data/palette')
const { dark: DARK, mdGray: MDGRAY, ltGray: LTGRAY, grid: GRID, green: GREEN, orange: ORANGE, o: YELLOW } = PALETTE

function esc (s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') }

async function chart4_regionCompare ({ left, right, regionLabel, unit = 'руб./кг', width = 920 }) {
  const W = width
  const gap = 48
  const panelW = (W - gap) / 2
  const PL = 28, PR = 12, PT = 50, PB = 64
  const cH = 260

  // Общая шкала Y для честного сравнения
  const allVals = [...left.bars.map(b => b.value), ...right.bars.map(b => b.value)]
  const maxV = Math.max(...allVals) * 1.12
  const minV = 0
  const H = PT + cH + PB
  const yV = v => PT + cH - (v - minV) / (maxV - minV) * cH

  function renderPanel (bars, offsetX, title, defaultColor, isLeftPanel) {
    const n = bars.length
    const cW = panelW - PL - PR
    const slotW = cW / n
    const barW = Math.min(50, slotW * 0.68)
    let s = ''

    // Заголовок
    s += `<text x="${offsetX + PL + cW / 2}" y="${PT - 28}" text-anchor="middle" font-size="13" font-weight="bold" fill="${DARK}">${esc(title)}</text>`

    // Y grid + labels (только у левой панели)
    if (isLeftPanel) {
      const step = maxV > 50 ? 10 : 5
      for (let v = 0; v <= maxV; v += step) {
        const y = yV(v)
        s += `<line x1="${offsetX + PL}" y1="${y.toFixed(1)}" x2="${offsetX + PL + cW}" y2="${y.toFixed(1)}" stroke="${GRID}" stroke-width="1"/>`
        s += `<text x="${offsetX + PL - 5}" y="${(y + 4).toFixed(1)}" text-anchor="end" font-size="10" fill="${MDGRAY}">${v}</text>`
      }
    } else {
      const step = maxV > 50 ? 10 : 5
      for (let v = 0; v <= maxV; v += step) {
        const y = yV(v)
        s += `<line x1="${offsetX + PL}" y1="${y.toFixed(1)}" x2="${offsetX + PL + cW}" y2="${y.toFixed(1)}" stroke="${GRID}" stroke-width="1"/>`
      }
    }

    // Ось X внизу
    s += `<line x1="${offsetX + PL}" y1="${yV(0).toFixed(1)}" x2="${offsetX + PL + cW}" y2="${yV(0).toFixed(1)}" stroke="${LTGRAY}" stroke-width="1.5"/>`

    bars.forEach((b, i) => {
      const cx = offsetX + PL + i * slotW + slotW / 2
      const x = cx - barW / 2
      const bH = Math.abs(yV(b.value) - yV(0))
      const by = yV(b.value)

      // Цвет: highlight → жёлтый, иначе — defaultColor
      const color = b.isHighlight ? YELLOW : defaultColor

      s += `<rect x="${x.toFixed(1)}" y="${by.toFixed(1)}" width="${barW.toFixed(1)}" height="${bH.toFixed(1)}" fill="${color}" rx="2"/>`

      // Значение над баром
      s += `<text x="${cx.toFixed(1)}" y="${(by - 6).toFixed(1)}" text-anchor="middle" font-size="11" font-weight="bold" fill="${color}">${b.value.toFixed(1)}</text>`

      // Подпись под осью (повёрнутая)
      const labelX = cx, labelY = yV(0) + 12
      const maxLen = Math.floor(slotW / 4.8)
      const name = b.label.length > maxLen ? b.label.slice(0, maxLen) + '…' : b.label
      s += `<text x="${labelX.toFixed(1)}" y="${labelY}" text-anchor="end" font-size="10" fill="${DARK}" transform="rotate(-40,${labelX.toFixed(1)},${labelY})">${esc(name)}</text>`
    })

    // Подпись единиц
    s += `<text x="${offsetX + PL + cW / 2}" y="${PT + cH + PB - 4}" text-anchor="middle" font-size="10" fill="${MDGRAY}">${esc(unit)}</text>`

    return s
  }

  const leftSvg  = renderPanel(left.bars,  0,         left.title,  GREEN,  true)
  const rightSvg = renderPanel(right.bars, panelW + gap, right.title, ORANGE, false)

  // Разделительная линия между панелями
  const divX = panelW + gap / 2
  const dividerLine = `<line x1="${divX}" y1="${PT - 20}" x2="${divX}" y2="${PT + cH}" stroke="${LTGRAY}" stroke-width="1" stroke-dasharray="4,4"/>`

  const fullSvg = `<svg width="${W}" height="${H + 40}" xmlns="http://www.w3.org/2000/svg" font-family="-apple-system, 'Helvetica Neue', Arial, sans-serif">
    <rect x="0" y="0" width="3" height="40" fill="#C0272D"/>
    <text x="14" y="18" font-size="12" font-weight="bold" fill="#C0272D">DairyTrends · dairy-news.ru/dairytrends</text>
    <text x="14" y="34" font-size="11" fill="${MDGRAY}">${esc(regionLabel)}</text>
    <g transform="translate(0,40)">${leftSvg}${dividerLine}${rightSvg}</g>
  </svg>`

  return {
    buffer: await sharp(Buffer.from(fullSvg)).png({ quality: 95 }).toBuffer(),
    width: W,
    height: H + 40
  }
}

module.exports = { chart4_regionCompare }