'use client';

import React from 'react';
import { Pagination, Skeleton, Spin } from 'antd';
import type { PaginatedResponse } from '@/types';
import { ListingMobileCard } from './ListingMobileCard';
import type { ListingMobileCardConfig } from './listingMobileCardTypes';
import styles from './ListingMobileCard.module.scss';

export type ListingMobileCardListProps<T> = {
    rows: T[];
    paginatedData?: PaginatedResponse<T>;
    loading?: boolean;
    fetching?: boolean;
    onPageChange?: (page: number, pageSize?: number) => void;
    cardConfig?: ListingMobileCardConfig<T>;
    /** Cartão custom por módulo (tem prioridade sobre `cardConfig`). */
    renderCard?: (record: T) => React.ReactNode;
    resolveRowKey: (record: T) => React.Key;
    dataTestId: string;
    listHeading: string;
    showSizeChanger?: boolean;
};

/**
 * Lista em cards para xs/sm — substitui tabela larga com scroll horizontal.
 * Padrão Waygest reutilizável em qualquer listagem com `DataTable`.
 */
export function ListingMobileCardList<T>({
    rows,
    paginatedData,
    loading = false,
    fetching = false,
    onPageChange,
    cardConfig,
    renderCard,
    resolveRowKey,
    dataTestId,
    listHeading,
    showSizeChanger = false,
}: ListingMobileCardListProps<T>) {
    const meta = paginatedData?.meta;
    const headingId = `${dataTestId}-heading`;
    const busy = (fetching && !loading) || loading;

    return (
        <section
            aria-labelledby={headingId}
            data-testid={dataTestId}
            role="list"
            aria-label={listHeading}
        >
            <h2 id={headingId} className="sr-only">
                {listHeading}
            </h2>
            <Spin spinning={busy}>
                <div className={styles.mobileCardList}>
                    {loading && rows.length === 0
                        ? [0, 1, 2].map((i) => (
                              <div key={`sk-${i}`} className={styles.card} aria-hidden>
                                  <Skeleton active title={{ width: '70%' }} paragraph={{ rows: 2 }} />
                              </div>
                          ))
                        : rows.map((row) =>
                            renderCard ? (
                                <React.Fragment key={resolveRowKey(row)}>{renderCard(row)}</React.Fragment>
                            ) : cardConfig ? (
                                <ListingMobileCard
                                    key={resolveRowKey(row)}
                                    record={row}
                                    config={cardConfig}
                                    recordKey={resolveRowKey(row)}
                                />
                            ) : null,
                        )}
                </div>

                {meta && meta.total > 0 && onPageChange ? (
                    <Pagination
                        className={styles.mobilePagination}
                        current={meta.current_page}
                        pageSize={meta.per_page}
                        total={meta.total}
                        onChange={onPageChange}
                        showSizeChanger={showSizeChanger}
                        size="small"
                        hideOnSinglePage
                        showTotal={(t, range) => `${range[0]}-${range[1]} de ${t} itens`}
                    />
                ) : null}
            </Spin>
        </section>
    );
}