/**
 * Wave / Line-Area layout — Appearance panel sections (Free).
 * Registers appearanceTop (style) + appearance (wave options) for layout === 'wave'.
 */
import { resolveWaveLabelAtNodes, resolveWaveLabelAlongFloor } from '../../shared/config.js';
import { cePdEditorExt } from '../editorExt.js';

const { createElement: el, Fragment } = wp.element;
const { __ } = wp.i18n;
const { SelectControl, ToggleControl, RangeControl } = wp.components;

function getWaveStyle(attributes) {
  return attributes.waveStyle === 'line' ? 'line' : 'ribbon';
}

export function WaveSection({ attributes, setAttributes }) {
  const style = getWaveStyle(attributes);
  const isRibbon = style === 'ribbon';

  return el(Fragment, null,
    el(SelectControl, {
      key: 'waveLabelAtNodes',
      label: __('Caption at each wave point', 'pop3d-charts'),
      help: __('Horizontal text to the right of each point on the curve.', 'pop3d-charts'),
      value: resolveWaveLabelAtNodes(attributes),
      options: [
        { label: __('Off', 'pop3d-charts'), value: 'off' },
        { label: __('Value + unit', 'pop3d-charts'), value: 'value' },
        { label: __('Label', 'pop3d-charts'), value: 'headline' },
      ],
      onChange: (v) => setAttributes({ waveLabelAtNodes: v }),
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }),
    el(SelectControl, {
      key: 'waveLabelAlongFloor',
      label: __('Caption along the floor (X scale)', 'pop3d-charts'),
      help: __('Labels at each X position along the baseline (45\u00B0 tilt, same as Straight below bars).', 'pop3d-charts'),
      value: resolveWaveLabelAlongFloor(attributes),
      options: [
        { label: __('Off', 'pop3d-charts'), value: 'off' },
        { label: __('Value + unit', 'pop3d-charts'), value: 'value' },
        { label: __('Label', 'pop3d-charts'), value: 'headline' },
      ],
      onChange: (v) => setAttributes({ waveLabelAlongFloor: v, labelsUnderBars: v === 'headline' }),
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }),
    el(RangeControl, {
      label: __('Smoothness', 'pop3d-charts'),
      help: __('0 = angular/linear, 1 = maximum smooth.', 'pop3d-charts'),
      value: typeof attributes.waveSmoothness === 'number' ? attributes.waveSmoothness : 0.5,
      onChange: (v) => setAttributes({ waveSmoothness: v }),
      min: 0, max: 1, step: 0.05,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }),
    isRibbon ? el(RangeControl, {
      key: 'waveRibbonDepth',
      label: __('Band depth (3D thickness)', 'pop3d-charts'),
      help: __('How far each band is extruded into depth. Larger values give thicker, more staggered bands.', 'pop3d-charts'),
      value: typeof attributes.waveRibbonDepth === 'number' ? attributes.waveRibbonDepth : 0.08,
      onChange: (v) => setAttributes({ waveRibbonDepth: v }),
      min: 0.05, max: 1.5, step: 0.05,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,
    isRibbon ? el(RangeControl, {
      key: 'waveRibbonOpacity',
      label: __('Band opacity', 'pop3d-charts'),
      help: __('Transparency of the bands. 1 = fully opaque.', 'pop3d-charts'),
      value: typeof attributes.waveRibbonOpacity === 'number' ? attributes.waveRibbonOpacity : 1,
      onChange: (v) => setAttributes({ waveRibbonOpacity: v }),
      min: 0.1, max: 1, step: 0.05,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,
    !isRibbon ? el(ToggleControl, {
      key: 'waveAreaFill',
      label: __('Area fill (gradient under curve)', 'pop3d-charts'),
      help: __('Fills the area between the wave and baseline with a color gradient.', 'pop3d-charts'),
      checked: attributes.waveAreaFill === true,
      onChange: (v) => setAttributes({ waveAreaFill: v }),
      __nextHasNoMarginBottom: true,
    }) : null,
    !isRibbon && attributes.waveAreaFill === true ? el(RangeControl, {
      key: 'waveAreaFillOpacity',
      label: __('Area fill opacity', 'pop3d-charts'),
      value: typeof attributes.waveAreaFillOpacity === 'number' ? attributes.waveAreaFillOpacity : 0.35,
      onChange: (v) => setAttributes({ waveAreaFillOpacity: v }),
      min: 0.05, max: 1, step: 0.05,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,
    !isRibbon && attributes.waveAreaFill === true ? el(SelectControl, {
      key: 'waveGradientDirection',
      label: __('Gradient direction', 'pop3d-charts'),
      value: attributes.waveGradientDirection || 'vertical',
      options: [
        { label: __('Darken downward', 'pop3d-charts'), value: 'vertical' },
        { label: __('Lighten downward (fade to pale)', 'pop3d-charts'), value: 'vertical-light' },
        { label: __('Along curve (left to right)', 'pop3d-charts'), value: 'along-curve' },
      ],
      onChange: (v) => setAttributes({ waveGradientDirection: v }),
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,
    !isRibbon ? el(RangeControl, {
      key: 'waveLineThickness',
      label: __('Line thickness', 'pop3d-charts'),
      value: typeof attributes.waveLineThickness === 'number' ? attributes.waveLineThickness : 1,
      onChange: (v) => setAttributes({ waveLineThickness: v }),
      min: 0.2, max: 2, step: 0.1,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,
    !isRibbon ? el(ToggleControl, {
      key: 'waveShowPoints',
      label: __('Show data points', 'pop3d-charts'),
      help: __('Show filled spheres at each data point on the curve.', 'pop3d-charts'),
      checked: attributes.waveShowPoints !== false,
      onChange: (v) => setAttributes({ waveShowPoints: v }),
      __nextHasNoMarginBottom: true,
    }) : null,
    !isRibbon && attributes.waveShowPoints !== false ? el(RangeControl, {
      key: 'wavePointSize',
      label: __('Data point size', 'pop3d-charts'),
      help: __('Scale factor for data-point spheres (1 = default).', 'pop3d-charts'),
      value: typeof attributes.wavePointSize === 'number' ? attributes.wavePointSize : 1,
      onChange: (v) => setAttributes({ wavePointSize: v }),
      min: 0.3, max: 3, step: 0.1,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }) : null,
    el(ToggleControl, {
      key: 'waveMultiSeries',
      label: __('Multi-series (split by group key)', 'pop3d-charts'),
      help: __('When enabled, rows with different group keys are rendered as separate overlapping waves.', 'pop3d-charts'),
      checked: attributes.waveMultiSeries !== false,
      onChange: (v) => setAttributes({ waveMultiSeries: v }),
      __nextHasNoMarginBottom: true,
    }),
    el(RangeControl, {
      label: __('Annotation line length', 'pop3d-charts'),
      help: __('Length of the leader line from data point to annotation label.', 'pop3d-charts'),
      value: typeof attributes.waveAnnotationLineLength === 'number' ? attributes.waveAnnotationLineLength : 0.25,
      onChange: (v) => setAttributes({ waveAnnotationLineLength: v }),
      min: 0.1, max: 0.6, step: 0.05,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    }),
    el(RangeControl, {
      label: __('Annotation font scale', 'pop3d-charts'),
      help: __('Scale factor for annotation text (1 = default).', 'pop3d-charts'),
      value: typeof attributes.waveAnnotationFontScale === 'number' ? attributes.waveAnnotationFontScale : 1,
      onChange: (v) => setAttributes({ waveAnnotationFontScale: v }),
      min: 0.5, max: 2, step: 0.1,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
    })
  );
}

cePdEditorExt.registerPanelSection('appearanceTop', {
  layouts: ['wave'],
  render: ({ attributes, setAttributes }) => el(SelectControl, {
    key: 'waveStyle',
    label: __('Wave style', 'pop3d-charts'),
    help: __('Choose how the wave is drawn. Each style offers its own options below.', 'pop3d-charts'),
    value: getWaveStyle(attributes),
    options: [
      { label: __('Thick 3D bands', 'pop3d-charts'), value: 'ribbon' },
      { label: __('Line / curve', 'pop3d-charts'), value: 'line' },
    ],
    onChange: (v) => setAttributes({ waveStyle: v === 'line' ? 'line' : 'ribbon' }),
    __nextHasNoMarginBottom: true,
    __next40pxDefaultSize: true,
  }),
});

cePdEditorExt.registerPanelSection('appearance', {
  layouts: ['wave'],
  render: ({ attributes, setAttributes }) => el(WaveSection, {
    key: 'waveSection',
    attributes,
    setAttributes,
  }),
});
