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

/** ISO de hace `ms` milisegundos (última actividad en tabla). */
const isoHace = (ms) => new Date(Date.now() - ms).toISOString();

const itemsEjemplo = [
  {
    id: '1',
    nombreComercial: 'Juan Pérez',
    email: 'juan.perez@ejemplo.com',
    foto: 'https://i.pravatar.cc/80?img=12',
    fechaNacimiento: '1990-03-15',
    documento: 'DNI 30123456',
    estado: 'Activa',
    ultimaActividad: isoHace(2 * 60 * 60 * 1000),
  },
  {
    id: '2',
    nombreComercial: 'María Gómez',
    email: 'maria.gomez@ejemplo.com',
    fechaNacimiento: '02-11-1988',
    documento: 'Pasaporte AA123456',
    estado: 'Archivada',
    ultimaActividad: isoHace(4 * 24 * 60 * 60 * 1000),
  },
  {
    id: '3',
    nombreComercial: 'Carlos López',
    email: 'carlos.lopez@ejemplo.com',
    fechaNacimiento: '1985-07-01',
    tipoDocumento: 'Cédula',
    numeroDocumento: '12.345.678',
    estado: 'Archivada',
    ultimaActividad: isoHace(35 * 24 * 60 * 60 * 1000),
  },
  {
    id: '4',
    nombreComercial: 'Persona Documento Largo',
    email: 'doc.largo@ejemplo.com',
    documento: 'Documento extremadamente largo para validar truncado en modo cards 1234567890',
    estado: 'Activa',
    ultimaActividad: isoHace(1 * 24 * 60 * 60 * 1000),
  },
];

function buildPersonasMock(cantidad) {
  return Array.from({ length: cantidad }, (_, index) => {
    const i = index + 1;
    const estados = ['Activa', 'Archivada'];
    const estado = estados[index % estados.length];
    const yyyy = 1980 + (index % 25);
    const mm = String((index % 12) + 1).padStart(2, '0');
    const dd = String((index % 28) + 1).padStart(2, '0');
    return {
      id: String(i),
      nombreComercial: `Persona ${i}`,
      email: `persona.${i}@ejemplo.com`,
      fechaNacimiento: `${yyyy}-${mm}-${dd}`,
      documento: `DNI ${String(20000000 + i).padStart(8, '0')}`,
      estado,
      ultimaActividad: new Date(Date.now() - (index % 720) * 60 * 60 * 1000).toISOString(),
    };
  });
}

const itemsCienPersonas = buildPersonasMock(100);
const itemsCientoVeintePersonas = buildPersonasMock(120);

const FILTROS_APLICADOS_INITIAL_CONDITIONS = [
  { id: 'documento-contiene', field: 'documento', operator: 'contiene', value: '345' },
  { id: 'persona-contiene', field: 'persona', operator: 'contiene', value: 'Lau' },
  { id: 'legajo-contiene', field: 'legajo', operator: 'contiene', value: '100' },
];

const FILTROS_APLICADOS_EMPTY_CONDITION = {
  id: 'condition-first',
  field: 'documento',
  operator: 'contiene',
  value: '',
};

const FILTROS_APLICADOS_FIELDS = [
  { value: 'documento', label: 'Documento' },
  { value: 'persona', label: 'Persona' },
  { value: 'fechaImportacion', label: 'Fecha de import...', type: 'date' },
  { value: 'legajo', label: 'Legajo' },
];

const FILTROS_APLICADOS_FIELD_LABELS = {
  documento: 'Documento',
  persona: 'Persona',
  fechaImportacion: 'Fecha de import...',
  legajo: 'Legajo',
};

const FILTROS_APLICADOS_OPERATOR_LABELS = {
  contiene: 'contiene',
  noContiene: 'no contiene',
  antesDe: 'antes de',
  despuesDe: 'después de',
  igualA: 'igual a',
};

function buildAppliedFiltersFromPayload(payload) {
  const conditionFilters = Array.isArray(payload?.conditions)
    ? payload.conditions
        .filter((condition) => String(condition?.value ?? '').trim().length > 0)
        .map((condition) => {
          const field = FILTROS_APLICADOS_FIELD_LABELS[condition.field] ?? condition.field;
          const operator = FILTROS_APLICADOS_OPERATOR_LABELS[condition.operator] ?? condition.operator;
          return {
            id: `condition-${condition.id}`,
            type: 'condition',
            conditionId: condition.id,
            label: `${field} ${operator} ${condition.value}`,
          };
        })
    : [];
  const aiFilter = String(payload?.aiValue ?? '').trim();
  return aiFilter ? [{ id: 'ai-filter', type: 'ai', label: `BEE Asist ${aiFilter}` }, ...conditionFilters] : conditionFilters;
}

