// bkg-parts2.jsx — Booking Analytics sections 4, 5, 6
const { HelpTitle: BkgHelpTitle2 } = window.OV2_UI || {};

/* ============== Section 4 — ALOS & Patterns ============== */
function AlosDistribution({ lang }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const bins = window.BKG.alosDistribution;
  const max = Math.max(...bins.map(b => b.pct));
  return (
    <div className="bk-card">
      <div className="bk-card-h"><div>{BkgHelpTitle2 ? <BkgHelpTitle2 className="bk-card-title" help={help.alosDist}>{t.alosTitle}</BkgHelpTitle2> : <div className="bk-card-title">{t.alosTitle}</div>}</div></div>
      <div className="bk-bars">
        {bins.map((b, i) => (
          <div key={i} className={`bk-bar ${b.dominant ? 'dom' : ''}`}>
            <div className="bk-bar-fill" style={{ width: `${(b.pct / max) * 100}%` }}>
              <span className="bk-bar-val">{b.pct}%</span>
            </div>
            <div className="bk-bar-lbl">{b.nights}N</div>
          </div>
        ))}
      </div>
      <div className="bk-insight">↳ {t.alosInsight}</div>
    </div>
  );
}

function AlosSeasonality({ lang }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const { months, bins, grid } = window.BKG.alosSeasonality;
  const palette = ['#E5E1D8', '#9CB89F', '#5C8A6E', '#2E5C46'];
  return (
    <div className="bk-card">
      <div className="bk-card-h"><div>{BkgHelpTitle2 ? <BkgHelpTitle2 className="bk-card-title" help={help.alosSeason}>{t.alosSeasonTitle}</BkgHelpTitle2> : <div className="bk-card-title">{t.alosSeasonTitle}</div>}</div></div>
      <div className="bk-stack-100">
        {months.map((m, mi) => (
          <div key={mi} className="bk-stack-col">
            <div className="bk-stack-bar">
              {bins.map((bn, bi) => (
                <div key={bi} className="bk-stack-seg" style={{ height: `${grid[mi][bi]}%`, background: palette[bi] }} title={`${m} · ${bn} · ${grid[mi][bi]}%`} />
              ))}
            </div>
            <div className="bk-stack-lbl">{m}</div>
          </div>
        ))}
      </div>
      <div className="bk-legend">
        {bins.map((bn, i) => <span key={i}><span className="bk-leg-sw" style={{ background: palette[i] }}></span>{bn}</span>)}
      </div>
    </div>
  );
}

function DowChart({ lang }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const arr = window.BKG.arrivalsByDow;
  const dep = window.BKG.departuresByDow;
  const max = Math.max(...arr.map(d => d.pct), ...dep.map(d => d.pct));
  return (
    <div className="bk-card">
      <div className="bk-card-h"><div>{BkgHelpTitle2 ? <BkgHelpTitle2 className="bk-card-title" help={help.dow}>{t.dowTitle}</BkgHelpTitle2> : <div className="bk-card-title">{t.dowTitle}</div>}</div></div>
      <div className="bk-dow-pair">
        <div className="bk-dow-col">
          <div className="bk-dow-h">{t.arrivals}</div>
          {arr.map((d, i) => (
            <div key={i} className="bk-dow-row">
              <span className="bk-dow-lbl">{d.d}</span>
              <div className="bk-dow-bar"><div className="bk-dow-fill arr" style={{ width: `${(d.pct / max) * 100}%` }}></div></div>
              <span className="bk-dow-val">{d.pct}%</span>
            </div>
          ))}
        </div>
        <div className="bk-dow-col">
          <div className="bk-dow-h">{t.departures}</div>
          {dep.map((d, i) => (
            <div key={i} className="bk-dow-row">
              <span className="bk-dow-lbl">{d.d}</span>
              <div className="bk-dow-bar"><div className="bk-dow-fill dep" style={{ width: `${(d.pct / max) * 100}%` }}></div></div>
              <span className="bk-dow-val">{d.pct}%</span>
            </div>
          ))}
        </div>
      </div>
      <div className="bk-insight">↳ {t.dowInsight}</div>
    </div>
  );
}

