'use client';

import React, { ReactNode, CSSProperties, useMemo, useState } from 'react';
import { Button } from 'antd';
import { useIsMobile } from '@/hooks/useIsMobile';
import { collectMetricCardChildren } from './metricsGridCompactUtils';
import { MetricsGridCompactBar } from './MetricsGridCompactBar';
import styles from './MetricsGrid.module.scss';

interface MetricsGridProps {
    children?: ReactNode;
    className?: string;
    columns?: number; // Número de colunas (padrão: auto-fit)
    /** Mínimo em px por coluna quando não usa `columns` fixo (sobrescreve o minmax do CSS). */
    minCardWidth?: number;
    style?: CSSProperties;
    /**
     * Em mobile (≤768px): faixa compacta numa linha com botão para expandir os cards completos.
     * Padrão Waygest para listagens com bloco de resumo.
     */
    mobileCompactCollapsible?: boolean;
}

export default function MetricsGrid({
    children,
    className = '',
    columns,
    minCardWidth,
    style,
    mobileCompactCollapsible = true,
}: MetricsGridProps) {
    const isMobile = useIsMobile();
    const [expanded, setExpanded] = useState(false);

    const metricItems = useMemo(() => collectMetricCardChildren(children), [children]);

    const isMobileCompactMode = isMobile && mobileCompactCollapsible && metricItems.length > 0;
    const showCompactBar = isMobileCompactMode && !expanded;
    const showFullGrid = !isMobileCompactMode || expanded;

    const columnsClass = columns != null ? styles[`metricsGridCols${columns}` as keyof typeof styles] ?? '' : '';

    const gridStyle: CSSProperties = {
        ...style,
        ...(minCardWidth != null && columns == null
            ? { gridTemplateColumns: `repeat(auto-fit, minmax(${minCardWidth}px, 1fr))` }
            : {}),
    };

    return (
        <div className={styles.metricsGridRoot}>
            {showCompactBar ? (
                <MetricsGridCompactBar
                    items={metricItems}
                    expanded={expanded}
                    onToggleExpanded={() => setExpanded((prev) => !prev)}
                />
            ) : null}
            {isMobileCompactMode && expanded ? (
                <div className={styles.compactCollapseWrap}>
                    <Button
                        type="text"
                        size="small"
                        className={styles.compactToggle}
                        onClick={() => setExpanded(false)}
                        aria-expanded
                        aria-label="Recolher resumo"
                    >
                        Recolher resumo
                    </Button>
                </div>
            ) : null}
            {showFullGrid ? (
                <div
                    className={`${styles.metricsGrid} ${columnsClass} ${className}`.trim()}
                    style={gridStyle}
                    data-testid="metrics-grid-full"
                >
                    {children}
                </div>
            ) : null}
        </div>
    );
}