/* global React, DATA, Panel, BarChart, KPI, fmtSAR, fmtN, fmtPct, fmtSignPct */
const Network = () => {
  const [mkt, setMkt] = useState('All');
  const [sort, setSort] = useState('revenue');
  const markets = ['All', ...DATA.market_mix.map(x => x.market)];
  let rows = DATA.route_table.filter(r => mkt === 'All' || r.market === mkt);
  rows = [...rows].sort((a, b) => (b[sort] || 0) - (a[sort] || 0)).slice(0, 80);

  const mixBars = DATA.market_mix.map(x => ({ label: x.market, revenue: x.revenue, lf: x.lf }));
  const fleetSeats = DATA.fleet.reduce((s, f) => s + f.seats, 0);

  const Th = ({ k, children, num }) => React.createElement('th', {
    className: (num ? 'num ' : '') + 'clickable', style: { cursor: 'pointer', color: sort === k ? 'var(--accent)' : undefined },
    onClick: () => k && setSort(k) }, children, sort === k ? ' ↓' : '');

  return React.createElement('div', { className: 'page' },
    React.createElement('div', { className: 'page-head' },
      React.createElement('div', { className: 'eyebrow', style: { marginBottom: 8 } }, 'Network & Routes'),
      React.createElement('h1', { className: 'headline', style: { fontSize: 46 } }, 'Where the revenue ', React.createElement('em', null, 'comes from.')),
      React.createElement('div', { className: 'subhead' }, `${DATA.route_table.length} directional O&Ds across six markets, flown by a ${DATA.meta.fleet_count}-aircraft Airbus fleet.`)),

    React.createElement('div', { className: 'grid grid-4 gap-2', style: { marginBottom: 20 } },
      DATA.fleet.map((f, i) => React.createElement(KPI, { key: i, label: f.type, value: f.count + ' ✈',
        sub: `${fmtN(f.seats)} seats · ${f.avg_age}y avg` }))),

    React.createElement('div', { className: 'grid gap-3', style: { gridTemplateColumns: '1fr 1fr', marginBottom: 20 } },
      React.createElement(Panel, { title: 'Revenue by market', sub: 'Trailing twelve months' },
        React.createElement(BarChart, { data: mixBars, valueKey: 'revenue', labelKey: 'label', format: fmtSAR, horizontal: true, color: 'var(--accent)', height: 220 })),
      React.createElement(Panel, { title: 'Load factor by market', sub: 'Trailing twelve months' },
        React.createElement(BarChart, { data: mixBars, valueKey: 'lf', labelKey: 'label', format: v => v.toFixed(0) + '%', horizontal: true, color: 'var(--ink)', height: 220 }))),

    React.createElement(Panel, { title: 'Route register', flush: true,
      actions: React.createElement('div', { className: 'filterbar' },
        markets.map(x => React.createElement('button', { key: x, className: 'filter-chip' + (mkt === x ? ' active' : ''), onClick: () => setMkt(x) }, x))) },
      React.createElement('div', { style: { maxHeight: 520, overflowY: 'auto' } },
        React.createElement('table', { className: 'tbl tbl-zebra' },
          React.createElement('thead', null, React.createElement('tr', null,
            React.createElement('th', null, 'O&D'),
            React.createElement('th', null, 'Market'),
            React.createElement('th', { className: 'num' }, 'Dist (km)'),
            React.createElement(Th, { k: 'revenue', num: true }, 'Revenue'),
            React.createElement(Th, { k: 'pax', num: true }, 'Pax'),
            React.createElement(Th, { k: 'lf', num: true }, 'Load'),
            React.createElement(Th, { k: 'yield_', num: true }, 'Yield'),
            React.createElement(Th, { k: 'avg_fare', num: true }, 'Avg fare'),
            React.createElement('th', { className: 'num' }, 'YoY'),
            React.createElement('th', { className: 'num' }, 'Sectors'))),
          React.createElement('tbody', null,
            rows.map((r, i) => React.createElement('tr', { key: i },
              React.createElement('td', null, React.createElement('span', { style: { fontWeight: 600 } }, r.od),
                r.umrah ? React.createElement('span', { className: 'pill pill-umrah', style: { marginLeft: 6 } }, 'U') : null),
              React.createElement('td', { className: 'text-muted' }, r.market),
              React.createElement('td', { className: 'num mono text-muted' }, fmtN(r.distance)),
              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' }, r.yield_.toFixed(3)),
              React.createElement('td', { className: 'num mono' }, fmtN(r.avg_fare)),
              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.Network = Network;