/* global React, DATA, Panel, BarChart, LineChart, fmtSAR, fmtN, fmtPct */
const Pricing = () => {
  const ods = Object.keys(DATA.fare_ladder).sort();
  const [od, setOd] = useState(ods.includes('RUH-JED') ? 'RUH-JED' : ods[0]);
  const ladder = DATA.fare_ladder[od] || [];
  const trend = DATA.fare_trend[od] || [];
  const econ = ladder.filter(x => x.cabin === 'Economy');
  const biz = ladder.filter(x => x.cabin === 'Business');

  const ladderBars = econ.map(x => ({ label: x.rbd, fare: x.fare }));
  const trendData = trend.map(x => ({ week: x.week, label: x.week === 0 ? 'now' : 'w-' + x.week, fare: x.fare }));

  return React.createElement('div', { className: 'page' },
    React.createElement('div', { className: 'page-head' },
      React.createElement('div', { className: 'eyebrow', style: { marginBottom: 8 } }, 'Pricing & Fare Structure'),
      React.createElement('h1', { className: 'headline', style: { fontSize: 46 } }, 'The ', React.createElement('em', null, 'fare ladder'), ', class by class.'),
      React.createElement('div', { className: 'subhead' }, 'Current filed fares across the booking-class ladder, and how the reference fare has moved over the last eight weeks.')),

    React.createElement('div', { className: 'row gap-1', style: { marginBottom: 16, flexWrap: 'wrap' } },
      React.createElement('span', { className: 'label', style: { marginRight: 6 } }, 'O&D'),
      ods.slice(0, 22).map(x => React.createElement('button', { key: x, className: 'filter-chip' + (od === x ? ' active' : ''), onClick: () => setOd(x) }, x))),

    React.createElement('div', { className: 'grid gap-3', style: { gridTemplateColumns: '1fr 1fr', marginBottom: 22 } },
      React.createElement(Panel, { title: `${od} · economy fare ladder`, sub: 'Current filed fare by RBD (high → low)' },
        React.createElement(BarChart, { data: ladderBars, valueKey: 'fare', labelKey: 'label', format: fmtSAR, color: 'var(--accent)', valueLabel: true, height: 270 })),
      React.createElement(Panel, { title: `${od} · reference fare trend`, sub: 'M-class filed fare, last 8 weeks' },
        React.createElement(LineChart, { data: trendData, xKey: 'label', height: 270, smooth: true, format: fmtSAR,
          series: [{ key: 'fare', label: 'M-class fare', color: 'var(--accent)', width: 2, fill: true }] }))),

    React.createElement('div', { className: 'grid gap-3', style: { gridTemplateColumns: biz.length ? '1fr 1fr' : '1fr' } },
      React.createElement(Panel, { title: 'Full booking-class table', sub: `${od} · filed fares`, flush: true },
        React.createElement('table', { className: 'tbl tbl-zebra' },
          React.createElement('thead', null, React.createElement('tr', null,
            ['RBD', 'Cabin', 'Filed fare', 'vs top'].map((h, i) => React.createElement('th', { key: i, className: i > 1 ? 'num' : '' }, h)))),
          React.createElement('tbody', null,
            ladder.map((x, i) => React.createElement('tr', { key: i },
              React.createElement('td', { style: { fontWeight: 600 } }, x.rbd),
              React.createElement('td', { className: 'text-muted' }, x.cabin),
              React.createElement('td', { className: 'num mono' }, fmtSAR(x.fare)),
              React.createElement('td', { className: 'num mono text-muted' }, ladder[0] ? fmtPct(x.fare / ladder[0].fare * 100, 0) : '—')))))),
      biz.length ? React.createElement(Panel, { title: 'Business cabin', sub: 'Widebody (A330) routes only', flush: true },
        React.createElement('table', { className: 'tbl' },
          React.createElement('thead', null, React.createElement('tr', null,
            ['RBD', 'Filed fare'].map((h, i) => React.createElement('th', { key: i, className: i ? 'num' : '' }, h)))),
          React.createElement('tbody', null,
            biz.map((x, i) => React.createElement('tr', { key: i },
              React.createElement('td', { style: { fontWeight: 600 } }, x.rbd),
              React.createElement('td', { className: 'num mono' }, fmtSAR(x.fare))))))) : null));
};
window.Pricing = Pricing;