'use client';

import React from 'react';
import { Segmented } from 'antd';
import type { SuporteLogsResolvedFilter } from '../utils/suporteLogsListaFiltersUrl';
import styles from './SuporteLogsResolvedNav.module.scss';

export type SuporteLogsResolvedNavProps = {
    value: SuporteLogsResolvedFilter;
    onChange: (value: SuporteLogsResolvedFilter) => void;
    pendingTotal: number;
    resolvedTotal: number;
    disabled?: boolean;
};

function formatCount(n: number): string {
    return new Intl.NumberFormat('pt-BR').format(n);
}

/**
 * Navegação rápida Pendentes / Resolvidos / Todos (fora do modal de filtros).
 */
export function SuporteLogsResolvedNav({
    value,
    onChange,
    pendingTotal,
    resolvedTotal,
    disabled = false,
}: SuporteLogsResolvedNavProps) {
    const allTotal = pendingTotal + resolvedTotal;

    return (
        <div className={styles.wrap} data-testid="suporte-logs-resolved-nav">
            <Segmented<SuporteLogsResolvedFilter>
                value={value}
                disabled={disabled}
                onChange={(v) => onChange(v)}
                options={[
                    {
                        value: 'no',
                        label: (
                            <span className={styles.option}>
                                Pendentes
                                <span className={styles.count} aria-label={`${pendingTotal} pendentes`}>
                                    {formatCount(pendingTotal)}
                                </span>
                            </span>
                        ),
                    },
                    {
                        value: 'yes',
                        label: (
                            <span className={styles.option}>
                                Resolvidos
                                <span className={styles.count} aria-label={`${resolvedTotal} resolvidos`}>
                                    {formatCount(resolvedTotal)}
                                </span>
                            </span>
                        ),
                    },
                    {
                        value: 'all',
                        label: (
                            <span className={styles.option}>
                                Todos
                                <span className={styles.count} aria-label={`${allTotal} no total`}>
                                    {formatCount(allTotal)}
                                </span>
                            </span>
                        ),
                    },
                ]}
                block
                aria-label="Situação dos logs"
            />
        </div>
    );
}