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

export default {
  title: 'Layout/ConfiguracionUsuarios',
  component: ConfiguracionUsuarios,
  tags: ['autodocs'],
  argTypes: {
    children: {
      control: false,
      description: 'Contenido del componente (formularios, listas, etc.)',
    },
    searchValue: { control: 'text', description: 'Valor controlado del input de búsqueda' },
    onSearchChange: { action: 'onSearchChange', description: 'Callback al cambiar el texto de búsqueda (valor, event)' },
    searchPlaceholder: { control: 'text' },
    users: { control: false, description: 'Lista de usuarios (filas de la tabla)' },
    tableTotalCount: { control: 'number', description: 'Total de registros (ej. para "Registros: N de M")' },
    registrosCurrent: { control: 'number', description: 'Número de registros mostrados en la página actual' },
    currentPage: { control: 'number', description: 'Página actual' },
    totalPages: { control: 'number', description: 'Total de páginas' },
    onPrevPage: { action: 'onPrevPage', description: 'Callback al ir a la página anterior' },
    onNextPage: { action: 'onNextPage', description: 'Callback al ir a la página siguiente' },
    sinContenido: { control: 'boolean', description: 'Muestra estado vacío con mensaje en lugar de la tabla' },
    emptyStateLabel: { control: 'text', description: 'Texto a mostrar cuando sinContenido es true' },
  },
};

export const Default = {
  args: {
    children: null,
  },
};

export const SinContenido = {
  args: {
    children: null,
    sinContenido: true,
    users: [],
  },
};

export const TablaCargando = {
  args: {
    children: null,
    tableLoading: true,
  },
};

const MOCK_ROWS = [
  { id: 1, administrador: 'Ana García', email: 'ana@ejemplo.com', rolTecnico: 'Admin', ultimoAcceso: '11/02/2025' },
  { id: 2, administrador: 'Luis Pérez', email: 'luis@ejemplo.com', rolTecnico: 'Editor', ultimoAcceso: '10/02/2025' },
  { id: 3, administrador: 'María López', email: 'maria@ejemplo.com', rolTecnico: 'Lector', ultimoAcceso: '09/02/2025' },
  { id: 4, administrador: 'Carlos Ruiz', email: 'carlos@ejemplo.com', rolTecnico: 'Admin', ultimoAcceso: '08/02/2025' },
  { id: 5, administrador: 'Elena Torres', email: 'elena@ejemplo.com', rolTecnico: 'Editor', ultimoAcceso: '07/02/2025' },
  { id: 6, administrador: 'Pedro Sánchez', email: 'pedro@ejemplo.com', rolTecnico: 'Lector', ultimoAcceso: '06/02/2025' },
  { id: 7, administrador: 'Laura Martínez', email: 'laura@ejemplo.com', rolTecnico: 'Admin', ultimoAcceso: '05/02/2025' },
  { id: 8, administrador: 'Diego Fernández', email: 'diego@ejemplo.com', rolTecnico: 'Editor', ultimoAcceso: '04/02/2025' },
  { id: 9, administrador: 'Sofía López', email: 'sofia@ejemplo.com', rolTecnico: 'Lector', ultimoAcceso: '03/02/2025' },
];
const TOTAL_REGISTROS = MOCK_ROWS.length;
const PAGE_SIZE = 3;

export const ConBusquedaYPaginacion = {
  render: function ConBusquedaYPaginacionStory(args) {
    const [search, setSearch] = useState('');
    const [page, setPage] = useState(1);
    const totalPages = Math.max(1, Math.ceil(TOTAL_REGISTROS / PAGE_SIZE));
    const start = (page - 1) * PAGE_SIZE;
    const rows = MOCK_ROWS.slice(start, start + PAGE_SIZE);
    const registrosEnPagina = rows.length;
    return (
      <div style={{ width: '100%', boxSizing: 'border-box' }}>
        <ConfiguracionUsuarios
          children={null}
          containerStyle={args.containerStyle}
          containerClassName={args.containerClassName}
          contentContainerStyle={args.contentContainerStyle}
          contentContainerClassName={args.contentContainerClassName}
          className={args.className}
          searchValue={search}
          onSearchChange={setSearch}
          searchPlaceholder={args.searchPlaceholder}
          tableLoading={args.tableLoading}
          users={rows}
          tableColumns={args.tableColumns}
          registrosCurrent={registrosEnPagina}
          tableTotalCount={TOTAL_REGISTROS}
          currentPage={page}
          totalPages={totalPages}
          onPrevPage={() => setPage((p) => Math.max(1, p - 1))}
          onNextPage={() => setPage((p) => Math.min(totalPages, p + 1))}
          sinContenido={args.sinContenido}
          emptyStateLabel={args.emptyStateLabel}
        />
      </div>
    );
  },
  args: {
    children: null,
  },
};