export default {
  title: 'Layout/ListaPersonas',
  component: ListaPersonas,
  tags: ['autodocs'],
  argTypes: {
    title: { control: 'text', description: 'Título de la lista' },
    showTitle: { control: 'boolean' },
    items: { control: 'object', description: 'Array de items base (se ajustará al modelo de Persona)' },
    actionButtonText: { control: 'text', description: 'Texto del botón en columna Acciones (ej. Editar)' },
    tableLoading: { control: 'boolean', description: 'Muestra skeleton de carga en tabla y en vista cards' },
    emptyMessage: { control: 'text', description: 'Mensaje cuando no hay items' },
    searchPlaceholder: { control: 'text', description: 'Placeholder del input de búsqueda' },
    activeFiltersCount: { control: 'number', description: 'Cantidad de filtros activos en el botón Filtros' },
    cardsDocumentoMaxChars: { control: 'number', description: 'Máximo de caracteres del documento en vista cards; si excede, agrega puntos suspensivos.' },
    appliedFilters: { control: 'object', description: 'Array de filtros aplicados: strings u objetos { id, label }' },
    onAppliedFilterRemove: { action: 'appliedFilterRemove' },
    onAppliedFiltersClear: { action: 'appliedFiltersClear' },
    appliedFiltersLabel: { control: 'text' },
    appliedFiltersClearLabel: { control: 'text' },
    onItemClick: { action: 'itemClick', description: 'Callback al hacer clic en la fila: (item, index)' },
    onActionClick: { action: 'actionClick', description: 'Callback del botón de acción: (item, index, event)' },
    onViewClick: {
      action: 'viewClick',
      description:
        'Consumidor: Ver en tabla (menú) y en cards (botón outline). (persona, index, event) — ahí navegación, modal, drawer, etc.',
    },
    viewActionText: { control: 'text', description: 'Etiqueta Ver (tabla y cards)' },
    showViewCardButton: { control: 'boolean', description: 'Mostrar Ver en menú Acciones (tabla) y botón Ver (cards)' },
    shouldShowViewCardButton: {
      control: false,
      description: 'Opcional: (persona, index) => boolean para ocultar Ver por fila en tabla y cards.',
    },
    onArchiveClick: { action: 'archiveClick', description: 'Callback Archivar: (item, index, event)' },
    onUnarchiveClick: { action: 'unarchiveClick', description: 'Callback Desarchivar: (item, index, event)' },
    onSearchChange: { action: 'searchChange', description: 'Callback al cambiar el texto de búsqueda' },
    pageSize: {
      control: 'number',
      description:
        'Registros por página (sincronizar con backend). El número subrayado en la barra roja edita esto vía onPageSizeChange.',
    },
    currentPage: { control: 'number', description: 'Página actual 1-based (controlada)' },
    totalPages: { control: 'number', description: 'Total de páginas; recalcular si cambia pageSize o el total' },
    registrosCurrent: { control: 'number', description: 'Filas en items (página actual)' },
    tableTotalCount: { control: 'number', description: 'Total global en servidor (texto “de N”)' },
    onPageChange: { action: 'onPageChange', description: 'Ir a página; también tras cambiar tamaño de página (página sugerida)' },
    onPageSizeChange: {
      action: 'onPageSizeChange',
      description: 'Nuevo pageSize al confirmar el número subrayado; en modo controlado habilita la edición',
    },
    onPrevPage: { action: 'onPrevPage' },
    onNextPage: { action: 'onNextPage' },
  },
};
 
export const Default = {
  args: {
    title: 'Personas',
    showTitle: true,
    items: itemsEjemplo,
    actionButtonText: 'Editar',
    showFiltersButton: true,
  },
};
 
export const SinTitulo = {
  args: {
    showTitle: false,
    items: itemsEjemplo,
    actionButtonText: 'Ver',
  },
};
 
export const ListaVacia = {
  args: {
    title: 'Personas',
    items: [],
    emptyMessage: 'No hay personas cargadas. Cree su primera persona.',
  },
};
 
export const ConVistaCards = {
  args: {
    title: 'Personas',
    items: itemsEjemplo,
    actionButtonText: 'Editar',
    searchPlaceholder: 'Buscar personas',
  },
};

