'use client';

import { CheckCircle2 } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { ReactNode } from 'react';
import { Button, Space, Typography } from 'antd';
import ContentCard from '@/components/layouts/ContentCard';

export type ListingSelectionToolbarCardProps = {
    /** Ícone opcional ao lado do título (ex.: `CheckCircleOutlined`). */
    titleIcon?: ReactNode;
    title?: string;
    /** Copia forte da contagem (ex.: "4 status selecionados"); se omitido, usa `selectedCount`. */
    summary?: React.ReactNode;
    selectedCount?: number;
    onSelectAllOnPage?: () => void;
    selectAllPageLabel?: string;
    onClearAll?: () => void;
    clearAllLabel?: string;
    /** Atalhos de domínio (Ativar / Exportar selecionados …) — lado direito. */
    toolbarActions?: React.ReactNode;
    /** Estilo destacado antes da `Table`/ `LazyDataTable` (alinhar ao guia listagem tipo chamados). */
    elevatedStyle?: boolean;
};

const defaultMargin = { marginBottom: 16 } as const;
const elevated = {
    backgroundColor: '#e6f7ff',
    border: '1px solid #91d5ff',
};

/**
 * Barra antes da grelha com contagem da selecção, "Selecionar página" e "Limpar todas".
 * Extrair do uso repetido em listagens operacionais (guia Movimentos / Chamados §8).
 */
export function ListingSelectionToolbarCard({
    titleIcon,
    title = 'Seleção na lista',
    summary,
    selectedCount,
    onSelectAllOnPage,
    selectAllPageLabel = 'Selecionar todas desta página',
    onClearAll,
    clearAllLabel = 'Desmarcar todas',
    toolbarActions,
    elevatedStyle = true,
}: ListingSelectionToolbarCardProps) {
    const summaryFallback =
        selectedCount !== undefined ? (
            <Typography.Text strong>
                {selectedCount === 1 ? '1 registro selecionado' : `${selectedCount} registros selecionados`}
            </Typography.Text>
        ) : null;

    return (
        <ContentCard
            title={title}
            icon={titleIcon ?? undefined}
            style={{
                ...defaultMargin,
                ...(elevatedStyle ? elevated : {}),
            }}
        >
            <Space wrap size="middle" style={{ width: '100%', justifyContent: 'space-between' }}>
                <Space wrap align="center">
                    {summary !== undefined ? summary : summaryFallback}
                    {onSelectAllOnPage ? (
                        <Button size="small" onClick={onSelectAllOnPage}>
                            {selectAllPageLabel}
                        </Button>
                    ) : null}
                    {onClearAll ? (
                        <Button size="small" onClick={onClearAll}>
                            {clearAllLabel}
                        </Button>
                    ) : null}
                </Space>
                {toolbarActions ? <Space wrap size="small">{toolbarActions}</Space> : null}
            </Space>
        </ContentCard>
    );
}