'use client';

import React, { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { FloatButton } from 'antd';
import type { FloatButtonProps } from 'antd';
import { Plus } from 'lucide-react';
import { iconTokenSize } from '@/components/icons';
import { useIsMobile } from '@/hooks/useIsMobile';
import { MOBILE_PAGE_ACTION_BAR_TRAILING_SLOT } from '@/components/filters/MobilePageActionBar/mobileBarTrailingSlot';
import { ListPageCreateBarButton } from './ListPageCreateBarButton';
import styles from './ListPageCreateFloatButton.module.scss';

/** Dimensão e posição alinhadas ao contrato §1.1 (FAB listagens / Movimentos) — desktop/tablet. */
const LIST_PAGE_CREATE_FAB_DEFAULT_STYLE: React.CSSProperties = {
    width: 56,
    height: 56,
    insetInlineEnd: 24,
    insetBlockEnd: 24,
};

const LIST_PAGE_CREATE_FAB_ICON = (
    <span
        style={{
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '100%',
            height: '100%',
        }}
        aria-hidden
    >
        <Plus size={iconTokenSize.lg} aria-hidden />
    </span>
);

export type ListPageCreateFloatButtonProps = Omit<FloatButtonProps, 'type' | 'icon'> & {
    /** Por omissão: ícone "+" do Ant Design (alinhado ao guia de listagens / guia chamados). */
    icon?: FloatButtonProps['icon'];
    /** Rótulo do botão na barra mobile (omissão: só ícone). */
    mobileBarLabel?: string;
    /** Estado de carregamento (desativa o clique; Ant FloatButton não expõe `loading`). */
    loading?: boolean;
    'data-testid'?: string;
};

function tooltipTitle(tooltip: FloatButtonProps['tooltip']): string | undefined {
    if (tooltip == null) return undefined;
    if (typeof tooltip === 'string') return tooltip;
    if (typeof tooltip === 'object' && 'title' in tooltip && tooltip.title != null) {
        return String(tooltip.title);
    }
    return undefined;
}

function useMobileBarTrailingSlot(enabled: boolean): HTMLElement | null {
    const [slot, setSlot] = useState<HTMLElement | null>(null);

    useEffect(() => {
        if (!enabled || typeof document === 'undefined') {
            setSlot(null);
            return;
        }

        const resolve = () => {
            const el = document.querySelector(MOBILE_PAGE_ACTION_BAR_TRAILING_SLOT);
            setSlot(el instanceof HTMLElement ? el : null);
        };

        resolve();

        const observer = new MutationObserver(resolve);
        observer.observe(document.body, { childList: true, subtree: true });

        return () => observer.disconnect();
    }, [enabled]);

    return slot;
}

/**
 * FAB primário de criação em páginas de listagem.
 * Em mobile (≤768px), renderiza botão primário no slot direito da {@link MobilePageActionBar}
 * em vez de FAB flutuante.
 */
export function ListPageCreateFloatButton({
    icon = LIST_PAGE_CREATE_FAB_ICON,
    style,
    tooltip,
    mobileBarLabel,
    'aria-label': ariaLabelProp,
    ariaLabel: ariaLabelAlias,
    onClick,
    disabled,
    loading = false,
    'data-testid': dataTestId,
    ...props
}: ListPageCreateFloatButtonProps & { ariaLabel?: string }) {
    const isMobile = useIsMobile();
    const trailingSlot = useMobileBarTrailingSlot(isMobile);
    const tooltipText = tooltipTitle(tooltip);
    const ariaLabel = ariaLabelProp ?? ariaLabelAlias ?? tooltipText ?? 'Cadastrar';
    const isDisabled = Boolean(disabled || loading);
    /** Fallback fixo acima da tab bar do projeto — sinaliza clearance no ProjetoLayout. */
    const usesProjetoTabBarFallback = isMobile && !trailingSlot;

    useEffect(() => {
        if (!usesProjetoTabBarFallback || typeof document === 'undefined') {
            return;
        }
        document.documentElement.dataset.projetoMobileCreateBar = '1';
        return () => {
            delete document.documentElement.dataset.projetoMobileCreateBar;
        };
    }, [usesProjetoTabBarFallback]);

    if (isMobile) {
        const barButton = (
            <ListPageCreateBarButton
                label={mobileBarLabel}
                aria-label={ariaLabel}
                title={tooltipText}
                onClick={onClick}
                disabled={isDisabled}
                data-testid={dataTestId}
            />
        );

        if (trailingSlot) {
            return createPortal(barButton, trailingSlot);
        }

        return <div className={styles.fallbackBar}>{barButton}</div>;
    }

    return (
        <FloatButton
            type="primary"
            icon={icon}
            style={{ ...LIST_PAGE_CREATE_FAB_DEFAULT_STYLE, ...style }}
            tooltip={tooltip}
            aria-label={ariaLabel}
            onClick={onClick}
            disabled={isDisabled}
            data-testid={dataTestId}
            {...props}
        />
    );
}