// bkg-parts.jsx — Booking Analytics tab section components (S1-S3)
const { HelpIcon: BkgHelpIcon, HelpTitle: BkgHelpTitle } = window.OV2_UI || {};

/* ============== Section 1 — Snapshot ============== */
function BkgSnapshot({ state, lang, axis }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const data = window.BKG.snapshot[state] || window.BKG.snapshot.default;
  const order = ['total', 'nights', 'confirm', 'otb', 'forecast', 'lead', 'alos', 'cancel', 'noshow', 'window'];
  return (
    <section data-screen-label="Bkg S1 Snapshot">
      <div className="rev-section-header">
        <div className="rev-section-title">{t.sec1}</div>
        <div className="rev-section-sub">{t.sec1sub}</div>
      </div>
      <div className="rev-snapshot mk-snapshot">
        {order.map((k) => {
          const d = data[k];
          return (
            <div key={k} className={`rev-snap mk-snap ${d.alert ? 'alert' : ''}`}>
              <div className="rev-snap-label">
                <span>{t.snap[k]}</span>
                {BkgHelpIcon && <BkgHelpIcon help={help[k]} />}
                {d.stayDate && <span className="bk-axis-pill" title={t.alwaysStay}>stay</span>}
              </div>
              <div className="rev-snap-value">{d.value}</div>
              <div className={`rev-snap-delta ${d.sign}`}>{d.delta}</div>
              {d.sub && <div className="mk-snap-sub">{d.sub}</div>}
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* ============== Section 2 — Pace & Pickup ============== */
function PaceCurveChart({ data, granularity, axisMode, lang }) {
  const t = window.BKG_T[lang];
  const w = 1200, h = 280, pad = { l: 40, r: 16, t: 18, b: 30 };
  const innerW = w - pad.l - pad.r;
  const innerH = h - pad.t - pad.b;
  const days = data.length;
  // group weekly if needed
  const points = React.useMemo(() => {
    if (granularity === 'weekly') {
      const out = [];
      for (let i = 0; i < days; i += 7) {
        const slice = data.slice(i, i + 7);
        const avg = (key) => slice.reduce((s, x) => s + x[key], 0) / slice.length;
        out.push({ day: i + 3, current: avg('current'), median: avg('median'), bandLo: avg('bandLo'), bandHi: avg('bandHi') });
      }
      return out;
    }
    return data;
  }, [data, granularity]);

  const x = (d) => pad.l + (d / 89) * innerW;
  const y = (v) => pad.t + (1 - v / 100) * innerH;
  const linePath = (key) => points.map((p, i) => `${i === 0 ? 'M' : 'L'}${x(p.day).toFixed(1)},${y(p[key]).toFixed(1)}`).join(' ');
  const bandPath = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${x(p.day).toFixed(1)},${y(p.bandHi).toFixed(1)}`).join(' ')
    + ' ' + points.slice().reverse().map(p => `L${x(p.day).toFixed(1)},${y(p.bandLo).toFixed(1)}`).join(' ') + ' Z';

  // Below band fills
  const belowFills = [];
  for (let i = 0; i < points.length - 1; i++) {
    if (points[i].current < points[i].bandLo - 3 && points[i + 1].current < points[i + 1].bandLo - 3) {
      belowFills.push([points[i], points[i + 1]]);
    }
  }
  const todayMarker = pad.l;

  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} className="bk-chart">
      {/* grid */}
      {[0, 25, 50, 75, 100].map((p) => (
        <g key={p}>
          <line x1={pad.l} x2={w - pad.r} y1={y(p)} y2={y(p)} stroke="var(--border)" strokeDasharray="2 3" />
          <text x={pad.l - 6} y={y(p) + 3} fontSize="10" textAnchor="end" fill="var(--text-3)">{p}{axisMode === '%' ? '%' : ''}</text>
        </g>
      ))}
      {/* week markers */}
      {[0, 14, 28, 42, 56, 70, 84].map((d) => (
        <g key={d}>
          <line x1={x(d)} x2={x(d)} y1={pad.t} y2={h - pad.b} stroke="var(--border)" strokeDasharray="1 4" opacity="0.6" />
          <text x={x(d)} y={h - pad.b + 14} fontSize="10" textAnchor="middle" fill="var(--text-3)">{d === 0 ? t.bcToday : `+${d}d`}</text>
        </g>
      ))}
      {/* confidence band */}
      <path d={bandPath} fill="var(--text-3)" opacity="0.10" />
      {/* below-band warning fills */}
      {belowFills.map(([a, b], i) => (
        <path key={i} d={`M${x(a.day)},${y(a.current)} L${x(b.day)},${y(b.current)} L${x(b.day)},${y(b.bandLo)} L${x(a.day)},${y(a.bandLo)} Z`}
              fill="rgba(220,38,38,0.10)" />
      ))}
      {/* median line dashed */}
      <path d={linePath('median')} fill="none" stroke="var(--text-3)" strokeWidth="1.5" strokeDasharray="4 4" />
      {/* current line solid */}
      <path d={linePath('current')} fill="none" stroke="#1F8A5B" strokeWidth="2.2" />
      {/* today marker */}
      <line x1={todayMarker} x2={todayMarker} y1={pad.t} y2={h - pad.b} stroke="var(--text-2)" strokeWidth="1.5" />
    </svg>
  );
}

function PaceSection({ state, lang }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const [granularity, setGranularity] = React.useState('daily');
  const [axisMode, setAxisMode] = React.useState('%');
  return (
    <div className="bk-card">
      <div className="bk-card-h">
        <div>
          <div>{BkgHelpTitle ? <BkgHelpTitle className="bk-card-title" help={help.paceCurve}>{t.paceTitle}</BkgHelpTitle> : <div className="bk-card-title">{t.paceTitle}</div>}</div>
          <div className="bk-card-sub">{t.paceSub} · <span className="bk-axis-pill">{t.alwaysStay}</span></div>
        </div>
        <div className="bk-controls">
          <div className="bk-segm">
            <button className={granularity === 'daily' ? 'on' : ''} onClick={() => setGranularity('daily')}>{t.daily}</button>
            <button className={granularity === 'weekly' ? 'on' : ''} onClick={() => setGranularity('weekly')}>{t.weekly}</button>
          </div>
          <div className="bk-segm">
            <button className={axisMode === '%' ? 'on' : ''} onClick={() => setAxisMode('%')}>{t.pct}</button>
            <button className={axisMode === 'n' ? 'on' : ''} onClick={() => setAxisMode('n')}>{t.nights}</button>
          </div>
        </div>
      </div>
      <PaceCurveChart data={window.BKG.pace} granularity={granularity} axisMode={axisMode} lang={lang} />
      <div className="bk-legend">
        <span><span className="bk-leg-line solid" style={{ background: '#1F8A5B' }}></span>{t.paceCurrent}</span>
        <span><span className="bk-leg-line dashed"></span>{t.paceMedian}</span>
        <span><span className="bk-leg-band"></span>{t.paceBand}</span>
      </div>
    </div>
  );
}

function BookingCurveChart({ data, lang }) {
  const t = window.BKG_T[lang];
  const w = 720, h = 240, pad = { l: 40, r: 16, t: 16, b: 28 };
  const innerW = w - pad.l - pad.r;
  const innerH = h - pad.t - pad.b;
  const days = data.daysBefore;
  const x = (d) => pad.l + ((d - days[0]) / (days[days.length - 1] - days[0])) * innerW;
  const y = (v) => pad.t + (1 - v / 100) * innerH;
  const todayX = x(data.todayDay);

  const curPath = data.daysBefore
    .map((d, i) => ({ d, v: data.current[i] }))
    .filter(p => p.d >= data.todayDay)
    .map((p, i) => `${i === 0 ? 'M' : 'L'}${x(p.d).toFixed(1)},${y(p.v).toFixed(1)}`).join(' ');
  const avgPath = data.daysBefore
    .map((d, i) => `${i === 0 ? 'M' : 'L'}${x(d).toFixed(1)},${y(data.average[i]).toFixed(1)}`).join(' ');

  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} className="bk-chart">
      {[0, 25, 50, 75, 100].map((p) => (
        <g key={p}>
          <line x1={pad.l} x2={w - pad.r} y1={y(p)} y2={y(p)} stroke="var(--border)" strokeDasharray="2 3" />
          <text x={pad.l - 6} y={y(p) + 3} fontSize="10" textAnchor="end" fill="var(--text-3)">{p}%</text>
        </g>
      ))}
      {[-90, -60, -30, 0].map((d) => (
        <g key={d}>
          <text x={x(d)} y={h - pad.b + 14} fontSize="10" textAnchor="middle" fill="var(--text-3)">{d === 0 ? '0' : d}</text>
        </g>
      ))}
      <text x={(pad.l + w - pad.r) / 2} y={h - 4} fontSize="10" textAnchor="middle" fill="var(--text-3)">дней до заезда</text>
      <path d={avgPath} fill="none" stroke="var(--text-3)" strokeWidth="1.5" strokeDasharray="4 4" />
      <path d={curPath} fill="none" stroke="#4285F4" strokeWidth="2.2" />
      <line x1={todayX} x2={todayX} y1={pad.t} y2={h - pad.b} stroke="var(--text-2)" strokeWidth="1.5" />
      <text x={todayX} y={pad.t - 3} fontSize="10" textAnchor="middle" fill="var(--text-2)">{t.bcToday}</text>
      <text x={x(0) - 8} y={pad.t + 14} fontSize="10" textAnchor="end" fill="var(--text-2)">{data.daysToGo} {t.bcDaysToGo}</text>
    </svg>
  );
}

function BookingCurveSection({ lang }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const data = window.BKG.bookingCurve;
  return (
    <div className="bk-card">
      <div className="bk-card-h">
        <div>
          <div>{BkgHelpTitle ? <BkgHelpTitle className="bk-card-title" help={help.bookingCurve}>{t.bcTitle}</BkgHelpTitle> : <div className="bk-card-title">{t.bcTitle}</div>}</div>
          <div className="bk-card-sub"><span className="bk-axis-pill">{t.alwaysStay}</span></div>
        </div>
        <div className="bk-controls">
          <label className="bk-date-input">
            <span>{t.bcDate}</span>
            <input type="text" defaultValue={data.targetDate} />
          </label>
        </div>
      </div>
      <BookingCurveChart data={data} lang={lang} />
      <div className="bk-legend">
        <span><span className="bk-leg-line solid" style={{ background: '#4285F4' }}></span>{t.bcCurrent}</span>
        <span><span className="bk-leg-line dashed"></span>{t.bcAvg}</span>
      </div>
    </div>
  );
}

function PickupTable({ lang, onOpen }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const rows = window.BKG.pickup.rows;
  const fmtP = (v) => v > 0 ? <span className="bk-pickup-pos">+{v}</span> : <span className="bk-pickup-zero">0</span>;
  return (
    <div className="bk-card">
      <div className="bk-card-h">
        <div>
          <div>{BkgHelpTitle ? <BkgHelpTitle className="bk-card-title" help={help.pickup}>{t.pickupTitle}</BkgHelpTitle> : <div className="bk-card-title">{t.pickupTitle}</div>}</div>
          <div className="bk-card-sub"><span className="bk-axis-pill">{t.alwaysStay}</span></div>
        </div>
      </div>
      <table className="bk-tbl">
        <thead>
          <tr>
            <th>{t.pkCol.month}</th>
            <th className="r">{t.pkCol.otb}</th>
            <th className="r">{t.pkCol.p1}</th>
            <th className="r">{t.pkCol.p7}</th>
            <th className="r">{t.pkCol.p30}</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i} onClick={onOpen ? () => onOpen('pickup', r) : undefined} style={onOpen ? { cursor: 'pointer' } : undefined}>
              <td>{r.month}</td>
              <td className="r"><strong>{r.otb}</strong></td>
              <td className="r">{fmtP(r.p1)}</td>
              <td className="r">{fmtP(r.p7)}</td>
              <td className="r">{fmtP(r.p30)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function PaceHeatmap({ lang, onOpen }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const grid = window.BKG.paceHeatmap;
  const [filter, setFilter] = React.useState('all');
  const days = 90;
  return (
    <div className="bk-card">
      <div className="bk-card-h">
        <div>
          <div>{BkgHelpTitle ? <BkgHelpTitle className="bk-card-title" help={help.inventoryHeatmap}>{t.heatTitle}</BkgHelpTitle> : <div className="bk-card-title">{t.heatTitle}</div>}</div>
        </div>
        <div className="bk-controls">
          <div className="bk-segm small">
            <button className={filter === 'all' ? 'on' : ''} onClick={() => setFilter('all')}>{t.filterAll}</button>
            <button className={filter === 'a' ? 'on' : ''} onClick={() => setFilter('a')}>{t.filterAvail}</button>
            <button className={filter === 'c' ? 'on' : ''} onClick={() => setFilter('c')}>{t.filterCancel}</button>
            <button className={filter === 'l' ? 'on' : ''} onClick={() => setFilter('l')}>{t.filterLow}</button>
          </div>
        </div>
      </div>
      <div className="bk-heat-wrap">
        <div className="bk-heat-axis">
          {[0, 14, 28, 42, 56, 70, 84].map(d => (
            <span key={d} style={{ left: `${(d / days) * 100}%` }}>+{d}d</span>
          ))}
        </div>
        {grid.map((row, ri) => (
          <div key={ri} className="bk-heat-row">
            <div className="bk-heat-rowlbl">{row.cabin}</div>
            <div className="bk-heat-cells">
              {row.cells.map((c, ci) => (
                <div
                  key={ci}
                  className={`bk-heat-cell s-${c} ${filter !== 'all' && filter !== c ? 'dim' : ''}`}
                  onClick={onOpen ? () => onOpen('heatmapCell', { cabin: row.cabin, day: ci, state: c }) : undefined}
                  title={`${row.cabin} · day +${ci} · ${t.heatLeg[c]}`}
                ></div>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="bk-heat-legend">
        <span><span className="bk-heat-swatch s-b"></span>{t.heatLeg.b}</span>
        <span><span className="bk-heat-swatch s-a"></span>{t.heatLeg.a}</span>
        <span><span className="bk-heat-swatch s-c"></span>{t.heatLeg.c}</span>
        <span><span className="bk-heat-swatch s-l"></span>{t.heatLeg.l}</span>
      </div>
    </div>
  );
}

/* ============== Section 3 — Lead Time ============== */
function LeadDistribution({ lang }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const d = window.BKG.leadDistribution;
  const w = 560, h = 220, pad = { l: 30, r: 16, t: 14, b: 32 };
  const innerW = w - pad.l - pad.r, innerH = h - pad.t - pad.b;
  const max = Math.max(...d.bins.map(b => b.pct));
  const colW = innerW / d.bins.length;
  // cumulative
  let cum = 0;
  const cumPts = d.bins.map((b, i) => {
    cum += b.pct;
    return { x: pad.l + (i + 0.5) * colW, y: pad.t + (1 - cum / 100) * innerH };
  });
  const cumPath = cumPts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
  return (
    <div className="bk-card">
      <div className="bk-card-h"><div><div>{BkgHelpTitle ? <BkgHelpTitle className="bk-card-title" help={help.leadDist}>{t.leadDistTitle}</BkgHelpTitle> : <div className="bk-card-title">{t.leadDistTitle}</div>}</div><div className="bk-card-sub"><span className="bk-axis-pill">{t.alwaysBooking}</span></div></div></div>
      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} className="bk-chart">
        {[0, 10, 20, 30].map(p => (
          <g key={p}>
            <line x1={pad.l} x2={w - pad.r} y1={pad.t + (1 - p / max) * innerH} y2={pad.t + (1 - p / max) * innerH} stroke="var(--border)" strokeDasharray="2 3" />
            <text x={pad.l - 6} y={pad.t + (1 - p / max) * innerH + 3} fontSize="10" textAnchor="end" fill="var(--text-3)">{p}%</text>
          </g>
        ))}
        {d.bins.map((b, i) => {
          const bh = (b.pct / max) * innerH;
          return (
            <g key={i}>
              <rect x={pad.l + i * colW + 4} y={pad.t + innerH - bh} width={colW - 8} height={bh} fill="var(--text)" rx="2" />
              <text x={pad.l + (i + 0.5) * colW} y={h - pad.b + 14} fontSize="10" textAnchor="middle" fill="var(--text-3)">{b.lbl}</text>
              <text x={pad.l + (i + 0.5) * colW} y={pad.t + innerH - bh - 4} fontSize="10" textAnchor="middle" fill="var(--text-2)">{b.pct}%</text>
            </g>
          );
        })}
        {/* cumulative line */}
        <path d={cumPath} fill="none" stroke="#4285F4" strokeWidth="1.8" opacity="0.7" />
        {/* median marker — between 8-14 bin */}
        <line x1={pad.l + 3.5 * colW} x2={pad.l + 3.5 * colW} y1={pad.t} y2={pad.t + innerH} stroke="#D97757" strokeWidth="1.5" strokeDasharray="3 2" />
        <text x={pad.l + 3.5 * colW + 4} y={pad.t + 12} fontSize="10" fill="#D97757">{t.leadDistMedian}: {d.median}d</text>
      </svg>
      <div className="bk-insight">↳ {lang === 'en' ? d.insightEn : d.insightRu}</div>
    </div>
  );
}

function LeadByChannel({ lang }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const rows = [...window.BKG.leadByChannel].sort((a, b) => b.median - a.median);
  const max = Math.max(...rows.map(r => r.median));
  return (
    <div className="bk-card">
      <div className="bk-card-h"><div><div>{BkgHelpTitle ? <BkgHelpTitle className="bk-card-title" help={help.leadChannel}>{t.leadChTitle}</BkgHelpTitle> : <div className="bk-card-title">{t.leadChTitle}</div>}</div><div className="bk-card-sub"><span className="bk-axis-pill">{t.alwaysBooking}</span></div></div></div>
      <table className="bk-tbl">
        <thead><tr><th>{t.leadChCol.ch}</th><th className="r">{t.leadChCol.median}</th><th className="r">{t.leadChCol.lt7}</th><th className="r">{t.leadChCol.gt30}</th></tr></thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i}>
              <td>{r.name}</td>
              <td className="r" style={{ width: '50%' }}>
                <div className="bk-lead-bar-wrap">
                  <div className="bk-lead-bar" style={{ width: `${(r.median / max) * 100}%` }}></div>
                  <span className="bk-lead-bar-val">{r.median}d</span>
                </div>
              </td>
              <td className="r">{r.lt7}%</td>
              <td className="r">{r.gt30}%</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function LeadTrend({ lang }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const data = window.BKG.leadTrend;
  const w = 1200, h = 200, pad = { l: 32, r: 12, t: 14, b: 26 };
  const innerW = w - pad.l - pad.r, innerH = h - pad.t - pad.b;
  const min = Math.min(...data) - 1, max = Math.max(...data) + 1;
  const x = (i) => pad.l + (i / (data.length - 1)) * innerW;
  const y = (v) => pad.t + (1 - (v - min) / (max - min)) * innerH;
  const path = data.map((v, i) => `${i === 0 ? 'M' : 'L'}${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ');
  // smoothed (rolling avg 6)
  const smooth = data.map((_, i) => {
    const slice = data.slice(Math.max(0, i - 3), i + 4);
    return slice.reduce((s, x) => s + x, 0) / slice.length;
  });
  const sPath = smooth.map((v, i) => `${i === 0 ? 'M' : 'L'}${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ');
  return (
    <div className="bk-card">
      <div className="bk-card-h"><div><div>{BkgHelpTitle ? <BkgHelpTitle className="bk-card-title" help={help.leadTrend}>{t.leadTrendTitle}</BkgHelpTitle> : <div className="bk-card-title">{t.leadTrendTitle}</div>}</div><div className="bk-card-sub"><span className="bk-axis-pill">{t.alwaysBooking}</span></div></div></div>
      <div className="bk-insight">↳ {t.leadTrendInsight}</div>
      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} className="bk-chart">
        {[min, (min + max) / 2, max].map((p, i) => (
          <g key={i}>
            <line x1={pad.l} x2={w - pad.r} y1={y(p)} y2={y(p)} stroke="var(--border)" strokeDasharray="2 3" />
            <text x={pad.l - 6} y={y(p) + 3} fontSize="10" textAnchor="end" fill="var(--text-3)">{p.toFixed(0)}d</text>
          </g>
        ))}
        {[0, 13, 26, 39, 51].map((wk, i) => (
          <text key={i} x={x(wk)} y={h - pad.b + 14} fontSize="10" textAnchor="middle" fill="var(--text-3)">{['12 мес назад', '−9м', '−6м', '−3м', 'сейчас'][i]}</text>
        ))}
        <path d={path} fill="none" stroke="var(--text-2)" strokeWidth="1" opacity="0.4" />
        <path d={sPath} fill="none" stroke="#1F8A5B" strokeWidth="2.2" />
      </svg>
    </div>
  );
}

function BkgPaceSection({ state, lang, onOpen }) {
  const t = window.BKG_T[lang];
  return (
    <section data-screen-label="Bkg S2 Pace">
      <div className="rev-section-header">
        <div className="rev-section-title">{t.sec2}</div>
        <div className="rev-section-sub">{t.sec2sub}</div>
      </div>
      <div className="bk-stack">
        <PaceSection state={state} lang={lang} />
        <BookingCurveSection lang={lang} />
        <PickupTable lang={lang} onOpen={onOpen} />
        <PaceHeatmap lang={lang} onOpen={onOpen} />
      </div>
    </section>
  );
}

function BkgLeadSection({ lang }) {
  const t = window.BKG_T[lang];
  return (
    <section data-screen-label="Bkg S3 Lead Time">
      <div className="rev-section-header">
        <div className="rev-section-title">{t.sec3}</div>
        <div className="rev-section-sub">{t.sec3sub}</div>
      </div>
      <div className="bk-grid-2">
        <LeadDistribution lang={lang} />
        <LeadByChannel lang={lang} />
      </div>
      <div className="bk-stack" style={{ marginTop: 12 }}>
        <LeadTrend lang={lang} />
      </div>
    </section>
  );
}

window.BkgSnapshot = BkgSnapshot;
window.BkgPaceSection = BkgPaceSection;
window.BkgLeadSection = BkgLeadSection;