import { useRef } from 'react';
import { PrimaryActionButton } from '../../Atoms/PrimaryActionButton/PrimaryActionButton';
import { PrimaryInput } from '../../Inputs/PrimaryInput/PrimaryInput';
import { PrimaryDropdownSelect } from '../../Inputs/PrimaryDropdownSelect/PrimaryDropdownSelect';
import { ModalShell } from '../ModalShell/ModalShell';
import { GreenScrollbar } from '../VistaDatos/GreenScrollbar';
import {
  MODAL_SHELL_FOOTER_BUTTON_BASE_STYLE,
  MODAL_SHELL_FOOTER_BUTTON_TEXT_STYLE,
} from '../ModalShell/modalShellStyles';
import {
  MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_EMPRESA_OPTIONS,
  MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_NODO_PADRE_OPTIONS,
  MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_RESPONSABLE_OPTIONS,
  MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_VALUES,
} from './modalUnidadOrganizativaDefaults';
import {
  MODAL_UNIDAD_ORGANIZATIVA_FIELD_LABEL_STYLE,
  MODAL_UNIDAD_ORGANIZATIVA_HEIGHT_PX,
  MODAL_UNIDAD_ORGANIZATIVA_TEXTAREA_STYLE,
  MODAL_UNIDAD_ORGANIZATIVA_WIDTH_PX,
} from './modalUnidadOrganizativaStyles';

const FORM_SCROLLBAR_GUTTER_PX = 16;

/**
 * Modal «Nueva unidad organizativa» con formulario parametrizable.
 * Valores, opciones de selects y callbacks los controla el consumidor.
 */
