'use client';

import React, { useState } from 'react';
import { Ellipsis, Filter, RotateCw } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import { Badge, Button, Modal } from 'antd';
import { useMobilePageActionBarRegistration } from '@/components/layouts/PageShellOptions';
import styles from './MobilePageActionBar.module.scss';

export interface MobilePageActionBarProps {
    onOpenFilters?: () => void;
    /** Texto do botão de filtros (drawer). Padrão: "Filtrar". */
    filterButtonLabel?: string;
    /** Só ícone no botão de filtros (padrão listagens). */
    filterIconOnly?: boolean;
    /** Só ícone no botão de opções. */
    opcoesIconOnly?: boolean;
    activeFiltersCount?: number;
    onRefresh?: () => void | Promise<void>;
    refreshLoading?: boolean;
    /** Quando false, exibe rótulo "Atualizar" junto ao ícone (padrão: só ícone). */
    refreshIconOnly?: boolean;
    refreshButtonLabel?: string;
    /** Conteúdo do modal "Opções" (ex.: ações que no desktop ficam no header). */
    opcoesContent?: React.ReactNode;
    /** Se definido, o botão "Opções" chama este callback (modal fica a cargo da página). */
    onOpenOpcoes?: () => void;
    opcoesModalTitle?: string;
    /** Conteúdo à direita da barra (ex.: botão "Novo" via portal de {@link ListPageCreateFloatButton}). */
    trailingAction?: React.ReactNode;
    /** Ações extra entre Atualizar e Opções (ex.: exportar, templates). */
    inlineActions?: React.ReactNode;
    /** Oculta o botão "Opções" mesmo com `opcoesContent` ou `onOpenOpcoes`. */
    hideOpcoes?: boolean;
    /** Distribui todos os botões com a mesma largura (100% da barra). */
    equalWidth?: boolean;
    className?: string;
    /** data-testid do botão de filtros (omissão: agenda-btn-filtrar por legado). */
    filterTestId?: string;
}

/**
 * Barra de ações em mobile: Filtrar (drawer) | Atualizar (só ícone) | Opções (modal).
 * Fixa no rodapé da viewport (padrão listagens Waygest).
 */
