import { useEffect, useRef, useState } from 'react';
import { Icon } from '../../Atoms/Icon/Icon';
import { FONT_FAMILY_SANS } from '../../../designTokens';
import { Calendario } from '../../Inputs/Calendario/Calendario';

const DEFAULT_ACTIVE_COLOR = '#6D3856';
const FIELD_HEIGHT_PX = 42;

const filterByLabelStyle = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 400,
  fontSize: '14px',
  lineHeight: '21px',
  letterSpacing: '0.01em',
};

const fieldLabelStyle = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 500,
  fontSize: '14px',
  lineHeight: '21px',
  letterSpacing: '0.01em',
};

const fieldValueStyle = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 400,
  fontSize: '16px',
  lineHeight: '24px',
  letterSpacing: '0',
};

const clearFiltersButtonStyle = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 600,
  fontStyle: 'normal',
  fontSize: '14px',
  lineHeight: '21px',
  letterSpacing: 0,
  verticalAlign: 'middle',
  color: '#38656D',
  background: 'transparent',
  border: 'none',
  padding: 0,
  cursor: 'pointer',
  boxSizing: 'border-box',
};

/** Panel mobile: enlace centrado sobre el divisor del footer. */
const mobileClearFiltersButtonStyle = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 500,
  fontStyle: 'normal',
  fontSize: '16px',
  lineHeight: '24px',
  letterSpacing: 0,
  verticalAlign: 'middle',
  color: '#6D3856',
  background: 'transparent',
  border: 'none',
  padding: 0,
  cursor: 'pointer',
  width: '102px',
  height: '24px',
  minHeight: '24px',
  opacity: 1,
  boxSizing: 'border-box',
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
};

const MOBILE_FOOTER_DIVIDER_COLOR = '#DDDDDD';
/** Espaciado footer mobile: enlace «Limpiar filtros» ↔ divisor ↔ botones. */
const MOBILE_FOOTER_CLEAR_PADDING_BOTTOM_PX = 24;
const MOBILE_FOOTER_DIVIDER_MARGIN_BOTTOM_PX = 24;
const MOBILE_FOOTER_PADDING_TOP_PX = 16;

/**
 * Helper para que el consumidor calcule `hasActiveFilters`.
 * Compara cada item.value con su defaultValue (o `defaultItemValue`, ej. `'all'`).
 */
const getFiltrosHasActiveFilters = ({
  items = [],
  dateFromValue = '',
  dateToValue = '',
  defaultItemValue = 'all',
} = {}) => {
  const hasActiveItem = items.some((item) => {
    const value = item?.value;
    if (value === undefined || value === null || value === '') return false;
    const defaultValue = item.defaultValue ?? item.emptyValue ?? defaultItemValue;
    return String(value) !== String(defaultValue);
  });

  return (
    hasActiveItem ||
    Boolean(String(dateFromValue ?? '').trim()) ||
    Boolean(String(dateToValue ?? '').trim())
  );
};

const sideLabelContainerStyle = {
  display: 'flex',
  alignItems: 'center',
  gap: '16px',
  width: '100%',
};

const formatDateDisplay = (isoValue) => {
  if (!isoValue || !/^\d{4}-\d{2}-\d{2}$/.test(isoValue)) return '';
  const [year, month, day] = isoValue.split('-');
  return `${day}/${month}/${year}`;
};

