// Finance hub dashboard for Harding & Vane — a C-level financial overview.
// Built from the same visual primitives as the Construction Project dashboard
// (StatTile / AnalysisCard / RichTrendChart / GroupedBarChart), so the two hubs
// share one design language. Also exports HubComingSoon — the placeholder shown
// for hubs still being built out (People / Diligence / Sales / Operations).

const {
  StatTile, AnalysisCard, RichTrendChart, GroupedBarChart,
} = window;

/* ============ Finance dashboard ============ */

// Trailing-six-quarters series (FY2025 Q1 → FY2026 Q2).
const FH_QTRS = ['Q1 25', 'Q2 25', 'Q3 25', 'Q4 25', 'Q1 26', 'Q2 26'];
const FH_REVENUE = [292, 305, 315, 322, 331, 341];
const FH_MARGIN = [11.4, 11.8, 12.1, 12.3, 12.6, 12.8];

// Orders vs revenue (last four quarters) — visualises the 1.3× book-to-bill.
const FH_ORDER_QTRS = ['Q3 25', 'Q4 25', 'Q1 26', 'Q2 26'];
const FH_ORDERS = [352, 388, 401, 452];
const FH_REV_4 = [315, 322, 331, 341];

const FH_KPI_1 = [
  { label: 'Revenue (TTM)', value: '$1.24B', sub: '+11% YoY · $341M in Q2' },
  { label: 'Adj. EBITDA margin', value: '12.8%', sub: '$159M TTM · +90 bps YoY', tone: 'ok' },
  { label: 'Total liquidity', value: '$522M', sub: '$142M cash · $380M undrawn revolver' },
  { label: 'Backlog', value: '$3.10B', sub: '1.3× book-to-bill · 2.3 yrs coverage' },
];

const FH_KPI_2 = [
  { label: 'Net income (TTM)', value: '$71M', sub: '+18% YoY · 5.7% net margin', tone: 'ok' },
  { label: 'Free cash flow (TTM)', value: '$98M', sub: '62% EBITDA conversion' },
  { label: 'Leverage', value: 'Net cash', sub: '$102M net cash · 0.3× gross', tone: 'ok' },
  { label: 'DSO', value: '58 days', sub: '−4 days QoQ · target ≤ 55', tone: 'warn' },
];

const FH_SEGMENTS = [
  ['Infrastructure', '$512M', '14.1%', '$1.38B', '+14%'],
  ['Energy & Utilities', '$358M', '11.2%', '$0.86B', '+9%'],
  ['Buildings', '$236M', '9.8%', '$0.52B', '+6%'],
  ['Water', '$134M', '15.3%', '$0.34B', '+21%'],
];

const FH_LIQUIDITY = [
  ['Cash & equivalents', '$142M'],
  ['Undrawn revolver', '$380M'],
  ['Total liquidity', '$522M'],
  ['Total debt', '$40M'],
  ['Net cash', '$102M'],
];