export function MobilePageActionBar({
    onOpenFilters,
    filterButtonLabel = 'Filtrar',
    filterIconOnly = false,
    opcoesIconOnly = false,
    activeFiltersCount,
    onRefresh,
    refreshLoading = false,
    refreshIconOnly = true,
    refreshButtonLabel = 'Atualizar',
    opcoesContent,
    onOpenOpcoes,
    opcoesModalTitle = 'Opções',
    trailingAction,
    inlineActions,
    hideOpcoes = false,
    equalWidth = false,
    className = '',
    filterTestId = 'agenda-btn-filtrar',
}: MobilePageActionBarProps) {
    const [opcoesOpen, setOpcoesOpen] = useState(false);

    const showFilters = typeof onOpenFilters === 'function';
    const showRefresh = typeof onRefresh === 'function';
    const useExternalOpcoes = typeof onOpenOpcoes === 'function';
    const showOpcoes = !hideOpcoes && (useExternalOpcoes || opcoesContent != null);
    const isActive =
        showFilters || showRefresh || showOpcoes || trailingAction != null || inlineActions != null;

    useMobilePageActionBarRegistration(isActive);

    if (!isActive) {
        return null;
    }

    const barRowClass = equalWidth ? styles.barEqualRow : styles.barLeading;
    const filterButtonClass = equalWidth
        ? styles.equalWidthButton
        : filterIconOnly
          ? styles.iconButton
          : styles.filterButton;

    const filterAria =
        activeFiltersCount != null && activeFiltersCount > 0
            ? `Abrir filtros (${activeFiltersCount} ativos)`
            : 'Abrir filtros';

    const filterLabel =
        filterIconOnly
            ? undefined
            : activeFiltersCount != null && activeFiltersCount > 0
              ? `${filterButtonLabel} (${activeFiltersCount})`
              : filterButtonLabel;

    const filterTitle =
        activeFiltersCount != null && activeFiltersCount > 0
            ? `Filtros (${activeFiltersCount})`
            : 'Filtros';

    return (
        <>
            <div
                className={`${styles.bar} ${equalWidth ? styles.barEqualWidth : ''} ${className}`.trim()}
                role="toolbar"
                aria-label="Ações da página"
            >
                <div className={barRowClass}>
                {showFilters && (
                    <Badge
                        dot={filterIconOnly && (activeFiltersCount ?? 0) > 0}
                        color="geekblue"
                        className={equalWidth ? styles.equalWidthSlot : undefined}
                    >
                        <Button
                            type="default"
                            icon={<Filter size={ICON_SIZE_MD} aria-hidden />}
                            onClick={() => onOpenFilters()}
                            className={filterButtonClass}
                            aria-label={filterAria}
                            title={filterIconOnly ? filterTitle : undefined}
                            data-testid={filterTestId}
                        >
                            {filterLabel}
                        </Button>
                    </Badge>
                )}
                {showRefresh && (
                    <div className={equalWidth ? styles.equalWidthSlot : undefined}>
                        <Button
                            type="default"
                            icon={<RotateCw size={ICON_SIZE_MD} aria-hidden />}
                            onClick={() => void onRefresh()}
                            loading={refreshLoading}
                            disabled={refreshLoading}
                            className={
                                equalWidth
                                    ? styles.equalWidthButton
                                    : refreshIconOnly
                                      ? styles.iconButton
                                      : styles.filterButton
                            }
                            aria-label={refreshButtonLabel}
                            title={refreshIconOnly ? refreshButtonLabel : undefined}
                        >
                            {refreshIconOnly ? null : refreshButtonLabel}
                        </Button>
                    </div>
                )}
                {inlineActions
                    ? equalWidth
                        ? React.Children.map(React.Children.toArray(inlineActions), (child, index) => (
                              <div key={index} className={styles.equalWidthSlot}>
                                  {child}
                              </div>
                          ))
                        : inlineActions
                    : null}
                {showOpcoes && (
                    <div className={equalWidth ? styles.equalWidthSlot : undefined}>
                        <Button
                            type="default"
                            className={
                                equalWidth
                                    ? styles.equalWidthButton
                                    : opcoesIconOnly
                                      ? styles.iconButton
                                      : styles.opcoesButton
                            }
                            icon={
                                opcoesIconOnly ? (
                                    <Ellipsis
                                        size={ICON_SIZE_MD}
                                        aria-hidden
                                        rotate={90}
                                        style={{ fontSize: 18 }}
                                    />
                                ) : undefined
                            }
                            onClick={() => (useExternalOpcoes ? onOpenOpcoes!() : setOpcoesOpen(true))}
                            aria-label="Abrir opções"
                            title={opcoesIconOnly ? 'Opções' : undefined}
                            {...(useExternalOpcoes ? { 'data-testid': 'agenda-btn-opcoes' } : {})}
                        >
                            {opcoesIconOnly ? null : 'Opções'}
                        </Button>
                    </div>
                )}
                </div>
                {!equalWidth ? (
                    <div
                        className={styles.trailingSlot}
                        data-mobile-page-action-bar-trailing=""
                    >
                        {trailingAction}
                    </div>
                ) : null}
            </div>

            {!useExternalOpcoes && opcoesContent ? (
                <Modal
                    title={opcoesModalTitle}
                    open={opcoesOpen}
                    onCancel={() => setOpcoesOpen(false)}
                    footer={null}
                    width={400}
                    destroyOnHidden
                    centered
                    className="modal-opcoes-base"
                >
                    <div className={styles.opcoesBody}>{opcoesContent}</div>
                </Modal>
            ) : null}
        </>
    );
}

export default MobilePageActionBar;