import { useState } from 'react';
import { FiltrosAvanzados } from './FiltrosAvanzados';

const ESTADO_OPTIONS = [
  { value: 'activo', label: 'Activo' },
  { value: 'pendiente', label: 'Pendiente' },
  { value: 'vencido', label: 'Vencido' },
  { value: 'archivado', label: 'Archivado' },
];

const TIPO_DOCUMENTO_OPTIONS = [
  { value: 'recibos', label: 'Recibos' },
  { value: 'contratos', label: 'Contratos' },
  { value: 'certificados', label: 'Certificados' },
  { value: 'otros', label: 'Otros' },
];

const FIELDS_CON_LISTADO = [
  { value: 'documento', label: 'Documento' },
  { value: 'persona', label: 'Persona' },
  { value: 'estado', label: 'Estado', type: 'list', options: ESTADO_OPTIONS, placeholder: 'Seleccionar estado' },
  {
    value: 'tipoDocumento',
    label: 'Tipo de documento',
    type: 'list',
    options: TIPO_DOCUMENTO_OPTIONS,
    placeholder: 'Seleccionar tipo',
  },
  { value: 'fechaImportacion', label: 'Fecha de importación', type: 'date' },
  { value: 'periodoMensual', label: 'Periodo', type: 'period' },
];

const OPERATORS_BY_FIELD_LISTADO = {
  documento: [
    { value: 'contiene', label: 'contiene' },
    { value: 'noContiene', label: 'no contiene' },
  ],
  persona: [
    { value: 'contiene', label: 'contiene' },
    { value: 'noContiene', label: 'no contiene' },
  ],
  estado: [
    { value: 'igualA', label: 'igual a' },
    { value: 'noContiene', label: 'distinto de' },
  ],
  tipoDocumento: [{ value: 'igualA', label: 'igual a' }],
  fechaImportacion: [
    { value: 'antesDe', label: 'antes de' },
    { value: 'despuesDe', label: 'después de' },
    { value: 'between', label: 'entre' },
  ],
  periodoMensual: [
    { value: 'igualA', label: 'igual a' },
    { value: 'between', label: 'entre' },
  ],
};

const DEFAULT_CONDITIONS_LISTADO = [
  { id: 'documento-contiene', field: 'documento', operator: 'contiene', value: '' },
  { id: 'estado-igual', field: 'estado', operator: 'igualA', value: 'activo' },
  { id: 'tipo-igual', field: 'tipoDocumento', operator: 'igualA', value: '' },
];

function FiltrosAvanzadosPlayground({
  initialOpen = true,
  fields = FIELDS_CON_LISTADO,
  operatorsByField = OPERATORS_BY_FIELD_LISTADO,
  defaultConditions = DEFAULT_CONDITIONS_LISTADO,
  ...rest
}) {
  const [isOpen, setIsOpen] = useState(initialOpen);
  const [conditions, setConditions] = useState(defaultConditions);

  return (
    <div style={{ minHeight: '480px', padding: '24px', fontFamily: 'sans-serif' }}>
      <button
        type="button"
        onClick={() => setIsOpen(true)}
        style={{
          height: '40px',
          padding: '8px 16px',
          borderRadius: '8px',
          border: '1px solid #38656D',
          background: '#FFFFFF',
          color: '#38656D',
          cursor: 'pointer',
          marginBottom: '16px',
        }}
      >
        Abrir filtros avanzados
      </button>
      <FiltrosAvanzados
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        fields={fields}
        operatorsByField={operatorsByField}
        conditions={conditions}
        onConditionsChange={setConditions}
        onApply={(payload) => {
          // eslint-disable-next-line no-console
          console.log('Filtros aplicados', payload);
        }}
        onClear={() => setConditions(defaultConditions)}
        {...rest}
      />
    </div>
  );
}

export default {
  title: 'Layout/FiltrosAvanzados',
  component: FiltrosAvanzados,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen',
  },
  argTypes: {
    mobileBreakpoint: { control: 'number', description: 'Ancho máximo (px) para layout mobile del modal' },
  },
};

export const Default = {
  render: () => (
    <FiltrosAvanzadosPlayground
      fields={[
        { value: 'documento', label: 'Documento' },
        { value: 'persona', label: 'Persona' },
        { value: 'fechaImportacion', label: 'Fecha de importación', type: 'date' },
      ]}
      defaultConditions={[
        { id: 'documento-contiene', field: 'documento', operator: 'contiene', value: '345' },
        { id: 'persona-contiene', field: 'persona', operator: 'contiene', value: 'Laura' },
      ]}
    />
  ),
};

/** Campo con `type: 'list'` y `options`: el valor se elige desde un desplegable (no texto libre). */
export const ConCampoListado = {
  render: (args) => <FiltrosAvanzadosPlayground {...args} />,
  args: {
    title: 'Filtros avanzados',
    fields: FIELDS_CON_LISTADO,
    operatorsByField: OPERATORS_BY_FIELD_LISTADO,
    defaultConditions: DEFAULT_CONDITIONS_LISTADO,
  },
};

/** Dos condiciones con listado + operador «entre» (rango Desde/Hasta con dos selects). */
export const ConCampoListadoEntre = {
  render: (args) => <FiltrosAvanzadosPlayground {...args} />,
  args: {
    title: 'Filtros avanzados',
    fields: FIELDS_CON_LISTADO,
    operatorsByField: OPERATORS_BY_FIELD_LISTADO,
    defaultConditions: [
      { id: 'estado-between', field: 'estado', operator: 'between', value: { from: 'activo', to: 'pendiente' } },
      {
        id: 'tipo-between',
        field: 'tipoDocumento',
        operator: 'between',
        value: { from: 'recibos', to: 'contratos' },
      },
    ],
  },
};