function FinanceDashboard() {
  return (
    <div className="hub-dash">
      <section className="cs" id="fin-overview">
        {/* === Summary header === */}
        <header className="cs__header cs__header--summary">
          <p className="cs__summary">
            Harding & Vane closed the first half of FY2026 ahead of plan — revenue reached{' '}
            <span style={{ color: '#3F9A5E' }}>$341M in Q2</span>, the sixth consecutive quarter of
            growth, while adjusted EBITDA margin expanded 90 bps to 12.8%.
          </p>
          <div className="cs__chips">
            <span className="chip">FY2026 · Q2 close</span>
            <span className="chip">As of June 30, 2026</span>
            <span className="chip">USD · unaudited</span>
          </div>
        </header>

        {/* === Headline KPI strip === */}
        <div className="cs__kpi-grid cs__kpi-grid--4">
          {FH_KPI_1.map((k, i) => (
            <StatTile key={i} label={k.label} value={k.value} sub={k.sub} tone={k.tone} />
          ))}
        </div>
        <div className="cs__kpi-grid cs__kpi-grid--4">
          {FH_KPI_2.map((k, i) => (
            <StatTile key={i} label={k.label} value={k.value} sub={k.sub} tone={k.tone} />
          ))}
        </div>

        {/* === Status callout === */}
        <div className="cs__callout cs__callout--muted">
          <div className="cs__callout-ico"><IconInfo size={18} /></div>
          <div className="cs__callout-body">
            <h4 className="cs__callout-title">Where the business stands — Q2 FY2026</h4>
            <p className="cs__p">
              Backlog held at $3.1B on a 1.3× book-to-bill and the balance sheet remains in a net
              cash position with $522M of total liquidity. Free cash flow of $98M represents 62%
              conversion, held back modestly by higher working capital in the Energy & Utilities
              segment. Trailing margin now sits above the 12% through-cycle target for the first time
              since FY2023.
            </p>
          </div>
        </div>

        {/* === Trend charts === */}
        <div className="an-grid">
          <AnalysisCard
            headline="Revenue grew for the sixth straight quarter to $341M, up 11% year over year"
            accent="$341M" accentColor="#3F9A5E"
            legend={[{ color: '#3F9A5E', label: 'Quarterly revenue ($M)' }]}>
            <RichTrendChart
              values={FH_REVENUE} xLabels={FH_QTRS}
              yMax={400} yTicks={[0, 100, 200, 300, 400]}
              color="#3F9A5E" fill="rgba(63,154,94,0.14)" area={true}
              annotations={[{ i: FH_REVENUE.length - 1, value: '$341M', title: 'Q2 FY26', color: '#3F9A5E', place: 'below' }]} />
          </AnalysisCard>

          <AnalysisCard
            headline="Adjusted EBITDA margin expanded 90 bps to 12.8%, now above the 12% target"
            accent="12.8%" accentColor="#3A6FB0"
            legend={[{ color: '#3A6FB0', label: 'Adj. EBITDA margin (%)' }]}>
            <RichTrendChart
              values={FH_MARGIN} xLabels={FH_QTRS}
              yMax={15} yTicks={[0, 5, 10, 15]}
              color="#3A6FB0" fill="rgba(58,111,176,0.13)" area={true}
              goal={12} goalLabel="Through-cycle target 12.0%" zoneFill="rgba(58,111,176,0.05)"
              annotations={[{ i: FH_MARGIN.length - 1, value: '12.8%', title: 'Q2 FY26', color: '#3A6FB0', place: 'below' }]} />
          </AnalysisCard>
        </div>

        {/* === Book-to-bill + liquidity === */}
        <div className="cs__split-2">
          <AnalysisCard
            headline="New bookings outpaced revenue for four straight quarters — book-to-bill of 1.3×"
            accent="1.3×" accentColor="#33302E"
            legend={[{ color: '#33302E', label: 'New orders ($M)' }, { color: '#A09792', label: 'Revenue ($M)' }]}>
            <GroupedBarChart
              groups={FH_ORDER_QTRS}
              series={[
                { key: 'orders', label: 'New orders', values: FH_ORDERS, tone: 'base' },
                { key: 'rev', label: 'Revenue', values: FH_REV_4, tone: 'muted' },
              ]}
              height={190} />
          </AnalysisCard>

          <div className="cs__sub">
            <div className="cs__sub-label">Capital & liquidity</div>
            <div className="cs__table cs__table--2">
              <div className="cs__tr cs__tr--head">
                <div>Item</div><div className="r">Amount</div>
              </div>
              {FH_LIQUIDITY.map((row, i) => (
                <div key={i} className={`cs__tr ${row[0] === 'Total liquidity' || row[0] === 'Net cash' ? 'cs__tr--strong' : ''}`}>
                  <div>{row[0]}</div>
                  <div className="r tnum">{row[1]}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* === Segment performance === */}
        <div className="cs__sub">
          <div className="cs__sub-label">Segment performance — trailing twelve months</div>
          <div className="cs__table cs__table--seg">
            <div className="cs__tr cs__tr--head">
              <div>Segment</div>
              <div className="r">Revenue</div>
              <div className="r">EBITDA %</div>
              <div className="r">Backlog</div>
              <div className="r">YoY</div>
            </div>
            {FH_SEGMENTS.map((row, i) => (
              <div key={i} className="cs__tr">
                <div>{row[0]}</div>
                <div className="r tnum">{row[1]}</div>
                <div className="r tnum">{row[2]}</div>
                <div className="r tnum">{row[3]}</div>
                <div className="r tnum">{row[4]}</div>
              </div>
            ))}
            <div className="cs__tr cs__tr--strong">
              <div>Total</div>
              <div className="r tnum">$1.24B</div>
              <div className="r tnum">12.8%</div>
              <div className="r tnum">$3.10B</div>
              <div className="r tnum">+11%</div>
            </div>
          </div>
        </div>

        {/* === CFO watch items === */}
        <div className="cs__callout cs__callout--warn">
          <div className="cs__callout-ico"><IconCircleAlert size={18} /></div>
          <div className="cs__callout-body">
            <h4 className="cs__callout-title">CFO watch items — Q2 FY2026</h4>
            <p className="cs__p">
              Two fixed-price Energy & Utilities contracts are tracking below bid margin and account
              for most of the working-capital build; an $18M claim on the Cascade transit package
              remains in commercial review, with recovery expected in Q4. DSO of 58 days sits four
              days above the ≤55-day target, driven by delayed owner certifications on three
              Infrastructure jobs.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ============ Placeholder for hubs still in build ============ */

const HUB_PLACEHOLDER = {
  People: {
    Icon: IconUsers,
    body: 'Headcount, hiring funnel, retention and org-health metrics for Harding & Vane will live here.',
  },
  Sales: {
    Icon: IconDollar,
    body: 'Bookings, pipeline coverage, win-rate and revenue forecast across the commercial organization will live here.',
  },
  Operations: {
    Icon: IconSliders,
    body: 'Project delivery, resource utilization and margin health across active engagements will live here.',
  },
};

function HubComingSoon({ hub }) {
  const meta = HUB_PLACEHOLDER[hub] || { Icon: IconLayoutDash, body: 'This dashboard is being built.' };
  const Icon = meta.Icon;
  return (
    <div className="hub-soon">
      <div className="hub-soon__panel">
        <div className="hub-soon__ico"><Icon size={26} /></div>
        <span className="hub-soon__chip">Coming soon</span>
        <div className="hub-soon__t">The {hub} dashboard is on the way</div>
        <div className="hub-soon__s">{meta.body}</div>
      </div>
    </div>
  );
}

window.FinanceDashboard = FinanceDashboard;
window.HubComingSoon = HubComingSoon;