function PatternMatrix({ lang, onOpen }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const { rows, cols, grid } = window.BKG.patternMatrix;
  const max = Math.max(...grid.flat());
  return (
    <div className="bk-card">
      <div className="bk-card-h"><div><div>{BkgHelpTitle2 ? <BkgHelpTitle2 className="bk-card-title" help={help.patternMatrix}>{t.matrixTitle}</BkgHelpTitle2> : <div className="bk-card-title">{t.matrixTitle}</div>}</div><div className="bk-card-sub">{t.matrixSub}</div></div></div>
      <table className="bk-matrix">
        <thead><tr><th></th>{cols.map((c, i) => <th key={i}>{c}</th>)}</tr></thead>
        <tbody>
          {rows.map((r, ri) => (
            <tr key={ri}>
              <th className="row-h">{r}</th>
              {cols.map((c, ci) => {
                const v = grid[ri][ci];
                const intensity = max > 0 ? v / max : 0;
                return (
                  <td key={ci} className="bk-matrix-cell" onClick={onOpen && v >= 5 ? () => onOpen('pattern', { row: r, col: c, val: v }) : undefined} style={{ background: `rgba(31,138,91,${0.08 + intensity * 0.55})`, color: intensity > 0.6 ? '#fff' : 'var(--text)', cursor: onOpen && v >= 5 ? 'pointer' : undefined }}>
                    {v > 0 ? `${v}%` : '·'}
                  </td>
                );
              })}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function BkgAlosSection({ lang, onOpen }) {
  const t = window.BKG_T[lang];
  return (
    <section data-screen-label="Bkg S4 ALOS">
      <div className="rev-section-header">
        <div className="rev-section-title">{t.sec4}</div>
        <div className="rev-section-sub">{t.sec4sub}</div>
      </div>
      <div className="bk-grid-2">
        <AlosDistribution lang={lang} />
        <AlosSeasonality lang={lang} />
        <DowChart lang={lang} />
        <PatternMatrix lang={lang} onOpen={onOpen} />
      </div>
    </section>
  );
}

/* ============== Section 5 — Cancellations ============== */
function CancelFunnel({ state, lang }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const f = window.BKG.cancelFunnel[state] || window.BKG.cancelFunnel.default;
  const total = f.created;
  const w = (n) => `${(n / total) * 100}%`;
  return (
    <div className="bk-card">
      <div className="bk-card-h"><div>{BkgHelpTitle2 ? <BkgHelpTitle2 className="bk-card-title" help={help.cancelFunnel}>{t.cancelFunnelTitle}</BkgHelpTitle2> : <div className="bk-card-title">{t.cancelFunnelTitle}</div>}</div></div>
      <div className="bk-funnel">
        <div className="bk-funnel-row">
          <div className="bk-funnel-bar" style={{ width: '100%', background: 'var(--text)' }}>
            <span>{t.cancelCreated}: {f.created}</span>
          </div>
        </div>
        <div className="bk-funnel-row">
          <div className="bk-funnel-bar" style={{ width: w(f.cancelled), background: '#D97757' }}>
            <span>{t.cancelCancelled}: {f.cancelled} ({Math.round((f.cancelled / total) * 100)}%)</span>
          </div>
        </div>
        <div className="bk-funnel-row">
          <div className="bk-funnel-bar" style={{ width: w(f.noshow), background: '#C44545' }}>
            <span>{t.cancelNoshow}: {f.noshow} ({Math.round((f.noshow / total) * 100)}%)</span>
          </div>
        </div>
        <div className="bk-funnel-row">
          <div className="bk-funnel-bar" style={{ width: w(f.stayed), background: '#1F8A5B' }}>
            <span>{t.cancelStayed}: {f.stayed} ({Math.round((f.stayed / total) * 100)}%)</span>
          </div>
        </div>
      </div>
      <div className="bk-insight">↳ {t.cancelLost} <strong>€{f.lostRevenue.toLocaleString('en-US')}</strong> ({f.cancelled + f.noshow} {t.cancelOf} {total})</div>
    </div>
  );
}

function CancelTiming({ lang }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const bins = window.BKG.cancelTiming;
  const max = Math.max(...bins.map(b => b.pct));
  return (
    <div className="bk-card">
      <div className="bk-card-h"><div>{BkgHelpTitle2 ? <BkgHelpTitle2 className="bk-card-title" help={help.cancelTiming}>{t.cancelTimingTitle}</BkgHelpTitle2> : <div className="bk-card-title">{t.cancelTimingTitle}</div>}</div></div>
      <div className="bk-bars">
        {bins.map((b, i) => {
          const isAlert = b.lbl === '0—2';
          return (
            <div key={i} className={`bk-bar ${isAlert ? 'alert' : ''}`}>
              <div className="bk-bar-fill" style={{ width: `${(b.pct / max) * 100}%`, background: isAlert ? '#D97757' : undefined }}>
                <span className="bk-bar-val">{b.pct}%</span>
              </div>
              <div className="bk-bar-lbl">{b.days}</div>
            </div>
          );
        })}
      </div>
      <div className="bk-insight">↳ {t.cancelTimingInsight}</div>
      <div className="bk-insight alert">⚠ {t.cancelTimingAlert}</div>
    </div>
  );
}

function CancelByChannel({ state, lang, onOpen }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const rows = window.BKG.cancelByChannel[state] || window.BKG.cancelByChannel.default;
  const max = Math.max(...rows.map(r => r.rate));
  return (
    <div className="bk-card">
      <div className="bk-card-h"><div>{BkgHelpTitle2 ? <BkgHelpTitle2 className="bk-card-title" help={help.cancelChannel}>{t.cancelByChTitle}</BkgHelpTitle2> : <div className="bk-card-title">{t.cancelByChTitle}</div>}</div></div>
      <div className="bk-bars">
        {rows.map((r, i) => (
          <div key={i} className={`bk-bar ${r.tone || ''}`} onClick={onOpen ? () => onOpen('cancel', r) : undefined} style={onOpen ? { cursor: 'pointer' } : undefined}>
            <div className="bk-bar-lbl bk-bar-lbl-l">{r.name}</div>
            <div className="bk-bar-fill" style={{ width: `${(r.rate / max) * 100}%`, background: r.tone === 'warn' ? '#D97757' : (r.tone === 'good' ? '#1F8A5B' : 'var(--text-2)') }}>
              <span className="bk-bar-val">{r.rate}% · {r.count}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function CancelEmpty({ title, msg, help }) {
  return (
    <div className="bk-card bk-empty">
      <div className="bk-card-h"><div>{BkgHelpTitle2 ? <BkgHelpTitle2 className="bk-card-title" help={help}>{title}</BkgHelpTitle2> : <div className="bk-card-title">{title}</div>}</div></div>
      <div className="bk-empty-body">
        <div className="bk-empty-icon">⊘</div>
        <div className="bk-empty-msg">{msg}</div>
      </div>
    </div>
  );
}

function BkgCancelSection({ state, lang, onOpen }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  return (
    <section data-screen-label="Bkg S5 Cancellations">
      <div className="rev-section-header">
        <div className="rev-section-title">{t.sec5}</div>
        <div className="rev-section-sub">{t.sec5sub}</div>
      </div>
      <div className="bk-grid-2">
        <CancelFunnel state={state} lang={lang} />
        <CancelTiming lang={lang} />
        <CancelByChannel state={state} lang={lang} onOpen={onOpen} />
        <CancelEmpty title={t.cancelReasonsTitle} msg={t.cancelReasonsEmpty} help={help.cancelReasons} />
      </div>
      <div className="bk-stack" style={{ marginTop: 12 }}>
        <CancelEmpty title={t.refundsTitle} msg={t.refundsEmpty} help={help.refunds} />
      </div>
    </section>
  );
}

/* ============== Section 6 — Inventory & Pricing ============== */
function CabinsTable({ state, lang, onOpen }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const rows = window.BKG.cabins[state] || window.BKG.cabins.default;
  return (
    <div className="bk-card">
      <div className="bk-card-h"><div>{BkgHelpTitle2 ? <BkgHelpTitle2 className="bk-card-title" help={help.cabins}>{t.cabinsTitle}</BkgHelpTitle2> : <div className="bk-card-title">{t.cabinsTitle}</div>}</div></div>
      <table className="bk-tbl">
        <thead>
          <tr>
            <th>{t.cabCol.name}</th>
            <th>{t.cabCol.type}</th>
            <th className="r">{t.cabCol.nights}</th>
            <th className="r">{t.cabCol.avail}</th>
            <th className="r">{t.cabCol.occ}</th>
            <th className="r">{t.cabCol.adr}</th>
            <th className="r">{t.cabCol.rev}</th>
            <th className="r">{t.cabCol.cancel}</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i} className={r.warn ? 'warn' : ''} onClick={onOpen && !r.total ? () => onOpen('cabin', r) : undefined} style={onOpen && !r.total ? { cursor: 'pointer' } : undefined}>
              <td><strong>{r.name}</strong></td>
              <td className="dim">{r.type}</td>
              <td className="r">{r.nights}</td>
              <td className="r dim">{r.available}</td>
              <td className="r"><strong>{r.occ}%</strong></td>
              <td className="r">{r.adr}</td>
              <td className="r"><strong>{r.rev}</strong></td>
              <td className={`r ${r.cancel > 12 ? 'warn-text' : ''}`}>{r.cancel}%</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function AdrDistribution({ lang }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const bins = window.BKG.adrDistribution;
  const max = Math.max(...bins.map(b => b.pct));
  return (
    <div className="bk-card">
      <div className="bk-card-h"><div>{BkgHelpTitle2 ? <BkgHelpTitle2 className="bk-card-title" help={help.adrDist}>{t.adrDistTitle}</BkgHelpTitle2> : <div className="bk-card-title">{t.adrDistTitle}</div>}</div></div>
      <div className="bk-bars">
        {bins.map((b, i) => (
          <div key={i} className="bk-bar">
            <div className="bk-bar-lbl bk-bar-lbl-l">{b.range}</div>
            <div className="bk-bar-fill" style={{ width: `${(b.pct / max) * 100}%` }}>
              <span className="bk-bar-val">{b.pct}%</span>
            </div>
          </div>
        ))}
      </div>
      <div className="bk-insight">↳ {t.adrDistMedian}: <strong>{window.BKG.adrMedian}</strong></div>
      <div className="bk-insight">↳ {t.adrInsight}</div>
    </div>
  );
}

function DowPricing({ lang }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const rows = window.BKG.dowPricing;
  const w = 560, h = 220, pad = { l: 40, r: 40, t: 14, b: 30 };
  const innerW = w - pad.l - pad.r, innerH = h - pad.t - pad.b;
  const maxAdr = Math.max(...rows.map(r => r.adr));
  const minAdr = Math.min(...rows.map(r => r.adr));
  const cw = innerW / rows.length;
  const yOcc = (v) => pad.t + (1 - v / 100) * innerH;
  const yAdr = (v) => pad.t + (1 - (v - minAdr + 20) / (maxAdr - minAdr + 40)) * innerH;
  const adrPath = rows.map((r, i) => `${i === 0 ? 'M' : 'L'}${(pad.l + (i + 0.5) * cw).toFixed(1)},${yAdr(r.adr).toFixed(1)}`).join(' ');
  return (
    <div className="bk-card">
      <div className="bk-card-h"><div>{BkgHelpTitle2 ? <BkgHelpTitle2 className="bk-card-title" help={help.dowPricing}>{t.dowPriceTitle}</BkgHelpTitle2> : <div className="bk-card-title">{t.dowPriceTitle}</div>}</div></div>
      <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={yOcc(p)} y2={yOcc(p)} stroke="var(--border)" strokeDasharray="2 3" />
            <text x={pad.l - 6} y={yOcc(p) + 3} fontSize="10" textAnchor="end" fill="var(--text-3)">{p}%</text>
            <text x={w - pad.r + 6} y={yOcc(p) + 3} fontSize="10" textAnchor="start" fill="var(--text-3)">€{Math.round(minAdr - 20 + (p / 100) * (maxAdr - minAdr + 40))}</text>
          </g>
        ))}
        {rows.map((r, i) => {
          const oh = (r.occ / 100) * innerH;
          return (
            <g key={i}>
              <rect x={pad.l + i * cw + 8} y={pad.t + innerH - oh} width={cw - 16} height={oh} fill="var(--text-2)" rx="2" opacity="0.4" />
              <text x={pad.l + (i + 0.5) * cw} y={h - pad.b + 14} fontSize="10" textAnchor="middle" fill="var(--text-3)">{r.d}</text>
            </g>
          );
        })}
        <path d={adrPath} fill="none" stroke="#D97757" strokeWidth="2.2" />
        {rows.map((r, i) => (
          <circle key={i} cx={pad.l + (i + 0.5) * cw} cy={yAdr(r.adr)} r="3" fill="#D97757" />
        ))}
        {/* Yield opp callout: lowest occ + lowest adr */}
        {(() => {
          const idx = 0; // Mon
          const cx = pad.l + (idx + 0.5) * cw;
          return (
            <g>
              <rect x={cx - 50} y={pad.t + 4} width="100" height="22" rx="4" fill="#D97757" opacity="0.92" />
              <text x={cx} y={pad.t + 19} fontSize="10" textAnchor="middle" fill="#fff" fontWeight="600">{t.yieldOpp}</text>
            </g>
          );
        })()}
      </svg>
      <div className="bk-legend">
        <span><span className="bk-leg-sw" style={{ background: 'var(--text-2)', opacity: 0.4 }}></span>{t.dowPriceLegO}</span>
        <span><span className="bk-leg-line solid" style={{ background: '#D97757' }}></span>{t.dowPriceLegA}</span>
      </div>
    </div>
  );
}

function ForecastChart({ lang }) {
  const t = window.BKG_T[lang];
  const help = window.BKG_HELP[lang];
  const rows = window.BKG.forecast6m;
  const w = 1200, h = 240, pad = { l: 40, r: 40, t: 16, b: 30 };
  const innerW = w - pad.l - pad.r, innerH = h - pad.t - pad.b;
  const cw = innerW / rows.length;
  const yOcc = (v) => pad.t + (1 - v / 100) * innerH;
  const maxAdr = 320, minAdr = 200;
  const yAdr = (v) => pad.t + (1 - (v - minAdr) / (maxAdr - minAdr)) * innerH;
  const occPath = rows.map((r, i) => `${i === 0 ? 'M' : 'L'}${(pad.l + (i + 0.5) * cw).toFixed(1)},${yOcc(r.occ).toFixed(1)}`).join(' ');
  const lyPath = rows.map((r, i) => `${i === 0 ? 'M' : 'L'}${(pad.l + (i + 0.5) * cw).toFixed(1)},${yOcc(r.ly).toFixed(1)}`).join(' ');
  const adrPath = rows.map((r, i) => `${i === 0 ? 'M' : 'L'}${(pad.l + (i + 0.5) * cw).toFixed(1)},${yAdr(r.adr).toFixed(1)}`).join(' ');
  return (
    <div className="bk-card">
      <div className="bk-card-h"><div>{BkgHelpTitle2 ? <BkgHelpTitle2 className="bk-card-title" help={help.forecast}>{t.fcTitle}</BkgHelpTitle2> : <div className="bk-card-title">{t.fcTitle}</div>}</div></div>
      <div className="bk-insight">↳ {t.fcSummary}</div>
      <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={yOcc(p)} y2={yOcc(p)} stroke="var(--border)" strokeDasharray="2 3" />
            <text x={pad.l - 6} y={yOcc(p) + 3} fontSize="10" textAnchor="end" fill="var(--text-3)">{p}%</text>
            <text x={w - pad.r + 6} y={yOcc(p) + 3} fontSize="10" textAnchor="start" fill="var(--text-3)">€{Math.round(minAdr + (p / 100) * (maxAdr - minAdr))}</text>
          </g>
        ))}
        {rows.map((r, i) => (
          <text key={i} x={pad.l + (i + 0.5) * cw} y={h - pad.b + 14} fontSize="11" textAnchor="middle" fill="var(--text-3)">{r.m}</text>
        ))}
        <path d={lyPath} fill="none" stroke="var(--text-3)" strokeWidth="1.5" strokeDasharray="4 4" />
        <path d={occPath} fill="none" stroke="#1F8A5B" strokeWidth="2.4" />
        {rows.map((r, i) => (
          <circle key={i} cx={pad.l + (i + 0.5) * cw} cy={yOcc(r.occ)} r="3.5" fill="#1F8A5B" />
        ))}
        <path d={adrPath} fill="none" stroke="#D97757" strokeWidth="2" opacity="0.85" />
      </svg>
      <div className="bk-legend">
        <span><span className="bk-leg-line solid" style={{ background: '#1F8A5B' }}></span>{t.fcLegOcc}</span>
        <span><span className="bk-leg-line solid" style={{ background: '#D97757' }}></span>{t.fcLegAdr}</span>
        <span><span className="bk-leg-line dashed"></span>{t.fcLegLy}</span>
      </div>
    </div>
  );
}

function BkgInventorySection({ state, lang, onOpen }) {
  const t = window.BKG_T[lang];
  return (
    <section data-screen-label="Bkg S6 Inventory">
      <div className="rev-section-header">
        <div className="rev-section-title">{t.sec6}</div>
        <div className="rev-section-sub">{t.sec6sub}</div>
      </div>
      <div className="bk-stack">
        <CabinsTable state={state} lang={lang} onOpen={onOpen} />
      </div>
      <div className="bk-grid-2" style={{ marginTop: 12 }}>
        <AdrDistribution lang={lang} />
        <DowPricing lang={lang} />
      </div>
      <div className="bk-stack" style={{ marginTop: 12 }}>
        <ForecastChart lang={lang} />
      </div>
    </section>
  );
}

window.BkgAlosSection = BkgAlosSection;
window.BkgCancelSection = BkgCancelSection;
window.BkgInventorySection = BkgInventorySection;