/** Patrón consumidor: `onViewClick` recibe la persona y el índice; en la app conectás router, modal, etc. */
export const ConsumidorNavegacionVer = {
  name: 'Consumidor — Ver (tabla y cards)',
  parameters: {
    docs: {
      description: {
        story:
          'Pasá `onViewClick={(persona, index, event) => { ... }}` en tu host: por ejemplo `navigate` a la ruta de detalle con `persona.id`, abrir un drawer de solo lectura o un modal. Misma callback en **menú Acciones → Ver** (tabla) y **botón outline Ver** (vista cards). El design system no asume enrutador ni URL.',
      },
    },
  },
  args: {
    title: 'Personas',
    items: itemsEjemplo,
    actionButtonText: 'Editar',
    viewActionText: 'Ver',
    showViewCardButton: true,
    searchPlaceholder: 'Buscar personas',
  },
};

export const ConVistaCardsDocumentoTruncado = {
  args: {
    title: 'Personas',
    items: itemsEjemplo,
    actionButtonText: 'Editar',
    searchPlaceholder: 'Buscar personas',
    cardsDocumentoMaxChars: 22,
  },
};

export const CardsDocumentoTruncate = {
  name: 'Cards - Documento truncado',
  args: {
    title: 'Personas',
    actionButtonText: 'Editar',
    searchPlaceholder: 'Buscar personas',
    cardsDocumentoMaxChars: 18,
    items: [
      {
        id: 'truncate-1',
        nombreComercial: 'Ana Truncado',
        email: 'ana.truncado@ejemplo.com',
        documento: 'Pasaporte AR-1234567890-EXTREMADAMENTE-LARGO',
        estado: 'Activa',
      },
      {
        id: 'truncate-2',
        nombreComercial: 'Bruno Corto',
        email: 'bruno.corto@ejemplo.com',
        documento: 'DNI 30123456',
        estado: 'Activa',
      },
    ],
  },
  parameters: {
    docs: {
      description: {
        story:
          'Story específica para validar `cardsDocumentoMaxChars` en vista cards. Si el documento supera el máximo, corta y agrega puntos suspensivos.',
      },
    },
  },
};

export const ConFiltrosAvanzados = {
  args: {
    title: 'Personas',
    items: itemsEjemplo,
    actionButtonText: 'Editar',
    showFiltersButton: true,
    filtersButtonLabel: 'Filtros',
  },
};

export const ConFiltrosActivos = {
  args: {
    title: 'Personas',
    items: itemsEjemplo,
    actionButtonText: 'Editar',
    showFiltersButton: true,
    filtersButtonLabel: 'Filtros',
    activeFiltersCount: 3,
  },
};

export const FiltrosAplicados = {
  args: {
    title: 'Personas',
    items: itemsEjemplo,
    actionButtonText: 'Editar',
    showFiltersButton: true,
    filtersButtonLabel: 'Filtros',
    filtersAreaContainerStyle: {
      marginTop: '16px',
      marginBottom: '16px',
    },
  },
  render: (args) => {
    const [conditions, setConditions] = useState(FILTROS_APLICADOS_INITIAL_CONDITIONS);
    const [aiValue, setAiValue] = useState('');
    const [appliedFilters, setAppliedFilters] = useState(() =>
      buildAppliedFiltersFromPayload({ conditions: FILTROS_APLICADOS_INITIAL_CONDITIONS, aiValue: '' })
    );

    const clearFilters = () => {
      setConditions([FILTROS_APLICADOS_EMPTY_CONDITION]);
      setAiValue('');
      setAppliedFilters([]);
    };

    const syncAppliedFilters = (nextConditions, nextAiValue) => {
      setAppliedFilters(buildAppliedFiltersFromPayload({ conditions: nextConditions, aiValue: nextAiValue }));
    };

    const handleConditionsChange = (nextConditions) => {
      setConditions(nextConditions);
      syncAppliedFilters(nextConditions, aiValue);
    };

    const handleAiChange = (nextAiValue) => {
      setAiValue(nextAiValue);
      syncAppliedFilters(conditions, nextAiValue);
    };

    const removeAppliedFilter = (filter) => {
      if (filter.type === 'ai') {
        setAiValue('');
        setAppliedFilters((current) => current.filter((item) => item.id !== filter.id));
        return;
      }

      setConditions((current) => {
        const index = current.findIndex((condition) => condition.id === filter.conditionId);
        if (index <= 0) {
          return current.map((condition) =>
            condition.id === filter.conditionId ? { ...condition, value: '' } : condition
          );
        }
        return current.filter((condition) => condition.id !== filter.conditionId);
      });
      setAppliedFilters((current) => current.filter((item) => item.id !== filter.id));
    };

    return (
      <ListaPersonas
        {...args}
        activeFiltersCount={appliedFilters.length}
        appliedFilters={appliedFilters}
        onAppliedFilterRemove={removeAppliedFilter}
        onAppliedFiltersClear={clearFilters}
        onAdvancedFiltersApply={(payload) => {
          setConditions(payload.conditions ?? [FILTROS_APLICADOS_EMPTY_CONDITION]);
          setAiValue(payload.aiValue ?? '');
          setAppliedFilters(buildAppliedFiltersFromPayload(payload));
          console.log('Apply filters', payload);
        }}
        advancedFiltersModalProps={{
          fields: FILTROS_APLICADOS_FIELDS,
          conditions,
          aiValue,
          onConditionsChange: handleConditionsChange,
          onAiChange: handleAiChange,
          onClear: clearFilters,
        }}
      />
    );
  },
};

