'use client';

import React, { useCallback, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';
import { Button } from 'antd';
import { MoreHorizontal } from 'lucide-react';
import { ICON_SIZE_SM } from '@/components/icons';
import styles from './EntityMobileCard.module.scss';

export type EntityMobileCardProps = {
    children: ReactNode;
    className?: string;
    style?: React.CSSProperties;
    /** data-testid do cartão */
    'data-testid'?: string;
    /** Hierarquia (ex.: subprojeto) — indentação visual */
    nested?: boolean;
    /** Torna o cartão ativável por clique/Enter/Espaço (sem aninhar botões no clique). */
    onActivate?: () => void;
    /** rótulo acessível quando `onActivate` está definido */
    activateAriaLabel?: string;
};

/**
 * Cartão de entidade mobile por composição (MDS).
 *
 * Use slots: Header, TitleBlock, Badges, Options, Body, Meta, Footer.
 * Preferir a isto um mega-componente com dezenas de props.
 *
 * Para listagens DataTable/config-driven, usar `ListingMobileCard`.
 */
export function EntityMobileCard({
    children,
    className = '',
    style,
    'data-testid': dataTestId,
    nested = false,
    onActivate,
    activateAriaLabel,
}: EntityMobileCardProps) {
    const interactive = typeof onActivate === 'function';

    const handleKeyDown = useCallback(
        (e: KeyboardEvent<HTMLElement>) => {
            if (!interactive) return;
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                onActivate?.();
            }
        },
        [interactive, onActivate],
    );

    return (
        <article
            className={[
                styles.root,
                interactive ? styles.rootInteractive : '',
                nested ? styles.rootNested : '',
                className,
            ]
                .filter(Boolean)
                .join(' ')}
            style={style}
            data-testid={dataTestId}
            {...(interactive
                ? {
                      role: 'button' as const,
                      tabIndex: 0,
                      'aria-label': activateAriaLabel,
                      onClick: onActivate,
                      onKeyDown: handleKeyDown,
                  }
                : {})}
        >
            {children}
        </article>
    );
}

export function EntityMobileCardHeader({
    children,
    className = '',
}: {
    children: ReactNode;
    className?: string;
}) {
    return <div className={`${styles.header} ${className}`.trim()}>{children}</div>;
}

export function EntityMobileCardTitleBlock({
    children,
    className = '',
}: {
    children: ReactNode;
    className?: string;
}) {
    return <div className={`${styles.titleBlock} ${className}`.trim()}>{children}</div>;
}

export function EntityMobileCardBadges({
    children,
    className = '',
}: {
    children: ReactNode;
    className?: string;
}) {
    return <div className={`${styles.badges} ${className}`.trim()}>{children}</div>;
}

export function EntityMobileCardBody({
    children,
    className = '',
}: {
    children: ReactNode;
    className?: string;
}) {
    return <div className={`${styles.body} ${className}`.trim()}>{children}</div>;
}

export function EntityMobileCardMeta({
    children,
    className = '',
}: {
    children: ReactNode;
    className?: string;
}) {
    return <div className={`${styles.meta} ${className}`.trim()}>{children}</div>;
}

export function EntityMobileCardFooter({
    children,
    className = '',
}: {
    children: ReactNode;
    className?: string;
}) {
    return <div className={`${styles.footer} ${className}`.trim()}>{children}</div>;
}

export type EntityMobileCardOptionsProps = {
    'aria-label': string;
    onClick: () => void;
    className?: string;
};

/**
 * Botão ⋮ com alvo de toque ≥44px. Para o evento de clicar no card pai.
 */
export function EntityMobileCardOptions({
    'aria-label': ariaLabel,
    onClick,
    className = '',
}: EntityMobileCardOptionsProps) {
    const handleClick = useCallback(
        (e: MouseEvent) => {
            e.stopPropagation();
            onClick();
        },
        [onClick],
    );

    return (
        <Button
            type="text"
            size="small"
            icon={<MoreHorizontal size={ICON_SIZE_SM} aria-hidden />}
            aria-label={ariaLabel}
            onClick={handleClick}
            className={`${styles.optionsButton} ${className}`.trim()}
        />
    );
}

/** Classe CSS partilhada para links de título no card. */
export const entityMobileCardTitleLinkClassName = styles.titleLink;