export const ModalUnidadOrganizativa = ({
  isOpen = false,
  onClose,
  title = 'Nueva unidad organizativa',
  values = MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_VALUES,
  onFieldChange,
  onSubmit,
  onCancel,
  empresaOptions = MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_EMPRESA_OPTIONS,
  nodoPadreOptions = MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_NODO_PADRE_OPTIONS,
  responsableOptions = MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_RESPONSABLE_OPTIONS,
  fieldLabels,
  fieldPlaceholders,
  fieldErrors,
  submitButtonLabel = 'Crear unidad',
  cancelButtonLabel = 'Cancelar',
  disableSubmit = false,
  footer,
  width = MODAL_UNIDAD_ORGANIZATIVA_WIDTH_PX,
  height = MODAL_UNIDAD_ORGANIZATIVA_HEIGHT_PX,
  closeOnOverlayClick = true,
  zIndex = 1500,
  className = '',
  panelStyle,
  ...props
}) => {
  const formScrollRef = useRef(null);
  const resolvedValues = { ...MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_VALUES, ...(values || {}) };
  const labels = {
    nombre: 'Nombre',
    empresaId: 'Empresa',
    nodoPadreId: 'Nodo padre (opcional)',
    responsableId: 'Responsable (opcional)',
    descripcion: 'Descripción (opcional)',
    ...(fieldLabels || {}),
  };
  const placeholders = {
    nombre: 'Ej: Recursos Humanos',
    descripcion: 'Descripción de la unidad organizativa...',
    ...(fieldPlaceholders || {}),
  };
  const errors = fieldErrors || {};

  const handleFieldChange = (field) => (event) => {
    const nextValue = event?.target?.value ?? '';
    onFieldChange?.(field, nextValue, event);
  };

  const handleCancel = () => {
    if (onCancel) onCancel();
    else onClose?.();
  };

  const defaultFooter = (
    <>
      <PrimaryActionButton
        variant="outline"
        text={cancelButtonLabel}
        onClick={handleCancel}
        textStyle={MODAL_SHELL_FOOTER_BUTTON_TEXT_STYLE}
        style={MODAL_SHELL_FOOTER_BUTTON_BASE_STYLE}
      />
      <PrimaryActionButton
        variant="primary"
        text={submitButtonLabel}
        disabled={disableSubmit}
        onClick={() => onSubmit?.(resolvedValues)}
        textStyle={MODAL_SHELL_FOOTER_BUTTON_TEXT_STYLE}
        style={MODAL_SHELL_FOOTER_BUTTON_BASE_STYLE}
      />
    </>
  );

  return (
    <ModalShell
      isOpen={isOpen}
      onClose={onClose}
      title={title}
      width={width}
      height={height}
      maxHeight="calc(100vh - 40px)"
      closeOnOverlayClick={closeOnOverlayClick}
      zIndex={zIndex}
      className={className}
      panelStyle={panelStyle}
      footer={footer ?? defaultFooter}
      bodyStyle={{ display: 'flex', flexDirection: 'column', minHeight: 0 }}
      {...props}
    >
      <div
        className="anima-modal-unidad-organizativa__scroll-wrap"
        style={{
          position: 'relative',
          flex: '1 1 auto',
          minHeight: 0,
          display: 'flex',
          flexDirection: 'column',
          height: '100%',
        }}
      >
        <div
          ref={formScrollRef}
          className="anima-modal-unidad-organizativa__scroll"
          style={{
            flex: '1 1 auto',
            minHeight: 0,
            overflowY: 'auto',
            overflowX: 'hidden',
            paddingRight: FORM_SCROLLBAR_GUTTER_PX,
            boxSizing: 'border-box',
            scrollbarWidth: 'none',
            msOverflowStyle: 'none',
            WebkitOverflowScrolling: 'touch',
          }}
        >
          <style>{`
            .anima-modal-unidad-organizativa__scroll::-webkit-scrollbar {
              display: none;
              width: 0;
              height: 0;
            }
          `}</style>
          <form
            className="anima-modal-unidad-organizativa__form"
            style={{
              padding: '16px',
              overflow: 'visible',
              boxSizing: 'border-box',
              display: 'flex',
              flexDirection: 'column',
              gap: 16,
            }}
            onSubmit={(event) => {
              event.preventDefault();
              if (!disableSubmit) onSubmit?.(resolvedValues, event);
            }}
          >
            <PrimaryInput
              id="modal-unidad-nombre"
              name="nombre"
              label={labels.nombre}
              placeholder={placeholders.nombre}
              value={resolvedValues.nombre ?? ''}
              onChange={handleFieldChange('nombre')}
              required
              error={errors.nombre}
            />

            <PrimaryDropdownSelect
              id="modal-unidad-empresa"
              name="empresaId"
              label={labels.empresaId}
              options={empresaOptions}
              value={resolvedValues.empresaId ?? ''}
              onChange={handleFieldChange('empresaId')}
              required
              error={errors.empresaId}
            />

            <PrimaryDropdownSelect
              id="modal-unidad-nodo-padre"
              name="nodoPadreId"
              label={labels.nodoPadreId}
              options={nodoPadreOptions}
              value={resolvedValues.nodoPadreId ?? ''}
              onChange={handleFieldChange('nodoPadreId')}
              error={errors.nodoPadreId}
            />

            <PrimaryDropdownSelect
              id="modal-unidad-responsable"
              name="responsableId"
              label={labels.responsableId}
              options={responsableOptions}
              value={resolvedValues.responsableId ?? ''}
              onChange={handleFieldChange('responsableId')}
              error={errors.responsableId}
            />

            <div style={{ width: '100%' }}>
              <label htmlFor="modal-unidad-descripcion" style={MODAL_UNIDAD_ORGANIZATIVA_FIELD_LABEL_STYLE}>
                {labels.descripcion}
              </label>
              <textarea
                id="modal-unidad-descripcion"
                name="descripcion"
                placeholder={placeholders.descripcion}
                value={resolvedValues.descripcion ?? ''}
                onChange={handleFieldChange('descripcion')}
                style={MODAL_UNIDAD_ORGANIZATIVA_TEXTAREA_STYLE}
                aria-invalid={Boolean(errors.descripcion)}
              />
              {errors.descripcion ? (
                <p style={{ margin: '4px 0 0', color: '#B30808', fontSize: 14, lineHeight: '21px' }}>
                  {errors.descripcion}
                </p>
              ) : null}
            </div>
          </form>
        </div>
        <GreenScrollbar scrollRef={formScrollRef} insetRight={0} />
      </div>
    </ModalShell>
  );
};

export {
  MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_VALUES,
  MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_EMPRESA_OPTIONS,
  MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_NODO_PADRE_OPTIONS,
  MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_RESPONSABLE_OPTIONS,
} from './modalUnidadOrganizativaDefaults';
export default ModalUnidadOrganizativa;
