import { useState } from 'react';
import ListaEmpresas, { LISTA_EMPRESAS_PAGE_SIZE_DEFAULT } from './ListaEmpresas';

const itemsEjemplo = [
  {
    id: '1',
    nombreComercial: 'Nucleus S.A.',
    pais: 'Argentina',
    estado: 'Activa',
    actividad: 'Servicios financieros',
  },
  {
    id: '2',
    nombreComercial: 'Acme Corp',
    pais: 'Chile',
    estado: 'Borrador',
    actividad: 'Tecnología',
  },
  {
    id: '3',
    nombreComercial: 'TechStart',
    pais: 'Uruguay',
    estado: 'Inactiva',
    actividad: 'Innovación',
  },
];

const itemsConIdentificadores = [
  {
    id: '1',
    nombreComercial: 'Empresa RUC',
    pais: 'Perú',
    estado: 'Activa',
    actividad: 'Retail',
    legalIdentifier: { type: 'ruc', number: '20123456789' },
  },
  {
    id: '2',
    nombreComercial: 'Empresa NIT',
    pais: 'Colombia',
    estado: 'Borrador',
    actividad: 'Servicios',
    legalIdentifier: { type: ' NIT ', number: '900.123.456-7' },
  },
  {
    id: '3',
    nombreComercial: 'Empresa RFC (fallback plano)',
    pais: 'México',
    estado: 'Activa',
    actividad: 'Tecnología',
    legalIdentifierType: 'rfc',
    legalIdentifierNumber: 'XAXX010101000',
  },
  {
    id: '4',
    nombreComercial: 'Empresa solo CUIT (compat)',
    pais: 'Argentina',
    estado: 'Inactiva',
    actividad: '—',
    cuit: '30-71234567-8',
  },
  {
    id: '5',
    nombreComercial: 'Empresa sin número',
    pais: 'Chile',
    estado: 'Suspendida',
    actividad: 'Logística',
    legalIdentifier: { type: 'rut', number: '' },
  },
];

const itemsCienEmpresas = Array.from({ length: 100 }).map((_, index) => {
  const i = index + 1;
  const estados = ['Activa', 'Borrador', 'Inactiva', 'Suspendida'];
  const paises = ['Argentina', 'Chile', 'Uruguay', 'Perú', 'México', 'España'];
  const actividades = ['Servicios financieros', 'Tecnología', 'Innovación', 'Logística', 'Retail', 'Consultoría'];
  const estado = estados[index % estados.length];
  const pais = paises[index % paises.length];
  const actividad = actividades[index % actividades.length];
  return {
    id: String(i),
    nombreComercial: `Empresa ${i}`,
    razonSocial: `Empresa ${i} S.A.`,
    pais,
    estado,
    actividad: `Actividad ${i} - ${actividad}`,
  };
});

export default {
  title: 'Layout/ListaEmpresas',
  component: ListaEmpresas,
  tags: ['autodocs'],
  argTypes: {
    title: { control: 'text', description: 'Título de la lista' },
    showTitle: { control: 'boolean' },
    items: { control: 'object', description: 'Array de items con id, nombreComercial, pais, estado, actividad' },
    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' },
    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)' },
    onSearchChange: { action: 'searchChange', description: 'Callback al cambiar el texto de búsqueda' },
  },
};

export const Default = {
  args: {
    title: 'Empresas',
    showTitle: true,
    items: itemsEjemplo,
    actionButtonText: 'Editar',
  },
};

export const ConBotonEditar = {
  args: {
    title: 'Empresas',
    items: itemsEjemplo,
    actionButtonText: 'Editar',
  },
};

export const SinTitulo = {
  args: {
    showTitle: false,
    items: itemsEjemplo,
    actionButtonText: 'Ver',
  },
};

export const ListaVacia = {
  args: {
    title: 'Empresas',
    items: [],
    emptyMessage: 'No hay empresas cargadas. Cree su primera empresa.',
  },
};

export const UnSoloItem = {
  args: {
    title: 'Mi empresa',
    items: [
      {
        id: '1',
        nombreComercial: 'Mi Empresa S.A.',
        pais: 'Argentina',
        estado: 'Activa',
        actividad: 'Consultoría',
      },
    ],
    actionButtonText: 'Editar',
  },
};

export const ConDistintosEstados = {
  args: {
    title: 'Empresas',
    items: [
      { id: '1', nombreComercial: 'Activa S.A.', pais: 'Argentina', estado: 'Activa', actividad: 'Ventas' },
      { id: '2', nombreComercial: 'Borrador S.R.L.', pais: 'Chile', estado: 'Borrador', actividad: 'Desarrollo' },
      { id: '3', nombreComercial: 'Inactiva', pais: 'Uruguay', estado: 'Inactiva', actividad: '—' },
      { id: '4', nombreComercial: 'Suspendida', pais: 'Perú', estado: 'Suspendida', actividad: 'Logística' },
    ],
    actionButtonText: 'Editar',
  },
};

export const ConTiposIdentificacion = {
  args: {
    title: 'Empresas',
    items: itemsConIdentificadores,
    actionButtonText: 'Editar',
  },
};

/** Usa el último icono (vista cards) para cambiar a CardsEmpresas. El del medio vuelve a la lista. */
export const ConVistaCards = {
  args: {
    title: 'Empresas',
    items: itemsEjemplo,
    actionButtonText: 'Editar',
    searchPlaceholder: 'Buscar empresas',
  },
};

/** Muestra skeleton de carga. En vista tabla se ve el skeleton de la tabla; al cambiar a vista cards (último icono) se ve el skeleton de las cards. */
export const Loading = {
  args: {
    title: 'Empresas',
    items: itemsEjemplo,
    actionButtonText: 'Editar',
    tableLoading: true,
    searchPlaceholder: 'Buscar empresas',
  },
};

export const CienEmpresas = {
  args: {
    title: 'Empresas',
    items: itemsCienEmpresas,
    actionButtonText: 'Editar',
    searchPlaceholder: 'Buscar empresas',
  },
};

export const CienEmpresasConPaginacion = {
  render: function CienEmpresasConPaginacionStory(args) {
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(LISTA_EMPRESAS_PAGE_SIZE_DEFAULT);
    const totalRegistros = itemsCienEmpresas.length;
    const totalPages = Math.max(1, Math.ceil(totalRegistros / pageSize));
    const start = (page - 1) * pageSize;
    const currentItems = itemsCienEmpresas.slice(start, start + pageSize);
    const registrosEnPagina = currentItems.length;

    return (
      <ListaEmpresas
        {...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: 'Empresas',
    actionButtonText: 'Editar',
    searchPlaceholder: 'Buscar empresas',
  },
};
