/**
 * KROW styling for MUI X Charts.
 *
 * MUI X is the drawing layer only — the surfaces, spacing and typography around
 * a chart stay KROW's. This module is what stops the two from disagreeing: the
 * palette is the same one the Recharts components already use (`CHART_TONES`),
 * and the `sx` block restyles MUI's axes, grid and tooltip to the design
 * system's hairlines and type scale rather than Material's defaults.
 *
 * Everything here is presentation. No chart in this folder computes a value.
 */

import { CHART_TONES } from '@/components/ds/ChartContainer';

export const TONES = {
  brand: CHART_TONES.brand,
  brandSoft: 'rgba(10, 57, 223, 0.14)',
  warning: '#D97706',
  warningSoft: 'rgba(217, 119, 6, 0.16)',
  success: '#16A34A',
  grid: CHART_TONES.grid,
  axis: CHART_TONES.axis,
  ink: '#0F172A',
  muted: '#64748B',
};

/** Type scale for chart text — matches the caption/overline sizes around it. */
const LABEL_FONT = {
  fontSize: 11,
  fontFamily: 'var(--font-body)',
};

/**
 * Shared `sx` for every KROW chart.
 *
 * Axis lines and ticks are removed rather than restyled: on a compact chart the
 * value labels carry the reading, and a full axis frame is the "chart junk" the
 * design language avoids. The grid stays as a hairline in the same colour the
 * rest of the product uses for rules.
 */
export const chartSx = {
  '& .MuiChartsAxis-line': { display: 'none' },
  '& .MuiChartsAxis-tick': { display: 'none' },
  '& .MuiChartsAxis-tickLabel': {
    ...LABEL_FONT,
    fill: `${TONES.muted} !important`,
  },
  '& .MuiChartsGrid-line': {
    stroke: TONES.grid,
    strokeDasharray: '3 3',
  },
  '& .MuiChartsLegend-root': { display: 'none' },
  '& .MuiBarLabel-root': {
    ...LABEL_FONT,
    fontWeight: 600,
    fill: `${TONES.ink} !important`,
  },
};

/**
 * Tooltip chrome matching `Surface`.
 *
 * Passed through `slotProps.tooltip` so MUI's popper carries the design
 * system's radius, hairline border and shadow instead of Material elevation.
 */
export const tooltipSx = {
  '& .MuiChartsTooltip-root, & .MuiPopper-root .MuiPaper-root': {
    borderRadius: '10px',
    border: `1px solid ${TONES.grid}`,
    boxShadow: '0 8px 24px -12px rgba(15, 23, 42, 0.25)',
    fontFamily: 'var(--font-body)',
    fontSize: 12,
  },
  '& .MuiChartsTooltip-table': { fontSize: 12 },
  '& .MuiChartsTooltip-labelCell, & .MuiChartsTooltip-valueCell': {
    fontFamily: 'var(--font-body)',
  },
};

/*
 * Entry animation is switched off at every call site rather than gated on
 * `prefers-reduced-motion`. Two reasons: a chart that grows out of the floor is
 * the decorative motion this product avoids, and MUI's bar transition leaves
 * every bar at zero height if the frame loop never advances — which is exactly
 * what happens in an inactive tab or an automated browser.
 */