import React, { CSSProperties } from 'react';
import { useEditor } from '@craftjs/core';
import {
  IMAGE_RADIUS_PRESETS,
} from '../../../constants/presets';
import {
  StylePanelProps,
  SectionLabel,
  PresetButtonGrid,
  TextInputField,
  useNodeProp,
} from './shared';
import { AssetPicker } from '../../../ui/AssetPicker';
import { PLACEHOLDER_SRC } from '../../../components/media/ImageBlock';

/* ---------- IMAGE (with upload/browse/drop) ---------- */
export const ImageStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
  const { actions } = useEditor();
  const style: CSSProperties = nodeProps.style || {};

  const { setPropStyle } = useNodeProp(selectedId);

  const maxWidthPresets = [
    { label: '25%', value: '25%' },
    { label: '50%', value: '50%' },
    { label: '75%', value: '75%' },
    { label: '100%', value: '100%' },
  ];

  return (
    <>
      {/* Image source */}
      <div className="guided-section">
        <SectionLabel>Image Source</SectionLabel>
        <AssetPicker
          value={nodeProps.src || ''}
          onChange={(url) => actions.setProp(selectedId, (props: any) => { props.src = url || PLACEHOLDER_SRC; })}
          variant="full"
        />
      </div>

      {/* Alt Text */}
      <TextInputField
        label="Alt Text"
        value={nodeProps.alt || ''}
        placeholder="Describe the image..."
        onChange={(v) => {
          actions.setProp(selectedId, (props: any) => { props.alt = v; });
        }}
      />

      {/* Border Radius */}
      <div className="guided-section">
        <SectionLabel>Border Radius</SectionLabel>
        <PresetButtonGrid
          presets={IMAGE_RADIUS_PRESETS}
          activeValue={style.borderRadius as string}
          onSelect={(v) => setPropStyle('borderRadius', v)}
        />
      </div>

      {/* Max Width */}
      <div className="guided-section">
        <SectionLabel>Max Width</SectionLabel>
        <PresetButtonGrid
          presets={maxWidthPresets}
          activeValue={style.maxWidth as string}
          onSelect={(v) => setPropStyle('maxWidth', v)}
        />
      </div>
    </>
  );
};