'use client';

import React from 'react';
import { Button, Skeleton } from 'antd';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { ICON_SIZE_SM } from '@/components/icons';
import {
    abbreviateMetricLabel,
    resolveCompactChipVariantClass,
    type MetricCardElement,
} from './metricsGridCompactUtils';
import styles from './MetricsGrid.module.scss';

export interface MetricsGridCompactBarProps {
    items: MetricCardElement[];
    expanded: boolean;
    onToggleExpanded: () => void;
}

export function MetricsGridCompactBar({ items, expanded, onToggleExpanded }: MetricsGridCompactBarProps) {
    if (items.length === 0) {
        return null;
    }

    return (
        <div className={styles.compactBar} data-testid="metrics-grid-compact-bar">
            <div
                className={`${styles.compactScroll} ${items.length <= 3 ? styles.compactScrollFit : ''}`.trim()}
                role="list"
                aria-label="Resumo em números"
            >
                {items.map((item, index) => {
                    const { label, value, subvalue, loading, variant } = item.props;
                    const valorTexto =
                        !loading && (typeof value === 'string' || typeof value === 'number')
                            ? String(value)
                            : null;
                    const title = subvalue
                        ? `${label}: ${subvalue}`
                        : [valorTexto ? `${label}: ${valorTexto}` : label].filter(Boolean).join('');
                    const variantClass = resolveCompactChipVariantClass(variant, styles);

                    return (
                        <div
                            key={`${label}-${index}`}
                            className={`${styles.compactChip} ${variantClass}`.trim()}
                            role="listitem"
                            title={title}
                        >
                            <span className={styles.compactLabel}>{abbreviateMetricLabel(label)}</span>
                            <span className={styles.compactValue}>
                                {loading ? (
                                    <Skeleton.Button active size="small" style={{ width: 32, height: 16 }} />
                                ) : (
                                    value
                                )}
                            </span>
                        </div>
                    );
                })}
            </div>
            <div className={styles.compactToggleWrap}>
                <Button
                    type="text"
                    size="small"
                    className={styles.compactToggle}
                    onClick={onToggleExpanded}
                    aria-expanded={expanded}
                    aria-label={expanded ? 'Recolher resumo' : 'Expandir resumo'}
                    title={expanded ? 'Recolher' : 'Expandir'}
                    icon={
                        expanded ? (
                            <ChevronUp size={ICON_SIZE_SM} aria-hidden />
                        ) : (
                            <ChevronDown size={ICON_SIZE_SM} aria-hidden />
                        )
                    }
                />
            </div>
        </div>
    );
}