import React from 'react';
import {
  BG_COLORS,
  SPACING_PRESETS,
} from '../../../constants/presets';
import {
  StylePanelProps,
  SectionLabel,
  ColorSwatchGrid,
  GradientSwatchGrid,
  PresetButtonGrid,
  CollapsibleSection,
  ColorPickerField,
  labelStyle,
  inputStyle,
  sectionGap,
  useNodeProp,
} from './shared';
import { AssetPicker } from '../../../ui/AssetPicker';

/* ---------- BACKGROUND SECTION ---------- */
export const BackgroundSectionStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
  const { setProp, setPropStyle, setPropContinuous } = useNodeProp(selectedId);

  const style = nodeProps.style || {};

  return (
    <>
      {/* Background Image */}
      <CollapsibleSection title="Background Image">
        <AssetPicker value={nodeProps.bgImage || ''} onChange={(url) => setProp('bgImage', url)} variant="full" />
      </CollapsibleSection>

      {/* Background Color */}
      <CollapsibleSection title="Background Color">
        <ColorPickerField label="Background" value={nodeProps.bgColor || '#1e293b'} onChange={(v) => setPropContinuous('bgColor', v)} />
      </CollapsibleSection>

      {/* Overlay */}
      <CollapsibleSection title="Overlay">
        <ColorPickerField label="Overlay Color" value={nodeProps.overlayColor || '#000000'} onChange={(v) => setPropContinuous('overlayColor', v)} />
        <div style={sectionGap}>
          <label style={labelStyle}>Opacity: {Math.round((nodeProps.overlayOpacity ?? 0.4) * 100)}%</label>
          <input type="range" min={0} max={100} value={Math.round((nodeProps.overlayOpacity ?? 0.4) * 100)}
            onChange={(e) => setPropContinuous('overlayOpacity', parseInt(e.target.value) / 100)} style={{ width: '100%' }} />
        </div>
      </CollapsibleSection>

      {/* Layout */}
      <CollapsibleSection title="Layout">
        <div style={sectionGap}>
          <label style={labelStyle}>Inner Max Width</label>
          <input type="text" value={nodeProps.innerMaxWidth || '1200px'}
            onChange={(e) => setPropContinuous('innerMaxWidth', e.target.value)} style={inputStyle} />
        </div>
        <div className="guided-section">
          <SectionLabel>Padding</SectionLabel>
          <PresetButtonGrid presets={SPACING_PRESETS} activeValue={style.padding as string} onSelect={(v) => setPropStyle('padding', v)} />
        </div>
      </CollapsibleSection>
    </>
  );
};