import { themeQuartz, colorSchemeVariable } from 'ag-grid-community';

/**
 * AG Grid theme built on **Quartz** that inherits 100% of its visual
 * identity from Mantine CSS custom properties.
 *
 * ┌─────────────────────────────────────────────────────────────────┐
 * │  DESIGN PRINCIPLE — "Single door" theming                       │
 * │                                                                 │
 * │  Every color, font, radius and spacing value below is a         │
 * │  `var(--mantine-*)` reference, never a hardcoded hex/rgb.       │
 * │  Changing the Mantine theme (brand color, dark palette, font)   │
 * │  automatically propagates into AG Grid with zero extra work.    │
 * └─────────────────────────────────────────────────────────────────┘
 *
 * How dark/light mode works:
 * - `colorSchemeVariable` reads the `data-ag-theme-mode` attribute
 *   from a parent element (set by `<AgGridProvider>`).
 * - Light-mode params are the defaults; dark-mode overrides are
 *   passed via `.withParams({…}, 'dark')`.
 * - Mantine itself swaps the values behind `--mantine-color-body`,
 *   `--mantine-color-text`, etc., so the grid follows automatically.
 */
export const agGridMantineTheme = themeQuartz
  .withPart(colorSchemeVariable)

  /* ═══════════════════════════════════════════════════════════════
   *  LIGHT MODE (default)
   * ═══════════════════════════════════════════════════════════════ */
  .withParams({
    /* ── Typography ─────────────────────────────────────────────── */
    fontFamily: 'var(--mantine-font-family)',
    fontSize: 'var(--mantine-font-size-md)',

    /* ── Accent / Brand ─────────────────────────────────────────── */
    accentColor: 'var(--mantine-primary-color-filled)',

    /* ── Base Surfaces ──────────────────────────────────────────── */
    backgroundColor: 'var(--mantine-color-body)',
    foregroundColor: 'var(--mantine-color-text)',
    textColor: 'var(--mantine-color-text)',
    chromeBackgroundColor: 'var(--mantine-color-default-element-bg)',

    /* ── Borders ────────────────────────────────────────────────── */
    borderColor: 'var(--mantine-color-default-border)',

    /* ── Header ─────────────────────────────────────────────────── */
    headerBackgroundColor: 'var(--mantine-color-default-element-bg)',
    headerTextColor: 'var(--mantine-color-text)',
    headerFontFamily: 'var(--mantine-font-family)',
    headerFontWeight: 600,

    /* ── Row Styling ────────────────────────────────────────────── */
    oddRowBackgroundColor: 'var(--mantine-color-default-hover)',
    // oddRowBackgroundColor: 'color-mix(in srgb, var(--mantine-color-text) 2.5%, transparent)',
    rowHoverColor: 'var(--mantine-primary-color-light)',
    selectedRowBackgroundColor: 'var(--mantine-primary-color-light)',

    /* ── Radius ─────────────────────────────────────────────────── */
    borderRadius: 'var(--mantine-radius-sm)',
    wrapperBorderRadius: 'var(--mantine-radius-sm)',

    /* ── Spacing ────────────────────────────────────────────────── */
    spacing: 'var(--mantine-spacing-sm)',
    // spacing: 'var(--mantine-spacing-xs)',
  })

  /* ═══════════════════════════════════════════════════════════════
   *  DARK MODE overrides
   *
   *  Only the values that differ from light mode need to be listed.
   *  Most `--mantine-color-*` vars already swap values in dark mode,
   *  but surface/border vars often need explicit dark palette refs.
   * ═══════════════════════════════════════════════════════════════ */
  .withParams(
    {
      /* ── Base Surfaces ────────────────────────────────────────── */
      backgroundColor: 'var(--mantine-color-dark-7)',
      foregroundColor: 'var(--mantine-color-dark-0)',
      textColor: 'var(--mantine-color-dark-0)',
      chromeBackgroundColor: 'var(--mantine-color-dark-6)',

      /* ── Borders ──────────────────────────────────────────────── */
      borderColor: 'var(--mantine-color-dark-4)',

      /* ── Header ───────────────────────────────────────────────── */
      headerBackgroundColor: 'var(--mantine-color-dark-6)',
      headerTextColor: 'var(--mantine-color-dark-0)',

      /* ── Row Styling ──────────────────────────────────────────── */
      oddRowBackgroundColor: 'var(--mantine-color-dark-6)',
      rowHoverColor: 'color-mix(in srgb, var(--mantine-primary-color-filled) 12%, transparent)',
      selectedRowBackgroundColor: 'color-mix(in srgb, var(--mantine-primary-color-filled) 18%, transparent)',
    },
    'dark',
  );