const FilterDropdown = ({
  id,
  label,
  value,
  options = [],
  placeholder = 'Todos',
  onChange,
  activeColor = DEFAULT_ACTIVE_COLOR,
  disabled = false,
  fullWidth = false,
  desktopFieldWidth = 126,
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const ref = useRef(null);
  const inlineLabel = !fullWidth;

  const selectedOption = options.find((option) => option.value === value);
  const displayLabel = selectedOption?.label || placeholder;

  useEffect(() => {
    if (!isOpen) return undefined;
    const handleClickOutside = (event) => {
      if (ref.current && !ref.current.contains(event.target)) {
        setIsOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, [isOpen]);

  const handleOptionClick = (nextValue) => {
    if (onChange) onChange(nextValue, id);
    setIsOpen(false);
  };

  return (
    <div
      ref={ref}
      className={fullWidth ? 'w-full' : 'w-full md:w-auto'}
      style={{ fontFamily: FONT_FAMILY_SANS }}
    >
      {label && !inlineLabel && (
        <label className="block mb-2 text-[#2D4952]" style={fieldLabelStyle}>
          {label}
        </label>
      )}
      <div style={inlineLabel ? sideLabelContainerStyle : undefined}>
        {label && inlineLabel && (
          <label className="text-[#2D4952] whitespace-nowrap" style={fieldLabelStyle}>
            {label}
          </label>
        )}
        <div className={`relative ${fullWidth ? 'w-full' : ''}`} style={fullWidth ? undefined : { width: `${desktopFieldWidth}px` }}>
          <button
            type="button"
            disabled={disabled}
            onClick={() => !disabled && setIsOpen((prev) => !prev)}
            className={`w-full rounded-[8px] border border-[#38656D] bg-white px-3 flex items-center justify-between text-left ${
              disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
            }`}
            style={{ height: `${FIELD_HEIGHT_PX}px` }}
          >
            <span className="truncate text-[#2D4952]" style={fieldValueStyle}>
              {displayLabel}
            </span>
            <Icon name="ChevronDownIcon" variant="24-outline" size={20} className="color-gray-700" />
          </button>

          {isOpen && !disabled && (
            <ul
              className="anima-filtros-dropdown-list absolute z-20 mt-1 bg-white border border-[#38656D] rounded-[12px] p-2 overflow-y-auto"
              style={{
                width: '100%',
                minWidth: '160px',
                maxHeight: '256px',
                opacity: 1,
                scrollbarWidth: 'none',
                msOverflowStyle: 'none',
              }}
            >
              {options.map((option) => {
                const isSelected = option.value === value;
                return (
                  <li key={option.value}>
                    <button
                      type="button"
                      onClick={() => handleOptionClick(option.value)}
                      className="w-full text-left rounded-[8px]"
                      style={{
                        height: '48px',
                        paddingTop: '12px',
                        paddingRight: '16px',
                        paddingBottom: '12px',
                        paddingLeft: '16px',
                        gap: '16px',
                        opacity: 1,
                        backgroundColor: isSelected ? activeColor : '#FFFFFF',
                        color: isSelected ? '#FFFFFF' : '#2D4952',
                        fontFamily: FONT_FAMILY_SANS,
                        fontWeight: 400,
                        fontStyle: 'normal',
                        fontSize: '16px',
                        lineHeight: '24px',
                        letterSpacing: '0px',
                        verticalAlign: 'middle',
                      }}
                    >
                      {option.label}
                    </button>
                  </li>
                );
              })}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
};

const DateInput = ({
  label,
  value,
  placeholder,
  onChange,
  fullWidth = false,
  desktopFieldWidth = 148,
}) => {
  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
  const [calendarPlacement, setCalendarPlacement] = useState({ openUp: false, alignRight: false });
  const inlineLabel = !fullWidth;
  const containerRef = useRef(null);
  const CALENDAR_WIDTH = 320;
  const CALENDAR_HEIGHT = 360;

  useEffect(() => {
    if (!isCalendarOpen) return undefined;
    const onClickOutside = (event) => {
      if (containerRef.current && !containerRef.current.contains(event.target)) {
        setIsCalendarOpen(false);
      }
    };
    document.addEventListener('mousedown', onClickOutside);
    return () => document.removeEventListener('mousedown', onClickOutside);
  }, [isCalendarOpen]);

  useEffect(() => {
    if (!isCalendarOpen) return;
    const el = containerRef.current;
    if (!el || typeof window === 'undefined') return;
    const rect = el.getBoundingClientRect();
    const spaceRight = window.innerWidth - rect.left;
    const spaceBottom = window.innerHeight - rect.bottom;
    setCalendarPlacement({
      alignRight: spaceRight < CALENDAR_WIDTH && rect.right > CALENDAR_WIDTH,
      openUp: spaceBottom < CALENDAR_HEIGHT && rect.top > CALENDAR_HEIGHT,
    });
  }, [isCalendarOpen]);

  const openDatePicker = () => setIsCalendarOpen(true);
  const hasValue = Boolean(value);

  return (
    <div className={fullWidth ? 'w-full' : 'w-full md:w-auto'} style={{ fontFamily: FONT_FAMILY_SANS }}>
      {label && !inlineLabel && (
        <label className="block mb-2 text-[#2D4952]" style={fieldLabelStyle}>
          {label}
        </label>
      )}
      <div style={inlineLabel ? sideLabelContainerStyle : undefined}>
        {label && inlineLabel && (
          <label className="text-[#2D4952] whitespace-nowrap" style={fieldLabelStyle}>
            {label}
          </label>
        )}
        <div
          ref={containerRef}
          className={`relative ${fullWidth ? 'w-full' : ''}`}
          style={fullWidth ? undefined : { width: `${desktopFieldWidth}px` }}
        >
          <input
            type="text"
            value={formatDateDisplay(value)}
            placeholder={placeholder}
            readOnly
            onClick={openDatePicker}
            className={`anima-filtros-date-input w-full rounded-[8px] border border-[#38656D] bg-white focus:outline-none ${
              hasValue ? 'anima-filtros-date-input--filled' : 'anima-filtros-date-input--empty'
            }`}
            style={{
              height: `${FIELD_HEIGHT_PX}px`,
              borderRadius: '8px',
              borderWidth: '1px',
              padding: '12px',
              paddingRight: '36px',
              fontFamily: FONT_FAMILY_SANS,
              fontSize: '16px',
              lineHeight: '24px',
              letterSpacing: '0px',
              fontWeight: hasValue ? 450 : 400,
              fontStyle: hasValue ? 'normal' : 'italic',
              color: hasValue ? '#29474C' : '#474747',
              backgroundColor: '#FFFFFF',
            }}
          />
          <button
            type="button"
            onMouseDown={(event) => event.preventDefault()}
            onClick={openDatePicker}
            className="absolute right-3 top-1/2 -translate-y-1/2"
            aria-label="Abrir selector de fecha"
          >
            <Icon name="CalendarDaysIcon" variant="24-outline" size={16} color="#38656D" />
          </button>
          {isCalendarOpen && (
            <div
              className="absolute z-30"
              style={{
                top: calendarPlacement.openUp ? 'auto' : 'calc(100% + 8px)',
                bottom: calendarPlacement.openUp ? 'calc(100% + 8px)' : 'auto',
                left: calendarPlacement.alignRight ? 'auto' : 0,
                right: calendarPlacement.alignRight ? 0 : 'auto',
              }}
            >
              <Calendario
                value={value}
                onChange={(nextValue) => onChange?.(nextValue)}
                onClear={() => onChange?.('')}
                onClose={() => setIsCalendarOpen(false)}
              />
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

const Filtros = ({
  className = '',
  style,
  items = [],
  filterByLabel = 'Filtrar por:',
  importationLabel = 'Importación',
  dateFromPlaceholder = 'Desde',
  dateToPlaceholder = 'Hasta',
  dateFromValue = '',
  dateToValue = '',
  onDateFromChange,
  onDateToChange,
  desktopFieldWidth = 126,
  desktopDateFieldWidth = 148,
  /** Viewport <= este valor: panel mobile. */
  mobileBreakpoint = 1024,
  /**
   * Viewport > mobileBreakpoint y <= este valor: layout en 2 filas
   * (filtros arriba, importación abajo). Por encima: fila única desktop.
   */
  intermediateBreakpointMax = 1439,
  mobileButtonLabel = 'Filtros',
  mobileButtonBackgroundColor = '#FFFFFF',
  mobileButtonBorderColor = '#38656D',
  mobileButtonTextColor = '#38656D',
  mobileButtonIconName = 'AdjustmentsHorizontalIcon',
  mobileButtonIconVariant = '24-outline',
  mobileButtonIconSize = 18,
  mobileButtonIconColor = '#38656D',
  mobileButtonCount,
  formatMobileButtonLabel,
  mobileTitle = 'Filtros',
  mobileTitleColor = '#2D4952',
  mobileTitleFontSize = '24px',
  mobileTitleLineHeight = '30px',
  mobileTitleFontWeight = 400,
  applyButtonLabel = 'Filtrar',
  applyButtonBackgroundColor = '#3F7680',
  applyButtonTextColor = '#FFFFFF',
  cancelButtonLabel = 'Cancelar',
  cancelButtonBackgroundColor = '#FFFFFF',
  cancelButtonBorderColor = '#5E8691',
  cancelButtonTextColor = '#2D4952',
  onApply,
  onCancel,
  clearFiltersLabel = 'Limpiar filtros',
  onClearFilters,
  showClearFiltersButton = true,
  /** true cuando hay filtros aplicados; el consumidor lo actualiza al aplicar o limpiar. */
  hasActiveFilters = false,
  clearFiltersButtonStyle: clearFiltersButtonStyleOverride,
  activeColor = DEFAULT_ACTIVE_COLOR,
  panelBackground = '#FFFFFF',
  isMobilePanelOpen,
  onMobilePanelOpenChange,
}) => {
  const [viewportWidth, setViewportWidth] = useState(
    () => (typeof window !== 'undefined' ? window.innerWidth : 1440)
  );
  const [internalMobilePanelOpen, setInternalMobilePanelOpen] = useState(false);

  const isMobile = viewportWidth <= mobileBreakpoint;
  const isIntermediate = !isMobile && viewportWidth <= intermediateBreakpointMax;
  const desktopLayout = isIntermediate ? 'intermediate' : 'desktop';

  const isMobilePanelControlled = typeof isMobilePanelOpen === 'boolean';
  const mobilePanelOpen = isMobilePanelControlled ? isMobilePanelOpen : internalMobilePanelOpen;

  const setMobilePanelOpen = (nextValue) => {
    if (!isMobilePanelControlled) {
      setInternalMobilePanelOpen(nextValue);
    }
    if (onMobilePanelOpenChange) {
      onMobilePanelOpenChange(nextValue);
    }
  };

  const resolvedMobileButtonLabel =
    typeof formatMobileButtonLabel === 'function'
      ? formatMobileButtonLabel(mobileButtonLabel, mobileButtonCount)
      : mobileButtonCount === 0 || mobileButtonCount
        ? `${mobileButtonLabel} (${mobileButtonCount})`
        : mobileButtonLabel;

  useEffect(() => {
    const onResize = () => {
      if (typeof window === 'undefined') return;
      setViewportWidth(window.innerWidth);
    };

    onResize();
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const closeMobilePanel = () => {
    setMobilePanelOpen(false);
    if (onCancel) onCancel();
  };

  const canShowClearFilters = showClearFiltersButton && hasActiveFilters;

  const renderClearFiltersButton = (styleOverride = {}, { variant = 'desktop' } = {}) => {
    if (!canShowClearFilters) return null;

    const baseStyle = variant === 'mobile' ? mobileClearFiltersButtonStyle : clearFiltersButtonStyle;

    return (
      <button
        type="button"
        className={`anima-filtros__clear-button${variant === 'mobile' ? ' anima-filtros__clear-button--mobile' : ''}`}
        onClick={() => onClearFilters?.()}
        style={{
          ...baseStyle,
          ...styleOverride,
          ...(clearFiltersButtonStyleOverride || {}),
        }}
      >
        {clearFiltersLabel}
      </button>
    );
  };

  const renderImportationDates = ({
    fullWidth,
    inlineWithFilters,
    trailing = null,
    /** 'row' | 'column': en mobile/responsive las fechas van una al lado de la otra. */
    datesLayout,
  }) => {
    const isRowLayout = datesLayout === 'row' || (datesLayout !== 'column' && !fullWidth);
    const dateFieldWrapperClass = isRowLayout && fullWidth ? 'flex-1 min-w-0' : isRowLayout ? '' : 'w-full';

    const fromDate = (
      <div className={dateFieldWrapperClass}>
        <DateInput
          label={isRowLayout && fullWidth ? '' : importationLabel}
          value={dateFromValue}
          placeholder={dateFromPlaceholder}
          onChange={onDateFromChange}
          fullWidth={fullWidth}
          desktopFieldWidth={desktopDateFieldWidth}
        />
      </div>
    );

    const toDate = (
      <div className={dateFieldWrapperClass}>
        <DateInput
          label=""
          value={dateToValue}
          placeholder={dateToPlaceholder}
          onChange={onDateToChange}
          fullWidth={fullWidth}
          desktopFieldWidth={desktopDateFieldWidth}
        />
      </div>
    );

    if (isRowLayout) {
      return (
        <div
          className="w-full flex items-center gap-3 shrink-0"
          style={inlineWithFilters ? { marginLeft: '12px' } : undefined}
        >
          {fromDate}
          {!fullWidth ? (
            <span className="text-[#2D4952] shrink-0" style={fieldLabelStyle}>
              -
            </span>
          ) : null}
          {toDate}
          {trailing}
        </div>
      );
    }

    return (
      <div className="w-full flex flex-col gap-4">
        {fromDate}
        {toDate}
        {trailing}
      </div>
    );
  };

  const renderFiltersRow = (fullWidth, { showFilterByLabel = true } = {}) => (
    <>
      {showFilterByLabel ? (
        <div
          className={fullWidth ? 'w-full' : 'h-[42px] flex items-center'}
          style={fullWidth ? undefined : { paddingTop: '2px' }}
        >
          <label
            className={`block text-[#2D4952] whitespace-nowrap ${fullWidth ? 'mb-2' : 'mb-0'}`}
            style={filterByLabelStyle}
          >
            {filterByLabel}
          </label>
        </div>
      ) : null}

      {items.map((item) => (
        <FilterDropdown
          key={item.id}
          id={item.id}
          label={item.label}
          value={item.value}
          options={item.options}
          placeholder={item.placeholder || 'Todos'}
          onChange={item.onChange}
          activeColor={activeColor}
          disabled={item.disabled}
          fullWidth={fullWidth}
          desktopFieldWidth={desktopFieldWidth}
        />
      ))}
    </>
  );

  const renderFiltersContent = (layout) => {
    if (layout === 'mobile') {
      return (
        <div className="w-full flex flex-col gap-4">
          {renderFiltersRow(true)}
          {renderImportationDates({
            fullWidth: true,
            inlineWithFilters: false,
            datesLayout: 'row',
          })}
        </div>
      );
    }

    if (layout === 'intermediate') {
      return (
        <div
          className="w-full anima-filtros__layout--intermediate"
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '12px',
            width: '100%',
            maxWidth: '100%',
            minWidth: 0,
            boxSizing: 'border-box',
          }}
        >
          <div
            className="anima-filtros__row anima-filtros__row--filters"
            style={{
              display: 'flex',
              flexWrap: 'wrap',
              alignItems: 'center',
              gap: '20px',
              width: '100%',
              minHeight: '42px',
              paddingLeft: '8px',
              boxSizing: 'border-box',
            }}
          >
            {renderFiltersRow(false, { showFilterByLabel: false })}
          </div>
          <div
            className="anima-filtros__row anima-filtros__row--importation"
            style={{
              display: 'flex',
              alignItems: 'center',
              flexWrap: 'wrap',
              gap: '12px',
              width: '100%',
              minHeight: '42px',
              paddingLeft: '8px',
              boxSizing: 'border-box',
            }}
          >
            {renderImportationDates({
              fullWidth: false,
              inlineWithFilters: false,
              trailing: renderClearFiltersButton({ flexShrink: 0 }),
            })}
          </div>
        </div>
      );
    }

    return (
      <div
        className="w-full flex items-center flex-nowrap"
        style={{
          width: 'auto',
          maxWidth: '100%',
          height: '42px',
          minHeight: '42px',
          gap: '20px',
          opacity: 1,
          paddingLeft: '8px',
          justifyContent: 'flex-start',
        }}
      >
        {renderFiltersRow(false)}
        {renderImportationDates({ fullWidth: false, inlineWithFilters: true })}
      </div>
    );
  };

  if (isMobile) {
    return (
      <div className={className} style={style}>
        <style>{`
          .anima-filtros-dropdown-list::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none;
          }
          .anima-filtros-date-input::-webkit-calendar-picker-indicator {
            opacity: 0;
            display: none;
            -webkit-appearance: none;
          }
          .anima-filtros-date-input::-webkit-clear-button,
          .anima-filtros-date-input::-webkit-inner-spin-button {
            display: none;
          }
          .anima-filtros-date-input[type="date"] {
            appearance: none;
            -webkit-appearance: none;
          }
        .anima-filtros-date-input--empty::placeholder {
          color: #474747;
          font-family: ${FONT_FAMILY_SANS};
          font-weight: 400;
          font-style: italic;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0px;
          opacity: 1;
        }
        `}</style>
        <button
          type="button"
          onClick={() => setMobilePanelOpen(true)}
          className="w-full h-12 rounded-[8px] border px-4 flex items-center justify-center gap-2"
          style={{
            backgroundColor: mobileButtonBackgroundColor,
            borderColor: mobileButtonBorderColor,
          }}
        >
          <Icon
            name={mobileButtonIconName}
            variant={mobileButtonIconVariant}
            size={mobileButtonIconSize}
            color={mobileButtonIconColor}
          />
          <span
            style={{
              fontFamily: FONT_FAMILY_SANS,
              fontWeight: 400,
              fontSize: '16px',
              lineHeight: '24px',
              letterSpacing: '0',
              verticalAlign: 'middle',
              color: mobileButtonTextColor,
            }}
          >
            {resolvedMobileButtonLabel}
          </span>
        </button>

        {mobilePanelOpen && (
          <div className="fixed inset-0 z-40 flex">
            <div
              className="w-full h-full p-5 flex flex-col"
              style={{ backgroundColor: panelBackground }}
            >
              <div className="flex items-center justify-between mb-5">
                <h3
                  className="font-normal"
                  style={{
                    fontFamily: FONT_FAMILY_SANS,
                    color: mobileTitleColor,
                    fontSize: mobileTitleFontSize,
                    lineHeight: mobileTitleLineHeight,
                    fontWeight: mobileTitleFontWeight,
                    letterSpacing: '0',
                    verticalAlign: 'middle',
                  }}
                >
                  {mobileTitle}
                </h3>
                <button type="button" onClick={closeMobilePanel} aria-label="Cerrar">
                  <Icon name="XMarkIcon" variant="24-outline" size={24} className="color-gray-700" />
                </button>
              </div>

              <div className="flex-1 overflow-y-auto">{renderFiltersContent('mobile')}</div>

              <div
                className="anima-filtros__mobile-footer flex flex-col shrink-0"
                style={{ paddingTop: `${MOBILE_FOOTER_PADDING_TOP_PX}px` }}
              >
                {canShowClearFilters ? (
                  <>
                    <div
                      className="flex justify-center w-full"
                      style={{ paddingBottom: `${MOBILE_FOOTER_CLEAR_PADDING_BOTTOM_PX}px` }}
                    >
                      {renderClearFiltersButton({}, { variant: 'mobile' })}
                    </div>
                    <hr
                      className="anima-filtros__mobile-footer-divider"
                      style={{
                        border: 'none',
                        borderTop: `1px solid ${MOBILE_FOOTER_DIVIDER_COLOR}`,
                        margin: `0 0 ${MOBILE_FOOTER_DIVIDER_MARGIN_BOTTOM_PX}px`,
                      }}
                    />
                  </>
                ) : null}
                <div className="flex w-full gap-3">
                  <button
                    type="button"
                    onClick={closeMobilePanel}
                    className="flex-1 h-11 rounded-[8px] border"
                    style={{
                      fontFamily: FONT_FAMILY_SANS,
                      backgroundColor: cancelButtonBackgroundColor,
                      borderColor: cancelButtonBorderColor,
                      color: cancelButtonTextColor,
                      fontWeight: 400,
                      fontSize: '16px',
                      lineHeight: '24px',
                      letterSpacing: '0',
                      verticalAlign: 'middle',
                    }}
                  >
                    {cancelButtonLabel}
                  </button>
                  <button
                    type="button"
                    onClick={onApply}
                    className="flex-1 h-11 rounded-[8px]"
                    style={{
                      fontFamily: FONT_FAMILY_SANS,
                      backgroundColor: applyButtonBackgroundColor,
                      color: applyButtonTextColor,
                      fontWeight: 400,
                      fontSize: '16px',
                      lineHeight: '24px',
                      letterSpacing: '0',
                      verticalAlign: 'middle',
                    }}
                  >
                    {applyButtonLabel}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }

  return (
    <div className={`w-full ${className}`} style={style}>
      <style>{`
        .anima-filtros-dropdown-list::-webkit-scrollbar {
          width: 0;
          height: 0;
          display: none;
        }
        .anima-filtros-date-input::-webkit-calendar-picker-indicator {
          opacity: 0;
          display: none;
          -webkit-appearance: none;
        }
        .anima-filtros-date-input::-webkit-clear-button,
        .anima-filtros-date-input::-webkit-inner-spin-button {
          display: none;
        }
        .anima-filtros-date-input[type="date"] {
          appearance: none;
          -webkit-appearance: none;
        }
        .anima-filtros-date-input--empty::placeholder {
          color: #474747;
          font-family: ${FONT_FAMILY_SANS};
          font-weight: 400;
          font-style: italic;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0px;
          opacity: 1;
        }
      `}</style>
      <div
        className="anima-filtros__desktop"
        data-layout={desktopLayout}
        style={{
          display: 'inline-flex',
          flexDirection: 'column',
          alignItems: isIntermediate ? 'flex-start' : 'flex-end',
          maxWidth: '100%',
          width: isIntermediate ? '100%' : undefined,
        }}
      >
        {renderFiltersContent(desktopLayout)}
        {canShowClearFilters && !isIntermediate
          ? renderClearFiltersButton({ marginTop: '8px' })
          : null}
      </div>
    </div>
  );
};

export { Filtros, getFiltrosHasActiveFilters };
export default Filtros;