export const FiltrosAplicadosCustomArea = {
  args: {
    title: 'Personas',
    items: itemsEjemplo,
    actionButtonText: 'Editar',
    showFiltersButton: true,
    filtersButtonLabel: 'Filtros',
    activeFiltersCount: 3,
    filtersAreaContainerStyle: {
      marginTop: '16px',
      marginBottom: '16px',
    },
  },
  render: (args) => (
    <ListaPersonas
      {...args}
      appliedFilters={buildAppliedFiltersFromPayload({
        conditions: FILTROS_APLICADOS_INITIAL_CONDITIONS,
        aiValue: '',
      })}
      filtersArea={
        <div
          style={{
            width: '100%',
            padding: '12px',
            border: '1px dashed #6D3856',
            borderRadius: '8px',
            color: '#6D3856',
            fontFamily: 'var(--font-family-sans)',
            boxSizing: 'border-box',
          }}
        >
          Área custom vía filtersArea: este contenido reemplaza los filtros aplicados nativos.
        </div>
      }
    />
  ),
};
 
export const Loading = {
  args: {
    title: 'Personas',
    items: itemsEjemplo,
    actionButtonText: 'Editar',
    tableLoading: true,
    searchPlaceholder: 'Buscar personas',
  },
};
 
export const CienPersonas = {
  args: {
    title: 'Personas',
    items: itemsCienPersonas,
    actionButtonText: 'Editar',
    searchPlaceholder: 'Buscar personas',
  },
};
 
const PAGE_SIZE = 10;
 
export const CienPersonasConPaginacion = {
  render: function CienPersonasConPaginacionStory(args) {
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(PAGE_SIZE);
    const totalRegistros = itemsCienPersonas.length;
    const totalPages = Math.max(1, Math.ceil(totalRegistros / pageSize));
    const start = (page - 1) * pageSize;
    const currentItems = itemsCienPersonas.slice(start, start + pageSize);
    const registrosEnPagina = currentItems.length;
 
    return (
      <ListaPersonas
        {...args}
        items={currentItems}
        registrosCurrent={registrosEnPagina}
        tableTotalCount={totalRegistros}
        pageSize={pageSize}
        currentPage={page}
        totalPages={totalPages}
        onPrevPage={() => setPage((p) => Math.max(1, p - 1))}
        onNextPage={() => setPage((p) => Math.min(totalPages, p + 1))}
        onPageChange={setPage}
        onPageSizeChange={setPageSize}
      />
    );
  },
  args: {
    title: 'Personas',
    actionButtonText: 'Editar',
    searchPlaceholder: 'Buscar personas',
  },
};

/** 120 personas mock + paginación controlada y tamaño de página editable en la barra roja. */
export const Con120PersonasConPaginacion = {
  name: 'Con 120 personas (paginación)',
  render: function Con120PersonasConPaginacionStory(args) {
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(PAGE_SIZE);
    const totalRegistros = itemsCientoVeintePersonas.length;
    const totalPages = Math.max(1, Math.ceil(totalRegistros / pageSize));
    const start = (page - 1) * pageSize;
    const currentItems = itemsCientoVeintePersonas.slice(start, start + pageSize);
    const registrosEnPagina = currentItems.length;

    return (
      <ListaPersonas
        {...args}
        items={currentItems}
        registrosCurrent={registrosEnPagina}
        tableTotalCount={totalRegistros}
        pageSize={pageSize}
        currentPage={page}
        totalPages={totalPages}
        onPrevPage={() => setPage((p) => Math.max(1, p - 1))}
        onNextPage={() => setPage((p) => Math.min(totalPages, p + 1))}
        onPageChange={setPage}
        onPageSizeChange={setPageSize}
      />
    );
  },
  args: {
    title: 'Personas',
    actionButtonText: 'Editar',
    searchPlaceholder: 'Buscar personas',
  },
  parameters: {
    docs: {
      description: {
        story:
          'Dataset de **120** personas (`tableTotalCount={120}`). Paginación en cliente; podés cambiar cuántos registros ver por página con el número subrayado en “Registros”.',
      },
    },
  },
};
