/* Meridian — the product's two chart primitives, reported in the README as
   local additions. Neither holds data or does arithmetic: metrics.js buckets
   the rows and these draw them.

   Every bar is a figure (AGENTS §2), so every bar carries the tooltip that says
   which day it is, what it sums and how many rows it summed. Bars are CSS
   heights against the tallest bucket in the window; nothing here animates. */
(() => {
  const { Meter } = window.OriginDesignSystem_7c998b;

  /* One column a day. `series` names the keys drawn inside each column, in
     order, so a single-series chart is one bar and the movement chart is two.
     A series' count names EVERY array its figure sums (`rows`: [{key, noun}]),
     so the qualifier decomposes its own figure's set even where one bar adds
     two kinds of record together. */
  function DayChart({ buckets, series, format, label, note, tall }) {
    const peak = Math.max.apply(null, buckets.map((b) => Math.max.apply(null, series.map((s) => Math.abs(b[s.key] || 0)))).concat([1]));
    const axisEvery = Math.max(1, Math.round(buckets.length / 6));
    return (
      <div className="fd-chartbox">
        <div className={"fd-chart" + (tall ? " fd-chart--tall" : "")} role="img" aria-label={label + " — " + buckets.length + " days, tallest bar " + format(peak)}>
          {buckets.map((bucket) => {
            const empty = series.every((s) => !bucket[s.key]);
            const countOf = (s) => (s.rows || [])
              .map((part) => ({ n: (bucket[part.key] || []).length, noun: part.noun }))
              .filter((part) => part.n > 0)
              .map((part) => part.n + " " + (part.n === 1 ? part.noun : part.noun + "s"));
            const tip = formatDayFull(bucket.at) + " — " + (empty
              ? "nothing"
              : series.filter((s) => bucket[s.key]).map((s) => {
                const counted = countOf(s);
                return s.label + " " + format(bucket[s.key]) + (counted.length ? " across " + counted.join(" and ") : "");
              }).join(" · "));
            return (
              <FloatingTip key={bucket.at} side="bottom" label={tip}>
                <span className="fd-chart__col">
                  {empty ? <span className="fd-chart__bar fd-chart__bar--empty" /> : series.map((s) => (
                    <span
                      key={s.key}
                      className={"fd-chart__bar" + (s.tone ? " fd-chart__bar--" + s.tone : "")}
                      style={{ height: Math.max(2, (Math.abs(bucket[s.key] || 0) / peak) * 100) + "%" }}
                    />
                  ))}
                </span>
              </FloatingTip>
            );
          })}
        </div>
        <div className="fd-chart__axis">
          {buckets.map((bucket, i) => (
            <span key={bucket.at}>{i === 0 || i === buckets.length - 1 || i % axisEvery === 0 ? formatDay(bucket.at) : ""}</span>
          ))}
        </div>
        <div className="fd-chart__foot">
          {series.length > 1 ? (
            <span className="fd-legend">
              {series.map((s) => (
                <span className="fd-legend__item" key={s.key}>
                  <span className={"fd-legend__swatch" + (s.tone ? " fd-chart__bar--" + s.tone : "")} aria-hidden="true" />
                  {s.label}
                </span>
              ))}
            </span>
          ) : null}
          {note ? <span className="fd-footnote">{note}</span> : null}
        </div>
      </div>
    );
  }

  /* A proportion list: label, count, figure, bar. The rows come from methodMix
     or spendByCategory, both of which decompose the total printed above them. */
  function MixRows({ rows, total, unitLabel }) {
    return (
      <div className="fd-stack">
        {rows.map((row) => (
          <div className="fd-mix" key={row.label}>
            <div className="fd-mix__head">
              <span>{row.label}<span className="fd-mix__count">{row.count}</span></span>
              <span className="fd-amount">{formatMoney(row.amount)}</span>
            </div>
            <Meter value={row.amount} max={total} aria-label={row.label + " share of " + unitLabel} />
          </div>
        ))}
      </div>
    );
  }

  Object.assign(window, { DayChart, MixRows });
})();
