/* global React, DATA, Panel, KPI, BarChart, ComposedChart, fmtSAR, fmtN, fmtPct, fmtSignPct */
const Overview = () => {
  const k = DATA.kpi, m = DATA.meta;
  const rev = DATA.revenue_by_month;
  const revSpark = rev.map(x => x.revenue);
  const lfSpark = rev.map(x => x.lf);
  const mixMax = Math.max(...DATA.market_mix.map(x => x.revenue));

  return React.createElement('div', { className: 'page' },
    // headline
    React.createElement('div', { className: 'page-head' },
      React.createElement('div', { className: 'eyebrow', style: { marginBottom: 8 } }, 'flynas Revenue Desk · Network edition'),
      React.createElement('h1', { className: 'headline' }, 'The network is ', React.createElement('em', null, 'running hot'), ' into Hajj.'),
      React.createElement('div', { className: 'subhead' },
        `Trailing-twelve-month revenue of ${fmtSAR(k.revenue)} on ${fmtN(k.pax)} passengers, up ${fmtSignPct(k.revenue_yoy)} year on year. `
        + `${m.fleet_count} aircraft, ${m.routes} city-pairs, ${m.destinations} airports across ${m.countries} countries.`)),

    // Hajj banner
    React.createElement('div', { className: 'banner', style: { marginBottom: 22 } },
      React.createElement('div', { className: 'banner-glyph' }, '☾'),
      React.createElement('div', { style: { flex: 1 } },
        React.createElement('div', { className: 'banner-title' }, 'Hajj 1447 inbound peak — today through 29 May'),
        React.createElement('div', { className: 'banner-body' }, 'JED / MED arrivals forecast +130% with fares firm. Umrah-desk classes tightening; protect high-yield inventory and review overbooking authorisations on holy-city O&Ds.')),
      React.createElement('span', { className: 'pill pill-umrah' }, 'PEAK SEASON')),

    // KPI row
    React.createElement('div', { className: 'grid grid-5 gap-2', style: { marginBottom: 22 } },
      React.createElement(KPI, { label: 'Revenue · TTM', value: fmtSAR(k.revenue), delta: k.revenue_yoy, sub: 'YoY', sparkline: revSpark }),
      React.createElement(KPI, { label: 'Passengers · TTM', value: fmtN(Math.round(k.pax / 1e6 * 10) / 10) + 'M', delta: k.pax_yoy, sub: 'YoY' }),
      React.createElement(KPI, { label: 'Load Factor', value: fmtPct(k.lf), delta: k.lf_delta, sub: 'pts YoY', sparkline: lfSpark, sparklineColor: 'var(--ink)' }),
      React.createElement(KPI, { label: 'RASK', value: 'SAR ' + k.rask.toFixed(3), delta: k.rask_yoy, sub: 'YoY' }),
      React.createElement(KPI, { label: 'Yield · per RPK', value: 'SAR ' + k.yield_.toFixed(3), sub: 'passenger yield' })),

    // revenue trend + market mix
    React.createElement('div', { className: 'grid gap-3', style: { gridTemplateColumns: '1.55fr 1fr', marginBottom: 22 } },
      React.createElement(Panel, { title: 'Monthly revenue & load factor', sub: 'Flown actuals · SAR bars, load-factor line' },
        React.createElement(ComposedChart, { data: rev, barKey: 'revenue', lineKey: 'lf', labelKey: 'label',
          barFormat: fmtSAR, lineFormat: v => v.toFixed(0) + '%', barLabel: 'Revenue', lineLabel: 'Load factor', height: 290 })),
      React.createElement(Panel, { title: 'Revenue by market', sub: 'Share of trailing-12-month revenue' },
        React.createElement('div', { style: { padding: '4px 2px' } },
          DATA.market_mix.map((x, i) => React.createElement('div', { key: i, style: { marginBottom: 11 } },
            React.createElement('div', { className: 'row between', style: { marginBottom: 3 } },
              React.createElement('span', { style: { fontWeight: 600, fontSize: 12 } }, x.market),
              React.createElement('span', { className: 'mono', style: { fontSize: 11 } }, fmtSAR(x.revenue), ' · ', fmtPct(x.share))),
            React.createElement('div', { style: { height: 7, background: 'var(--paper-edge)', borderRadius: 3, overflow: 'hidden' } },
              React.createElement('div', { style: { width: (x.revenue / mixMax * 100) + '%', height: '100%', background: i === 0 ? 'var(--accent)' : 'var(--ink)' } })),
            React.createElement('div', { className: 'text-muted', style: { fontSize: 10, marginTop: 2 } }, `LF ${fmtPct(x.lf)} · yield SAR ${x.yield_.toFixed(3)}`))))) ),

    // top routes table
    React.createElement(Panel, { title: 'Top revenue O&Ds', sub: 'Trailing twelve months · directional', flush: true },
      React.createElement('div', { style: { maxHeight: 420, overflowY: 'auto' } },
        React.createElement('table', { className: 'tbl tbl-zebra' },
          React.createElement('thead', null, React.createElement('tr', null,
            ['', 'O&D', 'Market', 'Revenue', 'Pax', 'Load', 'Yield', 'YoY', 'Sectors'].map((h, i) =>
              React.createElement('th', { key: i, className: i > 2 ? 'num' : '' }, h)))),
          React.createElement('tbody', null,
            DATA.top_routes.map((r, i) => React.createElement('tr', { key: i },
              React.createElement('td', { className: 'mono text-faint' }, String(i + 1).padStart(2, '0')),
              React.createElement('td', null, React.createElement('span', { style: { fontWeight: 600 } }, r.od),
                r.umrah ? React.createElement('span', { className: 'pill pill-umrah', style: { marginLeft: 6 } }, 'Umrah') : null),
              React.createElement('td', { className: 'text-muted' }, r.market),
              React.createElement('td', { className: 'num mono' }, fmtSAR(r.revenue)),
              React.createElement('td', { className: 'num mono' }, fmtN(r.pax)),
              React.createElement('td', { className: 'num mono' }, fmtPct(r.lf)),
              React.createElement('td', { className: 'num mono' }, 'SAR ' + r.yield_.toFixed(3)),
              React.createElement('td', { className: 'num mono ' + (r.yoy >= 0 ? 'text-pos' : 'text-neg') }, r.yoy == null ? '—' : fmtSignPct(r.yoy)),
              React.createElement('td', { className: 'num mono text-muted' }, fmtN(r.flights)))))))));
};
window.Overview = Overview;